3 Critical Factors Marketers Need to Consider Before Embracing Responsive Design

There’s a good chance that you’re familiar with responsive design and if you don’t already have a responsive mobile website, you are probably considering designing one. However, there are some very critical considerations all marketers need to know before planning out their responsive design.

I sat down with Alex Gilgenbach, the lead designer and front-end developer here at Savvy Panda, to learn more about three critical considerations marketers need to know when planning their responsive website design.

1. CSS3 Media Queries and Breakpoints

Responsive design is dependent on CSS3 media queries (commonly referred to as breakpoints) to tell the device browser when to shift elements around for the screen size.

You can set different pixel ranges and whenever a screen loads that is within a particular range, it will adapt what’s displayed based on your specifications for that pixel range.

As a marketer it is important to keep this in mind. Every time you want change the styling of an element or add in a new module that needs to be styled, it will have to be done for every screen size which will be very time intensive for your designers.

One solution is to use percentages in your designs to minimize some of the repetitive nature of having to resize elements to fit the browser window. While a viable solution, there are still going to be areas where you need to change the layout of elements to fit a mobile phone versus the desktop.

There is no getting around the fact that there is a lot of work that goes into making a responsive design work properly in all of the device size ranges.

2. Bandwidth Issues

A second consideration with responsive design is bandwidth and loading time for various devices. Websites that are very image heavy will most likely be very slow to load on a mobile device where 3G is only available network.

Just as website speed is important on a desktop, it’s more important on mobile. A slow site will greatly decrease the user experience and cause higher bounce rates, decreased conversions and frustrated users. Google recommends that your “above the fold” content loads in 1 second or less.

There are multiple ways developers are trying to solve this problem now. One method being used is serving different images specific to that device size depending on the screen size. You would create the main image for the desktop version (which would be the largest size of the image), then resize the image for tablets, smaller tablets and phone sizes.

This way you’re not serving up a very large image that is then scaled down to fit the smaller window of a phone which is a huge waste of bandwidth and load time for the user.

As a marketer, it is very important that you take your responsive mobile design into consideration when planning out how graphic intensive your website will be. Also, the popular social media widgets can cause lag time due to 3rd party requests when used in excess.

3. Limited Flexibility in Module Changes

It is very common to want to change the layout of a mobile website vs. your desktop website based on more relevant information for the mobile user. There may be different modules you’d like to display for a mobile visitor than a desktop user.

One of the biggest drawbacks with responsive design is that you cannot swap out modules based on mobile or desktop users. In responsive design, the only thing you can do is hide (using style display: none) different modules that might not be relevant to mobile.

This will only remove the element from visibility on the page, but it doesn’t remove it from the DOM (document object model) which is the actual “physical” placement on the page itself. This means it will still load and eat up bandwidth time even though it can’t be seen.

As a marketer, this is important to note because this will have to be kept in mind when planning your responsive website out. If you’d like to give a different web experience for mobile users than desktop this is possible but then you’d be better off creating a whole separate mobile website instead of making your desktop design responsive.

The Bottom Line

These are just three of the important considerations to keep in mind when designing your new responsive website. It’s important that you take your time in planning your site out and work with quality designers and developers who can help walk you through the entire process.

If you have any questions or have comments on this topic, I’d encourage you to post in the comments below and I’d love to chat.

The resident Director of Inbound Marketing at Savvy Panda, Luke Summerfield and his team develop web and marketing success stories for medium to fortune 100 companies and nonprofits. Luke is also the head instructor of Master Inbound, a comprehensive online Inbound Marketing training course.