addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramlinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Responsive Design w/Aidan Foster

Speaker:

Aidan Foster - @finteractive
http://responsivedesign.ca

Drupal Website Project Manager and UI Designer. Obsessed with Responsive Web Design. Owner of Foster Interactive Inc.

Aidan is a project manager, and front-end programmer focused on responsive web design. His team created responsivedesign.ca, an information website to inform and promote responsive design to a non-programmer audience.

Aidan owns boutique web studio Foster Interactive, that works with SME’s and Agencies to implement responsive websites. Aidan has over 10 years experience in web design and has worked in a wide range of sectors including resource, legal, financial services, and non-profits.

Aidan is actively involved in the open-source software Drupal, and presents workshops at the annual Toronto Drupal Camp. Aidan hold a Honour’s Bachelor of Fine Arts in New Media from Ryerson University’s School of Image Arts.

Responsive Web Design - A New Workflow.

Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components:

  • Flexible Images
  • Fluid Grids
  • CSS Media Queries

Well it seems Ethan let quite a few cats of out bag with this one, and we've been trying to herd those cats ever since.

What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management, and creative concept development all started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - There’s simply too many variables to account for in graphic design software.

Responsive Design requires a new process for creating websites, and new ways of interacting with teams and clients.

This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions for where to go to learn more. We’ll finish up with a Q&A session to share everyone's experiences.

Join or login to comment.

  • Aidan F.

    I've finally got the slidecast posted up. It's got all the slides and audio recorded from the presentation. Hope it's useful for everyone.

    http://responsivedesign.ca/blog/slidecast-rwd-introduction-workflow-overview

    1 · October 22, 2012

  • Stanislav

    FireFox has also 'Web developer' add-on that allows you to view Responsive layouts.

    October 19, 2012

  • Chris B.

    Does anyone remember that little Chrome hint that Matthew showed last night? I've got the developer toolbar on the right side but clicking on the Settings icon doesn't do what he was able to. Is this another plugin??

    October 19, 2012

    • Ed P.

      Here's a link with instructions for Chrome Dev Tools User Agent Settings: http://www.howtogeek....­

      October 19, 2012

    • Matthew P.

      Here is the original video that I learned it from:
      http://www.youtube.co...­

      October 19, 2012

  • Marcin B.

    Great presentation!

    October 19, 2012

  • Aidan F.

    A question came up about the library used for making old IE's work with HTML5 - It's called HTML5shiv http://code.google.com/p/html5shiv/ - But normally I just used the build that comes with HTML5 Boiler Plate's Initializr Project - http://www.initializr.com/

    October 19, 2012

    • Werner J.

      <!--[if lt IE 9]><!-->
      https://github.com/sco...­
      <!--<![endif]-->­

      Couldnt have made www.freethechildren.com,­ www.weday.com, and www.metowe.com without it.

      October 19, 2012

  • Chris B.

    Very informative Meetup. Kudos out to Aidan and Matthew for their efforts!

    October 19, 2012

  • Christian A.

    Aidan provided a concise presentation on Responsive Design that was chalked full of useful tips for effective workflow. Great meet up!

    October 19, 2012

  • A former member
    A former member

    Very relevant topic, concisely presented at exactly the right level of detail for the time and audience. Great job Aidan and Matt. (Thanks for dinner Matt)

    October 19, 2012

  • Ed P.

    Another home run! Intelligent and practical presentation. I especially liked the practical advice on pitching responsive design to clients.

    October 19, 2012

  • David M.

    Good

    October 19, 2012

  • Matthew P.

    Great speaker.

    October 19, 2012

  • Emad A.

    focused presentation covers essentials for responsive design!

    October 19, 2012

  • Mark F.

    Great Meetup. Thanks Matt and Aidan!
    (and thanks for the ticket to AndroidTO!!!)

    October 19, 2012

  • Justin K.

    Excellent meetup. A great wat to get started in responsive design. Thanks!

    October 18, 2012

  • Frank

    Excellent

    October 18, 2012

  • A former member
    A former member

    Great meetup, thanks.

    October 18, 2012

  • Mike B.

    Awesome meet up :)

    October 18, 2012

  • A former member
    A former member

    great meetup, thanks!

    October 18, 2012

  • Niyaaz

    learnt alot, was great. Thank you!

    October 18, 2012

  • A former member
    A former member

    Something related, have a look at Andy Clarke's 320 and up framework http://stuffandnonsense.co.uk/projects/320andup/

    October 18, 2012

  • Chris

    I don't understand how Meetup does its waitlist handling. I got on the waitlist when there were only 12 others ahead of me. And today I've seen it drop from 45 on the waitlist to now 27, and it's still got me waitlisted.
    How disappointing.

    October 18, 2012

  • Firoz O.

    I can't make it. I just rsvpd no. Some one else can go.

    October 18, 2012

    • A former member
      A former member

      I'll try and take notes, hope you can make the next one. All the best.

      October 18, 2012

  • A former member
    A former member

    Looking forward to this one, I've been following RWD for a while ever since Andy Clarke first mentioned it back in '10. Should be good.

    October 18, 2012

  • Ivan C.

    Any chance to bring 2 more people?

    October 18, 2012

  • Ed P.

    Are you an early adopter?
    I've made a free tool (with a responsive design :)) to help you network more effectively at meetups: https://4click.net/tech/toronto/Responsive-Design-w-Aidan-Foster/83497202
    There are a few beta invites available if anyone's interested. See you Thursday!

    October 17, 2012

  • George Z.

    Aidan, 2 huge questions (at least for me) that I hope you can answer or expand upon:
    1. Is mobile-first RWD true RWD? It's a kind of a philosophical question but I'd like some practical insights.

    2. How do you sell RWD to those corporations with mammoth, "traditional" websites?

    Chris, see if this responsive website aligns with what you need - ghiglione.ca - it's a mobile-first RWD I've just completed based heavily on Brad Frost's demo site. If it helps you can use the website above as a case study for your preso Aidan. For the good and bad things :))

    October 12, 2012

    • Jonathan W.

      Would 'responsive' also answer the question as to what content gets displayed in what order on a particular device? In other words, is there a 'Commandment/hierar­chical' list of content for respective devices or is it always dependent on the nature of the content? Make any sense?

      October 12, 2012

    • Ian I.

      I started writing a long response but I think I will turn it in a blog post instead and woud like to give Aidan something to talk about :) , but the TL;DR answer I would be : Mobile First provides a wonderful way to focus and prioritize content. It also is a great way to be able to say "no" to low priority content. In answer to @Paul : same design just larger containers and surfacing some 2ndary content; their is no mobile web / desktop web, there is only the web. to @Jonathan : mobile first focus you that what content and what order.

      October 12, 2012

  • Shanta R. N.

    Just changed my RSVP. Whoever gets it first! Have fun. Will catch the next one.

    October 12, 2012

  • Aidan F.

    Hi Everyone, I'm planning to have lots of time for Q&A after the presentation. If you've got any burning questions related to responsive design now post them in the comments here and I'll do my best to try to cover them.

    October 12, 2012

    • Chris B.

      Looking forward to it Aidan! While I've been reading and learning a lot about this, I'm also keenly interested in meeting designers/developers who are well up to speed in RWD to help with projects that I have in house.

      1 · October 12, 2012

  • Sara B.

    Wish I could come but I am on the waitlist :(

    October 10, 2012

  • Chris B.

    I'm really hoping that a location is found soon and that it can accommodate more than 50 people as I'm on the wait list and keenly interested in this topic!

    October 8, 2012

    • Matthew P.

      Well Chris, you've got your wish. Opened up to 100 members. I look forward to seeing you there.

      October 10, 2012

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy