With all the frameworks, themes and samples out there these days, taking the first step to make your site responsive is pretty accessible - 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. 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. We won’t stop with just type: there are still plenty of considerations once you’ve made that first step into designing responsively. We’ll also 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. Responsive design is a journey. Let’s get a few steps ahead. 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.
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)