"RT @charlesLeahy1: Bloody migrants coming over here blocking our roads #amphibiancaravan"

@ashleyford 13 hours ago

"RT @RandyRainbow: This is the only news I care about today 🦃"

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]


Getting started with Responsive and Adaptive layouts

By starting mobile first with your website you are able to make the tough decisions about the content and layout


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

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.

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Warning: count(): Parameter must be an array or an object that implements Countable in /nfs/c02/h08/mnt/40992/domains/ on line 399
Comments 6
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    i am the fan of your writing i have read your previous post

  • Best Professional Espresso Machine
    Posted on

    Best Professional Espresso Machine Best Professional Espresso Machine

    Reply Author

    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.

  • responsive website design
    Posted on

    responsive website design responsive website design

    Reply Author

    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

  • oviedo
    Posted on

    oviedo oviedo

    Reply Author

    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?

  • Tyler
    Posted on

    Tyler Tyler

    Reply Author

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

  • Jeremy
    Posted on

    Jeremy Jeremy

    Reply Author

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