3 Obstacles to a More Responsive Web Design

3 Obstacles to a More Responsive Web Design

With the rise in popularity of mobile, it’s no longer an option to consider how a website will be experienced on a smaller screen – it’s a necessity.

Increasingly, designers are turning to responsive web design as the answer. After all, what could be more convenient for users than simply having a site adapt to the screen they’re using without any effort on their part?

Of course, it isn’t that simple. Responsive web designs are much more complex than a standard site or a dedicated mobile site. They require more planning since you have to design the site to look good in so many different sizes and resolutions, and they also require more coding to ensure that the site is properly optimized regardless of the device.

This requires keeping a keen eye out for potential problems. Here are the top 3 that designers face and some tips on how to overcome them.

1. Slow Loading Speed

The main idea behind responsive websites is to provide convenience for mobile users, yet many responsive websites are not much smaller to download – despite the fact that they typically display less content. In fact, a recent study by Guy Podjarny at Akamai tested over 300 sites and found that the page size and load time results were nearly the same, regardless of the site being tested.

While it’s true that mobile internet is getting faster (with an average of 2.02Mbps), it’s still much slower than broadband (with an average of 2.6Mbps). And here’s the bad news: users aren’t very forgiving of that difference. A 2012 study by Google found that “users expect their mobile experience to be as good as their desktop experience.”

So what are some ways that you can help speed up your responsive design?

First, use smaller images. Some sites use larger images that aren’t necessary, or even multiple sizes of images. Also, be aware that even if you use coding to not display an image, it likely is still being downloaded. Also, avoid using JavaScript, if possible, since it is usually the largest asset on a web page.

2. Over-Resourcing

Many responsive web designs rely on multiple image sizes, CSS scripts, and more to get a customized layout for different screen sizes, resolutions, and devices. If you’re not careful, you can have users downloading all of this data even though they only need part of it.

Instead, you should use conditional loading. Make sure people load only the images and CSS files that are actually being used. This is crucial if you want your responsive web design to run as well as a dedicated mobile website. Double and triple check the coding, as well as getting outside opinions, to ensure that it’s fully optimized and running smoothly.

3. Poor User Interface

Website functionality that’s great for a desktop user may just not be as user-friendly for a mobile user. Don’t just think about aesthetics when creating a mobile web design. You also have to take into consideration the differences between user needs when visiting your site from different places.

For example, a user visiting an airline website on a desktop may be using it for a number of things: booking a flight, looking up baggage guidelines, or checking on their rewards program. However, it’s more likely that a mobile user is looking for one thing: flight status. It’s also likely that they need that information fast, so if your responsive design isn’t delivering it in an intuitive way, they won’t have a satisfactory experience.

So don’t just find the best way to display your standard web design for a mobile user – consider the entire experience. Get feedback from customers to find out exactly what they want to do on a mobile device vs. their desktop, and make sure your responsive design meet those needs.

Aileen Galsim is a blogger for Showcase Creative a UK based printing company that provides Custom Presentation Folders, calendars, and other printed presentation products. They can be found at http://www.showcasecreative.com

add to the conversation!

Thank you. Your video is being is emailed to you now!