Best web design resources of August 2011

It’s resource time and here’s the August round up that left a plethora of responsive and HTML5 resources, like a responsive grid with golden proportions, HTML5 Boilerplate 2, fluid width videos, images and even responsive sliders. Read on!

Golden Grid System

GGS is a foundation CSS and HTML pack to build your own responsive grid. The grid hides or displays gutter or columns depending on the width of the device. Among other nice features, the typography baseline is correctly adjusted to match the font size in the differents screen widths so your text and images are always aligned.

HTML5 Boilerplate 2.0

The metal-solid foundation for HTML 5 released version 2, now using normalize.css as the base stylesheet instead of the old reset, respond.js to embrace responsiveness and Modernizr 2 for HTML 5 compatibility in old browsers.

Fluid width videos for responsive layouts

A good tutorial by .net magazine that walks you through the layout of fluid videos in responsive environments, including videos placed through iframes or embedded using the object tag.

Responsive Images

This approach to responsive images is better suited for environments where the image size will change dramatically. Instead of merely resizing the image, an image with the (closest) appropriate size is delivered using a combination of .htaccess and JavaScript.

FlexSlider: responsive slider

FlexSlider works as a jQuery plugin providing a slideshow for your responsive layouts. Supports images of course, but also any kind of HTML element, so you can add YouTube videos, maps from Google Maps and any other HTML stuff. Licensed under MIT license.

Test your responsive websites

Test your responsive layout using this online tool that will load your (online) website into several dimensions that mimic those of the iPhone and iPad.

HTML5 Geolocation…/requesting-location?cid=106

In this video, ThinkVitamin teaches how to request the user location using Geolocation feature from HTML 5 specification.


Twitter released Bootstrap: a toolkit to kickstart development of web applications and sites with a foundational CSS and HTML for typography, forms, buttons, tables, grids, navigation and more.

Slides with HTML

Deck.js is a jQuery plugin that empowers you to create slides for your presentation using only HTML and CSS3.

AJAX loading animation with CSS3

With spin.js, you can build your own cross-browser AJAX loading animation using only CSS3 and JavaScript without any image. Spin.js has been licensed under MIT so you can use it on your commercial works.

Zoom Anything

Chris Coyier published a jQuery plugin to zoom images, text or other block elements like calendars.

WordPress Resources

Simple Facebook Connect updated to 1.0

Samel Wood, A.K.A. Otto, updated his popular plugin Simple Facebook Connect with a myriad of new features and optimizations. If you already use SFC, this update will make it even better.

User Profile Widget for WordPress

Skeleton Responsive Theme

This is a free and clean responsive theme that has a smooth integration with JigoShop and bbPress for e-Commerce and forums, respectively.

Launch Effect

A single page WordPress theme to build products or businesses launch pages. Includes some useful features like link tracking and statistics.


Visual Design is not a thing by Mark Boulton

Why we gave up web design after 10 successful years by Oliver Emberton

The top 10 SEO myths by Mark Buckingham

Sizing with CSS3’s vm and vh units by Jonathan Snook

Writing tips by HTML5Rocks

1 thought on “Best web design resources of August 2011”

Leave a Reply