An intensive one-day workshop with hands-on experience in responsive web design covering basic fundamentals through advanced topics in responsive images, typography and navigation patterns.

With all the frameworks, themes and samples out there these days, taking the first step to make your site responsive is pretty easy to do - for large sites and small. But beyond just making everything scale and reflow, there’s a lot more to consider to make sites not just functional but truly usable (and even delightful) on small-screen and/or touch-based devices.

Start With the Basics

Fluid grids, flexible media & media queries, the backbone fundamentals of Responsive Web Design, will be covered in-depth with practical hands-on tutorials. We won’t stop with the basics though: there are still plenty of considerations once you’ve made that first step into designing responsively.

Fit, Finish & Finesse

We’ll look at what it means to design for capabilities of the device rather than the fabled ‘mobile context of use’: things like responsive images and high-resolution screens, how to choose the right input types on forms and how performance can be one of the most important design considerations you can make throughout your design process. We'll also discuss and build an alternate navigation style, and consider what other options exist for small screens and large.

Just Your Type

One of the most often-overlooked considerations is type size and proportion as screen size changes. We’ll explore how to design for both readability and meaning on various devices, how you can easily mitigate FOUT (Flash Of Unstyled Text) and how to get even more beauty from your type choices by leveraging OpenType features like ligatures and old-style figures.

Responsive design is a journey. Let’s get a few steps ahead.

What You'll Learn:

  • Review of the core elements of a responsive design and how to build them.
  • Responsive Typography - what it means and why it matters (there is no ‘content first’ without type!)
  • How to incorporate advanced ideas without sacrificing browser support.
  • Exactly what it means to deliver a ‘device-appropriate experience’ (rather than a ‘pixel-perfect’ one)
  • How to think responsively & design responsibly (& what that means & why it matters)
  • How to apply what you've learned within a CMS (especially when you might not have all the control you'd like over content and markup)

What You'll Need

You'll need your laptop, your favorite code editor, a few web browsers and lots of energy. It’ll be a long day but you’ll leave having built real stuff, and take away loads of sample code, resources and examples to use in your own projects going forward. And don't worry—we'll supply the coffee!