Smashing Conference

Freiburg 2014 SmashingConf Freiburg 2014 15th–16th of September 2014

When Responsive Design Meets the Real World

jason-grigsby

Full-day workshop • Dispel your fears of media queries, image optimization, and multi-device testing. See how fast and freeing mobile-first, responsive web design can be right now.

With Jason’s help, you’ll work independently to convert a fixed-width desktop design to a responsive layout. You’ll then update it with a viewport metatag, learn to find natural breakpoints, and test its performance. He’ll also help you reorder CSS, modify it to scope images properly, do more testing, and convert media queries to ems.

In just one day, Jason will teach you how to:

Morning Session

  • Designing mobile-first responsive web designs
  • Correctly apply media queries and make an existing design responsive
  • What happens when you leave out the viewport metatag
  • The differences between minor and major breakpoints
  • Testing and optimizing performance
  • Why most responsive sites load slowly and with errors
  • Tests for optimizing performance—from inputs and retina display to images
  • The five steps to designing for peak performance and intuitive UX

Afternoon Session

  • Detecting devices the right way
  • Why device detection affects your responsive design strategy
  • Common pitfalls to avoid when designing for specific devices (and responsively)
  • Techniques for using device-detection well
  • Handling common responsive design challenges
  • The benefits of ems-based media queries instead of pixels
  • How to use common patterns when dealing with complex navigation
  • When to test in the device lab and make future-friendly designs

This workshop is not all talk as you'll work with practical, everyday examples of responsive web designs and see them working across a range of devices from mobile phones to desktops and everything in between. You'll walk away with a full set of resources and example files too.

This workshop is for professional web designers and developers and assumes that you're already familiar with HTML5 and a little CSS.

What hardware/software do you need?

It's a good idea to bring your laptop to the workshop. Pencils, markers and paper will be supplied.


Address

Historisches Kaufhaus
Münsterplatz 24
79098 Freiburg im Breisgau
Google Maps

Schedule

8:30 – Doors open, Registration
9:00 – Introduction & Kick-off
11:00 – Coffee Break
12:30 – Lunch
13:30 – Afternoon Session
15:00 – Coffee Break
17:00 – The End, Networking

On the Web
On Twitter
Workshop includes
  • Snacks and drinks during the whole day
  • Tea and coffee
  • Lunch
  • Paper and pen/pencil

Sponsors & Partners