5 Comments

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

5 comments on “Don’t think mobile, think responsive design

  1. I get his point, sort of. Responsive design almost never fails expectations. I am saying “almost” because as much as the website will be adjusted to the screen and comfortable to navigate there is one thing that lacks this whole “one-site-fitts-all”-principal and that is The Candidate Experience and the application process in general. Every device needs it’s own candidate experience in my opinion and the difference in usage of a laptop and a mobile phone is just to different to say that you should make a careerpage “responsive”. To be clear, I am a big fan of responsive design but when we are talking about careerpages some candidates are going to be disappointed.

    I was just checking the Starbucks career website and I saw that the actual jobs are not responsive. Actually they are not even mobile-friendly yet. Is that something Starbucks is busy with at the moment? That is the thing your careersite visitors have to go to at the end right?

    Nevertheless, I think Starbucks is doing a great job with their website. Great content as well. keep up the good work.

  2. Hi
    Interesting post – Responsive Web Design (RWD) has its place, but it is not a silver bullet and in many situations is NOT the right technology to best solve the mobile optimisation problem.

    I don’t have time now, but I will provide further details and comments. A blog post I recently wrote covers high level (none tech) perspectives.

    http://mobiledave.me/2012/07/09/what-is-responsive-web/

  3. Thanks Bill for the post!

    I agree with Don and Dave that it can be useful in some cases, but doesn’t actually solve almost anything that should to be solved first – before even thinking the design. What is the overall candidate experience, what are the ways to engage and how easy it is to find the information you are looking for, what are the services that has been build to make it easy with different devices (those can be different) and finally the application process – or if it should even appear as it currently appears in most of the career sites.

  4. Great job! Glad you’re keen to my thoughts🙂

  5. Responsive design with CSS, as described above, is complex & expensive – and not readily available without an investment of time & resources. I feel it is impractical for a “simple” website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: