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.