With the rapid increase in the use of mobile devices and use a media tablet to surf the Internet, users not only surf the web with desktop computers but also with their mobile devices using cell phones, tablet or notebook, with a screen resolution of each device is different, from small screen to large monitor screens to access the webs. That all required an adaptive web design, responsive layout automatically adjusts to the resolution of the device.

Then what is the main purpose of web design responsive?

Mainly from web design content layout flexibility is responsive to the size of the browser width, which is the content layout and image sizes can be changed to follow the size browser so that contents can be displayed and well and users can browse the web with easy, simple and fun.

In this post I invite to see more about web design responsive, in this post I show some examples of websites that could be the inspiration, and few other resources such as frameworks, tools, plug-ins as well as tutorials and article that can help us to create a web design that is responsive and of course great website.

Inspirations

CSS Frameworks and Other Responsive Web Design Resources

In this section, we will find some responsive CSS framework, Plugins and Tutorials to help us quick and easy develop responsive website layout.

Foundation

Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.

The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don’t need two different sites — the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.

Less Framework 4

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.

InuitCSS

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

Amazium

1140 CSS Grid

The 1140 grid designed to fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser, beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Semantic

The Semantic Grid System set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML, CSS, JavaScript.

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.

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.

The Fluid Baseline Grid

The Fluid Baseline Grid system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

The Columnal CSS

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

SimpleGrid

SimpleGrid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

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. No mark-up changes needed.

Mobilize.js

Mobilize.js is a HTML5 and Javascript framework to transform websites to mobile sites, allows web developers create mobile sites out of existing websites with little effort.

Responsly.js

Responsly, dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Not only do they allow you to reach mobile and tablet users with minimal effort, they also make your context scale up for desktop users with larger screens.

FitText

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Beginner’s Guide to Responsive Web Design

Designing for a Responsive Web

5 Key Responsive Web Design Elements

CSS3 Media Queries

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

Thoughts On Responsive Web-Design & Media Queries

Content Choreography

Responsive Web Design and Mobile Context

Responsive Image Gallery with Thumbnail Carousel

The New Front End Design Stack: The Role of Responsive Design

A Brief Overview of Responsive Design

Responsive Web Design with HTML5 and the Less Framework 3