Responsive Web Design

Submitted by mathew on Fri, 07/10/2016 - 12:22

Responsive Web Design (RWD) is an approach to web site design that allows a site's content to scale gracefully from large screen down to small screen devices. Using a standard layout that favours large screens means anyone viewing the site on a small screen needs to zoom in to content they want to read. Conversely, by using a responsive design, the same content is displayed in a way that works well on any size of screen.

The following image shows a comparison of the old website alongside the new when viewed on an iPhone. There is no need to zoom in, and the text is fully readable on the small screen. Images re-scale to fit, side-bars move to the bottom when space is limited and so on.

Side by side comparison of the old and new website in an iPhone

Ever since 2010, when our first web site went live, we've been using Drupal to run our web site. Drupal is a (fantastic) Content Management System that allows us to quickly create new blog posts and pages in the user guide. The iOS app hooks into the CMS to display the in-app help (available on almost every screen in the app).

Drupal is very flexible, and we have added custom code "modules" for a number of things, from the in-app help system to the downloader for Easy Books for Mac. These modules are not useful to anyone else, but to us they have been well worth the investment of development time.

In 2016, the folks at Drupal released version 8, which as far as I know was the first version to allow a mobile-friendly layout. At this point, it was finally possible to take advantage of RWD.

The down side was of course that every one of our custom modules needed to be re-developed from scratch. Unlike previous versions of Drupal, which have been improvements on the original over time, Drupal 8 replaced all the code with a completely new system, building on other frameworks themselves.

But despite this, we felt it was still worthwhile to move the site over to the new system. After all, as a software company selling apps for the iPhone, we should have designed our own web site to work well on smaller screens much sooner than this.

We are really pleased with how the new site is looking, both on large and small screens!