Responsive Design & Typography
Half the web will abandon your site if it doesn’t load in 2 seconds or if it doesn’t fit on the screen in their hand. Learn how to get it right in this intensive one-day workshop with hands-on experience in responsive web design covering basic fundamentals through advanced topics like responsive images, typography and navigation patterns.
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)
Who It’s For:
‘Traditional’ graphic designers need to know how to bring their knowledge of typography to the web, how to find what’s available, how to use web fonts and understand the technological limitations.
Web designers—many of whom don’t have a traditional design education—need to understand the value of typography, what it can bring to their design and what to watch out for when implementing web fonts.
Front-end developers are just as important: they’re often handed the job of incorporating web fonts into the site and expected to do so successfully. Putting that first line of JavaScript or CSS in place is easy. Making sure the best methods for embedding are used, ensuring fallbacks are in place and tuned, and getting the best performance takes knowledge, time and a bit of persistence.
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.