The Year Ahead 2013
Designing For Mobile & Responsive Design
This has been round for ages and it certainly isn’t new for 2012/2013 where I think things are turning is that mobile is now everywhere and clients are becoming very aware that they need to have a site which not just works on a mobile device but provides a lovely user experience. I have continued to read and listen to some fantastic posts in 2012 with talks from the industry looking at how best to keep innovating and building on what we have learnt about designing for mobile. Our quest should be to provide a user experience which covers all ranges of device sizes, contexts and bandwidths.
Whether you are looking at retro fitting an existing site or starting from scratch with a mobile first approach you simply can not ignore the mobile landscape (and that includes tablets). My focus will definitely be on designing more in the browser, making working prototypes which can be demoed and tested easily with clients. 2012 delivered some fantastic tools to help with this:
- Hammer - mac only app which enables you to quickly create working concepts and post them to a url for viewing.
- Mixture - mac and windows app which is still in beta, this looks really promising for again being able to create working prototypes.
- Codekit - mac only app, whilst not a new app Codekit has recently introduced a way to create includes for helping you template sites quickly, I love this app and the developer (Bryan Jones) is continually updating it.
When it comes to reading and learning resources on responsive and mobile design there certainly isn’t any shortage of books, posts and even whole conferences dedicated to the subject. Here is a list of useful links which are well worth looking at:
- Brad Frost - Brad’s site has a wealth of information on responsive and mobile design including his “this is responsive” design patterns.
- Mediaqueri.es a website dedicated to showing the latest responsive sites, great for inspiration and learning how sites have been put together by simply viewing the source code.
- Treehouse - if you are wanting to learn about responsive design though videos this is probably the best way to do it. Treehouse offers a wide range of web design/development videos for learning and they run a complete project on how to build a responsive website.
- CSS-Tricks Chris Coyier is amazing at keeping us up to date with the latest developments in web design, this screencast is an old one but a good one for providing a good starting point.
- Two books which I keep referring back to are Responsive Web Design by Ethan Marcotte and Mobile First by Luke Wroblewski again these books have been around for quite a while but they are worth their weight in gold (well probably a lot more as they are only lightweight!).
- Follow @RWD on twitter to keep up to date on the responsive landscape.
There is a mass of information out there on responsive and mobile design/development techniques, which can get overwhelming, try and focus on a few of the links above to steer you in the right direction.
Again if you haven’t been living under a rock for the last twelve months then this is really not ground breaking and certainly not new for 2013 but if you haven’t been working with a preprocessor then you should start right now. A preprocessor enables you to write CSS code using SASS or LESS both SASS and LESS then enable you to right “smart” code using variables for colours and CSS3 mixins with Compass and Bourbon which can save you a massive amount of time. The other nice feature is that you can break your files up into manageable partials which at the end are preprocessed into one file, compressed ready for serving, again making life easier for the developer and providing an optimised user experience.
There is so much more to preprocessors and once you start getting into them there are all sorts of clever use cases; from creating complete grid systems to developing complex colour schemes, to get started:
- Watch Get Yourself Preprocessing in Just a Few Minutes another great screencast from Chris Coyier.
- Buy Codekit, well worth the investment.
My personal view is that 2013 will be the year where using a preprocessor becomes the norm and you will have to be able to use one to work at an agency or with a team, or you will simply get left behind. Some of the features that we see in preprocessors may well start to move into the CSS spec this year such as variables, by learning how these work now you will be ahead of the game when the spec is released.
Content Is Key
Each year when I look back at the topics I have read about and the conferences I have visited this theme always stands out as the one that we all know is super important but somehow seems to be difficult to get right. “Content is King”, we hear it time and time again and it is true on so many levels. Put simply good content provided at the earliest possible stage of the project enables you to scope out the infrastructure of a website, build a design around the content, and finally serve that content in the optimal way for the device and context that it is being used on. Oh and one other pretty important feature of good content: visitors and search engines will find you on the web if you are serving good content.
In 2013 I am going to be focusing on how we can get better at at collecting content and helping clients provide us with content up front before the start of a project rather than it being an after thought at the end. Two books which are super helpful and great for offering some ideas are:
To Wrap Up
2013 is going to be a super exciting year for me, as to be fair, every year is on the web. Whether you agree with what I have written about here is not really important, the main thing is that we keep learning and moving forward. There are so many different areas of the web and we can’t be experts in them all, enjoy what you do, give back where you can, and I am sure great things will happen 2013.
Good luck and Happy New Year.