Don’t think mobile, think responsive design

At #SHRM12 I got to spend time with Jeremy Langans.  If you don’t know of Jeremy, he was the force behind Starbucks launch in to social, and is a thought leader in this space, We have been connected for a few years now but have never had the excuse or opportunity to sit down and just talk. We were talking all things recruiting, a regular back and forth, when Jeremy sais something that really set me back. We came on to the topic of social via mobile, when Jeremy said: “You need to stop thinking about mobile.” This is a different view to what I’ve been hearing and talking about with many of the experts and commentators, and so he got my attention.

Jeremy’s point is that all websites should be built to be viewed and operated regardless of the device the user is accessing it with, using responsive web design. What this means is that when you link to a site the design and navigation adjusts to fit the users device from tablet to smart-phone. It is neat and means that you don;t need to build a different interface for each type of device, android, i-phone, Kindle, games console etc. One size fits all, rather than building multiple landing pages. Stop thinking about pages and start thinking about systems. With so many variations of device it is no longer viable to build a different website for each device. Responsive web design provides a real solution for this problem. mobile is not a special case, it’s another device, and web design should take account of the multitude of devices users might be accessing your site with.

I don’t really understand the technical bits of coding that go on under the hood, but I can understand how the concept works. Sites are built on a grid with multiple viewing options. When a user lands on the page a “media query” selects the best options according to the size and resolution of the users device. The easiest way to understand this is to think about how you would want a picture to appear on different devices, and save multiple versions of the same image in the grid. This means different sizes, resolutions and positioning for each image. When the user lands with their device, it sends a “media query” to the grid which delivers the best image from the grid to the device.

Another example that helped me to understand this, and I’m not a technical person, is menus and navigation.  If I access the site on a wider screen device like a PC, the menus and images appear across the top of the screen, perhaps with small text links, easy to see and click with a mouse. If I access the same website by smart phone, I need to see the images stacked for scrolling, with larger buttons for clicking with my thumb. This is the same content delivered in a different way according to device.

Design is as much about making things easier for the user, as it is changing the look. A good example of this is when you access a responsive web site using a smart phone. The design makes it easy to scroll the site because users typically do this with one hand. The layout is different to suit the way the user is going to navigate it, even though most smart phones could now display the whole site with a no loss of quality, navigation or loading speed.

The case for responsive web design.

> Browsing Habits

Users may access a site many times using multiple times using multiple devices, PC, smart phone, tablet, netbook, laptop on 3G etc. Responsive web design gives them device friendly navigation and features each time.

> Content.

Adjusting the layout and navigation to fit screen size and device means that your content is easy to find and is presented in the best way. Images always appear with best resolution and screen size to fit the users device.

> Branding

Designing the way your site appears on any interface means that you can consider what brand image you want to portray whatever the screen size. This could be as simple as the positioning of logos and images or the order that you want content to appear.

To show how this works I’ve taken the images from the Barack Obama site, as it is viewed on 3 devices. The site is built to be responsive. This is the same site on 3 different interfaces.

PC View

Tablet view

Smart Phone View

While Jeremy helped me to understand what responsive web design means, the first person to show me a responsive web site built-in HTML5 was Ivan Stojanovic at #truDublin. Ivan has recently been building responsive sites for recruitment companies, and he is a real advocate of this technique. Judging by the bounce rate of people dropping off sites when landing, this is really working. It makes sense to deliver content, images and navigation to the users device in the best format for them.

Jeremy is now responsible for global brand and talent attraction at Expedia, who he joined in March. In his previous role as program manager, employment brand and channels with Starbucks, he launched what is probably the first responsive design career site. The best way to see how responsive design works is to view the Starbucks.Com Careers . You can shrink the image down if you are viewing on a PC or Laptop to see how the view and navigation changes instantly according to how you are viewing the site. It is immediately responsive, and gives you a real idea of the possibilities. Stop thinking mobile as a special case, and start thinking responsive design for everything. The only other big question is whether you need web or application, a question for another day. Thanks Jeremy for opening my eyes to the possibilities presented by HTML5.

Bill