Transitioning Your Site From Desktop to Responsive

Many of our clients are curious about what it takes to transition a site from desktop-only to “responsive” — a web design approach that provides an optimal viewing experience on any device by detecting the visitor’s screen size and then adjusting images and layout accordingly.

Below is a summary of the conversations we typically have with clients about adopting responsive design, from when and why it makes sense, to the types of changes that will actually be made to the layout and code. We’ll use the Hill Investment Group site — a recent desktop-to-responsive project — to illustrate the process.

 

Responsive case study: Hill Investment Group

Several years back, before responsive sites became popular, we designed and developed a desktop site for Hill Investment Group. The client was happy with the design, but as years passed and their mobile and tablet traffic exponentially grew, the time came to address the site’s mobile experience.

 

Why does mobile-friendly matter?

Mobile browsing is no longer a thing of the future — it’s very much of the present. There are three big reasons to further consider your site’s mobile experience: volume, user experience, and the almighty Google.

 

1. Mobile Volume
You don’t need a research study to tell you that smartphones are ubiquitous in 2015, but for good measure, let’s run through a few stats from Pew Research Center:

• As of May 2013, 34% of adults use their phones for the majority of their Internet access
• Among adults 18-29 who use the Internet on their phones, 45% do most of their web surfing there

The shift to mobile is clearly reflected in site traffic patterns, too. Take the Hill Investment Group site, for example. Between 2012 and 2014, the number of mobile users visiting Hill’s site increased by 382%.

 

2. Mobile User Experience
Since desktop sites are not designed with smaller screens in mind, there can be issues with the way the site displays and functions on mobile and tablet.

A less-than-ideal mobile experience obstructs your user’s ability to accomplish her goals — whether that means navigating your menu, reading information from your About Us page, or making a purchase in your online store. From the user’s perspective, an imperfect mobile browsing experience is not only inconvenient; it’s likely to discourage her from coming back to your site (or your brand) in the future.

 

3. Mobile Search Results
In an effort to push the Web toward a mobile-friendly future, Google is taking steps to reward sites that are optimized for mobile and to punish those that are not. The following statement was recently published on the Google Developers blog:

“Starting April 21 [2015] we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”

If your site isn’t optimized by the cutoff date, your mobile search ranking will fall, making it less likely that potential customers will find your site.

 

Why responsive web design?

Responsive web design isn’t the only option for a mobile-friendly website, but in the case of Hill Investment Group, it was the right choice for several reasons.

 

1. One Unified Site
One of the major benefits of responsive web design is that it unites desktop and mobile versions into one singular entity, with one URL and one code base. A separate mobile site, on the other hand, is just that — a separate site that requires separate design and development.

 

2. Centralized Content Management
When you have separate desktop and mobile sites, you have two different realms of content to manage. With a responsive site, all content is managed in one place, minimizing both entry time and opportunity for error.

 

3. Future-Friendly
Who wants to redesign their website every time a new device hits the market? Rather than redesigning and rebuilding for countless specific screen sizes, it makes sense to design a site that can accommodate any screen size.

 

4. Google Prefers Responsive Web Design 
While Google recognizes three different configurations for mobile sites (responsive, dynamic serving, and separate URLs), the search engine officially recommends responsive web design as its preferred design pattern.

 

How does the responsive redesign process work?

Often, when we talk to clients about upgrading to responsive design, they’re unclear on what the process actually entails. Here’s a look at how the responsive redesign process works, starting with a desktop-only-site, and ending with a live, mobile-friendly website.

 

Design Phase
Hill’s team was happy with the existing desktop layout, so our task was to simply tweak the design for mobile devices rather than starting from scratch.

To kick off the upgrade process, we produced design comps that illustrated how each page template would display on tablet and mobile devices.

A responsive website needs to display and function correctly at every pixel width and height, but it’s not feasible for designers to create a Photoshop mockup at every single screen size. To address the in-between screen sizes without exact mockups, designers and developers work together to interpret what these layouts will look like.

Site assets also play a large role in responsive redesign. Since desktop websites typically are not retina-ready, designers must provide larger versions of all of the theme images so that the site looks crisp and clean on retina phones and tablets.

 

Development Phase
Unfortunately, most desktop-only websites were not originally designed with a responsive future in mind. Older HTML and layouts must be wrangled down to a mobile size — a process that makes responsive redesign somewhat more complicated than developing a responsive site from scratch.

One integral part of the responsive redesign process is looking at the site’s current HTML to see what will be possible design-wise when elements scale down and stack on top of each other. It’s up to the developers to decide whether to update the site code and use the latest development tools or to develop in plain vanilla CSS. Both options have their pros and cons, so it comes down to what makes the most sense for that particular project.

 

What can a responsive site accomplish?

In early 2015, we updated Hill Investment Group‘s website using responsive web design. The new site ditches the “pinch-and-zoom” mobile experience for easy-to-navigate stacking content. Now, everything that worked on desktop functions properly on mobile and tablet, including video, full bios, email newsletter signup, and the blog.

With these changes in place for just a few weeks, site analytics already indicate improvements in the mobile visitor experience.

• The average session duration for mobile users increased by 193.4%, showing that mobile users are spending longer periods of time on Hill’s site now that it is responsive.
• The number of pages per visit for mobile users increased by 1.3%, indicating that mobile visitors are exploring more content on the responsive site.
• The mobile bounce rate decreased by .39%, showing that mobile users are now less likely to leave immediately upon arrival.

 

How do I know whether my site is mobile-friendly?

Not sure whether your site is mobile friendly? You can evaluate any page using Google’s Mobile-Friendly Test.

Interested in making your site mobile-friendly? To talk to TOKY about the process of upgrading your site from desktop to responsive, drop us a line at info@toky.com.