A Quick Guide to Converting Websites to be Responsive

Topics: Responsive Design, Web Design

Last year, Google announced that website responsivity would be added to its ranking criteria after research indicated that 60 percent of total digital media time is spent on smartphones and tablets. But rankings aside, responsive design also offers a way for companies to meet user expectations across a spectrum of experiences.

And while you probably were already well aware that your site needed to be responsive, you might not be as familiar with what the process of “becoming responsive” entails. We sat down with our own Mike Fenton, Director of Software Engineering, and Rob McDonald, Software Engineer, as they walked us through what that really looks like.

The Checklist

Evaluate the Content
Mike and Rob both agree that the first place to start is in evaluating the content of each page on the site. Doing so enables them to determine which pieces can easily be resized, which pieces need to stay, and which areas can be trimmed. “Because there is much less screen real estate on mobile devices than on a desktop, one must determine what has to stay, and what can go,” said Mike. “By assessing what’s important to a client’s target audience, we can ensure that nothing gets left out of the mobile layout that should be there.”

Set Up the Values
Next it’s a matter of setting up the values for the percentages of the widths so everything flows, especially for when the screen size changes. Sometimes this is done by using percentages, and other times by using a media query (a reference to the device, commonly the width and height of a screen). According to Mike and Rob, the query basically allows them to apply a certain change any time the screen reaches a certain width or dimension, enabling more drastic changes in mobile content to take effect. An example of this would be making an element take up 100 percent of the screen width on mobile versus 50 percent on desktop and tablet, making an image easier to see or giving text more room to spread out.

Undertake a Performance Evaluation
Finally, you need to undertake a performance evaluation to ensure that everything is working properly. “This would include finalizing all caching issues to ensure mobile devices load the page as quickly as possible,” said Rob.

Pitfalls and Challenges

As with any technical endeavor, there are challenges that can and do arise, and there are some common pitfalls that Mike and Rob pointed out. For example, sometimes older sites are more challenging to convert as, before mobile phones, websites had fixed widths. Consequently, converting older sites to be mobile responsive requires much more manual editing. According to Mike, “The JavaScript can be an issue, as manipulating parts of the page to display correctly on different screens can result in alterations to the code. Additionally, one also has to ensure that the JavaScript accounts for the screen width, too.” Working to get a site customized in its mobile layout can also present problems as any bugs in the JavaScript can affect mobile devices. Another challenge that oftentimes presents itself is the need to turn to members of the UX/UI design team to get their input on the best approach to creating a multi-screen digital experience. If that isn’t possible, it’s up to the software engineer’s discretion in determining the reorganization of the page, always keeping the UI/UX in mind. “Though the challenge of getting everything worked out across every single device can be daunting, it is necessary to ensure that the website ranks higher in Google,” said Rob.

Considerations to Keep in Mind

While in theory any site that has been set up correctly from the beginning should easily convert to being responsive, there is always the exception. Here are a few considerations Mike and Rob recommend keeping in mind when undergoing this process.

• Sites that are built in Flash cannot be done, but rather it is recommended to just start from scratch.

• Any website done in HTML format is capable of being converted—it’s just a matter of time and money.

• The more complex the site and the more moving pieces there are, the more expensive it is going to be.

• Depending on how the website was set up, it’s likely that the developer will not have to go into each individual page to optimize, saving lots of time.

• If the site was coded well, there are lots of global changes that can be cascaded over the entire site.

There are also a few things to keep in mind prior to designing your website itself. According to Mike, “Items that are more ‘eye candy’ are harder to convert to responsiveness than plain HTML, so it’s important to consider that during the initial design phase. Keep that to a minimum, as lots of that will likely have to be turned off when converting to mobile.” An example of this would be animations, as those can be tricky to get to function the same on mobile devices. If possible, it is best to always opt for a simplistic design layout of the site, as the more complex it becomes, the more challenges it poses during the conversion process. Overall, the process of converting a website to be responsive can take anywhere from a few days to a couple of weeks.

Whether you’re in the design phase of your website or already have one in need of responsive conversion, having a site that successfully responds across all devices is a bare necessity. To speak with an Axis41 representative about how we can help with this process, call (801) 303-6300. For more tips and tricks from the experts, subscribe to our blog.