Becoming Device-Agnostic

Responsive Web Design is more than just adjusting a web experience to different screen sizes. Becoming device-agnostic is an important step for creating future-proof websites and here are a couple of thoughts on that.

Becoming Device-Agnostic

Apple just released the iPad mini; yet another mobile device to deal with and design for. The real purpose of responsive design is to get to a point where your web design is completely device blind. Your design shouldn’t really care about the pixel dimension of the device it’s being viewed upon. That is what device agnostic design really is, it’s not just a new web buzzword for sales and SEO reps to exploit — it’s a real design concept.

The big, huge, gigantic question is how to design a device-agnostic web site? Honestly, we’re not going to be able to answer that question fully in this article. It’s kind of a complicated thing, but it’s not too early to start designing in an agnostic way.

Now is a great time to start designing or at least thinking about how your designs can be device-agnostic — get in on the ground floor and stay ahead of the game, don’t let the devices run your life. It’s important to start thinking in a different way even if all solutions aren’t truly present yet.

Pixel Perfection is Old

Pixel perfection just wants to retire and go play shuffle board on the deck of a Carnival cruise ship. Let’s let it retire. We all know that mobile devices have changed the web landscape and there are plenty of articles that break down the numbers. But the important thing to keep in mind is that we need to stop thinking about the web in pixels and think about it more in views and how our designs will be displayed in these different views.

The first step to agnostic design is to think and design in terms of the design itself, the elements in it and their relationship to each other. Get away from thinking about the rigid pixel dimensions of device viewports and think more about how each element fills that view on a modular level. This helps to best represent your design in a narrow screen, a wide screen, a huge screen or even a very small screen.

Now, keep in mind that pixels aren’t dead, but this idea of rigid pixel perfection just shook hands with a T-Rex. Pixels are still important and you will still use them as you design, but pixel layouts should be used for templating purposes, blueprints and guidelines — not firm, concrete measurements of design.

Modular Design

It’s hard to design for fluid and flexible views. There are no fixed sizes to give you specific boundaries, there are no crutches in agnostic design and that’s a pretty scary and difficult road to embark on — I know, because I still struggle with this.

One really cool aspect of fluid or agnostic design is that it’s kind of a freeing experience. For once you can focus on the design of things and not be consumed with pixel dimensions, viewport sizes or even how browsers will render your site.

Usually we start a design by defining the viewport boundaries, whether it’s a mobile view or a larger display. Then we generally move from top to bottom and fill in that space with elements and figure out how those elements will live together within that “fence“. The real problem here to device-agnostic design is that there is no fences.

This is where designing in a more modular fashion comes in. When I say modular I mean to design on a more ‘elemental’ level and consider how the elements react, rearrange or even re-purpose themselves when things move and change — how will they fill the space when moved.

Four Points to Consider

A really great benefit to device-agnostic design is that you get to pick the starting point. Wanna design mobile first — go for it. Wanna design for larger display first — go for it. Wanna mockup something in some weird pixel dimension or no dimension at all? Do it.

As I started designing for my latest project, payba.cc, I started the traditional way: Photoshop mockups that lead to a fixed web layout. But as I got deeper involved into the project goals and requirements, I realized that responsive solutions would be way better. I wanted a real responsive solution, a truly device-agnostic design. So I’ve revisited the layout in a more modular and scalable way.

I came up with four loose points, or goals that I wanted to accomplish with the design that helped me get started thinking and designing in a more agnostic way.

  • Flexibility
  • Design elementally
  • Starting point independent
  • Follow the design

Flexibility. If it’s been a while since you designed or developed a fluid layout, now is the chance rekindle the romance. Instead of using fixed, rigid and arbitrary units of measure like pixels or ems consider using percentages. Instead of fixed heights, widths, margins and padding start using percentages more so that your design is more flexible.

Design Elementally. This may be a weird one if your used to designing and planning fixed Photoshop or Illustrator mockups. Focus on the design of the elements instead of the overall view – maybe even design each element in a new file. Designing on a elemental level allows you to figure out how each element will react and respond to changing viewports.

Don’t forget about the overall scheme and how each element will react to each other, but consider a wireframe or ‘blueprint’ for them instead of using a full color, pixel perfect mockup for each page or view.

Starting point independent. Device-agnostic design should really be starting point independent as well. Device-agnostic design is more about how a design will finish or end up ‘existing’ in different views, so really where you begin shouldn’t matter that much, just pick a spot and start.

The only considerations you should give to starting point will be overall project and development dependent. For example, will your audience be using this more on a mobile device or larger display device — some sites and ideas are really only best used in one or the other. And, you may want to consider ‘scaling up‘ or ‘scaling down‘ depending on performance goals.

Follow the design. Fluid designs alone really aren’t the answer to all the mobile woes. Chances are your design will start to look crazy or funky in certain views even though it might be totally flexible. Not to mention, you will want your design to take advantage of the benefits each display can offer. This is where breakpoints come in.

When you start using breakpoints, forget about setting breakpoints at standard size resolutions or displays. Set you break points where your design starts to actually ‘break’. Then do a little bit of work to rearrange and manipulate the elements to relate better and look better. In some cases, depending on your design, you may only need one or two breakpoints. In other cases you may need more, but follow the design and let the design dictate when it wants to respond or change to the view instead of forcing it to.

Think Different

It sounds cheesy and cliché, but it’s time to think different. The Web is a different design medium and its canvases are constantly changing dimensions. The biggest reason to think different about web design is to simply not get left behind.

Your users and clients want to view the web on one of their many devices and they expect that it will look and function similarly on each — it’s our job to create that experience and even be able to maintain it on devices that don’t even exist yet. A fun challenge to have indeed.

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 18

Comments are closed.
  1. I love this. You really have to go into it headfirst and remove all of the old strict concepts to go on and design in a fluid way.

  2. Great article, but the opening statement is a bit wrong about the iPad Mini – “yet another mobile device to deal with and design for.” The iPad Mini has the same size screen as the iPad 1 and 2, so if you have designed for iPad in the past then you have the new iPad covered. Really enjoyed the article though and loving all the time the site put in to great responsive content.

    • But keep in mind, the resolution did not change but the size of the buttons and other controls did – therefore the design should consider it and reflect it somehow.

  3. Thanks for discussing device-agnostic web design in such empowering terms! I’d be interested to know how you think content fits in here-content that is prepared for any screen size, any context. Are there principles for content/design fluidity that work across the board?

    Cheers,
    Sarah Bauer
    Navigator Multimedia

    • Ya, content is a huge part of this and I think all to often designs are just as restrictive as device pixel dimensions when content isn’t considered to be a part of the design process. With this agnostic approach content probably becomes more important than before because now that content must be dynamic as well. Content is still a bit of an issue for me on a couple projects I’m currently working on, but there are some definite foundational concepts and principles that can be used to get started dealing with this issue.

      This is a great topic… I think I’m going to carry this idea of fluid, device agnostic content into my next article and dive deeper into it.

      Thanks Sarah!!!!!!!!

  4. Is it just me or does anyone else see the flaw in making the smaller ipad the same resolution as the predecessors, but adding in the retina complexity.

    Now my ipad mini (if I actually bought one) will display the same content in the same layout as my iPad 2, but on a far smaller physical area.

    Any touch areas that I’ve designed for the original ipad are now physically much smaller than I intended for them to be. Should I now go through and make them larger to suit the smaller pad? That might make them comically large for the old iPads.

    Am I missing a trick here or is this actually an issue?

    • As far as I know the iPad mini doesn’t have the retina display and PPI as the iPad 3. The iPad mini has the same resolutions and PPI as the iPad 2, 1024-by-768 resolution at 163 pixels per inch (PPI). Which means that it can render the current apps and sites just smaller and still maintain a nice display and also maintain the same touch areas as the iPhone – same PPI as the iPhone 3GS.

      I believe, from a device agnostic design approach we need to think in terms of what’s best for the design and not get consumed with the PPI or resolutions of each device – design stuff more fluid and device independent. I kind of think that if Apple chooses to make the touch area smaller in its iPad mini VS the iPad with Retina than as long as our buttons scale nicely they will fit into the user experience that Apple has designed for there device. It’s cool if the design and/or experience is a little different in these two devices because the device is a little different itself.

      I don’t think you’re missing the trick and this is exactly why we should start designing more device independent… we can avoid these issues of PPI and 2x resolutions and all that. Like you said, the problem with trying to design for devices and their differing PPI’s is that you will eventually start to end up things that look weird in certain devices because you compensating for other devices.

  5. Completely agree with the need to move away from device-specific designing. Not only are there too many devices to design for, but it is about altering the content in a way that makes the most sense for the content.

    I always just design breakpoints based on when the design needs them. I am also not much of a fan of pre-built frameworks that have breakpoints already pre-defined–it all depends on the content.

  6. not sure why you’re using the ipad mini as a reference device when it’s not close to being a majority device. even when you pack it with other iOS devices they still don’t come close to the overwhelming majority market share and adoption rate android devices can boast.

    Zurb Foundation is an excellent css framework that takes care of these size problems for you in a sensible way that doesn’t leave you in a reality bubble of designing only for a family of minority market share deivces.

  7. Hi Patrick,

    i enjoy your post but i dont’ agree with this note:
    “When you start using breakpoints, forget about setting breakpoints at standard size resolutions or displays. Set you break points where your design starts to actually ‘break’.”
    I think is quite difficult to mantain a responsive web site with no-fixed breakpoints; breakpoints gives you the necessary constraints to design and develop responsively. Without fixed breakpoints everything is a mess and your CSS begins unstable while the project grows.

  8. I really enjoyed this article and its very true, if you want to cater for all of these different screen sizes pixel perfection is not going to 100% work.