Knowledge

Responsive Design Thinking

Responsive Design Thinking

Its been a long time since I set out to learn as much as I could about what responsive design is and what it does – for users, designers and those who employ it.

Because responsive design is born from the thoughts and ideals of the development community, most of the articles usually are thick with code and propositions on how to better solve problems, instead of an indepth look at why responsive design is important. In other words, its heavy stuff and it alienates most people who do not have the technical know-how.

By writing this, I’m hoping to summarise most of the current thoughts and ideas revolving around responsive design. It is constructed, in part, using a handful of online resources I found very insightful during my research. Hopefully, this will enable more people to start applying responsive design thinking to their own practice.

 

A short history

In the 1990s, the standard was to design sites for 640 pixels in width.

In 2000s, the new standard was to design to 800 pixels in width.

A few years later it became 1024 pixels.

Today with mobile phones, tablets and Televisions, the standard can span from 320 pixels width up to around the 2000 pixels mark. Suddenly the height of a screen can be more than the width, depending on how a device is being held.

Responsive design emerged as an answer to this increasing variety of devices accessing the web. It is a practice that has not matured fully and requires continuous improvement for a better end result. In short, responsive design caters for an ever-changing environment and variety of users and user interfaces.

The Idea of Responsive Design

Today users are generally seeking the same content regardless of the device they are on. A great responsive website is one that has been planned from the beginning using device agnosticism at the core of it’s strategy.

The term device agnostic is often used in responsive design. It refers to adopting a mindset of not knowing what specific device and technology people will be using.

Another buzz-word you’ll often see is future proofing. It refers to building a platform that will continue to work long into the future, even as new technologies emerge and devices come onto market.

Today it is apparent that the defining attributes between mobile phones, tablets, laptops, desktops & television’s are merging with one another. The amount of new devices and their attributes will only continue to increase and diversify, so responsive design is not about ‘mobile support’ anymore, it is about ‘multi-device support’. It has also moved away from screen size design-thinking to scenario based design-thinking.

Since its birth, responsive design has been focused on solving responsive puzzles related to screen sizes. Today responsive design assesses different user scenarios and provides flexible, adaptable solutions instead.

An ideal responsive design should cater as much to a CEO’s desktop computer, as to a person with a laptop on the train or to someone on a tablet with a crappy “free hotel Wi-Fi” connection. Even though these users might want the same information, they have very different needs.

Speed and Performance

Today, in a multi-bandwidth, multi-device & multi-location web, re-catering content to suit a variety of scenarios has to be considered when designing and developing a responsive design solution.

A mobile user is generally hastier and will not jump through the same hoops to get content as a person on a desktop would. Therefore speed and performance has to be an essential consideration.

In 2010 Google took speed in to account as a ranking factor in its search engines, acknowledging that speed is a concern when addressing user experience. Today, websites that are not optimised for mobile are downgraded in their search rankings as well.

Only 6% of 100 companies audited by Google during a survey satisfied their guidelines as for what a mobile optimised site is.

 

Why Speed matters

Research shows 57% of users will leave a site if it takes more than 3 seconds to load a page.

80% of those that left will not return. Almost half will go on to tell others about their negative experience they had. With statistics like these, speed has to be a serious consideration when building an online platform.

In 2012 Guy Podjarny made the responsive design community to rethink its approach when he proved that almost every responsive website was overweight. In addition, every mobile user was receiving the same kilobyte downloads as a desktop user would.

The three key reasons for bloated responsive websites were identified as:

  • Download and Hide:
    All the assets are downloaded and then “hidden” if they are not being used.
  • Download and Shrink:
    High-res desktop-level images are downloaded and shrunk to fit the users screen.
  • Excess DOM:
    The websites return the same HTML to everyone – Leading to higher memory consumption, more content reflow and an overall slower performing website. (See chapter “Responsive vs Adaptive Design”)

Events like those above are the reasons why speed and performance has to be accounted for when employing a responsive design approach.

Mobile First

A misguided assumption for responsive design is to think of it as a technical add-on to an existing desktop site. That is a big contributor as to why responsive sites become “overweight”.

The most recognised responsive design method is the “Mobile First” approach.
To build a responsive website that works on all kind of screens and effectively deals with weight issues, it helps to start designing for a small screen first. It has proven to be the best approach because it forces us to focus on what’s really important:

  1. What content to add.
    If we cannot get it to fit into a small screen, it is probably not important enough anyway.
  2. The Hierarchy.
    By creating a clear list of content modules it will help to focus on the core purposes of a page, by then re-ordering content blocks it becomes easier to see what modules and combinations would best fulfill that purpose.
  3. Extending the users capabilities.
    How to enable technology like GPS, geolocation, multi-touch gestures, accelerometers and cameras should always be considered when designing solutions or shaping content. It will increase a user’s ways to interact and use the content as a result.

Inspiring creativity with limitations.
It is because of limited real estate together with the new technology of devices that new solutions are taking form. Many of today’s design features derive from mobile screen-size problem solving.  Some example are: scrollbars that only appear when they are being used, shrinking navigational elements, Hide/Reveal functions on menu items.

 

Progressive Enhancement

Progressive enhancement is a strategy that emphasises the accessibility of information.

It is currently being used in responsive design to different degrees depending on how important complete accessibility of content is for each project.

This approach starts with the core content, then optimises it for different screen sizes and devices. After that, it is further optimised for specific features, such as mouse usage and touch screens for fat fingers, as an example.

It is about creating an opportunity for everyone to access the same information. It is not about giving everyone the same experience.

Progressive enhancement is essential for anyone whose main priority is to have their content accessible by everyone around the world. It is essential for publishers whose target audience could be somebody on an e-reader in an undeveloped country as well as someone with a laptop in a metropolitan city.

Think “Activate”

Today, the only consistent action is the action to “Activate”. Over States & Down States still serve important roles for user interaction but a site should not be dependent on them to function. We need to recalibrate the ideas around showing and hiding content from over and down states to “Activate”.

With a mouse, it’s a click; with a touch device, it’s a tap; on a keyboard, it’s the enter key. It’s even possible to activate by voice command or motion and most devices offer more than one way to interact and “activate” elements & content.

 

Modules rather than Columns

The most popular approach to designing for responsive layouts is to think of the content as separate modules instead of long vertical columns. Creating medium sized blocks that can be moved around and are made up of reusable components that can be pieced together in different ways makes it easier to rebuild a page without losing cohesiveness between page elements.

The Visual Design Phase

A mobile first approach does not mean disregarding other parts of a site until the mobile version is done and built. Instead, it’s a point of origin to create content structure and functions during the design and development stages. In most instances responsive design needs to consider the full scope of a project to make sure it works and translates appropriately across the entire spectrum.

For example, in the visual design stage (or “skinning”) of a site – starting with the large version first could help to work out the overall look and feel of a project. Once the typography, tone and visual direction has been set across layouts, it simplifies the process of re-applying the designs onto smaller layouts. At this stage certain decisions might in turn re-inform the earlier aesthetic decisions.

Rethinking Page Content

The traditional way to structure a website was to put a header with a logo and navigation at the top, put the sub-navigation on the left, put a few widgets on the right, and put the footer at the bottom. After all of this was done, the content got the remaining space left in the middle.

All the things that were created first (the navigation, the widgets, the footer) assist a user in leaving the page they are currently on. In an effort of pushing more content onto users we start to neglect the reasons why the user wanted to be on that page in the first place.

 

When comparing a typical news website’s attention to navigation and widgets (above, on the right) in contrast to Medium’s complete focus on content (above, on the left) it becomes understandable why the average time spent on page could be as little10 to 20 seconds for traditional website structures.

Responsive design thinking proposes to reconsider the page and its content, how interaction works, how to approach design solutions and how to shape the content. In the era of responsive design there needs to be new clever solutions to approaching page content.

Rather than investing effort in coming up with something different that a user might enjoy, focus on making the content really work. Content should be readable, useful, understandable, and even delightful. Navigation, widgets, footer links should come secondary to the content.

Ideally responsive design thinking should start with what we know that everyone will be able to access: the text. Then comes color, images, CSS, video, effects & animation.

Once the content is organised and structured we can start to ask whether the content needs a header. Or a logo. Or sub navigation. Or does it even need navigation at all?

By starting with the content first, we can come up with new interesting solutions.

Does a logo really need to be at the top of every page? Many links that used to be put in a sidebar or sub-navigation might work better in relevant spots in the main content area instead. The option to add extra luggage to a flight booking might be more effective in the overview of the flight instead of together with a list of links in the left hand side. Main navigation could become footer content. Menu icons can hide or reveal navigations. What does the widget on the page really do and is it necessary?

Media queries & design

The approach of adding media queries based on the needs of the design, rather than on device sizes, enables a website to better respond to a wider range of screen sizes and therefore become more future friendly.

It can help to use vertical guidelines as a measurement tool to help define at what exact pixel-width a website layout starts to break. One way to do this is to add a graphic as a desktop background (like the one shown below) and then begin to gradually increase the browser width from its smallest layout to see how the layout responds as the browser window widens. When the layout becomes strained there should be a new media query adjusting the layout.

This method results in more media queries in the CSS file, but the queries themselves are smaller because they are making fewer changes each time. One area where the increase in media queries is evident is normally the navigation.

Responsive vs. Adaptive

While responsive design is the current solution for mobile websites, adaptive design may be the way of the future.

The difference is that the HTML behind a responsive design approach is all the same; only the CSS is different, meaning there are different layouts depending on the screen width.

Adaptive design has different HTML and CSS that dynamically get served across different screen sizes, which optimises the experience for whichever device that is being used.

As a result, adaptive design provides better overall performance because all of the functionality, layout and content are customised for each type of device, whereas responsive is displaying the same content in different fashions.

The question becomes when to choose one or the other?

If the project is a relatively straightforward and simple marketing website, then responsive design is probably a better fit, since its less complex and much simpler to build. However, if a company has an elaborate website that incorporates a lot of functionality, such as bank transactions or e-commerce, then an adaptive design may be a better solution.

Responsive VS Mobile Specific

Technology and performance can get in the way of a good user experience if the devices are not up to the task. If a website is a technically heavy or immersive experience, it could be better to create a separate mobile version instead of trying to replicate it on an under preforming device and screen real estate.

A good way to determine if a site requires a responsive or mobile-specific web design, is to identify the users’ top tasks and then try to think of how to best cater the product to fulfil those needs.

Enabling or Disabling?

Any decisions made should enable an engaging and flexible user experience.

For example, disabling a pinch zooming on touchscreen devices can feel like the right thing to do from a technical standpoint. But the result will most likely make it difficult for visually impaired users to interact with the site as well as taking away a much beloved feature from touch devices. It is always beneficial to consider the implications of decisions that limit a user experience.

Conclusion

Learning how to properly leverage responsive design thinking with techniques and practices can be a challenge. I hope people will be able to take on board some of the responsive design ideas and thinking we’ve identified here to use it within their own workflows and create better online experiences.

If you’d like to learn more I recommend starting with the references I used to create this article. Below is a pretty comprehensive list of some of my favorites -Besides some of my own thoughts, most of the content should be very similar to its original source. All the links can be found in the list below.

Resources

Building A Better Responsive Website
http://mobile.smashingmagazine.com/2013/03/05/building-a-better-responsive-website/

Create a Better Responsive User Experience
http://uxmag.com/articles/create-a-better-responsive-user-experience

Design-Based Media Queries
http://sixrevisions.com/web_design/design-based-media-queries/

How Long Do Users Stay on Web Pages?
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

How Much Has The Web Really Changed?
http://www.smashingmagazine.com/2013/05/06/new-defaults-web-design/

How Should Different Stakeholders Think About Responsive?
https://medium.com/design-ux/2763489df544

Responsive Design is Not About Screen Sizes Any More
http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more/

Selling Responsive Web Design To Clients
http://www.smashingmagazine.com/2013/10/30/selling-responsive-website-design/

The Growing Intricacies of Responsive Web Design
http://www.uxmatters.com/mt/archives/2013/09/the-growing-intricacies-of-responsive-web-design.php