Design Responsively

It’s your responsibility. 

I’m sitting in JFK International Airport right now, waiting for a flight. Taking a quick glance around me, I see a handful of people doing who knows what on their tablets or smartphones. Being the creep I am, I found people browsing social networks, e-commerce websites, blogs, news sites, etc. More than anything, I saw lots of pinching and zooming happening. So many websites today are not responsive and have terrible mobile experiences.

With more people consuming content on more mobile devices in more places than ever before, it’s time we all do something about it. I’ve put together a few ways to start getting your site optimized for every device, and making your work more future proof.

The Boston Globe pulled off a great content-driven responsive design in late 2011.

Focus On Your Content

Content is the reason you’re designing a website, so your layouts should compliment your content in the most logical and appealing way possible, no matter what the device is. Don’t design your site to display perfectly in just one resolution because you’ll end up leaving out many other devices available today.

Mobile Websites

Should you make a mobile website? No. Absolutely not.

At Anchour, being accessible to more devices doesn’t mean designing a mobile website. Have you been to a “mobile website” and enjoyed the experience more than the full version? Probably not, and that’s because most mobile websites are usually limited versions of the desktop site with missing navigation and functionality.

However, if designers put a little more thought into these mobile sites, they could easily expand into something more focused and better than the “desktop-version.” The beautiful thing about mobile designs is that simple navigation and content hierarchy takes priority, while decorations and clutter seem to disappear.

For some people today, their smartphone is their computer. Smartphones have nearly every capability a PC does in a much smaller package. So the best option is to design one great website that’s focused and tailored for any device thrown at it.

Mobile First

If you’ve followed the mobile web movement at all, you almost certainly have heard of designing for mobile-first.

You can argue that designing for mobile-first ultimately comes down to personal preference, but there’s a benefit for some people to taking this approach. Because you’re forced to display content in a very hierarchical way you’ll end up removing clutter from your site and begin to simultaneously think about optimizing content for less screen real-estate. This is a good thing.

There are plenty of articles and books that talk more about this so I won’t go into any more detail. After all, if you’re not designing with content hierarchy already, why are you designing in the first place? Decide for yourself which route to take.

Compatibility

Want to target every device ever? Don’t rely on JavaScript.

Some really old people don’t know what JavaScript does, so they’ve disable it. There are also some “smartphones” on the market that are terrible at supporting even the simplest JavaScript functions. Therefore, to make a truly accessible site, it needs to at least function without JavaScript.

There are great ways to accomplish this while also giving a cutting edge experience to all modern users. The quickest and easiest is with Modernizr, which provides great browser detection tools and many other great accessibility features.

For testing purposes, try disabling Javascript on your device’s browser to make sure things still work decent, and improve your site accordingly. Testing involves a lot of trial and error, but once you get the hang of writing code that’s dinasour-device-friendly, it becomes second nature.

Breakpoints

Using breakpoints to target specific devices (like iPads and iPhones) is bad practice and not forward thinking. Resolutions are always adapting and improving, so your design might end up being obsolete by the time “The Next Big Thing” is released.

Not too long ago everyone was targeting 1024x768 screens because it was a safe size, and easily the most common resolution. In just a few short years, everything has changed. Make your site work on everything, because everyone to be able to use it.

The best screen size to target is every size.

Retina Displays

With the recent rise in high-resolution displays for everything from smartphones to tablets to laptops, many developers are using media queries to optimize their sites for these displays. Market share for these screens is rising fast, and Retina optimization is definitely something to keep in mind. Using higher resolution images and tweaking fonts are a couple ways to cater to these displays. Thankfully, detecting these high resolution displays is super simple.

Some devices have pixel density ratios in between 1 and 2, like Google’s new Nexus 7. The displays are not necessarily dense enough that you’d need to load 2x images for it but it’s something to keep in mind. The code samples given above would target displays like the Nexus 7. Although I just gave 2 methods, there are many articles that get much more in-depth on ways to serve high-resolution graphics for your site and move towards a cross-playform friendly web. Learn from them, and choose a technique that’s right for you.

What’s Next?

You don’t need to make sure your site looks the same on all platforms. You need to make sure it’s easy to use and optimized for all platforms. Cross-platform consistency isn’t the key. Every device has different strengths, so it’s perfectly fine that your website does too, as long as the content of your site can be viewed everywhere.

A responsive site that I designed at Anchour for an amazing local non-profit.

The internet is everywhere and accessible on screens of all shapes and sizes. If people aren’t able to access or enjoy your website on the device they’re using, then your work was for nothing. Decorations and special effects are overrated and content is often forgotten. Focus on your content, use media queries, and don’t forget about the devices that don’t exist yet. Everybody’s experience is important.

Let’s stop talking about responsive design, HTML5, and CSS3 like it’s a revolution happening in the future. At anchour, we’re designing a mobile-friendly web because the “future” is happening now. Even huge companies like Microsoft, Starbucks, and The Boston Globe have all been boasting fully-responsive sites for a while now. They’re not perfect, but they’re trying. I think it’s time we all do the same.