Responsive Design for Mobile Web Sites

5 Techniques for your Mobile Web Site

There are lots of different ways to build mobile web sites. What I have pulled together is a collection of techniques that our teams use to allow your web site to look awesome on mobile devices. This is important due to the rapidly increasing demand for web sites optimized for the growing number of wireless devices.

The Mobile Web is a Many Screen World

The mobile web is not just Smartphones like iPhone and Android phones. The mobile web is anything that can connect to a web site. The term “mobile web” is now a reference term for multi-screen solutions. This means that Tablets, Laptops and even TVs are part of the mobile web. If it has a screen, it is likely it has a Web browser and will view your site.

Your Web site analytics are showing you how many different devices are connecting to your Web site. Google will breakdown PC and Mobile. Dig into the Mobile analytics and you will see all of the different screens (phones, phablets, tablets, etc.).

Responsive Design for Mobile Web Sites
Mobile Web is for Every Device

Mobile Web Templates for Content Management Service

Many of us use CMS (Content Management Service) solutions to deliver content to Web sites. This will likely come as no surprise, but many of the leading Web CMS solutions now have templates that will deploy a mobile web template to ensure that the correct experience is deployed to a device.

WordPress, a tool used by many Web sites, has two ways of managing Mobile content. The first is through Plugins. The popular WordPress Jetpack plugin has a “Mobile Theme” that only requires you to activate the theme and your site will re-structure the content for phones and tablets. The second method is to implement a responsive theme. The goal of a responsive theme is to ensure that your site looks awesome for any screen. Check as an example of a responsive WordPress template in action.

Responsive Design for Mobile Web

A big trend is the adaption of Responsive Design. The goal of a responsive site is to create one web page that will dynamically resize to the device and screen size viewing the content. Check out as a good example of responsive design.

The biggest challenge for Responsive Design is a lack of design tools. Adobe, as you might expect, has two tools you can use: EDGE Reflow and Dreamweaver CC. Both tools will give you the capability to create Responsive designs for your Web site without having to write code.

The many screen of the mobile web
The many screen of the mobile web

Leveraging Mobile Web Frameworks

Sometimes you need to go the functions of a template or tool and need to edit the code. Fortunately there are some great frameworks you can leverage to accelerate the deployment of your mobile web site. Here is a selection of frameworks you can use (it is not complete and I encourage you to share any additional frameworks in the comments below):

Working in the details

The goal of a framework is to get you up and running very quickly. But, there are times when you need to get down into the details of a specific mobile web browser (I’m looking at you, Mobile Safari).

One area that receives a lot of focus is creating Retina (high-definition) images. A good library to use to manage retina images in your code is Retina.js ().

A great list of the changes in iOS7 for Mobile Safari is here:

Please add any techniques you use in the comments below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.