Chicago Camps

Real World Responsive Design Workshop

Saturday, June 21, 2014

Harrington College of Design – Chicago


Real World Responsive Design

This one-day, hands-on workshop is for those that are ready to start building responsively or are having trouble integrating responsive techniques into their workflow. They’re convinced of the benefits of a fluid, device agnostic web and believe in mobile first as a best practice, but need a helping hand in breaking free of old build habits.

This workshop will make the connection between best practice and actual workflow through a mixture of tutorials, examples, exercises, discussion and pair programming that will be crafted to make the connection between responsive best practices and real-world projects. Together we’ll begin the day with a static site design and work through the day so you can take home HTML and CSS that translates the design into a device-agnostic responsive page that will load in whatever browser you desire. In the process we’ll explore the intersection of best practice and project compromise in a way that will make it easier for us all to make better decisions as we continue to build the responsive web.

Topics Covered

  • Planning a responsive build from a pre-existing design
  • Converting a static design to a fluid web page
  • Writing lightweight and modular CSS
  • Mobile first techniques (and how to apply them to non-mobile first projects
  • Crafting device agnostic breakpoints
  • Responsive design beyond browser width
  • Making better-informed compromises
  • Tools that make hand-crafting responsive sites easier

Required Preparation for Attendees

You should bring a laptop that can open and work with PSD files and has a web text editor such as Coda or Sublime Text. You should have a working understanding of HTML and CSS and know the basics of writing media queries to adjust your page designs.


Mike Gibson

Mike Gibson
Lead Designer, Table XI

Mike is the lead designer at Table XI. He enjoys semantic markup, modular CSS and long-walks on a moonlit beach. If he’s not in front of his computer you can probably find him re-organizing his record collection or posting more photos of his dog Chupacabra to Instagram.

For more, keep up with Mike on Twitter as @lovehasnologic.


Harrington College of Design

Harrington College of Design

About Harrington College of Design

In the heart of Chicago’s Loop, great location with lots of local flavor. Hosted in a school for design, Prototype Camp Chicago offers a great setting for learning.

Check out Harrington College of Design.

Where to Park?

There are several easy-access parking garages available in the surrounding blocks.

Where to Stay?

Coming from out of town? There are a lot of hotels in the surrounding area that may work well for you and we have already done the searching for you!

Chicago Sponsors Camps

  • Rosenfeld Media
  • Simplecast
  • Lead Honestly
  • Columbia College Chciago

Code of Conduct

All attendees, speakers, sponsors and volunteers at our conference are required to agree with the following code of conduct. Organizers will enforce this code throughout the event. We are expecting cooperation from all participants to help ensuring a safe environment for everybody.

The Short Version
Full Version

Our conference is dedicated to providing a harassment-free conference experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of conference participants in any form. Sexual language and imagery is not appropriate for any conference venue, including talks, workshops, parties, Twitter and other online media. Conference participants violating these rules may be sanctioned or expelled from the conference without a refund at the discretion of the conference organizers.