Collection of Excellent Tools for Responsive Web Design

Responsive web design is no doubt the biggest trend right now. The term is related to the idea of developing a website so can fit to all screen resolutions. These days almost every client wants a mobile version of their website, and it is necessary if you think deeper: one design for iPhone, another one for BlackBerry, Ipad, Android and so on. In my opinion this will end the old practice of designing for mobile, no need to code another variant of your website and try to redirect users according to their device. You will have one website to rule them all!

In the Web Design field we are all affected by the new devices that regular appear. For a web designer, creating a version for each screen resolution and orientation will be difficult, or at least inefficacious. Responsive web design is the solution that solves all our problems. The procedure itself is benefits from flexible grids and layouts, images and a brilliant use of CSS media queries. If the user switches from let’s say laptop to iPhone, the website should automatically switch to adjust for resolution, image size and scripting abilities. In other words, the website should have some kind of AI to respond to the screen resolution. If we are talking about WordPress themes, it might be a solution to use plugins, but this will only solve part of problems.


Responsive Frameworks


Frank- Responsive WordPress Framework

Frank’s main focus is speed. The parent theme’s default home page makes 9 database queries and consists of 2 requests weighing ~29Kb (9.6Kb gzipped). Frank keeps it basic—no Javascript frameworks, no unecessary images, just a simple, no-frills, screaming fast blog.

Responsive WordPress Framework


One% CSS Grid

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.

Responsive CSS Framework


Kube – A minimal and responsive CSS framework

The Kube Framework is not an overblown responsive CSS framework with multiple layouts and styles, all you have with Kube is a single CSS file. That is were its beauty lies – in its simplicity. The framework also supplies LESS files for the gurus out there who enjoy pre processing.

Responsive CSS Framework


Base – Super Simple Responsive Framework

A super simple, responsive framework designed to work for mobile devices, tablets, netbooks and desktop computers.

Responsive CSS Framework


CSS Hórus – A CSS framework for responsive and mobile websites

CSSHórus is a CSS framework for easy and fast development of responsive and mobile websites. It contains 16 grid columns and basic style formats (Resets, Basics, Typography, Lists, Links, Table, Form, Button) for your web project.

Responsive CSS Framework


HTML5 Responsive Blank Theme for rapid WordPress development

HTML5 Blank Theme is a WordPress shell for deploying your next project on. It’s not just a clean slate to develop with, it’s a lean foundation that includes various tools, functions and setups to get any WordPress theme developer deployed and coding within minutes. It’s feature list is extensive and impressive, ranging from HTML5 and CSS3 setups, to built-in WordPress functions, mobile/responsive ready, time-saving tools and much more.

Responsive WordPress Framework


Bourbon Neat – A simple responsive grid framework built on top of Sass and Bourbon

Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts. Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and store these values in project-wide variables to DRY up your code.

Responsive CSS Framework


Twitter Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Responsive CSS Framework


Less Framework 4 – An adaptive CSS grid system

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. The goal of Less Framework is to make building websites with multiple layouts efficient, and to make the layouts feel consistent.

Responsive CSS Framework


The 1140px Responsive CSS Grid System/Framework

The recently released 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version. The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).

Responsive CSS Framework


Reverie – Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improve readability.

Responsive WordPress Framework


Web Applications and Tools for Responsive Web Design


Viewport Resizer – A browser-based tool to test any website’s responsiveness

Viewport Resizer is a browser-based tool to test any website’s responsiveness by building yourown bookmarklet. All. you have to do is go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Responsive WordPress Framework


Responsivator – An app for testing various screen resolutions

Responsivator is a web-based app were you can paste in the URL of any page and see how it looks at various screen resolutions.

Responsive WordPress Framework


UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

Web Application


RoyalSlider – Touch Content Slider for WordPress

RoyalSlider for WordPress is a cross-device jQuery content slider with touch-based navigation and responsive layout. It has user-friendly admin area where you can manage slides, change slider settings, customize interface and add blocks-captions using custom WYSIWIG editor.

Web Application


LayerSlider – The Parallax Effect Slider

This is a well configured slider with a lot of image and text sublayers and also an embedded video. Try to resize your browser – it is responsive of course with all the images, text and video!

Web Application


Responsive CSS3 Pricing Tables

This pack of CSS3 Pricing Tables is a complete solution for building awesome tables in minutes. It comes with 6 color variants as well as 2 table variants (light or dark).

Web Application


Smooth Zoom Pan – jQuery Image Viewer

This is a javascript / CSS based image viewer prepared to display product photos, maps or any image within custom small area. Can be configured and implemented in web pages with simple copy / paste steps.

Web Application


ThumbFx – Responsive jQuery Thumbnail Effects

Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.

Web Application


Share this post on Twitter

Collection of Excellent #Tools for #Responsive #Web #Design http://goo.gl/Bpn65 via @ahrefmag

Tweet this

WE ACCEPT GUEST BLOGGERS

Iulian Grigorescu


Iulian Grigorescu is the founder of Ahref Magazine. He’s a husband, father, son, brother and Liverpool fanatic supporter. Twitter: Follow me on Twitter or Google

Get our news in your inbox for FREE

6 Comments

  1. Mary

    Great stuff :] THX

    [Reply]

  2. r4y

    an option I currently use is framelessgrid.com, i like to code styles in Less.js
    Thanks for share BTW!

    [Reply]

    Iulian Grigorescu

    There's a lot of frameworks out there and you can't cover all of them. Every web designer have he's own style of work, he's own favorite tools.

    [Reply]

  3. Alex Flueras

    Great list! Here is yet another responsive framework: http://foundation.zurb.com/ :)

    [Reply]

  4. siddanth

    Good article, but you are missing the top frameworks
    1. IVORY Framework – http://weice.in/ivory
    2. Skeleton – http://http://www.getskeleton.com/

    [Reply]

  5. Avinash

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

    [Reply]

Leave a Reply

*