25.05.2016 Views

ebook-responsive-elearning-with-links-us

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

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

9<br />

1<br />

A<br />

Responsive World<br />

1.2: Responsive Design: Understanding the Term<br />

Marcotte states that in order for a web design to be considered '<strong>responsive</strong>', it needs to have three key<br />

features:<br />

Fluid grids<br />

For a design to 'respond', the<br />

site should be built on a fluid<br />

or flexible grid foundation<br />

<strong>with</strong>in which on-screen<br />

elements adj<strong>us</strong>t to the<br />

display area.<br />

Flexible images<br />

Images form an integral part<br />

of a site and for a design to<br />

be <strong>responsive</strong> these images<br />

should be flexible - that is,<br />

they should scale<br />

proportionately depending<br />

on the size of their display<br />

container.<br />

Media queries<br />

Media queries provide a way<br />

of detecting the device<br />

dimensions and other<br />

physical properties that then<br />

directs the fluid grids and<br />

flexible images to align<br />

appropriately to fit the device<br />

screen.<br />

A not so technical aspect that cements these features is lateral thinking. Lateral thinking enables<br />

developers to bind the three features together and implement a truly <strong>responsive</strong> design.

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

Saved successfully!

Ooh no, something went wrong!