Join James Williamson for an in-depth discussion in this video Building responsive mockups, part of Learning Responsive Design.
Responsive design is so new that many of the tools needed to assist designers simply don't exist yet.…That's especially true for wireframing and prototyping tools.…The existing programs and processes are, for the most part, still tied to fixed-width layouts,…which forces designers to find ways to adapt existing tools to evolving workflows.…As with any emerging process, people are still experimenting with techniques that work best for them.…I'm going to cover a few approaches, including my own, to creating responsive mockups, and…then discuss how designers are currently using existing tools to assist their responsive design workflow.…
Often I see people start by attempting to create pixel-perfect versions of their layouts…for different devices or screen sizes.…This could result in building anywhere between three to six versions of each mockup, covering…smartphones, tablets, desktops, interactive TVs, and portrait and landscape versions for each device type.…As you can imagine, creating mockups for each of these stages and tweaks isn't very efficient.…
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs
Skill Level Beginner
1. Introducing Responsive Design
What makes sites responsive?2m 37s
2. Common Concepts
3. Responsive Design Strategies
Additional resources2m 12s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.