How to Create a Mobile Version of your Website

Considerations for Mobile Design

• Speed• Dimensions• Behavior• Designing

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.

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

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.

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.

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:

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.

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.

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.

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.

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

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.

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.

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.

Designing• Helpful Developer Tools

• Opera Mobile Emulator• PhoneGap• Aptana Studio

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

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/

@MaFarrag

Mahmoud Farrag

Mahmoud-farrag

mfarrag

mfarrag

mfarrg