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.
Convince Your Boss
Future Insights and Jason Pamental will give you the tools and techniques you need to start thinking, designing and building responsively right away. Perfect for designers and front-end developers, just bring your basic knowledge of HTML, CSS and a little JavaScript, and leave with a skill that will set you apart from your peers.
What You'll Need
It’s ok to not have a deep background in web design, but it will be helpful to have a basic familiarity with HTML, CSS and a tiny bit of JavaScript. Lots of sample code will be provided but you should have a laptop with you, be comfortable with a code editor and with getting pixels under your fingernails. Knowledge of CSS pre-processors like LESS or Sass would be great, but is not required. And don't worry—we'll supply the coffee!
