• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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 :

Reading

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 »

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 »

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 »

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 »

Planning

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 »

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 »

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 »

Building

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 »

Skeleton

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 »

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 »

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 »

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 »

Flexslider

An awesome, fully responsive jQuery slider plugin.

Flexslider »

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 »

Testing

Responsive Web Design Testing

Responsive Web Design Testing »

Screenfly

Screenfly »

Examples

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 »

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 »

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 »

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 »


Post Tags

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

20 Comments

  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. Fabulous resource for web designers. Good to see some nice themes.

  5. 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.

  6. Good informative & helping one post shared ,
    Thanks

  7. 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. http://www.blissfulinterfaces.com/build-a-responsive-wordpress-theme/

  8. 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.

    Thanks.

  9. Good themes shown ..
    Good one design ..
     

  10. Nice stuff,Great to see this useful collection very inspiring.Thanks for this great presentation….

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

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

  13. Hi,

    Hope you are doing well!

    I am Sneha, Team Leader with a reputed IT company based in India.

    We are an Indian Web Design, Development and SEO firm with over 4 years of experience. In these tough times, where it is hard to maintain the top line, we can help share the bottom-line for you.

    Our main focus is to provide complete IT support to your business domain. Would you be interested in a Website Design, Website Maintenance, Web Promotion, Software Development etc… that might benefit the overall usability and user experience which usually leads to better sales? We will be happy to help execute SEO & Web Design and Development projects at a much lower cost than what you have in house.

    No compromise on quality!

    1. PSD To HTML
    2. Responsive Website
    3. CMS Website
    4. Ecommerce Website
    5. Website Edit / Maintenance
    6. Email Template
    7. Content Writing

    Do let me know if you are interested and I would be happy to share our Methodologies, past work details and client testimonials.

    Waiting to have a positive response

    Have a great day ahead.

    Thanks and Regards,
    Sneha
    Business Development Manager
    Email: sneha.websitetrafficunlimited@gmail.com

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors