We Meet the third Saturday of each month at the Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm

What we did

September 2013

This month we started a series on Responsive Web Design (RWD). Responsive design is all about making a site look right no matter what device someone uses to view it. There are three major elements to RWD Fluid layouts, media queries and fluid images, we started with Media Queries. Media queries are a type of css code used to help your web page know what device someone is using to see your site. It then delivers a page formatted to suit the needs of the device. In the first hour we had a look at a video tutorial on the basics of media queries and then went on to have a detailed look at how the code used in the tutorial worked. We even added some ideas of our own.

After the break John showed us how he had applied RWD to his new site and gave us a very detailed look at the css code he had created. He also showed us a site that allows you to test the media queries in a virtual simulation of the devices the media query was aimed at; it was called Protofliud4 http://protofluid.com/?c=mediaQueries.

We then watch another video with a more detailed look at the semantics of media queries showing how they are constructed in some detail.

Finally I showed the group some of the book publishing sites, forums and blogs relating to web design. Here are a few
 http://www.sitepoint.com/
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.responsivedesignmagazine.com/the-media-query-responsive-design/
and http://www.peachpit.com/
This is a publishing house that offers a $10 deal on a book each week. They publish the Visual Quick Start Guides; the one with the white rabbit on the cover.

Steve South

Sig Leader