The Simple Responsive Design Roadmap

Tim Hopma 8 years ago

While Zazzle is certainly not a development agency we do care deeply about user experience and its importance in the wider content strategy picture.

Our design and development team designs and builds every type of content imaginable, and as a result have a massive amount of data at hand that proves a significant increase in engagement, dwell time and sharing when it sits in a ‘responsive’ environment.

Background

This post is designed to share some of the basic roadmap we often take our clients through when looking to improve current responsiveness.

When planning website redesign projects for either internal web properties or for external clients, careful planning is required to ensure the project is completed on time and to budget.

The numbers for mobile vs. desktop usage vary depending on which market researcher you speak to but one thing all agree on is that the consumption of web content on smaller screens is significant enough for people to sit up and take notice. No longer is it acceptable for web designers to create a website that looks stunning on large displays but consider mobile to be an afterthought, if at all.

device sizesFail to offer the best browsing experience across all screen sizes and your site visitors will go elsewhere. You may also fall foul to future Google algorithm changes that penalise non-mobile-friendly websites.

Some reasons for responsive redesign

  • Your website was “designed for desktop” so the user experience on smaller screens is not as optimal as it should be.
  • Your website performs badly in search engine results pages.
  • Your website is slow, bloated with content and in need of optimisation.

You may have a number of reasons for choosing a responsive redesign but essentially the roadmap broadly consists of three steps:

discover-design-develop

1.      Discover

Starting with a clean slate, prioritise the functional requirements for the website. What is its purpose within your or your client’s organisation? To sell products? To generate enquiries? To publish articles?

How much of the existing site’s content is current and relevant? Are media assets optimised? Does new content need to be created?

Who am I designing for?

There is always likely to be an element of guesswork in determining how best to support your website users but through the use of web statistics software such as Google Analytics you can at least make that guess an educated one.

Identify not only who your active users are but also who has landed on your site and ‘bounced’ away again. Break down these numbers into desktop and mobile users, the types of browsers in use, and the network - comparing fixed-line broadband with mobile 3G/4G networks. Even the average age of the users and the times when they visit all help to paint a picture of who your visitors are and why they’re visiting.

analytics2. Design

Consider a mobile-first approach in your design process where through progressive enhancement a website will present the bare essentials on smaller screens, with additional design elements, content and functionality being implemented as more screen real estate becomes available.

This is the opposite to graceful degradation where elements of a large screen (desktop) design are effectively hidden or stripped back as the screen size decreases.

Why mobile-first?

It’s argued that a mobile-first design process helps to focus the purpose of the page, ensuring design is used effectively. With screen size at the forefront, considerations also have to be made for the capabilities of mobile devices.

Whilst newer devices are available with technical specifications to rival some desktop computers, there are still many lower-end smartphones and tablets (and anything in-between) that can be overwhelmed by sites using JavaScript, images and video. Network connections may also vary drastically if the user is relying on mobile data and is in a poor signal area.

Increasing font size

Whilst it may sound counter-intuitive, increasing both font size and line height on smaller devices can make text more legible - especially on pages heavy with content.

Small screens, big hands

Responsive design is more than just looks alone - it has to be touch-friendly too.

As touch devices like smartphones and tablets generally rely on input via fingertip, the larger the target area for the interaction the easier it is for users to hit that target. Links, buttons, form elements and controls for interactive elements all need to be easily accessible.

When interactive elements are stacked closely to each other such as with navigation menus, ensure there is sufficient “dead space” between the elements so that users can be confident that touching on a link or button will have the desired effect.

Using a grid

Grid frameworks, or boilerplates have become increasingly popular over the past few years with hundreds of grid projects in existence for you to choose from - a search on GitHub alone for “CSS grid” returns over 1,000 separate repositories, many of which utilise responsive design practices out of the box.

Screen Shot 2015-09-28 at 12.23.35
Two popular frameworks, which include grid functionality, are Bootstrap and Zurb’s Foundation however these also include additional CSS and JavaScript which may be unnecessary for your particular project. If your requirements are for a basic, lightweight CSS grid system then a good starting point would be here, here or here but with so many options, feel free to make your own decisions on what works best for you - or even create your own!

A grid structure can help to focus layout across multiple screen sizes, allowing you to visualise how content will be displayed. Reducing the need for cross-browser testing of the layout further increases productivity.

It’s also worth noting that screen size alone isn’t a guaranteed indicator of a device’s capabilities, with some tablets equipped with larger screens but lesser processing power than some small form factor notebook computers. However I feel that if a responsive, mobile-first redesign has done it’s job then all users will get an optimal experience regardless.

3. Develop

Load conditionally, reduce overheads

On a desktop computer with plenty of processing power, users can afford to retrieve and load additional data, resources and JavaScript for your media-rich interactive website. Serving the same content for mobile users is likely to slow down the loading times and make the site unresponsive.

Where some responsive techniques focus only on reflowing content, a more robust approach is to also conditionally load resources. Whilst this does require an additional layer of script logic, the overhead is low.

Stand-alone tools like Conditionizr or JavaScript’s built-in window.matchMedia() method provide the ability to target devices based on a number of criteria (depending on which conditional solution you opt for) so you can load additional resources only for larger, more capable devices.

Support for window.matchMedia() is limited to modern browsers so use it with caution however the syntax is conveniently straightforward if you’re familiar with CSS Media Queries:

if ( window.matchMedia("(min-width: 768px)") ){
     /* Do something when the browser window is at least 768px wide */}

Responsive images

A one-size-fits-all solution is not an option with responsive images and thankfully modern browsers have this one covered. By adding the appropriate mark-up to your image HTML, web browsers are provided with a selection of images of different sizes, densities, types and art directions, and the browser will make it’s own choice for which image is the most suitable.

The srcset and sizes attributes provide the browser with this additional information whilst allowing a fallback image for older browsers. The HTML picture element allows for multiple image mime types to be defined, for use in browsers that support them.

Consider these example scenarios:

Swapping the image based on window size

Sizes: When the window has a width of over 640 pixels, an image with a width of 60% of the viewport width is used. For narrower windows, a 100% viewport width image is used.
Srcset: The browser chooses the image from the list of widths (250px, 500px, 800px and 1200px), noting the image width and screen DPI.

<img
sizes="(min-width: 640px) 60vw, 100vw"
srcset="zazzleoffice-250.jpg 250w,
     zazzleoffice-500.jpg 500w,
     zazzleoffice-800.jpg 800w,
     zazzleoffice-1200.jpg 1200w"
src="zazzleoffice-500.jpg" alt="Zazzle Media HQ"
>

Support for high DPI (Retina) devices

Srcset: Devices with high DPI screens are served a high-resolution image but other browsers get a normal image.

<img
     src="zazzleoffice-1x.jpg" alt="Zazzle Media HQ"
     srcset="zazzleoffice-2x.jpg 2x, zazzleoffice-3x.jpg 3x">

More examples on these techniques can be found on Jake Archibald’s great responsive images article.

Optimising assets

As well as letting the browser choose the best images available, ensure all the images themselves have been suitably compressed where possible. Open the image within your image editor of choice or use one of the online tools such as reSmush.it or Kraken to optimise the image without degrading quality.

JavaScript and CSS can also be optimised, compressing (or minifying) them. This functionality is available through popular code editors such as Brackets or Sublime Text or as standalone online tools.

Testing

Before your new redesign is ready to unveil to the world it needs to be tested but unless you have access to a local OpenDeviceLab you may want to consider alternative testing methods.

Your first step should be to test within a desktop browser’s inspector tool - Mozilla Firefox’s Inspector and Google Chrome’s Developer Tools both provide a responsive design mode to display the page in varying screen sizes. Chrome goes one step further and emulates devices with different DPI capabilities.

Moving out of the browser the next step is to test on a range of actual devices but should this not be feasible then Browserstack is possibly the next best thing. Whilst it’s a premium service there is a free trial.

Screen Shot 2015-09-28 at 12.31.57
Putting it all together

These steps are by no means an exhaustive list but by following this responsive redesign roadmap you should now have a solid plan of how to structure your website redesign. Each technique has it’s own individual merits but together they form a foundation for a website that will provide a great user experience.

Stay in touch with the Zazzle Media family

Sign up for our monthly newsletter and follow us on social media for the latest news.

Our website uses cookies for various purposes and to enhance the site’s functionality. This helps us understand how you use and interact with the website.

Settings Accept Cookies