This document provides guidance on creating a mobile version of a website. It discusses considerations for mobile design including speed, dimensions, behavior, and designing. It emphasizes the importance of speed for mobile and provides tips for fluid layouts, CSS media queries, touch interfaces, short pages, and mobile development tools.

1. How to Create a Mobile Version of your Website

2. Considerations for Mobile Design
• Speed
• Dimensions
• Behavior
• Designing

3. Speed
• Speed. It’s important.
• Two trains leave from the same points of origin, traveling towards the
same destination. They are identical in every way except one: the first
train travels twice as fast as the second. Except for the occasional
passenger who’s out to see the scenery, it’s obvious that the first train is
the better choice when it comes to reaching your destination.

4. Speed
• Kbps vs. KBps vs. Mbps
• The following are some common units of measurement with regards to data transfer
online.
• Kb: Kilobit (128 bytes)
• KB: Kilobyte (8 Kilobits)
• Mb: Megabit (128KB or 1024Kb)
• MB: Megabyte (8Mb or 1024KB or 8192Kb)
• People often get confused when working with Kilobytes vs. Kilobits, and misunderstand
how fast download speeds are as a result. If your download rate is 256Kbps (Kilobits per
second), you will not download a 256KB (Kilobyte) file in 1 second. Since there are 8
Kilobits in 1 Kilobyte (there are 8 bits in a byte), a 256Kbps download rate take about 8
seconds to download a 256KB file.
• To convert Kbps to speeds you may be more comfortable working with, you could do the
following:
• Kbps to KBps: Kbps / 8 = KBps
• Kbps to Mbps: (Kbps / 8) / 128 = Mbps

5. Speed
• Speeds change but expectation is constant
• in 2000 was caused by plain ol’ images and text. That number changed dramatically
by 2007, though, when most online traffic became dominated by photos, videos,
and other binary downloads. As a consequence, the mean response size (size of files
transmitted over the web) increased by over 500% in that period of seven years.

6. Dimensions
• Speeds change
but expectation
is constant
• list of popular
resolutions on mobile
devices as of February
2011
• Please note that this
is a very limited list,
and is by no means
complete. What is
important to take
from this data is that
a wide range of
screen resolutions
are out there, and
new devices are
introduced
constantly.

7. Dimensions
• This wide variety in display size makes it difficult to decide how to choose an
appropriate layout size for mobile devices. Should we target the lowest common
resolution in handheld devices like we do on desktops? How does that scale onto
newer tablets that offer 2-3x the resolution of a 320x240px smartphone display?
• One possible solution is to create fluid layouts for mobile devices. Unlike desktop
displays where building layouts that are too wide is a concern, handheld devices
read much like a book or magazine. Full width layouts have worked for centuries for
magazines and books—it seems likely that they should also work on a new
generation of mobile devices.
• Another possible solution is to create layouts for specific devices, and collections of
devices. What does this mean? Instead of creating a one-size-fits-all layout, create a
layout that changes depending on the current resolution and orientation of a
device.
• A big reason for the different implementation of this feature in mobile browsers is
the “One Web” approach to web design:

8. Dimensions
• CSS3 Media queries
• With the introduction of CSS3 Media queries, it is possible to target
devices through many other variables including device width, device
orientation, and aspect ratio. Using Media queries, it’s possible to load
specific styles on specific devices (or collections of devices). This is what
Ethan Marcotte refers to as responsive web design.

9. Behavior
• Click vs. Touch
• On handheld devices, we tap. Our hands become the main input of the device, and
our hands aren’t as nimble and precise as a mouse cursor. We touch areas of the
screen rather than an exact pixel. We readjust the grip on our smartphone as we
attempt to hit a button with the same hand. When there is a mistap, the
consequences are more time consuming; slower page load times, and slower device
speeds make the wait less forgivable.

10. Behavior
• Moving forward
• If we’re not at a point where the mobile web is ready today, we’re certainly very
close. Between device availability, high speed connections, and new web
technology, the groundwork is in place (or at least falling into place) to develop new
generations of web-based applications that assist us, travel with us, and connect us
with others at all times.

11. Designing
• Planning Strong User Experience
• When you build a mobile website it’s important to keep your users in mind at all
times, as ultimately your website is being designed and created for users to enjoy.
It’s certainly common for users to expect a mobile website to behave similarly to the
desktop environment, so keeping the user experience friendly should be your main
focus while building a successful mobile site.

12. Designing
• Keep Pages Short & Sweet
• The meat and potatoes of any website is the page content. Each of your web pages
holds significant amounts of useful information for your users, such as text, photos
or videos. You will also find news articles and blog posts which run on for a few
pages, which can help to break up text but it’s not recommended for mobile devices
as the technique requires more page loading which means more waiting time on the
user side

13. Designing
• Building Mobile CSS Styles
• Now that we know how to optimize the mobile website for better readability and
usability it would be good to talk about CSS styles. Each CSS stylesheet contains
many selectors with properties pertaining to fonts, sizes, positioning, and display
settings. When it comes to mobile you should be paying attention to how your
blocks fall into place.

14. Designing
• Designing Websites For IPhone
• The mobile market share is fairly large and divided, but Apple has got a big slice of
the pie with their iDevices. Both the iPhone and iPad are mobile Internet-ready
devices with built-in touchscreen functionality. They feature the same default web
browser, Safari, and a whole host of other options.
• For iPhone-specific websites you’ll need to target the screen size. The fixed screen
size is set to 320px by 480px for older iPhone models and 640px by 960px for iPhone
4 and iPhone 4S.

15. Designing
• Mobile JQuery Scripting
• Majority of front end web developers are familiar with the jQuery library. It offers
some fantastic shorthand for coding effects, animations, dropdown menus, and a
host of other in-browser functionality, and it just gets more awesome with the
announcement of jQuery Mobile. It is not recommended to jump in the tech
directly and load your website with effects everywhere, but for testing purposes the
advanced functionality can play very well.

16. Designing
• Helpful Developer Tools
• Opera Mobile Emulator
• PhoneGap
• Aptana Studio

17. Designing
• Mobile GUI Kits And Icons
• iOS 5 GUI Kit
• iPhone UI Vector Elements
• iPhone App Icon Kit
• Wireframe Magnets (DIY Kit)
• Android Interface GUI

18. Example's
• http://mobile.lufthansa.com/iframe.jsp;jsessionid=BAA3FCC2CFBD
B4804F0930A5A93EF7F1.portal7?l=en_US
• http://flymas.mobi/smp/index.xhtml
• http://m.airasia.com/airasia/cfw.do?c=331&sl=en_US&bp=bp
• http://www.airarabia.com/mobile/index.php
• http://omg.yahoo.com/iphone/
• http://www.procab.ch/iphone/

19. @MaFarrag
Mahmoud Farrag
Mahmoud-farrag
mfarrag
mfarrag
mfarrg