When Responsive Web Design Meets the Real World
Watch Jason's Workshop Trailer
Jason Grigsby
Only 12 seats left.
Dispel your fears of code, media queries, image optimization, and multi-device design. See how fast and freeing mobile-first, responsive web design can be right now.
Morning
Designing around responsive code
- Mobile-first responsive web design elements and workflows
- How to correctly apply media queries and make an existing design responsive
- The differences between minor and major breakpoints
Doing mobile-first responsive web design
- The five steps to designing for peak performance and intuitive UX
- Techniques for handling different sizes of images, image tags, and retina displays
- How to update your code to use responsive images—and test them
Afternoon
Handling common responsive design challenges
- The benefits of ems-based media queries instead of pixels
- Ways to use common patterns when dealing with complex navigation
- How to choose the right solution for tables in responsive designs
Building responsively for screens and users
- How and when to use device detection to augment your responsive design strategy
- Common pitfalls to avoid when designing for specific devices (and responsively)
- Coping strategies for dealing with the uncertainty of screen sizes and inputs
Design responsively, responsibly
Move faster
Stop wrestling with the challenges of slow and underperforming sites. Learn to make it work by adopting a mobile-first approach to responsive web design.
Communicate better
Finding solutions with developers doesn’t have to be a burden. Get the know-how to more confidently talk with your team about translating your designs across devices.
Design a great UX
Understand the connection between mobile-first responsive design and having great experiences. See how performance decisions can affect your users.
You’ll learn how to:
- Work better with developers rather than just handing over mockups
- Use fluid layouts, media queries, and flexible images
- Pick breakpoints by resizing your browser
- Identify the problems causing sluggish performance
- Reorder CSS from a baseline experience to larger screens
- Conditionally load JavaScript based on screen size and capabilities
4 Practical Takeaways from Jason’s Workshop
Lightning-fast designs
Make existing designs responsive using smart media queries and image optimization.
A mobile-first strategy
Build better—from responsible, responsive designs through progressive enhancement.
Pragmatic testing techniques
Tailor your designs for multi-device display and future-friendly performance.
Happier people
Delight mobile audiences with more content, faster load times, and better user experiences.
This workshop includes hands-on exercises.
You’ll collaborate with other attendees to modify HTML and CSS. With Jason’s help, you’ll work to convert a fixed-width desktop design to a responsive layout. You’ll then update it with a viewport metatag, learn to find natural breakpoints, and test its performance. He’ll also help you reorder CSS, modify it to scope images properly, do more testing, and convert media queries to ems. As a result, you’ll see the technical and design implications of a responsive development process.
And don’t worry if you’re not a coder. We’ll create groups of people who are comfortable with CSS with those who aren’t, and all of the exercises will include the solutions—so you won’t get stuck. (That said, if you’re terrified of HTML tags, this probably isn’t the workshop for you.)
Jason Grigsby, Mobile First RWDesigner
@grigs on Twitter
Remember when you got your first mobile phone? How you instantaneously became obsessed with the global potential of carrying such powerful connectivity right in your pocket?
OK, maybe that’s a bit strong. But it is exactly what Jason Grigsby felt when he bought his first mobile phone in 2000.
Since then, Jason has built a renowned career championing mobile design. He co-founded Cloud Four, a mobile design and development agency, and founded Mobile Portland to educate and support Portland’s mobile community. He also co-authored a book, Head First Mobile Web, and manages to energize everyone (including us!) whenever he speaks on the topic of mobile-first, responsive web design.
So if you’ve been waiting for the perfect moment to dive into mobile-first, responsive web design, then take note: Jason’s the master guide you’ve been waiting for.
In the meantime, catch him on Twitter @grigs.