Scale Shift: Interface Redesign to Accommodate All Shapes & Sizes

by Kurt

A long time ago I decided on a fixed-width approach for our publications. For a while, it worked, but the game is changing again, thanks in no small part to a sharp increase in mobile users and touch interfaces, on the one hand, and ever-larger desktop screen sizes with higher resolutions, on the other. So how does a digital publisher move past analysis paralysis, begin to redesign around a widening spectrum of present possibilities as well as future unknowns?

First, see what is that there that actually works. It sounds simple, but it takes time to scan the landscape and even more to reverse-engineer why and how something works, particularly if you (like me) started out in a world of desktops rather than smartphones and tablets. Touring is easy with responsive designs since you can simply resize windows and see how the design reacts, but be sure to beg, borrow or steal some actual mobile devices for sites that auto-detect, too. But remember: make sure what you are seeing really does work on all levels – readers as well as search engines.

Second, avoid shortcuts or third-party solutions. Or at least: tread carefully if you take them. There are a great many services out there that can ‘instantly’ make your site ‘mobile-friendly’ and even help you monetize the results. The problem is that few if any of these have your best interests at heart. Some put their touch-friendly mobile alternatives, for instance, on subdomains, which can be problematic for search engines in terms of duplicate content. The reality is that these companies have various degrees of expertise but their incentives may or may not be aligned with your own goals.

Third, remember to target a reasonable degree of longevity. Nothing is future-proof. It is inevitable that more paradigm shifts will come along sooner or later, so remember that you are neither designing for the far future (5 to 10 years) but nor can you be content to design around current devices or what are presently typical dimensions for such.  Future-proofing goes for your content creation strategies too – try not to create complex layouts that cannot be simplified down the line if (or rather: when) formats change again.

Fourth, sort out what will work for your situation. Again, that seems too easy, but it is a real challenge – not everyone has the same needs. Perhaps you use advertising on your site of certain dimensions, which in turn dictates things like breakpoints in a responsive design, or absolute lower-bound limits for mobile columns. Ultimately, you want your needs to drive the design, but if you are on a budget, there are increasingly many responsive templates available for sale.

Fifth, keep it simple, stupid. As my colleagues (developers in particular) will tell you, many if not most of the mistakes I have made have involved over-complicating design or functionality. Once you make a customization or defer to third-party control you need to make sure it is reversible or at least flexible in the face of future changes, and should ideally make sure that any upkeep will be worth whatever benefit that change provides.

A brief history of comments on WebUrbanist provides one poignant example regarding that last point above: first we had on-site comments via built-in functionality, but we expanded to use a third-party system for comments (Disqus), then offloaded comments entirely (to Facebook). What did we end up with? No on-site comments at all, whatsoever. They required moderation and were (in aggregate) a distraction, detracting from articles rather than adding to them.

As for us: we are currently working slowly but steadily to make our sites mobile-friendly, and looking carefully at other sites in the same space and web-wide for general inspiration and specific ideas. No quick decisions, no one-size-fits-all solution, just diligent design and experimentation. This cautious approach reflects an earnest desire to learn from our mistakes … if we make new mistakes, well, let them at least be different ones.