Monday, April 7 (9:00 - 17:00)
Animating in Your Browser With CSS3 and HTML5
What You'll Learn
- Comprehensive knowledge of CSS animations and transitions
- HTML5 audio and spriting techniques
- Using spriting and cutouts to reduce resources in complex animations
- Parallax: how-to and gotchas of implementation
- Improving performance via Chrome Dev Tools
- Using the Sass Animation Studio extension to take the pain out of steps() animation math
CSS Architecture For Big Front-Ends
Ten years ago most websites were small affairs, with perhaps a handful of pages and very simple designs. Today, however, the majority of websites are very different beasts… There’s no denying that web-sites, services and apps are getting much bigger; more views, more pages, more layouts, more browsers on more devices… It’s time we levelled up our CSS. So much to cover, and such little time! You'll need your laptop with Sass installed and ready to go. Photoshop and a Github account would be useful, but not essential.
What You'll Learn
- How to assess, normalise and rationalise designs.
- How to split designs up into discrete objects, abstractions and components.
- The ever-pesky task of naming things
- How to shear your codebase into flexible, extensible and manageable layers
- The optimal architecture for a robust, extensible, scalable CSS codebase
- How to use Sass’ more humble features to tie things together
- How to effectively manage layout
- And anything more you think of on the day
From Sharpie to Sublime: A Responsive Design Intensive
Responsive web design is a big deal, and a very broad topic. We're going to start early, go fast, and go from sketch to working web pages in a day. Bring your Sharpie, sketchbook and working knowledge of HTML5 and CSS3 (you don't need to be an expert) and we'll be off and running. We'll cover the basics of responsive design (fluid layouts, flexible media and media queries) and then talk about advanced techniques and emerging standards for responsive images; and using web fonts, icon fonts and SVG graphics for more resolution-independent design. We'll also cover emerging conventions in UI that will make your site better on small screens and even bigger ones. You'll need your laptop, your favourite code editor, a few web browsers and lots of energy. A local installation of MAMP (or similar) would be helpful. It's a lot to cover in one day, but by the end of it you'll have built something tangible with lots of extra sample code to use in your own projects going forward. Even better - we'll learn how to think responsively in the first place so your designs can take advantage of all this cool stuff you're going to learn.
What You'll Learn
- What are the core elements of a responsive design and how to build them
- How to deal with the Bandwidth Dilemma: get the right assets to the right device
- Responsive Typography - what it means and why it matters
- Emerging conventions: menus, icons, swipes and focus (& why they matter & when to use them)
- How to think responsively & design responsibly (& what that means & why it matters)
Interaction Design: Designing For Our New Creative Canvas
We live in a world where users want to do more with the web - and they want an experience tailored to their needs. Touch, gestures and voice control are fast becoming mainstream. This workshop will equip you with the skills you need to design the interactive experiences of the future. Paul will summarise the main forces driving the change in the structure of the web and walk through ways to approach these new design problems. He'll talk about how to design systems and networks, how to think about doing user research in this new era, and how to use metaphors like cards to approach tricky interaction design problems. Perfect for UX designers wanting to up their game or anyone interested in new ways of approaching design.