Mobile-Friendly Design: No Longer a Nice Thing to Have

April 21st, 2015

Google’s decision to rejigger its search engine to favor mobile-friendly sites simply codifies something that should be obvious by now. Not that it doesn’t make it any less painful for those with massive legacies to convert over. Read on for some mobile web design considerations.

I’m a political junkie, and frequently when I’m looking around, I find myself on the political news site Mediaite.

Being that the site is super-opinionated, I admit sometimes it’s a bit of a hate-read for me, but I nonetheless go back frequently. I’m not much of a TV-watcher, but Mediaite does a great job of finding bite-sized clips and making them easy to watch.

But I always find myself grousing about a specific problem with the site: It’s one of the few mainstream news sites that doesn’t have a mobile-equivalent website. (Update: Well, until now. They literally changed it today. Clearly, they knew my anecdote was coming.)For startup media outlets, it’s obviously difficult to prioritize a redesign over something like paychecks or real estate bills—but in 2015, it sticks out like a sore thumb, especially for a site that averages upwards of 2 million visitors a month.

And as far as search engines go, you don’t want to have a sore thumb sticking out.

UNFRIENDLY TOWARD MOBILE-UNFRIENDLY

Over the past few years, Google has been putting a lot of energy into pushing website owners to cater to mobile customers, who are becoming an important part of the online ecosystem. And in recent weeks, the search giant has been sending messages to website owners warning them that they were staying mobile-unfriendly at their peril.

Today, the company will start counting mobile-friendliness in its all-important algorithms—and responsive sites, rather than dedicated mobile platforms, are the preferred way to go.

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results,” the company announced back in February. “Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”

Long story short: Mobile-unfriendly sites might be in trouble unless they redesign or retrofit, pronto.

Whether it’s fair that one company should hold that much power over the internet is an open question, one the European Union appears to be interested in, but let’s admit that site owners probably need the nudge.

THIS ISN’T EASY STUFF

Google is probably doing the right thing by encouraging everyone to design for every audience, but there’s a ton of give and take that comes with this. If you’re retrofitting an old site, it’s not as easy as slapping a new template on there in some cases.

Speaking from personal experience, one thing I can say that’s nice about Associations Now‘s web presence being relatively new is that we didn’t have a lot of the big problems that media outlets with a lot of legacy content do. We were allowed to invent this site knowing we’d be able to future-proof everything. Imagine what The Washington Post or The New York Times have to do with their 150-year-old archives every time they have to rejigger their content. Not fun.

Associations are the same way—all those resource pages, forums, and blog posts are buried in editorial and design decisions that made sense when they were made but now are troublesome at best.

At the same time that you’re wrestling with your legacy content, you may find yourself making difficult decisions about newer content, too, based on the demands of mobile. Recently, we’ve done some experiments with infographicsquizzes, andinteractive visualizations on Associations Now—and at times, the desired tools didn’t play nice on mobile or were harder to read at small sizes. In particular, the visualization tool Tableauoffers huge analytics benefits, but the resulting graphics aren’t super-compatible with tiny screens.

But we looked at other tools out there, and ultimately, we decided that this one had the most potential for us. Meanwhile,the snazzy form tool Typeform, which we’re using on our newweekly news quiz, was a little bit of an easier sell on the responsiveness front.

Every embed and plugin you work on—all the way down to YouTube and Slideshare embeds—will require discussions like these before you roll them out.

THINK RESPONSIVELY

“Responsive design” is a simple phrase that perhaps downplays the complexity and scale that many organizations will face in trying to implement it.

But we’d like to help, if possible. Looking to improve your design for mobile? Here are a few ideas to guide your approach:

Know where your current design stands. Mobile-friendly design doesn’t end with the breakpoints. Other issues, including the speed of the page loads and the size of the links on the site, matter as well. Google offers a mobile-friendly testthat will let you know how your design is read by its search engines. It’s good to know how much work you’re going to have to do before you do a deep dive.

Put strategy first. Web design is not just about the pixels on the screen—never has been, never will be. Rather, it’s all about the user. So, as you’re doing the research on how to best build and maintain your design in multiple contexts, I recommendchecking out the many guides offered up by developer Brad Frost on Github. You’ll notice that he doesn’t dive into the actual tools until about halfway in. There’s a reason for that—if you do responsive the right way, you’ll be rethinking your whole design strategy.

Building fresh? Use a framework. They’re all the rage these days. Launched by a couple of Twitter developers in 2011, the mobile-focused Bootstrap web design framework is a great way to build a design without repeating yourself too much. There are a lot of positives to this approach from a development perspective—for one, you can get off the ground a lot faster—but on the other hand, if you don’t tweak the design too much, it might end up looking pretty cookie-cutter. An alternative worth checking out is Zurb Foundation, a personal favorite of mine.

Need to retrofit? Perhaps creating a fresh redesign isn’t an option, or it’s a tough sell to the boss. Retrofitting can be done, but it’s essential to research the pluses and minuses of the approach first. I recommend reading what Sparkbox’s Ben Callahan has to say about this, and know that you may be giving your readers a subpar experience by choosing a more simplistic approach.

If you know anything about design, you’ve probably been hearing this responsive-design drumbeat for a long time. But if you weren’t listening before, a hit to your web traffic might grab your attention.

Sorry to be the bearer of bad news.

By: Ernie Smith, Associations Now, to read this article as it originally appears click here.