Central CT Drupal Meetup Presentation

Posted September 21, 2011 by Shaun Gorneau

I recently gave a presentetion at the Central CT Drupal meetup. The topic of the presentation was "Designing for People".

Keynote Presentation

HTML Version
PDF Version


HTML, CSS, and Media Queries Walkthrough

Just to summarize the presentation, I talked about my method and process for designing web sites to accommodate all screen sizes and simple tweaks to optimize for mobile (touch screen) devices.

With the Keynote presentation, I started by introducing layout techniques (Fluid, Adaptive, and Responsive) for anyone that may not be familiar with them. I briefly talked about table layouts...what they are, why they existed, and why they should never be used. Many designers may think that is an irrelevant topic this day in age....but I still see a ton of it going on. And, someone may have to maintain a site that was developed years ago with a table layout. I just had to point out the reasons to move away from table layouts if anyone is managing/designing one. Then I introduced media queries and their detection capabilities. Everything up to this point was presented so that everyone would understand the foundation for Responsive design. I then explained how I integrate Responsive Design into my process to accommodate virtually any screen size.

Next came the viewport meta tag and how that optimizes a web site's "scaling" for small screen devices (which, by default, tends to fit the entire site's width in the viewport).

Then I broke away from the Keynote presentation and demonstrated some very, very simple HTML5 markup with a step-by-step build up of CSS rules to show how one HTML document can take on many, many front-end presentations. Both the HTML and CSS are very simple by design; I wanted to show that "simple works" (and, personally, I think simple is best). You can follow the example site's navigation from left to right to see the build-up/modifications of CSS rules that allow the site to morph into the final responsive/mobile-optimized site. The only thing that changes from page to page is the inclusion of CSS files (the HTML markup never changes).

I wrapped up with "what does this have to do with Drupal?". It may be obvious that, for themers, this is very relevant. But, module developers could take note of the simple (semantic) HTML and work that into their process for module markup output.

Much more was explained in the "talk" of the presentation...but you should get the gist from the slides.