• The Responsive Design approach: What you need to know

iStock_000018684437XSmall.jpg

Responsive Design. You’ve heard of it, we’ve talked about it before, and it is quickly becoming a hot topic in the world of mobile. We’re going to walk you through the nitty-gritty technical details of how to make responsive work for your business. So grab your web guy and read on. Not up to the technical jargon? No problem. Contact us to learn more and skip the nerdy details.

A responsive website is one that adapts its content to best suit the device that is being used to load it. With this technique, your website will perfectly fit anything from an iPhone or Android phone or tablet without having to design for every device individually.

But what is it? How do you use it? As responsive design becomes more and more important to your business, get a leg up on understanding just how it works. With this article, we’ll cover some technical details on how to best apply responsive design to your website.

There are currently three ways to implement responsive design on the web:

1. User agent testing
2. Javascript
3. CSS viewport

User agent testing tends to be the most complex, and least flexible method. User agent is a brief summary of a visitor’s machine configuration, which is passed along while connecting to a website. It usually consists of the operating system (e.g. Windows 7, OS X) and browser (eg: Chrome, Firefox, Internet Explorer), as well as other information. Generally, each time a new browser agent is introduced using this method, it has to be added to the server logic.

The Javascript method is alright in certain situations (e.g. maintaining an element’s aspect ratio, regardless of size). However, if a particular design choice can be implemented using CSS, do so; Javascript can be slow to load.

Detecting CSS viewport is the most flexible method, with the least amount of drawbacks. By implementing “rules” based on browser size rather than user agent, you ensure that your website will function properly despite what new browsers or devices are introduced in the future.

Speed is a crucial factor when developing a responsive website. Longer load times often lead to lost conversions. Take care to only load the most important content (important to your customers, that is). If it can be helped, the mobile user shouldn’t have to load the desktop-specific version of the website in order to view the mobile version.

Remember, mobile users are generally constrained to slower 3G connections. Also, optimize your images. I highly recommend imageOptim and Codekit.

Content is another important factor when considering a responsive website. Smaller formats allow for less content viewable by the user at a given point. The key is to display only what’s most important. Remember, users are less likely to view information towards the bottom of the page: the further they have to scroll, the less likely they are to see it.

Remember, iOS (iPhones, iPads, iPods) doesn’t do Flash. Flash is a dying technology, soon becoming completely irrelevant. It is quickly being phased out by some major players, as evidenced by the fact that Adobe has already abandoned Flash support on mobile devices. By reducing dependency on Flash and embracing emerging technologies and open standards (such as HTML5 and Javascript) you not only future-proof your website, but ensure that industry leading devices that don’t use Flash are able to load them as well.

Sometimes good is more than good enough. There are millions of mobile devices, each model loading a web page slightly differently in almost every resolution imaginable. Invest the most time into developing for popular devices and browsers. Pixel-perfecting a less popular format is unnecessary when considering the thousands of equally popular counterparts.

There’s no doubt — responsive websites are better than their static counterparts and are the wave of the not-so-distant future. While, admittedly, they are harder to implement, pulling it off will certainly benefit your business’ presence online. Hopefully these points leave you better equipped to do so. To learn more, feel free to contact us!


Learn more about PropelWEB

ThriveHive
ThriveHive
ThriveHive combines easy-to-use tools and expert guidance to help businesses stand out and get found online. Learn more about our guided marketing and advertising solutions here.

Leave a Reply

Your email address will not be published. Required fields are marked *