In the beginning websites were designed and built for one screen size, the desktop, as this is how people surfed the internet. Today, with the explosion of different types of devices screen sizes vary enormously so one fixed size website is no longer good enough. To fix this and make the user experience good on all devices modern websites are now created to adapt to the screen size available. This is called ‘responsive web design’.
When Chameleon started building websites for clients all our websites were designed to a fixed size so that it would look great on a desktop monitor. Of course people had different monitor sizes so we’d use the lowest screen size. Way back we would use 800 pixels and then moved up to 960 pixels as monitors improved. This meant that every website would always be displayed in the same way, larger monitors would have more space on each size of the website.
As mobile phones became internet enabled and people started to use their phones to access websites this desktop designed websites had to be resized down to fit the small screens. This resulted in very small fonts, having to zoom into the page to read content and clicking links was problematic. The first solution was to create a mobile version of the website. So the same content but displayed optimised for a phone screen. Mobile websites tended to be hosted on a mobile.website.com or m.website.com style URLs and users might have been prompted to view the mobile website if they started their visit on the desktop website. This worked okay but it meant two separate code bases to maintain so an increase in development costs.
The real solution was to have one website which was clever enough to know how to be displayed to a users device. The first option was to find out the device being used, so an iPhone, tablet, web enabled television, Nokia or perhaps a Samsung phone but due to the shear number of devices keeping an up to date list of devices is hard. There were commercial services that could be used to do this. However, the device being used is ultimately not important as the website just needs to know the screen size available. So the method that is now used is the the website’s style sheets (which are used to control styling such as fonts, layout and colours) has switches based on the users browser width – usually grouped into 3 or 4 ranges. So large desktop, desktop, tablet and mobile.
Prioritising Content
As screen sizes reduce the amount of content that can be displayed on screen at anytime is reduced so prioritising what to display becomes very important. Whereas on the desktop version a large image based slider might be an efficient marketing device on mobile getting a key message across with a call to action might be preferable.
As website designers we can decide whether to show or hide all the elements on the page or even show mobile specific ones – especially useful for images where smaller and higher compressed images will help page load times. A very common thing you’ll notice on mobile and sometimes tablet versions of websites is the navigation is tucked away until you need it and shown only when the menu button is pressed.
User Interaction is Very Different
Another important consideration between mobile or tablet devices and desktop computers is the way we interact with the websites. On many websites hovering the mouse over can trigger an action such as a navigation drop down. On mobile there is no hover state – these are known as touch devices. Because of this when designing highly interactive websites touch versus mouse interaction is crucial to making the website work!
In Summary
Almost all the websites we now build at Chameleon are responsive, although not needed to work on a smaller screen they do make it easier for the user. Ultimately, responsive websites have made building the website harder due to additional design and development time.
