Recently I had the good fortune to attend a workshop here in Perth held by Responsive Design Guru Andy Clarke.
For me it was very much a seminal moment. It made me realise just how web design as an industry needs to be overhauled in order to keep up to date with modern advances in the mobile device industry. In particular the ability to browse websites on any mobile/device that can handle it. The web isn't just accessed on the desktop anymore. Big businesses are reporting record growths in business made from mobile devices.
The trend is shifting towards accessing the web at any time and place. There is a growing number of devices that can give you access to the internet in a mobile way now. These devices all have their own software and quirks with how they interpret the code that they read (our designs and websites), not to mention different screen sizes and resolutions.
What all this means is that our test bed of devices is growing ever larger and things are getting increasingly difficult to achieve the old way of web design. We have as an industry become used to showing our clients concepts of what the finished product will look like on a desktop computer. The desktop is an ever shrinking part of the market place now. Essentially what we are doing is harking back to the old days of Print Design, methods and practices that were with us back then have followed us into the web industry. Selling concepts to clients as if they were print designs and then going to unbelievable lengths to insure that the designs are near as pixel perfect across all platforms and browsers is total insanity. The web is a medium needs that to be embraced as a fluid entity and we need to design for its fluidity otherwise what we are doing isn't web design at all. It might be "design" but if it isn't responsive to the device that its being used on it is a failure as web design.
Essentially what we need to do is change our methods of designing and building websites to move with the web rather than against it. When presenting concepts to clients we should be separating the design from the layout altogether. What we present instead should be a mood board or the atmosphere of the design. Including elements along the lines of - Typefaces, type treatments and white space, Colour, Emotion and interaction vocabulary, Texture, Decorative elements, line-work, patterns and shapes. The design itself will be fluid and the layout is subject to change from the bottom up.
The mobile should be considered and designed for first rather than an afterthought once the design has been built. With this in mind it means that only one version of the site needs to be built rather than a mobile only version. This is achieved by understanding the key breakpoints in device screen sizes and adding to the websites code based on the different breakpoints. A break point is the point at which a device can be recognised as having a different screen size. Working from the bottom up and expanding makes far more sense in the long run. Retrofitting a website to become mobile friendly is a near impossible task.
There are numerous other benefits to working this way but one of my favourites is how well it helps us as designers flush out what the content hierarchy is and how important various elements are to the design. What is the most important to the user? What are they coming to the site for? I often find that websites are far easier to use and access when browsed on mobile devices as they have essentially cut out all the unnecessary elements focusing more on user interface and the ease of accessing information.
In short we all need to shape up. Educating clients and leading the way forward by putting mobile first.
This was just a very brief take on a far bigger subject, If you want to know more follow the links below.
Further Reading - Recommended - (Responsive Web Design and Mobile First bundle)
A Dao of Web Design by John Allsopp
Fluid Grids by Ethan Marcotte
Mobile First by Luke Wroblewski
Responsive Web Design by Ethan Marcotte
One Web by Jeremy Keith (audio and slides)
There Is No Mobile Web by Jeremy Keith (video)
For a Future-Friendly Web
A richer Canvas
Responsive by Default
You say responsive I say adaptive