Join Justin Putney for an in-depth discussion in this video Working with pixel values, part of Responsive Design Workflows.
A potential sore spot in handing off a design to a developer is when the pixel values that the designer has included in the mockup have not been maintained in the final piece. It's important to embrace fluid layouts, or the ability for your Web site to scale to different screen sizes in your responsive designs. It is fluidity, after all, that will classify your design as responsive. Joshua Sortino's portfolio does a wonderful job of varying as the viewport changes. As I scale the browser down, you can see that the site does a fantastic job of filling whatever space is available.
The great variability between devices that might display your experience means that your environment is uncontrolled. You may want to consider the reasons you chose your original pixel values. For instance, in this design, the margin between the logo and the main heading was created to align the heading with the body text below. As the design has responded to accommodate a smaller screen, however, the body copy is shifted to the left, and that original reason for the exact pixel value is no longer relevant.
So it's really the alignment, in this case, that needs to be optimized. If you're not yet convinced that pixel perfection is a thing of the past, consider the following. In addition to having both portrait and landscape orientations, mobile devices also have varying pixel resolutions, so 50 pixels will display at completely different real world sizes depending on the device. For example, the new Apple retina displays have doubled the resolution of the previous generation. So your site could potentially display at half the size, or twice the size, and be pixelated, depending on the settings.
So you want to make sure to test multiple generations, and talk with your developer about these type of settings. In addition to the varying resolutions, there's also a capability to automatically display Web pages at completely different zoom levels, so one pixel in your layout could represent 3.5 pixels on the screen. Zoom discrepancies can be managed to a large extent with the viewport meta tag, but the fact that this capability exists, and it zooms in by default, should give you some pause when it comes to pixel perfection.
The Clean Air Challenge Web site, for example, does a great job of embracing a mobile design. As the viewport shrinks, the site begins to look and function much more like a mobile app, with large buttons, and a vertical layout. A better way to think about pixel values in a responsive design is to think of them as minimums and maximums. For example, instead of having an exact margin value of 15 pixels that applies to any device, consider having a minimum value that works on a smartphone, and a maximum value that works well on a large screen, and then perhaps having some values in between. That way your design will accommodate a wide array of screen sizes.
Another approach to positioning and scaling is to think in terms of relative sizing, such as percentages, or ems, instead of pixels. Relative sizing allows child elements to grow or shrink with their container. On this Web site, there's a comparison of absolute pixel values at the left, and relative percentage margins at the right. You can see that the relative percentage has scaled much better, and the comments are nested in a much nicer way. There's also an example of relative font sizing.
By using ems or percentages to scale your fonts, your entire design can scale together. By starting with flexible expectations about pixels, you can save yourself a lot of frustration, and gear your instructions to the developer in a manner that better suits a responsive design. In the Design Solutions chapter, I'll walk through several ways to capture and communicate your ideas in a flexible, but clear manner. For now, it's helpful to begin thinking outside of the pixels.
- What is responsive design?
- Understanding concepts like scaling and interaction mediums
- Building a team and explaining job roles
- Planning for color and typefaces
- What developers and designers should provide
- Setting client expectations
- Working with a budget
- Investigating design solutions
- Hiring team members and contractors