Device-Agnostic Approach to Responsive Web Design

| July 27, 2012 | Reply

This is a different take on responsive web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices. Device Agnostic Approach to Responsive Web Design

The Challenge

Let’s start our journey by looking at these online tools:

Those pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss goes one step further as it allows you to “customize” viewports by setting any dimensions you want.

Now check the-great-tablet-flood of 2011.

Do you get my drift? Trying to check layouts against specific sets of dimensions is a losing battle. Besides, using existing devices to set break-points is not what I’d call a “future proof” approach, as there is no for standard sizes or ratios.

I don’t want to go the “consider it to be harmful” route, but I want to point out that tools like these, or articles promoting a device approach (i.e. Device Diagram for Responsive Design Planning), make people focus on the wrong end of the problem, reinforcing the idea that responsive is all about devices.

To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don’t need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter: “Device Agnostic Mode”.

The Goal

The goal is to surface content, to style boxes as columns so they bring sections above the fold. The question is: when should we bring a box “up”?

Content Is King!

If we consider that content is king, then it makes sense to look at it as the corner stone of the solution. In other words, we should set break-points according to content instead of devices.

THE PRINCIPLE

The content of a box dictates its width. It is the minimum width of adjacent containers that create break points (a size at which we can display boxes next to each other).

Decisions are made keeping these points in mind:

  • The width of a box should be as small or as wide as possible without impairing readability.
  • The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.
  • The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter)

Share!
  • more Device Agnostic Approach to Responsive Web Design

    Related posts:

    Responsive Web Design
    Responsive Web Design

    Related terms: Responsive Web Design Definition, Responsive Web Design Templates, Responsive Web Design Tutorial, Responsive Web Design WordPress, Responsive Web Design Examples, Responsive Web Design Torrent, Responsive Web Design Book, Boston Globe Responsive Web Design

    Tags: , , , , ,

    Category: Responsive Website Design Examples, Tutorials

    About the Author ()

    Sara is a Kent State University alumna with a degree in public relations.

    Leave a Reply