There are a few options available when creating a mobile browser experience for your website. I recently explored each of them while deciding which build to go for with a clients’ website.

Dedicated mobile site

Example website: ESPN

The first option we think of is often to create a separate mobile site. We detect when the user is using a mobile device and send them to m.oursite.com where we serve them a mobile version of our site. HTML/CSS is created independently and in addition to that of our existing site.

The disadvantage is that this requires a lot of work up front and maintenance. We’re basically rebuilding the website from scratch to suit mobile and then having to maintain a whole separate bunch of content for that site. The benefit is that we can design very specifically for mobile devices.

Responsive

Example website: Starbucks

When you think responsive, think fluid. A responsive website is one that utilizes a fluid grid layout, fluid images and media queries to serve a relevant design/layout across a huge range of devices.

Media queries are used to target different ranges of devices and serve different layouts, interfaces and content to fit the screen size.

The content is then sized in relative terms. Image sizes need to be defined as percentages relative to their container, instead of fixed pixel widths. That way when the screen size is decreased the image size decreases proportionately to fill the correct width of the screen.

The big benefit here is that we only have one website to maintain, altering the layout and content for different screen sizes. However it can often require a lot of refactoring of code, this can be a considerable undertaking for bigger, complex, existing sites.

Mobile First

Example website: Yiibu

This is designing for mobile devices first and scaling the site up for bigger screen sizes. We start out by building the most bare bones version of the site then progressively enhance as we detect bigger screen sizes and more capabilities. Mobile first focuses you to prioritize the most important features of your product right from the beginning, as we’re designing for a small screen size first.

One of the big advantages is that, if done properly, mobile first can capture a huge range of mobile devices. If a device doesn’t support media queries (like a lot of symbian/blackberry handsets) they’ll be served the super basic mobile version of the site, as the mobile.css is served first! This isn’t the case with standard responsive design, if media queries aren’t supported then these devices would be served the full version of the site.

Another big advantage is the concept of progressive enhancement. In the mobile version of the site we shouldn’t serve big javascript libraries, in fact we might not want to serve any javascript at all. This means that we don’t serve any big files or javascript to simple devices. Then as we detect device capabilities or higher screen sizes we can serve the complex stuff to the bigger/better devices.

Mobile first best suits sites that are being designed from scratch, or undergoing a large scale redesign.

Adaptive

Example website: Dribbble

Adaptive is a subset of responsive design. It uses media queries to target ranges of screen sizes, but doesn’t necessarily offer a fluid layout or fluid images. It takes the site as is and scales it to fit specified ranges of screen sizes.

This can be attractive if you have an existing site that would require a lot of work to refactor to work responsively. Adaptive isn’t nearly as big a project as creating a responsive or mobile first site.

The disadvantage here is that we’re serving all of the data to all devices, then just changing the way it’s displayed. So mobile devices will potentially be getting big javascript libraries and images. The other big disadvantage is that because the design isn’t fully fluid it’s not going to respond to lots of custom screen sizes and new devices.

Conclusion

There are arguments for using each mobile design methodology. When designing a site from scratch it’s worthwhile investigating mobile first. When resources are tight a quick adaptive site might meet your needs. If you want to serve a very different experience to mobile users then a dedicated mdot mobile site may be the way to go.