Is There Bad Responsive Design? Yes!

Bad responsive design is everywhere! Colorado Web Design has experienced web designers in Fort Collins that can help, but you can do a lot of this on your own!

First let’s define responsive design: we are talking about the ever shifting design layouts you find in most modern websites, to accommodate widely varying screen shapes and sizes. Overall, responsive html layouts are a boon to the internet. With the explosion of mobile devices and tablets browsing online, good, responsive markup can create a terrific experience no matter what type of device the visitor is using. But cheap, generic templates with bad layout choices are legion! Let’s take a look at a few examples.

Example 1: Disappearing Menus

The main navigation menu is still a critical component on nearly every website across the entire internet! But have you noticed how quickly some websites jump into “mobile-menu-mode”? I’m working on my desktop and I narrow the screen just a bit and suddenly the main navigation has vanished!

Yes you can find it tucked away in the little mobile menu icon we’ve all grown to expect, but why do I see this happening so often when there is still a lot of real estate available to render the full menu properly?

First principles would seem to suggest that the main menu should be visible until you absolutely have to hide it.

Pre-built templates will often guess at an average number of menu links and text lengths, and move to the condensed menu mode at a sensible width.

The problem is, there is no such thing as the “average menu” when we are accounting for your actual menu! If you have only a few links, it’s far better to display them for as long as possible, and at as many browser widths as possible without “going mobile”. Check with your developer to see where she might be detecting your width cut-off points when using media queries. It’s usually possible to either change the “trigger-width” or simply move the mobile navigation rules to the next smallest media-query width range.

Example 2: Unnecessary Responsiveness

For some reason, really simple websites still often have a responsive design, even when most of our modern phone browsers would render the desktop version perfectly well.

Sure the text may become very small and link text can be tricky to navigate, but Mobile Safari and the Android browser ecosystem all use zoom-in UX concepts to make moving around smaller content easier than ever.

There is a deeper point here: phone browsers are not expecting responsive designs. Instead, mobile browsers are trying to find elegant ways to render content without expecting designers to accommodate them! Head spinning yet?

No one is suggesting we abandon responsive design because Apple is trying to do a nice job rendering old websites, but it’s at least worth a look at your full-width site on our big, modern phones and tablets before you end up adding a bunch of overhead to your website code trying to detect browser widths. Sometimes we can outsmart ourselves.

Example 3: Arbitrary Content Re-arrangement

Presumably, there were good reasons why your two-column box section was set up with Box 1 on the left and Box 2 on the right. At least in the western world, we tend to read things and scan things from left to right.

So why on earth would we find in a responsive layout change to a single-column layout, that the right box is displayed now above the left box? This happens far too often with generic templates, and should be checked in your own responsive layout behaviors. The most important content should appear at the top, left of any screen, in just about any context.

This may seem like grumpy nit-picking, but responsive design has been touted as the future of the modern web, and if we are lazy about it’s application, we squander the UX opportunities HTML 5 and CSS3 have given us, and we will be neck-deep in a morass of confusing layouts.