Our Blog

Expert Internet Marketing Advice for Small Businesses

The Ultimate Responsive Web Design Beginners Resource List

Posted on Friday 21 June 2013 in Web Design

header

Designing for the web has changed drastically over the last 2-3 years. The days of designing for rigid screen sizes that are set in stone has long gone. Websites now have to be suitable for a plethora of different screen sizes, being used in very varied situations. This post is a compilation of resources we found useful when developing and designing responsive websites.

Table of Contents

Foundation

foundation
Before you jump into responsive design you may want check out the books and paid courses below. It goes without saying that a firm understanding of CSS and HTML is needed before you add the complexity of responsive design into the equation.

Books

With the explosion of responsive design on the web, you may be lost on where to start, what to do. Online resources are great and give a diverse range of information, but they can lack structure if you need something that gets you started from the very beginning, ebooks may be the better option.

mobile-first

Mobile First

Mobile Firsts focuses on creating websites that are designed for mobile. The book has a quick pace and could be read in a single sitting. Like most A Book Apart books, Mobile First encapsulates a lot of data and first-hand experience into a talkative light read. Author: Luke Wroblewski.

responsive-web-design

Responsive Web Design

Some may say Ethan started a web revolution when he wrote this humble post on A List Apart ( make sure to resize you browser for the subtle easter egg!). He followed up that post with: Responsive Web Design, which focuses more on the trials and tribulations of creating websites that adapt and respond to their environment. Filled with real world examples this book will swiftly take you through some of the finer points of responsive design and development. Author: Ethan Marcotte.

responsive-web

Jump Start Responsive Web Design

If you’re looking for a responsive eBook that drags you kicking and screaming through the pitfalls of responsive web design; look no further. Responsive Web Design features code examples with the book so you can work along on the projects. Authors: Craig Sharkie,  Andrew Fisher.

smashing

Smashing Book #3: Redesign the Web

As well as reading Smashing Magazine’s awesome industry defining web design blog, you should make sure their Redesign the Web book is on your Radar. Packed with chapters written by some of the webs biggest names this beautiful book is a pleasure to admire and to read. Authors: Elliot Jay Stocks, Paul Boag , Rachel Andrew , Aarron Walter , Ben Schwarz , Lea Verou, David Storey, Christian Heilmann, Dmitry Fadeyev , Marc Edwards , Aral Balkan, Stephen Hay, Andy Clarke.

responsive-design

Implementing Responsive Design

A realistic look at designing for responsive web, filled with lots of data. Filled with a lot more code than other books, Implementing Responsive Design really delves deep into implementing more advanced solutions into your design. Author: Tim Kadlec.

cover

Responsive Design Workflow

I’ts not just about code,  Responsive Design Workflow reflects on how we are breaking away from creating flat Photoshop comps, and exploring other methods for visualising responsive designs. Author:  Stephen Hay.

adaptive-web-design

Adaptive Web Design

A really easy book to get into, Adaptive Web Design takes a softer more conversational tone, if you’re after a casual dip into responsive design Adaptive Web Design might be the book you’re looking for. Author:  Aaron Gustafson.

retinafy

Retinafy

Just when you thought you cracked responsive web design along comes the dark horse that is Retina. “Retinafy your websites and apps” takes a lot of the trial and error out producing really good looking websites that load fast when they need to. Author: Thomas Fuchs.

Paid Courses

If you need to start from scratch and want a structured walk through in developing responsive websites. Investing in a paid course may be the best way to get yourself up and running with responsive design.

Design Interaction

userinteraction

User centred design takes the main stage when it comes to creating responsive experiences, your users need to be able use your site with minimal extraneous thinking.  Responsive websites do away with frivolous design as your users goals become a priority.

User Experience

Mobile and tablet sites are touch driven, simple UX principles such as removing hover menus and increasing the size of buttons can make a site a lot easier to use.  This is a simplification of mobile design ideals but having a site that adapts to its environment is more than making it just stretch to a breaking point, it has to take into consideration the where, why and how it’s being used.

Design Mistakes

Don’t disable magnification, don’t design breakpoints to device widths, don’t hide content, and many more commonly made mistakes can really harm a user’s experience with your site. Taking shortcuts and not creating content that works equally across mobile and desktops is always going to lead to dissatisfaction.

Wire Framing

wireframes

Before a site construction even begins, its architecture and design should be planned out. Having a solid visual frame work that dictates all the different break points a site responds to can be useful. This can also be over kill and many designers prefer to outline a working style that can be adapted as the site is designed inside the browser.

WireKit

A great starting place for simple iphone interface sketching. You could easily hack and extend the psd files for other devices.

How to Wireframe an iPhone App in Sketch

Sketch is the new big thing for interface designers that have access to a mac. If you’re looking for a cheap alternative to the now defunct Adobe Fireworks you might find this introduction to Sketch useful.

Sketch Wireframe

Another Sketch wire framing freebie, everything you needed to get started with designing modern “flat” style wireframes.

Wireframe/Blueprint Kit

Illustrator is sometimes overlooked as a wire framing tool, but Kai Husen  has put together a great scalable set of .ai files.

iPhone 5/4 Grid

Eddie Lobanovskiy has put together a simple iPhone 5 and 4, 10 column grid for laying out visually pleasing mobile designs.

Responsive Wireframes

A really simple but well put together Photoshop wire framing kit from Chris Bannister. The kit is set up with sizing for tablet, desktop and mobile devices.

Sketch Layout

A Layervault inspired .sketch desktop file from Hurley Harper, he also has a great selection of other user interface downloads on his Dribbble page.

Touch Hand Gestures

Jonathan Averstedt has created a great illustrator resource for describing touch interaction with mobile and tablet devices.

Wireframes Imprimer

If you prefer working with pen and paper Nico Prat has put together some printable PDFs you download and start scribbling on.

Android Gesture Screenflow

Describing screen flow on android devices can be very difficult and tedious; this set of screen flow interaction should half the time needed when describing a user’s interaction in Android.

Android UI Design Kit

Until recently Android has become the neglected child in the design world, these wire frames most likely be out of date before you even read this article but they are a great starting point.

Style Tiles

Style Tiles are a great way to create visual identities for webpages without designing the whole site. The principle is you set the fonts, colours and interface elements that communicate the essence of your design.

Off the shelf Frameworks and Themes

frameworks

Having a framework whether it’s an in house or downloaded off the internet can save hours of time and money. Finding a framework that works for you can come down how in depth you need the framework to be and how flexible it is to change and edit its structure.  Frameworks like bootstrap are very advanced and have a lot of features but any one who’s spent time with a bootstrap theme can generally see them I mile off. If a more radical design is needed, using a less constrained framework or rolling your own may be a better option.

Frameworks

The web design community is a flooded with designers creating frameworks many of which are inspired by the 960 grid some go into more detail than others. Lots of frameworks go as far as defining not only the responsive grid but also widgets, buttons, forms, and anything else they can dream up. Frameworks are a great place to learn about responsive design, but make sure you have a good understanding on the inner workings before relying on them.

WordPress Starter Themes

Working straight into WordPress can have its benefits, especially if a framework has already defined all the fiddly bits for you. A general theme with all WordPress boilerplate templates is to simplify the theme creation process.  Themes with lots of unnecessary plugins should be avoided as they can impact on performance and site security.

Page Elements

page-elements

Even if you’re starting from a framework, many of the following page elements could be missing or not behaving how you expected.  Each section takes an in-depth look at working a particular a page element, responsive web design is not an exact science and most problems will have more than one valid solution.

Layout

Implementing a functional responsive grid is going to be the starting point to any responsive design. Grids help keep consistency with in the sites design, defining gutters and padding that evolve as the sites canvas expands or decreases can be an art form in itself. The Frameworks section below has lots of prebuilt complex grid systems; the complexity is dependent on how far back and the quantity of browsers you plan to support.

Navigation

Responsive navigation is normally very different when viewed on a mobile device in contrast to a desktop. On a mobile you don’t have the luxury of space to expand 6-7 links horizontally across a page. Mobile menu design boils down to different ways of hiding and revealing a list of navigation elements.

Titles

Making headers that fit the width of their container can be a serious pain with media queries. Browser’s rendering text with different spacing and widths are going to be your first problem. Once you add scaling containers into the mix all hell can break loose. The following jQuery libraries should help alleviate a lot of these problems; they should only be used sparingly and reserved for titles and large text as they can cause performance issues.

Images

A whole book could be written on responsive images. The complexity of using responsive images is really down to how consistent you need to crop to look and the issues you end up running into with ever changing aspect ratios. Unfortunately because of how complex responsive images can be there is no silver bullet solution, having the right image at the right time at the right size is never going to be easy.

Responsive Design with Server-Side Components

No one wants messy JavaScript ruining page speed! Using server side scripting to choose the image size that will be rendered allows the user to download lower resolution images with wasting bandwidth downloading multiple high resolution images.

Full Image Backgrounds

Full page background images can end up using a lot bandwidth, loading a 1mb (yeah we’ve seen them) background image on a mobile is rarely going to excite any user especially one that’s using an edge or less connection.

Video

Static widths are the norm for video; it’s a cruel format that is commonly encountered inside an iframe. So what do you do for mobile? Use the new hotness that is HTML5 video, but for everything else you can muddle through with the following jQuery libraries.

Forms

Forms are one of the primary methods for data to transverse through the internet; the humble form can be twisted into a myriad of different shapes. One of the most important aspects of forms is how they deal with errors; a badly handled error can cause endless frustration especially on smaller devices as they can easily be missed.

Sliders

Sliders are powerful attention grabbers, implementing a responsive slider takes a fair amount of planning. As the slider scales its width to height ratio might not scale with it, images and copy can start to crumble as the margins start to creep in.

On mobile devices sliders may not be the best option, they offer another layer of complexity. You may want to avoid using them on smaller screens and only implement them as the page scales upwards. Navigating the slider on touch devices also adds pains to implantation and usability. Your user’s natural instinct will be to swipe at the slider on mobile devices but the slider has to have this functionality.

Tables

Tabular data can get out of hand; navigating column after column of data on a tiny screen can become a nightmare especially if you need to compare data, back tracking from one end of the browser to the other. Your aim should be aim to keep tabular data semantic and readable on all screen sizes. The solutions below use a range of techniques to improve readability some implement advance pseudo techniques that aren’t as semantic, while others use a heavier JavaScript solution to solve the problem.

Email

email

Love it or hate it email templates created with barbaric tables are here to stay. This doesn’t mean they can’t be responsive, far from it mobile devices are fast becoming the most used means of viewing email and their modern browsers usually support media queries.

Ecommerce

ecommerce

With mobile ecommerce exploding this year and “Q1 2013 tablets exceeded traditional desktop devices for conversion rates for the first time” suggests people are becoming comfortable with purchasing items on their tablets.  Speed is also a prime issue for mobile user as most expect a mobile site to load quicker than their desktop counterpart.

Testing and Optimisation

testing

Testing and optimising a responsive website should be an on-going experience, browsers and devices are exponentially changing. Page speed optimisation, SEO and browser compatibility are evolving goals, you should decide from the outset which platforms and browsers you will be testing and optimising for.

Testing

In an ideal world we would be testing on a table full of 10-20 different devices. Device testing can be a long and arduous process, as device diversity increases and operating systems variations exploding. A lot of testing tools give a good estimation of how a browser works but may miss subtle rendering issues that could snowball into major problems once the site is live.

Browser Compatibility

Supporting older versions of Internet Explorer can be a pain, luckily the following jQuery plugins are here to pick up the slack. The elephant in the room when it comes to using the following plugins is the need for using JavaScript, JavaScript performance is rather poor, or disabled on older browsers.

SEO

Responsive sites usually forfeit a lot of issues that mobile/desktop segregated sites have. Duplicate content and desktop links redirecting to the homepage when viewed on mobile devices shouldn’t be a problem. But what happens when a user views a page that has content or interaction that doesn’t have a mobile substitution, such as a flash game or piece of interactive content? Not having an equal user experience and content on all devices can make your site very inconsistent.

Page Optimisation

Google and your customers expect mobile sites to load within 1 second. This is a big ask with fragile internet connections and retina graphics, small little hacks can give the impression of a lot faster loading website.

Examples of Responsive Webdesign

responsivegallery

Below are a few responsive website galleries of sites that other developers and designers have created. A good responsive gallery hand picks all its submissions and will go through and look at how the designer or developer tackled the project. Design Galleries are a great starting point when researching design directions or just exploring ideas that you may not have thought of.

Zurb

Zurb hand pick and review all the sites that are submitted, each listing has a small review of technology and challenges giving you more incites than your average inspiration site.

Mediaqueri.es

Media Queries puts the extra effort of producing screens showing each site at it goes through its different break points a great starting point for experimenting with ideas.

Awwwards

Awwwards is the equivalent of the Oscars; with a very stringent reviewing process, and a tendency to pick out the more abstract and daring websites.

Responsive Showcase

Responsive Showcase has loads of great resources and examples of responsive websites. Updated regularly this site features more real world websites rather than just design and large corporate sites.

Closing

twitter

Responsive design is a big subject ever changing subject, as an experience in creating responsive design it can feel like one big balancing act. Putting out fires as certain devices break your design and then making compromises as they effect other parts of your design. Staying current with the newest web technologies and implementations can be overwhelming. Below we have compiled a list of the movers and shakers of the responsive communities twitter accounts.

People to follow

Oh, and please fee free to add any other resources I might have missed in the comments below.

By Kevin Letchford

Web Designer at Target Local, I talk about design and typography on Twitter, Google+, and post over filtered photos on Instagram.

Share this post

Comments Please!

  • http://aaron-gustafson.com Aaron Gustafson

    This is a great resource list. Thanks for the shout-out on my book. Just one quick correction: “Easy Readers” is not part of the title, it’s the publishing house ;-)

    • Kevin Letchford

      Thanks for the heads up Aaron i’ve changed the title to reflect this. I’ve also gone back and added you as the author of Adaptive Web Design.

  • Felipe Duardo

    Good job!!

  • http://www.htmlcut.com/ htmlcut

    Agree, excellent job! Share it in all my social accounts :)

  • http://www.mathewporter.co.uk/ Mathew Porter

    Now thtas a pretty exhausting list of resources, kudos on collating that all in one place.

  • Matthias Bärwolff

    Very nice. Thanks for the effort, so many good points and resources. Just a minor thing: You will want to add a white-space: nowrap to your top-nav ul, otherwise the “Contact Us” links wraps on my Chromium on a T61.

  • http://www.javerydesign.com/ Justin Avery

    Don’t forget to subscribe to http://responsivedesignweekly.com for a weekly email of all things responsive.

  • haromaster

    You need to add Stephen Hay’s new book, i think its game changing

    • http://www.javerydesign.com/ Justin Avery

      +1

    • Kevin Letchford

      Thanks, Added – will have to get a copy to review.

  • http://jedwillard.net/ Jed Willard

    No mention of Ethan or his works (ALA article & book) which essentially started the RWD revolution? Or did I miss them? Seems like those would be obvious adds to this resource as well as following his blog and @RWD on twitter. Overall, a pretty good list.

    • Kevin Letchford

      Yes its added now, thanks.

  • Hjörtur

    Would like to add http://responsive.io as a server-side solution for responsive images.

  • http://www.folderprinters.com/ www.folderprinters.com

    Wow Kevin, thanks for doing the legwork on this one. You have created one of the best resources that I have come across for anyone contemplating creating a responsive website. It looks as though I need to look no further. Thanks again!

  • http://www.sixtymarketing.com/ Kev Massey

    Hi Kevin

    There is a huge market out there to update companies websites so they are responsive. There has been an increase of 62% from people using tablets and smartphones in 2012 – 2013. If your website isn’t responsive today, you could be losing out on a lot of business!

    Thanks Kevin. Kev Massey from SixtyMarketing.

  • T.White
  • http://www.jkmahs.com/ SEO/SEO Techniques/SEO Service

    Nice resource list. It’s so useful. Great Job.

© Target Local - Aspect House Pattenden Lane, Marden, Kent TN12 9QJ - 01622 410292