Internet has gone mobile and there’s no turning back. Now that there are more and more users accessing website on mobile devices, web designers need some kind of strategy for how their website —or their client’s website— functions in the mobile space. Here are some basic rules to remember:
1. Less is more
First and foremost, when converting a desktop site design to mobile format, you need to simplify things in every possible area. Today’s wireless connections may be faster than ever, but they are still relatively slow, so keeping file size and load times down is always mandatory for a mobile site.
Simplified approach to design and wise placement of elements will come in handy to make a mobile site faster to load. Remember that the screen size will be small and that means you have to squeeze all the elements within the given space as far as possible.
And don’t forget, simple designs that are optimized for mobile can be attractive too.
2. Single-column layout is the best option
Wide webpages are difficult to view on small mobile phone screens. Even smartphones with relatively large screens like the iPhone, standard webpages load up zoomed out so that they can fit on the screen. Most text is illegible until users zoom in to the part of the screen they want to view. Zooming isn’t ideal because it adds an extra step and zooming in and out isn’t easy to do on all phones.
Single-column structure proves to work best. Not only does this help with managing limited space on the smaller screen, it also helps you scale between different device resolutions and flipping between portrait and landscape mode.
3. Vertical list
A vertically aligned list of data is perfect for a mobile site with a lot of information that needs to be presented in a simple and organized way. This vertical, single-column list allows users to tap open the content that they’re interested in and hide the rest. Vertical lists are also easy to read and can be paired with an icon yet still provide a fair amount of room for the list copy.
4. ‘Tappability’
Interaction on mobile web is done via finger taps, not mouse clicks. This creates a very different dynamic in terms of usability. When converting a desktop to mobile site design, you have to make your “clickable” elements — links, buttons, menus, etc. — ‘tappable.’ While clickable areas on desktop are tend to be small, the mobile web requires larger buttons that can be easily pressed with a thumb.
