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-circleimageimagesinstagramFill 1linklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Introduction to Responsive Web Design via Twitter Bootstrap with Denver LAMP

Please note this meetup happens on Monday instead of the usual Wednesday and is hosted at SHIFT - Boutique Workspaces.

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Responsive web design uses CSS3 media queries, (an extension of the @media rule) to auto-configure the layout. Ethan Marcotte coined the term in an article - http://www.alistapart.com/articles/responsive-web-design/ - in May 2010. Refresh Denver is co-hosting this event with the Denver LAMP meetup.

What is Twitter Bootstrap?

A small group of Twitter employees set out to improve the team's internal analytical and administrative tools, and two years later it is a full fledged front-end toolkit for rapidly developing web applications that is gaining popularity. It was released in Aug. 2011 - https://dev.twitter.com/blog/bootstrap-twitter - and version 2 came out in early 2012 - https://dev.twitter.com/blog/say-hello-to-bootstrap-2

What's so great about it?

To see Bootstrap in action, check out this - http://twitter.github.com/bootstrap/examples/hero.html - example...first maximize the page, then slowly drag your mouse to make the page more narrow until the width is 320 pixels...the page elements should automatically reconfigure several times.

Does this meetup need any volunteers?

We are currently looking for co-presenters with experience in the subject, as well as volunteers to help with various aspects of the meeting (ie. videotaping the presentation). The meetup will be presented by Chris Baril, who holds a Computer Science B.S. degree from the University of British Columbia and has been developing websites since the late 90s. For more information visit chrisbaril.com.

Who should attend?

INTENDED AUDIENCE: Front-end developers

DIFFICULTY LEVEL: Intermediate/Advanced

Where should I start?

http://en.wikipedia.org/wiki/Responsive_web_design

Join or login to comment.

  • Chris B.

    Thanks to everyone that attended the meetup!

    February 12, 2013

  • Elizeo B.

    Great intro to Responsive Web Design!

    February 12, 2013

  • A former member
    A former member

    Regarding debugging on devices (for the equivalent of using Firefox+Firebug or Chrome Dev Tools), Adobe has a cross-device solution, Edge Inspect (http://html.adobe.com/edge/inspect/), which was they demoed for at a Refresh Meetup back in November.

    I haven't tried it myself, but it looks to be the best choice for cross-platform web development.

    For developers with access to a Mac and an iOS device running version 6+, there's a simple solution that just involves a couple settings and attaching the device to the Mac. But while I've used this technique and found it useful, the utility is limited to a narrow target of clients. Here's a YouTube video I found of the technique in action: https://www.youtube.com/watch?v=L1G7tbJCBZY

    February 12, 2013

    • A former member
      A former member

      Oh and someone mentioned the settings in Chrome Dev Tools to spoof the User Agent and fix the viewport at a particular screen resolution. This is an excellent suggestion and I've used this approach extensively, finding it even can reveal various quirks that truly appear on a given device. But, of course, it still can't replace testing on actual devices.

      On that topic, if you're not familiar with the concept of a device lab, there's an emerging trend, in the spirit of open source software, for local developers to pool their resources and arrange for a wide variety of devices to be made available to each other. There's a Denver Meetup for that very need: http://www.meetup.com...­

      Their page has links to some of the groups and companies who are pioneering and facilitating this "share and share alike" approach.

      February 12, 2013

  • A former member
    A former member

    Someone asked about how to deal with tables in a responsive site and I mentioned a couple options:

    1) If the content logically demands a table, Ben Callahan has a potential solution that allows the cells to reflow like block-level elements:
    - https://github.com/bencallahan/rwd-retrofitting/tree/master/Tables
    - http://codepen.io/bencallahan/pen/xvmCe

    His examples are very plain and may not convey how simple and effective the approach is.

    2) If the actual content is less structured, but would still benefit from visual alignment when space allows, using a definition list maintains a logical, semantic relationship in code while providing for the flexibility necessary across various breakpoints/views. I don't have live code example, but the key is that each <dt> validly allows multiple associated <dd>, in a one-->many relationship.

    The key is to first review the content and determine what markup would best serve the need of serving that to a user.

    February 12, 2013

  • Jenny T.

    Thanks, Michael and John for setting this up! Great presentation, John.

    February 12, 2013

  • A former member
    A former member

    A good focused, introductory presentation.

    February 11, 2013

  • Megan E E.

    looking forward to learning more about this topic and diving in deeper. Looking forward to connecting and meeting folks. Thanks!

    February 10, 2013

41 went

Our Sponsors

  • Galvanize

    We are a community of innovators and entrepreneurs

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