10.04.2014 Views

WebCenter User Experience and Interaction From iPads to Xbox

WebCenter User Experience and Interaction From iPads to Xbox

WebCenter User Experience and Interaction From iPads to Xbox

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Fluid grids (liquid layout), flexible images, breakpoints,<br />

media queries <strong>and</strong> a <strong>to</strong>uch of JavaScript are now the key<br />

elements <strong>to</strong> getting started with responsive design.<br />

Fluid Grids / Liquid Layouts<br />

Fluid Grids provide the ability for a web site or<br />

application <strong>to</strong> scale its containing region elements based<br />

on the width of the browser viewport. This allows for<br />

elements <strong>to</strong> be flexible <strong>and</strong> reposition on the site <strong>to</strong><br />

support multiple resolutions ranging from desk<strong>to</strong>ps <strong>to</strong><br />

mobile devices.<br />

The new Smashing Magazine Website is a perfect<br />

example of a responsive site – on the right you can see<br />

an example of the site <strong>and</strong> it’s breakpoints as the<br />

browser is scaled down from 1900px wide <strong>to</strong> 614px.<br />

Initially all the navigation is vertical, positioned left of<br />

the content region. This provides a nice flow from site<br />

sections <strong>to</strong> section navigation elements. As we reduce<br />

the size of the site you will notice that the navigation<br />

model transforms <strong>to</strong> position these items in the header<br />

above the content; providing a constant fixed<br />

proportional width for the content information area of<br />

the site.<br />

As we scale further down you will notice the right h<strong>and</strong><br />

side of the site which previously contained<br />

SmashingMagazine.com Working Example Responsive Site.<br />

© 2012. Fishbowl Solutions, Inc.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!