Responsive vs. Responsible Design

Responsible design seems to be a buzzword lately, so I thought I’d share my $0.2 on the subject. I wrote about it before, but lately I don’t think its as complex as we all thought it’d be. There is a lot of smart solutions out there that seem like a good fit for a blog-type of website, but when you deal with online applications that often have multiple stakeholders involved it gets tricky…
Imagine saying to the marketing manager that the ads need to go away, or telling social media team that you are replacing share component with built-in device sharing capabilities.

To me responsive design is nothing new, and its nothing more than “responsible” device-independent design. Of course you built your applications and web sites in the past to fit the form-factor viewport. This shouldn’t be nothing new or trivial to an experienced professional. It is merely “fluid-layout” and “media-scaling” methods that fits the UI to whatever the wrapper is set to or the screen-size the content is viewed on.

This makes sense, but something is missing…

The same content that we push to web browser should not be the same content we view on mobile device, and that takes us into the realm of Adaptive Content. You also want to take advantage of device hardware where possible so, just wrapping your page to fit the width of the device is not enough.

But more importantly, something must go…

Some content simply won’t fit all the viewports, and as an architect or a designer, you must be ready to deliver the bad news. But before you propose the change, do the research, bring forth facts, and present your case as this type of cultural transition is the paradigm shift that takes time to mature and persuade others to think “mobile-first”.

So when it comes to “responsive” design here is where I start:

1. Responsive Design

No need to do math around break-points. This is the antiquated print-publishing concept -much like the “above-the-fold” – where you try to squeeze all the content in the smallest amount of space. The break-points are very simple concept unless you go down the rabbit-holes, conforming to every device under the sun.

Basic concept:
Up to 480px – Mobile Phone
Up to 1024 – Tablet
Over 1024 – Web Browser

Now you can design your basic HTML5 elements to fit this model, use media queries to target and style the viewport with CSS. You may decide to hide the aside onOrientationChange, or wrap it under the article, above the article, or whatever you see fit.

Sounds very simple, but in large organizations you will have hard time “letting go” of content, particularly if its owned and managed by deferent teams.

We’ll get to this in a minute…

2. Adaptive Content: Target ÷ Context = Result

This is where we get into the fluid layout and flexible media principles.
This area is covered in detail here:

3. Content Relevancy

This is the biggest point I want to make; The content written for web (often years ago) may not be relevant anymore, particularly in context of mobile user. Evaluate your content and mobile-optimize it thru this exercise. You will find that a lot of your content written for web may be nothing more than bloated filler text. You can remove this now. A concise single paragraph article is much more valuable than a page worth of noise text.

As you go thru your pages, you will need to find new purpose for other elements of a page, and hopefully work out a solution with its owners to make those pieces still relevant on the new target form-factors. And if you don’t find a suiting place for them, then they don’t belong there in the first place.

4. Client-side logic

This is really why we need the break-points. We want to render the UI that best fits the form factor.
To provide the most effortless experience, the following should be considered:

  • UI to fit the form-factor: Space is the most valuable asset, use it wisely, provide legible content and appropriate target areas, don’t require the user to zoom-in to see the content

  • UI to take advantage of device hardware: Utilize GPS, Local Storage, Date Pickers, Dialer, SMS, etc.

  • UI to display appropriate content: Don’t miniaturize your web site – mobilize it instead. “Trim the fat” by removing content that is not relevant to the task at hand.

And there it is.
Don’t be afraid of this new medium…
Its nothing new…