Challenges making your existing website design responsive

Over the past year, we’ve made several existing website designs responsive, including Shady Lane School, First Commonwealth, and CMU Today. As you can see from these examples, responsive web design (RWD) helps modernize an existing design while it helps you reach a mobile audience. It removes the burden of having to do new IA and designs for those sites. To complete a responsive transformation, there are a lot of challenges you have to work through from navigation to site performance. Here are a few things to consider before you make your existing site responsive.

Navigation

Most large sites, especially complex higher education websites, have a lot of content. This leads to large navigations with multiple levels and different placements – from top navigation to in page sub navigation. This is the most complex problem you encounter when making your site responsive. Transforming the navigation, which was designed to be used on a desktop, into something that can be navigated on mobile takes a lot of design effort, tweaking, and prototyping. When you can’t change the existing layout, you need to come up with some creative ideas to make it work on smaller devices.

 

Callouts

You probably have a number of callouts and other contextual items on your website. Callouts help promote important information to your users, information that they need to see when they come to your website. These usually fit very well on a desktop and help eliminate white space.

But this information isn’t always as easy to display on smaller devices, due to space limitations. You have to decide where this information should be displayed, or if it should be displayed at all, on these small displays. You want to make sure users see this information  without crowding the display.

 

Markup

There are constant new developments to HTML everyday. This means that there are new best practices that weren’t around last time your site was built. A redesign is a good time to update your markup to get closer to these best practices. This modernization makes it easier to maintain and improve your website in the future and makes it easier to make your website responsive.

 

Images

Images already pose difficulties for developers and content managers on large displays. You need to manage the sizes of the images and crop them to make sure they fit in the given space. Going responsive adds more complexity. There are new sizes to adapt to. You now have to make sure your images resize on mobile without distortion and change dimensions when they do. The overall sizes can be problematic for performance, which is covered in my next point. Don’t let this point scare you. While it sounds difficult, there are a lot of things that can be done that will limit this burden, especially if you are using a modern content management solution.

 

Performance

Smaller displays can mean that your users are using slower connections to get to your site. Users will wait about 5 seconds for your site to load. If it takes longer, they will probably give up and move on. This makes performance very important – you don’t want people to leave before seeing your site. It starts with optimizing your images so they are easy to download. But don’t stop at optimizing just the images. The CSS and JavaScript — pieces that make manage your website’s display and interaction — need to be optimized as well. Long download times for these files can block your site from displaying until they are finished loading.

 

CMS

Depending on the age of your site, your CMS could be outdated. It might have been built on old technology, or it could just benefit from the new tools that have come to market over recent years. When you are taking the time to make a site responsive, it’s a good time to update or change the CMS. For instance, you can gain a lot of benefits in both performance and image handling that weren’t available in your previous implementation. But be aware of custom components prior to making this decision — sometimes there are elements that require more work than expected if you want to move or update your CMS.

 

While taking an existing site responsive has benefits, such as not wasting time redoing the IA or design, it does have its difficulties. These points should help you decide if your site needs a complete redesign or responsive retrofitting. If you are interested in making your current website responsive or doing a complete responsive redesign, please contact us. We are experts in doing both.