<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1639164799743833&amp;ev=PageView&amp;noscript=1">
Diagram Views

Understanding the Limitations of a Responsive Retrofit

Chris Osterhout SVP of Strategy
#Mobile, #Responsive Design, #Design Advice
Published on January 23, 2015

A responsive retrofit can be a solution to implement responsive design without doing a full website redesign, but be sure to understand the limitations.

Responsive Design is a hot topic, and one we discuss regularly, due to the importance of reaching as wide an audience as possible with your website. By ensuring that your website is accessible and usable across every possible device and screen size, Responsive Design lets you provide an optimal experience for everyone, whether they are using a desktop computer, tablet, or smart phone.

But what if your existing site isn’t responsive? For people who don’t have a site that is optimized for mobile devices, there are two possible options: performing a full site redesign, or adding responsive capability to an existing site. A full website redesign is often the ideal option, but for companies who don’t have the budget for an extensive website project, the second option, known as a Responsive Retrofit, may be preferred. This allows you to format your site to reach audiences using mobile devices without having to rebuild it from the ground up.

However, if you decide to perform a responsive retrofit, you need to be aware that it will have some limitations and won’t feature the full responsive capability of a fully redesigned site. Here are some of those limitations:

1. A Non-Responsive Site Was Not Designed for Mobile-First

If your website that was designed with the desktop user in mind, its content may not scale to smaller screen sizes, even after a responsive retrofit. The layouts, images, navigation, and other content may not readily adapt to the mobile experience because it was not designed to do so. For example, sites designed for the desktop often include extra content to fill screen space or use images that contain text. These elements don’t scale well to a smaller screen size, resulting in a less-than-optimal mobile experience.

We advocate for mobile-first web design, since scaling content up from smaller screen sizes is much easier than scaling content down from desktop screens. A responsive retrofit may not be able to fully optimize existing content designed for larger screens, but if you follow best practices for responsive design, content created after the retrofit will be able to ensure the best experience for all users going forward.

2. A Responsive Retrofit Is Not a Mobile Web App

Many people think that making a site responsive means making it look more like a native mobile app. Following this approach, site owners would simply hide any content that they think mobile users will not want to see, and add a more “mobile-friendly” menu. While this might give a website the appearance of a mobile app, it is not the same thing as responsive design.

Responsive design is not about changing what people see on a website; instead, it is about optimizing the order that they see it in. A responsive site uses the same content as a desktop site, but adjusts it to provide a better experience for different screen sizes. This may mean shifting the location of menus, resizing images, or changing buttons to make sure they are tappable. Understanding that the same content will be used for every screen size is essential for ensuring that your website will provide the best experience for users going forward from the responsive retrofit.

3. Content that Works on the Desktop May Not Translate to Responsive

You’ve created great content for your website, but if that content was designed with the desktop user in mind, it may not scale to smaller screens following a responsive retrofit. For example, fixed-width tables or images will not fit within the widths of smart phone screens, or while a modal window that pops up over a desktop screen may be easy to interact with, it could fill the full screen of a mobile device and be difficult or even impossible to close. You’ll need to be sure to pay attention to how design elements or pieces of content will fit within the mobile experience, ensuring that users can view and use the site no matter what device they are using.

Retrofit vs. Redesign

If you’re not able to perform a full site redesign, a responsive retrofit can be the best course of action to ensure that your site is available and accessible for as many users as possible. However, this should be thought of as a short-term strategy, due to the limitations discussed above. In the long term, you will need to consider a redesign that incorporates full responsive capability, providing the best experience for both mobile and desktop users. Doing so will help you future-proof your site, making sure it is prepared for any changes in the technologies that people use to connect with you online.

Do you have any questions about how to proceed with a responsive retrofit or what to consider when planning for a site redesign? Please contact us to speak with a Solutions Engineer, or feel free to leave a comment below.