DTVs Responsive Website

/in /by

A growing number of people are using their mobile devices (phones and tablets) to access the Internet; this is happening throughout the world – not only in Africa. The problem, however, is that many websites are not designed to be accessed via mobile devices, meaning you either have to zoom in, or scroll left and right continuously, just to be able to read the text.

This is why, when relaunching the DTV website in June 2014, our first priority was making sure the website was fully accessible on all devices, using a responsive design: from Blackberry through to all other smartphones, and from iPads through to laptops and desktop computers. This meant that all the images had to shrink to fit any screen size, the text had to be legible without you having to zoom in, and while you still have to scroll down the page, you shouldn’t have to scroll left and right. Additionally, the site had to adjust properly regardless of whether you viewed it in landscape mode, or portrait mode.

Except for the navigation menu at the top of the page, the site retains the same look and function, regardless of what device you are using. It is only on smaller screens that the regular navigation menu is replaced by a club sandwich menu – that is the term used for the icon shown in the following image

and almost all mobile responsive website use either the hamburger menu, or the club sandwich menu. Tapping on the icon reveals all the links normally shown in the standard navigation menu.

A final step, currently underway, is to ensure that all images on the website have also been optimised: reducing the file size of all images, without noticeably affecting the quality of the images. This isn’t essential, but it is recommended – the cost of mobile data is still quite high in many countries, so the aim is to ensure that the website loads as quickly as possible, especially on mobile devices that don’t support 3G and LTE. This is achieved, on DTV’s website, by using a combination of ImageOptim, ImageAlpha and JPEGmini, depending on the image file type.