Responsive Web Design WordCampNL 2012

wordcampnl

At WordCampNL 2012 I presented on the importance of thinking future friendly regarding webdesign. That means that you no longer can hold on to the existing self-defined paradigm of what the size of a website is. We derived too much ideas from areas like graphic design, but like Marshall McLuhan said ‘the medium is the message’. And that also has it’s implications regarding possibilities and constraints.

You might think that constraints are a bad thing, but when it comes to sizing the web (640×480, then when screens became larger 800×600, later 1024×768 etc..) we imposed them on ourselves. And now with the fast increasing amount of people visiting websites from all kinds of devices, with broad ranging screensizes and capabilities, we realize that fluid was the way to go all along. Although some designers scream out loud now they realize they lose control of their canvas. See the presentation below to get a better look.

Now we call it Responsive Web Design, cause of the website responding to the device it’s been viewed upon. I call it just Web Design, done right. With a mobile first approach, you can cater to a lot of audiences without having to maintain X development builds of your website.

You can see the presentation I did for WordCampNL, a yearly organisation gathering all WordPress fanatics in Holland, Belgium and even some British, Swedish, Portuguese and Italian enthusiasts below.
The presentation is an introduction to RWD, not a detailed way on how to achieve a fully responsive site, listing all possible pitfalls or all RWD patterns possible to handle your navigation, search bar, big dropdown issues or whatever. See it as a starting point on

  • Why Responsive Web Design
    • What is design ?
    • What is web design ?
    • What is happening (mobile) ?
    • What are the options ?
  • How to do Responsive Web Design (aka what does it entail)
    • Think proportional
    • Think modular
    • Progressive Enhancement
    • Media Queries
    • Breakpoints
    • Tools, tips and polyfills

Note: in a new post where I cover Responsive Day out, a conference completely dedicated to Responsive Webdesign, you can learn a bit more from the tips the speakers gave and (here and there) my opinions and thoughts about them.

Here’s the presentation I did at WordCampNL 2012. Video is recorded, but never released. I hope to get my hands on it someday. Update: yay. Thanks to Daniel I got my hands on it.

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>