Use your left/right keys to browse tutorials
Getting started with Responsive and Adaptive layouts

Getting started with Responsive and Adaptive layouts

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 28, 2013

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" />

The Next Web 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.

Zurb Foundation Layouts

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.



More tutorials from Papermashup
  • http://nostrum.me/?p=3 Best Professional Espresso Machine

    People choose to work with a VA. So, what are the skills essential for becoming a espresso machine is often
    one of the most common duties that a espresso machine can help you establish a lead-generating website!
    Delegating tasks that you are willing to evaluate the
    freelancers who apply. The more specialized your service is
    the more you may be able to go on maternity leave, you also need to
    analyze where to assign the staff once she gets back to work.

  • http://sunglasseshop2012.com/the-formula-to-creating-a-responsive-web-design/ responsive website design

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why throw away
    your intelligence on just posting videos to your blog when
    you could be giving us something enlightening to
    read?

  • http://onewebdesigner1.com oviedo

    Thank you for the good writeup. It in truth used to be a entertainment account it. Glance complicated to far delivered agreeable from you! However, how can we be in contact?

  • http://cubicleninjas.com Tyler

    “Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Well spoken.

  • http://TheSiteSlinger.com/ Jeremy

    Nice break down on responsive design. Here at http://thesiteslinger.com/ (Austin) we build with the Bootstrap framework to make sure we get the best user experience out of our responsive designs. Cheers!