Adaptive, Responsive or Mobile First?
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.
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.
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.
Mobile first best suits sites that are being designed from scratch, or undergoing a large scale redesign.
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.
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.