Cut Down on Website Headaches with Responsive Design

Posted: November 7, 2013

Responsive websites are quickly becoming commonplace in higher education, but that’s not just because it’s the popular or trendy thing to do. Responsive design ultimately means less time and money spent on design and development resources, an improved user experience, and the peace of mind that comes from knowing your site will still be relevant as technology continues to improve in the future.

What’s a Responsive Website, Exactly?

In layman’s terms, responsive websites adapt to fit the screen that users view them on. How the website appears on each device depends on how it is coded, but the basic premise of responsive design is to make a website more usable across devices whether it’s viewed on a smartphone, a tablet, or a desktop by scaling and reorganizing content in a way that’s best suited for the screen on which it’s viewed.

How Will a Responsive Website Help My Institution?

Responsive websites can save you and your users time, money and frustration.

It’s still commonplace for websites to have an entirely separate mobile counterpart. With this strategy, users are redirected to a mobile version of the site at a different web address once a traditional website detects someone is using a mobile device.

This sounds like a great solution, but it’s a strategy that can be cumbersome for the people who manage your site. A mobile-only site needs time to be maintained alongside a traditional site. Making sure all content is correct and up-to-date can be a chore. If your mobile website breaks, that means asking for valuable time from your web team to fix the problem.

This, of course, doesn’t take into account all the other different screens that would need to be designed for as well. With tablets, TVs, widescreen monitors and more, it would be incredibly time-consuming to design for each separately.

If your website is responsive, you don’t need to design multiple versions of the site. Your content will be up-to-date and optimized for viewing on any screen, meaning less time from the people managing your site’s content.

How Will a Responsive Website Improve the User Experience?

From a user’s standpoint, there’s nothing more frustrating than not being able to find information. If your users are trying to view your website – ultimately tailored to be viewed on a desktop monitor on their smartphone, that could mean a lot of extra effort on their part. Navigating through drop down menus, zooming in and out of certain page content and using a site’s search function aren’t always the easiest tasks to accomplish on a mobile device.

Responsive website’s eliminate these issues. Touch-friendly navigation, appropriately-sized content and an easy-to-use search function are staples of responsive design. They effectively eliminate the need to maintain entirely separate versions of your site and automatically tailor information to be viewed on any device. When done well, responsive websites give users the same information as the desktop site, just organized and packaged in a manner tailored to fit their smaller screen.

How Does a Responsive Website Work?

Take a look at the website for the University of Maryland’s Robert H. Smith School of Business, for example.

 University of Maryland’s Robert H. Smith School of Business screenshot of website

Viewed on a desktop, as seen above, the Smith School’s website is a view most people are used to. It’s organized cleanly and helps users dig in deep to the information they want. But what if the website were viewed on a smaller screen, like an iPad?

 University of Maryland’s Robert H. Smith School of Business screenshot of website as it appears on an iPad

When viewed on a tablet, the website is coded to start stacking elements on the page. You’re not using your mouse anymore, so scrolling through content is a little easier. Images shrink to scale, and buttons and links get a little bigger to make navigating through the site easier on your finger. The trend continues on smartphones, too.

On smaller screens like smartphones, emphasis shifts completely to making content as easy to access as possible by touch. That means there’s no dense drop-down menus. Buttons and links are large and legible and everything is spaced out nicely.

University of Maryland’s Robert H. Smith School of Business screenshot mobile

How Do I Get Started?

Responsive design can take some effort to implement correctly, but there are definite benefits that can make life easier for you, your users and the people who keep your website up and running.

Choosing to make your website responsive will ensure it works across multiple screens and give usability for mobile a huge boost without the need for a separate development process. As new browsing devices continue to hit the market (think iPad mini or Microsoft Surface) over the next few years, your website will be ready. Ultimately, a responsive website will mean a better experience for your users and less time and money spent by resources.

If you’d like to know more about what a responsive website can do for you, reach out to us. Give us a ring, send us an email or drop a comment below.