I had no idea this meeting would help me understand Responsive Web Design, but it did!

Eric Browning, the speaker, and Art Director at Blue Frog Gaming, was very to the point, and explained the responsive web design system in easy to understand terms.

A LITTLE BACKGROUND ON WEB PAGE WIDTH

There have essentially been two ways to make a web page: You can use a flexible width (liquid and elastic), which fills your screen, or a fixed width.

Liquid layouts with a width of 100% will fill your monitor, but you’ll run into problems like enormously long lines of text, which is hard to read, especially on modern day widescreen monitors. This is not a great approach to adaptive design. Example: webstyleguide.com

Liquid layouts evolved to elastic layouts where you can add a minimum and maximum width, which gave a little more control, and you wouldn’t have any tiny or huge text columns. Example: lacantina.co.nz

Up until then those were the only options to create a page that would fill the screen in some dynamic way.

Alternatively there has always been the fixed width layout, which indicated the start of responsive web design. The width of fixed web pages have increasingly gotten wider, but because you can set a specific pixel width, you have control over the size of the page, and elements on it. Example: jobenl.com or gap.com

That led to the holy grail of designing web pages with a 960px width, which fits nicely in a 1024x768 monitor. A lot of people stopped thinking about width and just used that as a standard size. See 960.gs for the 960-grid system.

But what is happening now is that we’re shifting away from that…

RESPONSIVE OR ADAPTIVE WEB DESIGN

Eric quoted Ethan Marcotte’s (author of Responsive Web Design) by saying responsive web design is a clever system that has been developed (of media queries, css, and fluid grids/images) to give users of your site different layouts of the same content based on their capabilities.

Those capabilities may be width, pixel density (mobile devices with high density/hi-resolution), and as a designer I know you might be viewing the content in a way that’s not 960 on a laptop to desktop.

Based on that you want to create a page that can redesign itself, or rearrange itself to best fit the devise or purpose you’re using it for.

Examples of responsive web pages (drag the browser window in and out to see what happens):
- janrichard.com
- 6logos6months.com

WHY USE RESPONSIVE WEB DESIGN?

Many people these days are on the go and aren’t sitting behind a computer screen using a mouse or keyboard. People are using a smart phone, TV, video system, or tablet to get their information. That will only become more so in the future, and as a designer you don’t know what the user is doing when they are looking at your site. Because of this you could start designing different versions of a web site so it adapts to whatever devise the user is viewing it on. A user might want different content when viewing on a mobile. The Foodsense website shows how layout and content change when the browser window is smaller or bigger.

Conclusion: If you really want to understand the concept of responsive web design, get the code you need to make your site responsive, and be on the cutting edge of customer-centered web design read this article: alistapart.com

I found the meeting worthwhile, and I’m definitely going to attend more of the Web SIG meetings!