Getting started with Responsive and Adaptive layouts

There is no one-size-fits-all approach. Each project has its own focus, requirements and audience. This article will hopefully help you make the best decision for your project by outlining the advantages and disadvantages of each solution. Jeffrey Veen said: “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

What is Responsive web design?

Responsive design is all about building a project that will respond and adapt to any number of user devices. since the early days of CSS style sheets have enjoyed to some extent device awareness through media types. If you’ve ever coded a print style sheet, chances are you’re already familiar with the concept:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

View more examples at http://mediaqueri.es

Top 4 Frameworks for building a responsive site.

1. Bootstrap – Simple, fluid HTML/CSS/JS framework from Twitter.
2. Goldilocks – Fixed width for medium & large screens, fluid single column for small devices.
3. Foundation – Flexible 6 and 12-grid framework from Zurb.
4. Skeleton – Minimal responsive framework. Includes WordPress theme.

Adaptive vs Responsive

The adaptive layout is based on a simple idea. instead of using percentages we give our layout fixed sizes but adapt these sizes depending on the width of the browser/viewport, this then creates a layout with different “break points”. The responsive layout is a mix between a fluid and adaptive layout. It uses the relative units of the fluid layout and the break points of the adaptive.

Getting Started

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Flexible Images

There are a number of techniques to resize images proportionately, the most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix as shown below.

img { max-width: 100% }

We now have web browsers on Playstation’s and Xbox’s, and even some television are able to connect to internet. Maybe tomorrow you we’ll have a web browser in our coffee machine, who knows! If we use responsive layouts to optimise for smaller screens, we can also use them to optimise for bigger ones.