Six Tips for Designing Without Pixels

Jonathan wrote this on July 08, 2011 in . It has 61 reactions

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.


Rss

It has 15 comments.

inspirationfeed (ZURB) says

Great article, enjoyed reading this!


Clair T. (ZURB) says

I love these pointers. I think that you speak to a lot of things Luke mentioned in his Mobile First talk. Since you have such a small screen to play with every little pixel makes the difference. Can't get too lazy with the design, otherwise people will be very confused with the UI. Thanks for putting this little overview together, it's a great list to have.


Ryan H. (ZURB) says

Such a thought provoking article! Can't wait for a follow up piece to learn more.

As a new web designer I seem to be stuck using pixels as a design medium but would love to try a new approach. Know of any other resources on designing without pixels?

Keep up the great work!


Jonathan (ZURB) says

@Claire Luke is definitely an inspiration for mobile design - he's been beating the drum on this for a long time now, we're excited to be finally catching up to him :)

@Ryan We have some things in the works that should help you out a lot, but we're not quite ready to show it off yet. In the interim, check out Ethan Marcotte's article on Responsive Design (also now a book) here: http://www.alistapart.com/articles/responsive-web-design/. You could also check out the new Boston Globe site when they relaunch, supposedly built as a completely responsive desktop to mobile design.


Felds (ZURB) says

This site seems to have fixed columns. The same for all the links on this article. What about giving us some examples of what can be done with this "technique" instead of just theorizing? What about putting all this wisdom to work?


Federico / Bfred.it (ZURB) says

It's too bad pictures are still pixel-based, otherwise I could have said this website is 100% pixel-less: http://www.progettystudio.com

It fills with the window, made in SVG, without a single .swf file


Josh Thomas (ZURB) says

This is great and all, but you still have to deal with clients who expect/want a website packed with features, images, etc.


Dare (ZURB) says

Plan to turn things off

Pet peeve. I hate this. I hate it when a website tries to be smart and turns off features just because I'm on my mobile. I hate having to make 3 extra clicks and then waiting for everything to load on 3G again just so I can move to the desktop version of the website. I don't want a "more focused" experience, I want to be able to do things on the go.

Stop lumping mobile phones into mobile and then make a retarded version of the site for the lowest denominator. There is mobile, and there are mobile smartphones, and the latter is usually more than capable in handling some of the more advanced features of a desktop version.

If I want bigger text, I can zoom. If i don't want a button, I simply won't click on it. By acting all smarty-pants and dumbing down the site foor poor phones you just end up irritating everyone else.


Jonathan (ZURB) says

@Felds It's true that this site is fixed-width - though its responsive design successor is being prototyped right now. This technique isn't new, though it's feasibility is, so great examples are somewhat lacking. We've been hard at work ourselves, and our first push was our site for our ZURBsoapbox series, zurbsoapbox.com, which scales down to mobile using responsive best practices. We've got lots more coming, and keep an eye out for the relaunch of the Boston Globe, expected to be a great example of responsive design on a massive scale.

@Dare We hear you, but it sounds like you're in the minority - typically users not only request but require a more focused experience on mobile, a platform which has numerous built-in constraints (screen size, input method, bandwidth to name a few). That doesn't mean removing features - we're advocating more removing extraneous elements or methods not conducive to mobile, and showing other methods which are. As mobile gets more bandwidth and even more capable browsers maybe that gap will narrow.


Will Wayne (ZURB) says

Did I miss the part about vector graphics, or is this too computationally expensive for mobile devices?


CLaurin (ZURB) says

These design principles get a little tougher when we consider the spectrum of hardware devices. I'ts not just mobile vs. desktop. Obviously things like tablets come to mind as a middle device.

What's needed to apply these design principles are finer methods for discovering our place in the hardware 'spectrum' at runtime. And fortunately, there seems to be a clear call towards this in the marketplace/blogosphere. It seems that not only is the DOM (document object model) going to evolve to include a HOM (hardware object model), but that much more of the hardware will be exposed through this HOM.


Jonathan (ZURB) says

@Will Vector graphics will probably become a good solution in time - right now the difficulty is that Android doesn't natively support SVG, and authoring tools for SVG and Canvas objects are still pretty spotty. Those should improve though - once the barrier is down for creating and displaying them they'll become much more viable.

@Claurin We recently wrote an article speaking to some of this called Time to Give Up on Controlling Our Designs - your idea is a little more in-depth. We're part way to a HOM with javascript calls to detect for certain features, and even CSS (through media queries) tools that can detect for orientation and screen size, etc. Definitely a long ways to go though, especially with the spectrum of devices available now.



Get a job, nerd!

via Job Board from ZURB