Once upon a time, websites were viewed solely on computer screens. Web designers’ main concerns were limited to discrepancies between various computer screen sizes on the one hand, and inconsistent browser behaviour on the other. That was … oh right … that was last month.
Today, websites are viewed not only on big and small computer screens, but also, and increasingly so, on smartphones, tablets, smart watches, Google Glass, TV screens, household appliances, and what else? Web designers must take into account that all these devices have different screen sizes – from the widescreen size of a modern TV set to the minuscule size of a watch display – and must find a way to make the website accessible and user-friendly on all kinds of devices.
Initially, we set up a system whereby the website detects when accessed by a mobile device. If the website detects a smartphone, it would redirect to a specific mobi site – a scaled down version of the main desktop website, that is viewable and workable on a small smartphone screen.
I consider this still a very elegant and viable option, especially if you expect high mobile traffic on your website. The mobi site can be developed with usability in mind, by means of big handy buttons, small and easily downloadable content and a simple navigation.
An alternative, newer and less programming-intensive technique to deal with the variety of screen sizes, is Responsive Web Design – RWD for the friends. A website is designed and programmed in such a way that it automatically adjusts to the screen it is being viewed on, by means of fluid, proportion-based layout grids, flexible images, and so called media queries – a CSS module allowing website content to adapt to different viewing conditions. In simple words: the mobi site shows exactly the same content as its desktop counterpart, but in a layout that has been optimised for small screens.