Designing Responsive Websites
A workshop by Clarissa Peterson
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team.
Attendees will get more out of this workshop if they have at least a basic knowledge of HTML & CSS.
1. What is responsive design?
- Basics of what makes a site responsive: flexible widths, media queries.
- Examples of a few sites that implement responsive design well.
- Examples of a few sites that implement responsive design poorly. What not to do.
2. How responsive design works.
- Awareness of device sizes. You have to design for an inclusive range of device widths, not just set widths like phone/tablet/desktop.
- How to code flexibility (percentage widths, flexible images, etc.). Hands on: Change code in example website to make a fixed-width site flexible.
- How to code media queries. Hands on: Add media queries in example website to change site layout.
- Designing for performance. How performance is a factor in site usability.
- Considering device capabilities.
3. Prototyping responsive design.
- Sketching layout ideas for various screen sizes.
- Using frameworks (such as Foundation, Twitter Bootstrap) to create responsive prototypes. Hands on: Use framework code to create responsive prototype.
4. Creating responsive designs.
- Why you need to start with a content strategy.
- Designing with a small-screen first approach. Examples of sites that do this.
- Focusing on mobile device UI. Making sure user interactions are compatible with mobile. Hands on: Adapting code to make user interface more touch-friendly.
- Navigation patterns for responsive websites. Hands on: Using media queries to modify navigation style across screen sizes.
- Responsive typography. Hands on: Modifying text display with media queries to make content more readable and accessible.
- Responsive images. Strategies for providing the appropriate image for screen sizes, without compromising performance.
5. Testing responsive design
- Devices and browsers to support.
- Tools to use in testing. Hands on: Using online tools to test responsive websites.
Clarissa Peterson is a UX designer and web developer, and co-founder of Peterson/Kandy, a Montreal-based digital consultancy specializing in creating responsive websites. Clarissa frequently speaks and gives workshops on responsive design, mobile strategy, and user experience. She is the author of Learning Responsive Web Design: A Beginner’s Guide, available now from O’Reilly Media.