Responsive website design. Best practices.

At the same time, as research conducted on behalf of Google^[1] shows, for 72% of users it is important to have website they visit optimized for mobile devices. However creating website that is truly friendly for smartphones and tablets requires taking into account additional restrictions, mainly regarding screen sizes, bandwidth, interface and number of recommendations, so-called best practices. Below I will present a list of, in my opinion, the most important ones.

1. Optimize loading and response time

It is assumed that mobile users browse Internet mainly in their free time during the day, e.g. when getting to / returning from work or during their break in classes. Furthermore they are not always within the Wi-Fi or 3G/4G range. Therefore it is extremely important that the websites are light, load and work fast. How to achieve this?

• Consider if mobile users need all the information and materials and will they use all the features (e.g. advanced search, banners advertising other content within the site, header graphics). First implement the most important and the most popular ones.
• Compress graphics or present alternative versions, adjusted to the size and resolution of the phone or tablet’s screen. Loading one huge image, being within EDGE range, can last tens of seconds!
• Optimize HTML / JS / CSS code - some seemingly small elements like social network plugins or additional JS scripts take up hundreds of kilobytes. Use only the most necessary ones in particular moment / on particular page.

More practical advices and solutions: http://developer.yahoo.com/performance/rules.html. Online tool to analyze website’s loading times: https://developers.google.com/speed/pagespeed/. A small digression: when it comes to websites’ weight, responsive design despite many advantages loses on this field with dedicated mobile versions: http://sixrevisions.com/mobile/methods-mobile-websites/.

2. Simplify navigation

On small screen there is no space for long, horizontal menu or mega menu. Navigation needs to be clear and simple and mustn’t be duplicated. For larger websites, search form implementation is necessary – it will ease reaching proper content. It is also worth to:

• Avoid horizontal scrolling, content blocks should be laid out linearly so that in order to browse through them it is enough to just scroll in one dimension (top - bottom).
• Define clear menu hierarchy, highlighting navigation levels.
• Ease fast navigation between menu levels by adding visible back button and always visible homepage link.

3. Adjust size of the interactive elements in order to assure they can be used comfortably by touch (fingers).

In practice this means that:

• All clickable elements – navigation, icons – should be large and, what’s important, have margins separating them from other adjacent elements (more detailed data in PDF presentation, page 65). This will facilitate usage of those elements and prevent accidental actions.
• In case such form’s elements as checkboxes or radio buttons, clickable should also be corresponding labels.

4. Take care about content readability

It should be kept in mind that mobile devices have screen sizes of few inches, despite that fact their owners use them in various locations, what means that in changeable lighting conditions. What is important is that distance from which they read texts on the screen is similar to the one using desktop or laptop. Therefore it is necessary to:

• Use fonts in relatively large sizes (to the screen size), ideally use proven, readable font faces (check point 1 – using custom fonts may increase website’s loading time).
• Setting sufficiently large contrast between website’s background and texts. It is important to avoid using black background color, as this makes difficult to read content in sunny surroundings (screen reflections, visible fingerprints).
• If possible, content blocks should flexibly adjust to available screen’s width.
• Highlighting priority content (headers, important messages) with different color and size.

5. Keep availability in mind

Website should work properly on all mobile devices, in both vertical and horizontal orientation.

• Avoid Flash usage, most of the phones and tablets do not support it, or do it inefficiently. Instead, for animations and interactions, HTML5/CSS3/JS can be used.
• In case form’s elements, use standard solutions instead created from scratch attractive alternatives.
• Avoid modal windows and elements shown on layers.

6. Take care about conversion

This is especially important in case e-commerce mobile versions. When designing specific solution it is worth to keep in mind that website will be operated by a finger, not by mouse or keyboard. Lack of the last one has significantly biggest impact on longer time of data input (in forms). Taking the above to consideration it is important to:

• Focus on presentation of the functions and information that make task fulfilment possible, e.g. condensed product’s characteristics instead of multipage, richly illustrated descriptions.
• Simplify task fulfillment process, for example by reducing number of steps (pages) necessary to complete it and by limiting to a minimum amount of form’s fields.
• In case forms, if possible, instead of text inputs use checkboxes or dropdowns for data input.
• Link phone numbers (e.g. href=”tel:XXXXXXXXX”) what will facilitate quick contact.

7. Highlight your location and opening hours

When running a company with physical location (stationary shop, service company, restaurant) it is important to expose following information:

• Address, if possible enriched by a map with a get directions function (in case having GPS module enabled in mobile device).
• Opening days and hours.
• Phone number

Research conducted by Google^[2] shows that ¾ users visiting corporate websites through mobile devices looks for an address, 2/3 looks for a phone number.

8. Provide choice

Not all mobile users like mobile version of the website, besides parameters of some devices allow to use websites created strictly for PCs flawlessly. That is why in mobile version it is necessary to put link to regular version, it is worth allowing moving also in opposite direction. Of course, same as in case any other user-oriented IT solutions, during mobile and responsive websites design it is worth to verify taken assumptions and implemented solutions after they are published. Best foundations for such verification can be provided by statistics analysis and feedback received from users (for example via feedback form or as a result of tests performed with users).

Sources: http://mobilewebbestpractices.com, https://developers.google.com/search/mobile-sites/

[1], [2] What users want most form mobile sites today