Spending hours manually designing your pages for the responsive web? Layout your pages in minutes for beautifully responsive pages on desktops, tablets and smartphones.

Welcome to my CSS3 layout workshop
Hello, and welcome. In this index file, I have provided links to all my final examples, so you can access them more easily, especially from mobile devices.
Thanks!
Chris Mills

This is a demo application built by my team at Adobe using content provided to us by National Geographic. It's implemented entirely with web technologies.

Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. Adobe has had a long history of working with content creators who are passionate about layout and design, and so has been active in applying this knowledge to the web with contributions to many evolving web standards.
 With the help of National Geographic, we used content from their feature titled ‘Forest Giant’ to build a prototype showcasing how these features can enable rich web layout and responsive techniques. This article will show how we built some particularly interesting characteristics of the site. For a concise overview it’s worth watching this video below where Christian Cantrell walks you through the various features of the site.

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids

I'm sure we all agree that responsive web design has been one of the biggest subjects in the last few years and will continue with the growth of mobile. As a senior front and backend developer with a strong interest in research and development at my company, I am responsible to evaluate techniques like RWD. Whenever I received a link to a totally new CSS grid system, I became more and more skeptical. They did not feel "right" to me, but I wasn't sure why.
Then I happened to come across a great article by Ian Yates titled "Life Beyond 960px: Designing for Large Screens" which introduced me to the term "Screen Real Estate". Prior to that, I did some deeper research using rem units in CSS which was a fortunate coincidence. Suddenly I knew what felt wrong.
When talking about RWD we mostly talk about devices below the target width of our layouts. But what about larger screens? Most of you will agree that a non RWD website with a target width of 960px looks a bit odd or lost on such a screen. Things are becoming more obvious when we talk about people accessing our websites with a 60" TV. Sure, these TV sets will most likely still only have full HD resolution. But keep in mind that whoever sits in front of them is probably at least 4m/10f away from the screen.

There’s a debate over which technique of creating mobile-ready websites is the best.
Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).
A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS from the same URL depending on the device a web page on the site is being requested from (which has been referred to as responsive design + server side components).
This article will discuss each of these methods.
Real-world examples of websites using a particular method are provided under each section.
The mobile device used to test and gather data for all examples is an iPhone 4 using iOS 5.0.

Workless started out as a mashup of all the great things I liked about Twitter Bootstrap and HTML5Boilerplate. The more I worked with with it, the more I added in order to make life easier when working on any project.
It's now pretty much turned into a framework in it's own right, with all the stuff you need and none of the stuff you don't. It's about saving time and keeping your projects DRY.

Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Browser support is going to grow quickly, so you’ll be ahead of the game when support is wide enough for Flexbox to be practical. Read on if you want to know what it does and how it works!