Responsive Design
First, let's define some terms.
- Fixed-width
- Adaptive
- Multiple fixed-width designs, based on the browser/device width
- Examples: fork-cms.com
- Fluid
- Responsive
Designing for Desktop
- From about 1993 to 2007
- As production costs went down, screen sizes went up
- Web designers latched on to that trend to keep things simple
- "Minimum screen resolution"
- First 640px, then 800px, then 1024px
Explosion in Variety of Device Sizes
- Low-end Android phones (240px)
- Smartphones (3-4 inch screens, 320px to 480px)
- Tablets (5-7 inch screens, 768px to 1024px)
- Small laptops and netbooks (1024px)
- Ultra-widescreen desktops (24-27 inch screens, up to 2560px)
- Televisions (40-70 inch screens, 1920px to 2560px)
Don't forget about televisions!
Problems to Solve
-
The need to zoom to see what's on the page
- Fixed-width layouts: small text, buttons, inputs
- Fluid layouts: small text, buttons, inputs
-
Overlapping elements
- Fluid layouts: they usually don't compress well to mobile-size
-
Large amounts of unused white space
- Fixed-width layouts: the left and right sides
- Fluid layouts: generally on the right side
-
The sheer number of different screen sizes out there
- Adaptive layouts: you can only design fixed-width experiences for so many screens
- Cost-prohibitive to design for all of them
Responsive Design to the Rescue!
- Most bang for the buck
- Design for your major screen-size experiences
- Fluid layouts solve for the rest
Process: Key Points
- Constant communication between designer and developer is required. Sit them in the same room if possible for the duration of the project.
- You cannot get a feel for a fluid or responsive layout by designing in Photoshop.
- Start with the simplest experience on the smallest screen, do a rough implementation to see it in action, then work your way up.
- You'll usually end up with three or four designs - but don't design them all at once in Photoshop.
Process: Breakdown
-
Figure out what the content of your site will be.
- Layout is always designed around content.
- Figure out what actions users will take on your site (i.e. the use cases).
- Figure out the information architecture.
-
Design the mobile experience first.
- Why? Because of the small screen real estate, it forces you to focus on the key information to display and the key tasks to accomplish. And focus is good for any design, large or small.
- There's also a technical reason: if at all possible, we want the same HTML markup to be used at all screen sizes. Starting with the mobile design ensures we have the minimum markup needed, and can scale up from there much more easily than we can scale down.
- Developer implements the mobile experience.
- Sit with the developer, review the site, test on different devices, and work with them to fix any problems.
- Make the browser window larger until the design breaks down (i.e. until there's room to try a different layout that will organize the content in a more visually-pleasing way).
- Tweak the design and layout for this new size.
- Repeat the previous four steps until you've gone as large as the project needs. Depending on desire and budget, don't forget about television screen sizes!
←
→
/
#
