Ask Echidna: Does One Size Ever Fit All?

Welcome to our first Ask Echidna blog post, where we answer your questions about Web design, digital marketing, and business solutions. Do you have a question that you'd like to have answered by Digital Echidna's team? Simply send us an e-mail, Tweet us, or drop us a note on our Facebook page. 

Today's Topic: Does one size ever fit all?

We received the following question from @QuinnLawson on Twitter: “What’s the best way to ensure your solution complies with all browsers/operating systems?”

 We did follow up to see how far back he wanted to go with browser versions and Mr. Lawson said, “Current versions… how do I plan for the various browsers/screen sizes/mobile, etc.? Thanks!”

And the easy answer is…

There is no easy answer.

Sadly, there’s no one-size-fits-all approach that will satisfy all of your needs in one quick-and-easy tool. However, that doesn’t mean there aren’t some basic steps you can take to help ensure compliance, and some tools to help fill those gaps.

First and foremost, focus on content and build a site that takes into consideration mobile needs first. From there, you can work your way upwards and out with progressive enhancements. And make sure you test as you integrate new functionality and design elements to see how they adapt to standard screen sizes.

In the good ol’ days of Website development, we spent a lot of time and code “browser sniffing” and creating code that would ensure the best possible option is presented to the end user based upon the browser version they were using.

Unfortunately, that proved to be a pretty self-limiting approach – and one that required frequent revisiting of the site and revisions to the code. Simply put, you would be applying a band-aid to the here-and-now, but were far from finding a future-proof solution.

A better option is to focus on feature detection. Think back to the old BASIC “If/Then” days… instead of focusing on the browser or the screen size, you focus on the ability of the user to view or experience certain items. And if they can’t, you implement code that offers them an alternative experience.

Internally, we use libraries like Modernizr for feature-support detection, which allows to see when we can or are required to load extra scripts or functionality. For initial testing of cross-browser performance, we use applications such as BrowserStack.

You’ll also want to focus on creating responsive layouts with clearly defined content hierarchies. In essence, you want the most valuable content to appear “in order” no matter how your site is expressed. Translating from a wide screen to a hand-held, your content will have to “move.” By developing a content hierarchy, you’re establishing a priority list that ensures your content will appear in the order you so desire, regardless of the user’s interface.

The Drupal content management system offers a few themes that can help you accomplish these goals, including AdaptiveTheme, Omega, and Zen 5. But any theme or system is only as strong as its user. Without diligent application of hierarchies at the content-development/entry stage, the advantages will be lost.

But, as mentioned at the top, the best way to ensure that you’re reaching the greatest possible audience is to focus on developing clean, accessible content for everyone, then slowly add in the more complex enhancements for the browsers, operating systems, and devices that can support them. This Progressive Enhancement model can help you establish a solid, fundamental baseline and, hopefully, allow you to continue to deliver value to your users while still maintaining the integrity of the experience.

Now we extend this out to the readers. What suggestions do you have for Mr. Lawson? How do you ensure cross-browser and cross-screen compliance? Feel free to share your thoughts in the comments below.

And remember, if you'd like to submit your own Ask Echidna question, just contact us by e-mail, Twitter, or Facebook.

*Special thanks to our crack Echidna staffers, Ian Bullock, Mike Pace, and Andrei Zvonkov for their insight, suggestions, and assistance in putting this answer together! And, as always, much appreciation goes to Wayne Thayer for the always amazing blog illustration.