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
Comments
5 discussions around Getting started with Responsive and Adaptive layouts
  1. 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.

  2. 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?

  3. oviedo says:

    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?

  4. Tyler says:

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

  5. Jeremy says:

    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!





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.