A couple weeks ago we talked about giving up on controlling our designs; understanding that from now on we won't know what kind of device (with what constraints) users will be on — not without investing tremendous resources. Their constraints and capabilities will vary widely, in many different ways. Pixel perfection must become a thing of the past, so let's talk about how you actually design for a world without pixels.
What We Can't Do
For those of us accustomed to fixed-width design, we're used to plotting out and planning for specific image sizes and rigidly defined spacing. Well, we can't do that any more. That fine-grain control has also allowed us to substitute sweet-looking graphics and effects for really solid interaction and flow. We should never have tried that anyways, but now we have to move beyond it.
What We Can Do
When you're designing a site or an app for multiple devices, consider these things:
- Use images sparingly. Images will need to be large enough in dimensions to fill the allotted space on a desktop browser, but small enough in file size to load quickly on a smartphone. Use CSS3 to your advantage here with generated gradients, CSS box and text shadows, and font-face for typography. We'll talk another time about using tricky solutions like Scott Jehl's Repsonsive Images code.
- Structure your page in the order someone will use it. Where possible, ensure that if the layout of your page changes, the flow of someone using it isn't harmed. If your sidebar were to be placed after the rest of the page content, are you moving a critical action to the bottom of the screen?
- Plan to turn things off. Smaller devices require a more focused experience - don't be afraid to turn things off for small screens, or to selectively show/hide elements that make sense in certain situations. Bonus: if you're turning something off for mobile, do you really need it on a larger screen?
- Know your audience. Certain conventions make sense on the desktop, and on mobile, but they aren't always the same. Make sure you understand user expectations for common elements like modals, or toolbars — and how that applies to various devices.
- Think about your interactions. Are you putting something critical in a hover state? You don't know if your user will be on a device that can hover. Planning to have a fixed login element? Be careful - not everything supports fixed positioning. Carefully consider what you want users to do, and think about how they'll do it on different devices.
- Review with builders. If you're going to build out the design, review it with other front-end designers or engineers. If you're not going to build it, do design reviews with the people who are. They'll help you find the holes in your design, and then help find solutions.
Should I be doing this now?
Right now, you could still design pixel-perfect sites and apps, if you focus on particular devices. The iPhone is a fairly well known quantity, as are the iPad and some specific Android phones or tablets. Creating specific experiences still has some benefits - apps are a good example of this. The investment required is higher, but it can pay off.
That will change though — the balkanization of devices is unavoidable and already happening. The cost of creating specific experiences will only rise, and quickly.
This is Actually Awesome
It's easy to think that designing for an unknown is difficult, or too much trouble - but this is exactly how we focus in on what matters. It's not just pixels that make up great web design, it's considered interactions, and solid benefits, and empowering users to do what they need to do on whatever device is at hand. That's how we'll design for the future.
In an upcoming post we'll get into nuts and bolts and talk about actually building the front end without pixels.