Responsive Design in Joomla

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.