Taylor Bruce Design Partnership
Quick demo to begin… showing the breakpoints in the first responsive design from 2010.
Demo, History/Definition, adaptive layouts, Joomla usage
some examples: – bostonglobe.com, http://mediaqueri.es
Definition: Adaptive Layout (images/text responding to different viewport sizes)
May 2010 – Ethan Marcotte – accomplished with CSS3 media queries, adaptive design/flexible layout and flexible images. In his book – its one part philosophy and one part front-end development strategy.
Fox and Kemp – interactive architecture – the inhabitant and structure can and should mutually influence each other… this is the way forward.
Mark Boulton furthered this idea – responsive design should respond to the environment and bind the content to the device. His key word is “Reflow” – design from the content out – not from the design in. (REALLY hard to convince clients of this).
In the future – not only will the design respond just to viewport size… but context — location (home vs. office vs. train etc) (this is HUGE).
MOBILE FIRST – its about the content. forces you to know your customers… to really think through what's important.
Adaptive Design + Content Strategy – anything that conveys information – no requirements for pixel perfection across platforms.
Content is built in a network using flexible grids, fluid images, media queries.
Adaptive Layout + Content Strategy + User Experience
(I've been pushing this with my clients for over a year now… )
Building blocks of Adaptive Design
CSS3 Media Queries (http://respondjs.com has a bunch of scripts) – supported in all modern browsers
Flexible design – a grid system (usually 960) – one great tool – pxtoem.com – pixels to em's for CSS (pretty cool), resizemybrowser.com, responivepx.com – design testing tool
flexible images max-width: 100%; – background images – cover the container – background-size: cover or contain, Scripts: bgStretcher II – ajaxblender.com
caniuse.com – tells you what browsers support css3 etc…
Template Vendors:
most of them are coming out with responsive designs
Extension: MobileJoomla – looks at the device and allows you to display/not display content/modules etc.