Expert Internet Marketing Advice for Small Businesses
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A great starting place for simple iphone interface sketching. You could easily hack and extend the psd files for other devices.
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.
Another Sketch wire framing freebie, everything you needed to get started with designing modern “flat” style wireframes.
Illustrator is sometimes overlooked as a wire framing tool, but Kai Husen has put together a great scalable set of .ai files.
Eddie Lobanovskiy has put together a simple iPhone 5 and 4, 10 column grid for laying out visually pleasing mobile designs.
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.
Jonathan Averstedt has created a great illustrator resource for describing touch interaction with mobile and tablet devices.
If you prefer working with pen and paper Nico Prat has put together some printable PDFs you download and start scribbling on.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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.
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.
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 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.
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.
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.
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.
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 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.
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 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 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.
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.
Oh, and please fee free to add any other resources I might have missed in the comments below.