Mobile is the new desktop. Mobile is already the preferred choice for most smartphone users.

Responsive web design (part of web design that helps your website render appropriately on every kind of device such as a smartphone and a tablet) is, as a result, growing in importance. It makes practical sense for businesses to develop mobile versions of their websites or throw responsiveness into the equation while developing a website such that websites transform and render as they should irrespective of the device consumers use.

For designers and non-designers alike, the search for the best responsive, website builder platforms is never-ending. The most popular options for developing responsive websites from the scratch start with grids and frameworks which are custom CSS modules which give your responsive website development a head start or you can use mobile website design software to convert your website to mobile.

Here are a few to start with:

Twitter Bootstrap

The Twitter Bootstrap framework has been around for a while but it’s the Bootstrap v2.0 (a huge update which was almost a rewrite from scratch), which just went fully responsive.

Since responsive design is a “must have” and has clearly moved away from “nice to have”, frameworks such as Twitter Bootstrap go a long way in easing the difficulty level while working on your responsive design projects. The Twitter Bootstrap framework features the usual grid system layout, media queries, Attribute value selectors, and content transformation through viewport size changes. It also features progress bars, button groups, carousels, and a lot more.

It’s big, functional, popular, and almost easily the best platform for responsive website design.

Gridless

HTML5 and CSS3 make for the foundation for websites of the future (responsive web design being a staple, of course). Gridless, then, is an optionated HTML and CSS3 boilerplate with a focus on “mobile first responsive design” while rending the websites responsive and browser compatible.

Gridless follows the “Don’t Bore Yourself” approach. It essentially takes out the boring aspects of developing websites and gives you a ready package to implement these boring aspects straight off the package by using special features such as CSS normalization, using beautiful typography, IE bug fixes, and tons of other tricks.

Gridless (as the name suggests) comes without any predefined grid systems so that it essentially becomes your starting point for responsive design. Start with it. Edit, tweak, and overwrite depending on your unique requirements.

Semantic Grid System

It goes with the tagline “page layout for tomorrow”, and the Semantic grid system truly is. With the exception that the “tomorrow” is already here, the Semantic Grid system solves inherent problems that CSS grid frameworks have: not semantic, not fluid, and not responsive.

Almost as if on cue, Semantic Grid system rises up to the occasion. It offers responsive web site designs with the very problems other frameworks present. Semantic Grid system makes your responsive website design semantic, fixed or fluid, responsive, and gives designers the flexibility to work with the number of columns, column width, and gutter width right off the style sheet.

Proportional Grids

When building responsive websites, designers usually face problems with nesting grids, redefining CSS again and again, and also with the percentage values to define viewports (which change). Matt (also called as Boon) then developed Proportional Grids by using the CSS property “Box sizing” that essentially brings in fixed gutters into fluid columns. This keeps the distance between columns equal at breakpoints (determined in relation to “font-size”).

According to Boon, on his demo site, he says, “Don’t think widths, think proportions” – a certainly great way to approach responsive design.

Frameless

If you dig responsive design but if you hate working with grids you should look at Frameless as an option. Note that Frameless doesn’t have any code. Unlike other frameworks it doesn’t come with a whole set of pre-made code or boilerplate. Frameless is an idea; an approach. It’ll still require you develop code from scratch. Another important distinction with Frameless is that it operates on fixed width columns and not on fluid type, which most other frameworks are.

Frameless is a great foundation for your responsive design. As Frameless dictates, it makes sense to start with design for the smallest screen size and work your way up from there.

Amazium

It’s simple, elegant, and well, “amazing”. Amazium makes use of 960-grid system (preferred build for the common screen size resolution of 1024 x 768 which has a max width of 960px). Off late, the Amazium framework has been stretched to include the seemingly popular 1200 px version. Amazium uses the 960-grid system with 12 columns. It features “offsetting columns”, typography, “show and hide”, responsive images, videos, forms, and media queries. Amazium is “retina display ready” too, by the way.

Foundation Framework

Foundation 3.0 is one of those versatile frameworks for responsive web design built on Saas –a powerful CSS processor complete with tools and customization options to build on top of Foundation.

Foundation 3.0 taps into new, awesome web technologies to get you the best “foundation” (no pun intended) for your responsive web design. It features “flexible grids”, “rapid prototyping”, and “multi-device” buildup. It also helps you to avoid creating different sites for different screen sizes by letting you create one website that renders appropriately. The Foundation 3.0 network also has icon fonts, off-canvas layout, responsive tables, and stencils to give your designs a quick start to build on.

320 and Up

Have you always been looking for lightweight, easy-to-use, and content-first responsive web design framework? 320 and Up, created by Andy Clarke started as a tiny mobile phone HTML5 design boilerplate but it eventually grew up. Today, it features at least 5 CSS3 media query increments; a ready design “atmosphere” which includes textures, colors, and typography – separated from the layout; bootstrap styles for other elements such as buttons forms, and tables; LESS and Sass mixins; and much more.

The Goldilocks Approach

Today, we have the smartphones and tablets. What would we have tomorrow? What happens if the number of device types increase? Do we have to work on responsive designs all over again?

We hope not, thanks to The Goldilocks Approach, which jettisons the tendency to depend on device sizes and aims to develop a “universal design” that should fit almost any device today, and in the future. The approach makes it possible to develop device-independent responsive web design by using CSS properties such as “ems”, “media queries”, “max-width”, and pattern translations.

Is this where the future is? Does the presence of so many grid frameworks to facilitate responsive design make mobile websites a distinct reality?

There’s no dearth of options for a great foundation for your responsive website design. All that’s left for you to do is to choose your favorite platform out of this list and work your way up to create the best responsive design for your websites.

Written by Pete Juratovic: Pete Juratovic is the Strategic Director and founder of Clikzy Creative, a website design company in Washington, DC. Clikzy Creative also offers fashion website design, search engine optimization, and many other services.