Monday, August 19, 2013

Make your web site mobile friendly

Last year on an average 15% of traffic to sites was from mobile devices and this will continue to grow.

There are many solutions to optimize your site for mobile devices. For example adaptive design, responsive design, website conversion. Each has pros and cons, and ranges from free to thousands of dollars. The amount you spend depends on the requirements of your business and your visitors. We will walk through things you can do in context of responsive design to make your site mobile friendly.

Mobile meta tags

We can improve users browsing experience on certain devices by using the mobile webkit.


This meta tag tells the browser how content should fit on the device's screen.

The above example tells the browser to set the viewport to the width of the device with initial scale of 1.0. We can turn off zooming by setting user-scalable=no or can limit the scaling level.

You can also set the width to a pixel value (e.g. 320px) but note not all devices have same width so it's better to stick with device-width and let browser take care of the rest.

You can look into some device specific settings on Android and iOS to further improve user's experience.

Home Screen Icons

iOS and Android devices also accept a rel="apple-touch-icon" (iOS) and rel="apple-touch-icon-precomposed" (Android) for links. They get used as icon on the user's home screen when they bookmark your site.

CSS3 Media Queries

Media queries enables the content's presentation to be customized to a specific range of output devices without having to change the content itself.

Screen Sizes

The example below shows how we can target mobile devices

A media query with the "only" keyword will cause non CSS3-compliant browsers to ignore it. The following example would target tablet screen sizes.

Some of the styling changes that you should enforce:

  • Reduce extra whitespace/padding across the site. Space is premium!
  • Remove :hover states. They'll never been seen on touch devices.
  • Adjust the layout to be single column.
  • Remove the box-shadow around big container div. Large box shadows reduce page performance.
  • Remove opacity changes. Changing alpha values is a performance hit on mobile.
You can read more about media queries here.

CSS Frameworks

In context of responsive design CSS frameworks have many benefits. A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. Here are few you can look into:

No comments:

Post a Comment