adaptive design planning
Today, we can no longer design any site without considering carefully the many different devices and screensizes affecting layout and presentation. A good responsive design will allow the content to adapt to the viewport, be that a computer or TV, and mobile.
It is now over six years ago that the wonderful Ethan Marcotte coined the term “responsive web design“, or RWD, via his article on A List Apart. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)
There are many web designers and developers who discuss mobile in depth – Brad Frost is someone whose writing, speaking and work you should definitely follow. Brad disucsses a lot of responsive design aspects, curating resources and his blog posts always offer food for thought.
As the digital landscape continues to become more complex, it’s essential for us to start thinking beyond the desktop and embrace the unpredictability of the future. Mobile is forcing us to rethink the content we create and the context in which people interact with our products and services. This session will cover how to change our thinking and start acting differently in order to create more future-friendly experiences.
- Opera Mobile Emulator
- Aptus [mac]
- the responsive calculator, Stuart Robson
- Responsive Patterns, Brad Frost
- Responsive Resources, Brad Frost
- Mobile Web Best Practices, Brad Frost
- Multi-Device Layout Patterns, Luke Wroblewski
- adaptive images, Matt Wilcox
- Fit Text, Paravel
online testing tools
- browser shots
- responsive px
- Fold Tester
- responsive test
- WAVE accessibility tool
- check my colours
- PageSpeed Online
more excellent slides
While these slides go with talks and workshops which go back a few years by now, their content and discussion of how to design responsively remains relevant.
The web native designer
Andy Hume & Paul Lloyd: slides from talk at Talk Web Design, January 2012, Greenwich Uni
RWD: the specs behind the sex
Bruce Lawson @ UX Sofia, 7 June 2012
Fashionably flexible responsive web design
Andy Clarke, slides from workshop at New Adventures, January 2013
Adaptive Systems for Multiple Devices
Simon Collison: slides from Hull Digital, November 2010
adaptive layout exercise
Time to get stuck in and test your understanding of a RWD approach, mobile first, of course :)
This is one typical interview/application task to test your skills. Given the mockups of a page design, including different layouts according to screen size – produce the CSS to present the content accordingly, working your way up from the smallest to the largest layout.
↓ download source files (includes mockups)
Quick tip: Focus on all details of the smallest layout first, and ensure a complete design before moving onto the rest. Going back and forth between the different views can cost a lot of time…
As always, feel free to comment below if you have any questions :)
Comments are closed.