The Value of a Web Development Agency: Responsive Web Design

Responsive web design is a website design that allows a site to be viewed on any screen. In today’s world of smartphones, tablets and laptops, responsive design is becoming increasingly important:

• Mobile 500 merchants have seen a 68.5% increase in visits this past year, accounting for over 3 billion sessions (Internet Retailer).
• Mobile app usage and downloads have increased by 44%, generating an estimated $40.58 billion in revenue (Internet Retailer).  
• A full 30% of mobile shoppers will abandon a transaction if the shopping experience is not optimized for mobile (MoPowered).

These numbers are only growing. However, despite such statistics, many business owners and marketers tend to forget about responsive design or they don’t know if it has been properly implemented on their site— especially on smaller pages like single landing pages or blogs. This oversight will likely lead to fewer conversions and revenue, both immediately and in the long-term.

Here, we break down common problems that business owners face with responsive design and discuss how to create a fully-optimized, responsive website design.

Responsive Design Oversights

Many online businesses simply don’t test their website pages, blogs, product pages or landing pages on a smartphone or tablet before they go live. This is especially true for those that are working under a deadline: once the pages have been drafted, formatted, edited and QA’d on a desktop, there is little time for further testing or considerations.

For many, this is a problematic oversight. Especially for B2C eCommerce retailers, it is important that, at the very least, the “Big 5” pages—  homepage, product page, category list, search page and cart & checkout— are designed responsively. These are the pages that will see the most traffic and bring the most conversions, so ensuring responsiveness will prevent unnecessary bounces and lost customers over time.

SEE ALSO: Social Proof: Why You Need It & How to Create It 

Unresponsive Design

Many site owners end up choosing features that are trendy and modern but not mobile-responsive. Specifically, things like:

• Hover on touch
• Drop down menus
• Reveal features
• Landscape images

The first three require a click, meaning that extra time must be taken to make a mobile alternative. This requires developers, designers and hours of work. If you don’t have these resources— or if you don’t want to allocate toward double work— it’s best to consider the responsiveness of your features from the start and pick designs that will function across devices.

Also, people often forget to consider the limited space that they have on mobile. There’s not room for a lot of content without scrolling, and font/image sizes look drastically different. Even when people do take this into account, it doesn’t always work. On a normal desktop landing page, for example, there is usually a sidebar (with, say, related content, products, or blog topics), the main content of the page, a header, etc. Many try to make this “mobile responsive” by formatting the page into one column— that way, content doesn’t jump around in a way that is unexpected and the formatting doesn’t change drastically across devices. However, this can still translate poorly to mobile: more often than not, you still end up with heading font sizes that are too large, orphaned words, and an out-of-date aesthetic.

This kind of issue also occurs frequently with advertisements. Many online business owners or media sites push hard to get the advertisements that they need on the page. While this makes perfect sense, it can greatly interfere with mobile business if done improperly. The pop-up ad, for example, has evolved into what we call a lightbox ad. On desktop, these aren’t as intrusive as a classic pop-up: they get in the way, but a user still has about an 80% chance of clicking away from them and reaching the content that they are looking for, as seen here. 

On mobile experiences, however, lightboxes usually take up the entire screen and practically force users to click on them. This is a huge turn-off for any site visitor, and it usually decreases the page load speed. For online shoppers, a small increase in time has big consequences. In fact, according to Strangeloop Networks, 57% of mobile customers will abandon a site if they have to wait 3 seconds for a page to load.

Some EYEMAGINE clients have even noted that they use adblockers just so that they can actually interact with websites properly—  they don’t want their favorite site to take a hit on ad revenue, but they need to block in order to interact at all. Overall, these issues can hurt business, so stakeholders in the design of websites must be very mindful of ad placement.

Misunderstand Audience

Many online business owners don’t know if - or when - their site visitors are going to be using mobile devices for their browsing or purchasing. Some facts:

• According to Receiptful, online shoppers spend more time shopping on their mobile devices than their desktops. (Comscore)

• 44% of retail Internet minutes are spent on mobile phones.
• 11% of retail Internet minutes are spent on tablets.

• 78% of searches for local business information using a mobile device result in a purchase. (SearchEngineLand)

In other words, mobile is huge. Especially if people are casually browsing, killing time, or clicking through from an email campaign, it is likely that they will be doing so on a mobile device.

Of course, there are exceptions: a B2B business, for example, may be more desktop-oriented. You can, then, have a website that is optimized just for desktop or mobile. The key here is to have clear, data-driven information about who your audience is and where they are most likely searching from.

CSS Tangled

Most of the time, design is written using CSS, a style sheet language used for describing how a webpage will look. CSS has an “!important” rule that basically works as a trump card—  developers and designers can use the !important rule to overrule anything else that has been written and quickly clean up a page. Oftentimes, if online business owners go between agencies or contract individual developers to work on their website, those developers use the !important rule to quickly and effectively overrule what already exists. Over time, the website becomes unworkable as it fills up with messy rules with no breadcrumbs, no logic and no explanation of what’s going on. Think of the rules like strings— once they get tangled and mixed up, it’s very difficult to fix the problem. Improper development and integration on the CSS, level, can lead to huge back-end issues down the line.

Responsive Done Right

Responsive > Adaptive

There is a big difference between responsive design and adaptive design, and many business owners make the mistake of creating an adaptive website when they should create a responsive one or vice versa. In the big picture:

• Responsive design gives you more flexibility to cover for rapidly changing, diverse technology that’s out there. You can do a lot across many devices with less effort.
• Adaptive design requires more footwork, which makes it better for those with a massive company, massive development team and the ability to tailor-make pages for each media.

Looking at how each interacts with devices, it’s important to note that responsive design transforms and readjusts website pages based on the width of the browser, while an adaptive design will react based on device type. It has to realize that it is being viewed by a certain device.

Consider Facebook. They have a mobile app for users, but if you travel to their site via Google Chrome, you will get their adaptive site design. This is an actual website designed for mobile phones, not a mobile app software. For smaller companies, this kind of extra footwork can be extremely tedious, and it can lead to various versions of a site that are not updated or out of sync is some way. Responsive design is often a better, faster approach to making one site work on many screens.

SEE ALSO: 3 Small Companies Master Social Media: Learn From the Pros 

Visual Elements

To do responsive design right, stay mindful of the following visual elements:

• Viewport break points

• Image optimization: One quick way to fix site problems is by optimizing its images for HD screens. This solution gives your website high definition images without bogging down the site or negatively affecting page load speed, thereby improving the aesthetic and trustworthiness right away. GrowthHackers, as shown below, is an example of a site that would greatly benefit from this kind of quick optimization. 

Comprehensive Coding

To prevent problems with your website down the road, you should always look at coding comprehensively. Improve your CSS styles for the entire site along with each individual page and make sure that everything is organized. This will allow you to scale your site easily and efficiently over time.

Again, many of these problems only apply to online businesses that are trying to do the design themselves or that are working on one-off pages like landing pages or blogs. That said, it is important to be aware of what could go wrong so that you never have these preventable responsive design problems with your site down the road.

To get these things right, many business owners should outsource to an eCommerce agency or development team that has experience with responsive web design. Ultimately, the investment is worth it in the long-haul. To see if your website is fully responsive or to discuss the important elements of responsive design, contact us today.