Inspiration and Resources for Responsive Web Design

Filed Under: Articles, Inspiration, Tip and Tutor, Web Designs by fandy December 13, 2011, 23:41

inspiration-and-resources-for-responsive-web-design

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

wwf

foodsense

lynnandtonic

illyissimo

owltastic

touchtech

bostonglobe

robot-or-not

css-tricks

forefathersgroup

photoswipe

spigotdesign

conferenciarails

stephencaver

profispan

sweethatclub

space150

glueisobar

fivedetails

colly

teixido

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.

foundation

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.

less-framework

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.

inuitcss

Amazium

amzium

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.

1140-css-grid

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.

semantic

The Heads-Up Grid

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

heads-up

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-

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

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.

fluid-baseline-grid

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.

columnal

Gridless

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

gridless

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.

simplegrid

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.

adaptive-images

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.

mobilize-js

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.

responsly-js

FitText

fittextjs

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

getskeleton

Beginner’s Guide to Responsive Web Design

beginners-guide-to-responsive-web-design

Designing for a Responsive Web

designing-for-a-responsive-web

5 Key Responsive Web Design Elements

responsive-web-design-elements

CSS3 Media Queries

css3-media-queries

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

guidelines-for-responsive-web-design

Thoughts On Responsive Web-Design & Media Queries

thoughts-on-responsive-webdesign

Content Choreography

content-choreography

Responsive Web Design and Mobile Context

responsive-web-design-and-mobile-context

Responsive Image Gallery with Thumbnail Carousel

responsive-image-gallery

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

new-front-end-design-stack-role-responsive-web-design

A Brief Overview of Responsive Design

responsive-design-overview

Responsive Web Design with HTML5 and the Less Framework 3

responsive-web-design-with-html5-and-the-less-framework-3

Written by fandy

a web and graphic designer whose love art and design and like to share knowledge, resources and inspirations. English not my mother language so don't blame me, I just do the best to sharing, just give me suggestion to fix it. If love my work, you can support me and follow me on Twitter


Share This :

I PROUDLY PRESENT

YOUR COMMENTS! I LOVE 'EM

CRMFRSH / Products and webdesign trends » WH#020 / DECEMBER.15 December 15, 2011,16:57

[...] Inspiration and Resources for Responsive Web Design 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. [...]

timgordon December 20, 2011,06:44

this one is pretty good.. http://www.smart-urban-stage.com/

Inspiration and Resources for Responsive Web Design | Design News December 20, 2011,11:29

[...] Inspiration and Resources for Responsive Web Design [...]

Tams Laborte December 20, 2011,11:45

This is COMPREHENSIVE, a treasure mine! Thanks for sharing. :)

Alec December 28, 2011,16:59

I think this was really an interesting article. Responsive design is the new technique of the web design world. I think these designs & resources are awesome with usefulness for web page designs. Thanks for sharing.

Elaine February 17, 2012,08:17

Great selection of websites and information. Thanks for sharing : )

Excellent Free and Premium Responsive Wordpress Themes | Artfans Design February 21, 2012,13:43

[...] on the size of the screen or browser window is important.Two months ago I posted an article inspiration and resources for responsive web design that may help you to create web designs that are responsive and exciting. And in this post I will [...]

207 Articles on Effective WebDesign – Winter 2011-2012 – PSD to HTML Blog March 2, 2012,19:47

[...] Inspiration and Resources for Responsive Web Design http://www.artfans.info/inspiration-and-resources-for-responsive-web-design/ by [...]

Prodyot March 6, 2012,02:03

A superb collection on responsive web design.
By the way-you need not worry about English not being your first language/ mother tongue.
Art is a medium of communication in itself and art in itself is a universal language which is understood by people with artistic minds.
People with artistic minds are not going to look for the grammar in your post but the creative contents.
Thanks for sharing the post.

Michele May 9, 2012,04:56

Hi guys, look at this full responsive design with a masonry layout:
OpenLastMinute

Tho Huynh May 16, 2012,18:49

These responsive themes will be the revolution of designing next year :)

Graham Miller June 22, 2012,03:35

Can you add http://www.responsivegridsystem.com to the “Responsive Resources” section? It wasn’t around when you made your list…

Up and Coming Web Design Trends in 2012 | Artfans Design July 11, 2012,16:26

[...] Quick Interface Response [...]

Mobile Websites and Responsive Web Design | Rajendra Singh – Web Design Blog March 15, 2013,18:24

[...] http://www.artfans.info/inspiration-and-resources-for-responsive-web-design/ [...]

LEAVE A COMMENT

AND MAKE ME HAPPY

Your email address will not be published. Required fields are marked *

Name*

Email*

Website

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Community News

    • Inspiring Sites of the Week No. 28

      Inspiring Sites of the Week is the weekly series where we feature the latest and hottest websites targeting the design world from around the globe.

    • Finding Blue Host Coupons

      Blue host is one of the most trusted web hosts in the world. With over two million customers a huge list of features, they can arguably be called the world’s best web host.

    • Digital Art and Landscapes of Binu Rojers

      Collection of landscapes and digital artworks from illustrator Binu Rojers

    • How to get started with SVG

      In the last few months, the buzz around SVG images has grown and grown. SVG has been around for years, but it’s only recently that it’s started to look like a real contender.The hype around SVG isn’t just some hipster trend, SVG completely solves issues that file formats like JPG completely fail to address.If you want to start using SVG, this article is for you. I’ll guide you through getting your SVG from Illustrator into HTML and then teach you to modify that image using CSS.

    • TUESDAY FONTS: Hipstelvetica, Glober and Ormont (free fonts)

      This time in TUESDAY FONTS we present to you another great three typographies: Hipstelvetica, Glober and Ormont and they are free fonts.


    SUBMIT LINK | MORE NEWS

Recent Comments

    • Dani : Trimakasih Pak.. Izin unduh ya... more
    • Dani : Motif-motif batiknya bagus sekali Pak. Mksh sudah mempostin... more
    • Lora : I love these! Do you have a "Youtube" icon in this style?... more
    • Rio : Mas, sampean orang dermawan. Trims yo..... more
    • Mark Wilston : Great set of points you have highlighted here, I would like ... more

Powered by:

Content Distribution Network

Twitter: ArtfanDesign