responsive web design @ girl geek dinners

Last night, the lovely women at Sydney Girl Geek Dinners were given a treat – a presentation by me 🙂

Between April and July, one very awesome team at Mi9 built the YouDecide9 site.  It’s a project integrating Ninemsn, Twitter and the Nine Network’s audience in the lead-up to the federal election.

Quite literally, everything about the project was new to me. It’s built on node.js using CoffeeScript, deployed to Amazon Web Services using Beanstalk, and we used sass for the front end styles. But one of the most interesting things to me was the page’s responsiveness.  It’s the first responsive site I’d ever built, and the concept is so natural that I can’t understand why we, citizens of the internet, haven’t caught on to this earlier.

If you go to the website and make your browser window larger and smaller, you’ll see that it adjusts to fit. That’s responsive design in a nutshell. The user always has a great experience, no matter what device they’re using. Mobile browsing experiences have traditionally been the second-rate versions of their desktop cousins, but responsive design solves all of that.  And, with mobile internet usage predicted to overtake desktop internet usage this year, it’s an increasing problem that people need to tackle.

From my perspective, the most interesting points from our project were:

  • Designing for mobile first, since it’s the one with the most limited resources
  • Adjusting the mobile version of the site to the desktop design took around 15% more effort (a win compared to the effort of building two entirely separate sites, one for desktop and one for mobile)
  • The range of CSS media queries available is incredible. We generally queried the screen width to adjust our content.
  • The Viewport Resizer Bookmarklet, an extremely handy tool for testing responsive sites.

The slides for my presentation are available on prezi. Thanks so much to the Sydney Girl Geek Dinners group for being a wonderful audience.

One thought on “responsive web design @ girl geek dinners

  1. Pingback: Wrap up of August Girl Geek Dinner meetup | girl geek sydney

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s