Responsive web design really took off in 2011 and I can see it becoming the standard by the end of 2012 – there really is no reason not to include it in your planning and build of new web sites these days. I have previsously looked at free responsive WordPress themes and Premium Responsive WordPress themes so today we’re going to look at how you build your own.

If you feel daunted by the process or feel you are being left behind by this new technique then dont worry – bookmark this post as it contains everything you need to get up and running. I have split it into 5 key sections :


Responsive Web Design Demystified

Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?

Responsive Web Design Demystified » Get Hosting »

Awesome tutorials to master responsive web design

In a few month, responsive web design has become a very important part of designing and developping a website. Due to the rise of mobile devices such as iPads, iPhones and other smart phones, your website must be easy to read and use in multiple resolution.

Awesome tutorials to master responsive web design » Get Hosting »

Responsive Web Design: What It Is and How To Use It

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

Responsive Web Design: What It Is and How To Use It » Get Hosting »

Responsive Web Design Guidelines and Tutorials

In this overview you will find the most useful and popular articles we have published on Smashing Magazine on Responsive Web Design.

Responsive Web Design Guidelines and Tutorials » Get Hosting »


Responsive Web Design Sketch Sheets

During Denise Jacobs’ workshop on CSS3 at ConvergeSE 2011, I was inspired to make these responsive web design sketch sheets to help think through layouts for various devices.

Responsive Web Design Sketch Sheets » Get Hosting »

Make Your Mockup in Markup

I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup.

Make Your Mockup in Markup » Get Hosting »

Content Prototyping In Responsive Web Design

A content prototype is an HTML-and-CSS-based fluid-grid prototype, consisting of layout and typography, that consists of the project’s actual content. Its greatest usefulness may be in determining where to apply media queries to make the Web design responsive.

Content Prototyping In Responsive Web Design » Get Hosting »


320 and up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

320 and up » Get Hosting »


Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Skeleton » Get Hosting »

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Golden Grid System » Get Hosting »

Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Less Framework » Get Hosting »

The Fluid Baseline Grid System

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The Fluid Baseline Grid System » Get Hosting »


An awesome, fully responsive jQuery slider plugin.

Flexslider » Get Hosting »

Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.

Adaptive Images » Get Hosting »


Responsive Web Design Testing

Responsive Web Design Testing » Get Hosting »


Screenfly » Get Hosting »


Ethan Marcotte’s 20 favourite responsive sites

Ethan Marcotte, the father of responsive web design, has compiled a whole folder of responsive sites, each as flexible and foxy as the last. Here he rounds up 20 of his favourites

Ethan Marcotte’s 20 favourite responsive sites » Get Hosting »

Showcase of Outstanding Responsive Web Designs

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size.

Showcase of Outstanding Responsive Web Designs » Get Hosting »

85 Amazing Showcase of Responsive Web Design

In this post, we showcase 85 Amazing Responsive Web Design that you can use as your inspiration in designing your next project.

85 Amazing Showcase of Responsive Web Design » Get Hosting »

The best responsive web design examples and resources

This week’s extended round up takes a look at some superb examples of responsive web design, as well as the best resources to find out more about this new way of designing for a flexible internet experience.

The best responsive web design examples and resources » Get Hosting »


Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +


  1. and what about Foundation Framework?

  2. great list oli…a complete list for any WP theme designer

  3. Pandroso

    buenos recursos.. muchas gracias

  4. As the design is an core issue of any web site. The responsive web design is good one approach to get the desired result from the design point of view.
    The major aim is to get the intention from the users which a lot off stress on web designers. & make their work challenging.
    A nice post shared, Thanks for sharing the helping one stuff.

  5. Good informative & helping one post shared ,

  6. Thanushka

    There’s a simpler way to build a responsive WordPress theme, even from your existing theme. I wrote a step by step article on it. Here’s the link to anyone interested.

  7. Anonymous

    This here is a pretty impressive list. I have read a lot of the theory about responsive web design, but never quite got to actually implementing it. I’m currently making a list of things to try, and this definitely will go into that list.


  8. sakshi

    Awesome presentation.thanks for complete list of WP theme designs which are really helpful .


    What’s up, everything is going fine here and ofcourse every one
    is sharing facts, that’s really good, keep up writing.

  • Comments are Closed

Our Sponsors


Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!