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.
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
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.