Responsive Website Design

A web design approach that we will increasingly hear more of in 2013. A brief non-technical discussion round what it is and how it can be used to build websites with. This post seeks to provide an appreciation and understanding of what Responsive Design can do as well as its limitations.
Responsive Web Design is an approach to web design in which websites are built to provide optimal viewing across a wide range of devices. Basically, this means the site should adapt to the display sizes and formats of; PCs, mobile phones, tablets etc though easy reading and navigation with a minimum of resizing, panning, and scrolling.

It sounds like a panacea and to some extent it is. However there is a big difference for example between the web browsing capabilities provided by basic mobile phones and that of most PC/macs. Even within PCs the capabilities of web browsers differs significantly. Internet Explorer for instance, especially in it's early versions which some still use, is particularly tardy at supporting some of the newer web design techniques and standards.

When we build websites for clients, either for corporate use or to provide recruitment platforms we can deploy aspects of responsive design within the build. This post seeks to provide an appreciation and understanding of what Responsive Design can do as well as its limitations.

Responsive Web Design is in its pure sense an approach – not a standard
Put simply; you are very unlikely to successfully retrofit Responsive Web Design into sites that were not designed with this in mind. Responsive designed sites are ones that are structured so that they can render information across screen sizes from the v large to the v small. They also consider which features are necessary/desirable for what devices. For instance; iphones have no file manager so there is no point in providing them with facilities to e.g. download a CV on one of our recruitment site. Similarly smartphones, in general, use finger touch not a mouse to click on links. Hence the need for a different approach.

If you have heard a Responsive site is the way to go, do bear in mind that there are not really standards for what makes one “Responsive”. This aside elements of Responsive Design may well make sense for some situations.

Features implemented by – most – Responsive Designs
Three technical features broadly sit at the centre of Responsive Web design:
  • Media queries and media query listeners
  • A flexible grid-based structure and layout that uses relative sizing
  • Flexible images and media (using dynamic resizing or CSS)
Note on media query listeners; you need the latest web browsers to make use of such features e.g. Internet Explorer 10 (previously versions of explorer don’t have this facility). On media itself the advent of Apple and their “Retina” quality screens has raised the bar on image resolution. Most computer monitors display at 72 or 96 pixels per inch (ppi), a “Retina” screen can display ppi at between 220 and 326. This gives much sharper resolution and frankly we think they look great. However this means that when storing images - and logos especially – having access to higher resolution quality files is important so that they can look their best on these new generation of devices.

Pragmatic way forward for most sites
We believe that web design practices and tools are still evolving with respect to Responsive Web Design. Also that part of the design approach should be to appreciate how users will interact with websites and will that interaction be likely different between smartphones versus PCs. For instance in recruitment terms, we think it very unlikely that candidates will be creating their CVs on a mobile phone or using the phone to type in covering letters and so on. A PC is simply a much better tool for getting these important bits right and most people with a smartphone we think are likely to have access to a PC. That said, for having a quick look and searching a smartphone can be used there and then, having your site display properly to these devices to gain interest in these situations will be we think increasingly important. Contact us if you would like to discuss these techniques on your site.

A pragmatic approach that we believe works well, that supports both the newer technologies such as high resolutions Retina displays as well as those who might be using older PC and web browser software,is to implement some structural and image techniques that will work in most designs and which can render differently depending on the device used. Another approach we believe that works well and indeed one we recommend for careers sites; is to have a separately designed site for mobile / smartphone use that dynamically displays in place of the normal site when accessed on such devices. The advantage of this approach is that you can specifically design for mobile use without compromising the main site design e.g. remembering that iphone users wont have a file-manager and thus cant easily upload/download any files such as a CV. You can also give these users the option to view the main site as an alternative if they want to i.e letting them choose.

If you are interested in the Responsive Web Design and have any queries how it can be deployed on your site please get in touch by email or though the support site.