Tip:
Highlight text to annotate it
X
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.