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.

Hello, how can we help?

Thanks for taking the time to visit our website. Please use our assistant to show you around and find out what you need.

Powered by AI Humans

Back

I'm setting up a new company or start-up

Setting up a business can be a daunting prospect. We really enjoy working with startups and can help with all your creative and technical needs, including logos, company branding, website creation, email services and hosting.

Powered by AI Humans

Back

I'm from a University of Cambridge organisation

If you are a member of the University of Cambridge community and you are looking for a web design or digital marketing agency, please contact us to discuss your needs and help you to develop a solution that meets your goals.

Powered by AI Humans

Back

I want to sell products online

We have helped many clients sell online whether it’s an online shop, event booking system, donation provision or membership platform. We have the creative and technical know-how and are perfectly placed to advise you on the best solution.

Powered by AI Humans

Back

I'm looking for a website redesign

Website redesigns are usually required when your current system has been in operation for a few years and has either become outdated, doesn’t reflect your current servies or is technically broken.

Powered by AI Humans

Back

I'm looking for a new web agency

We’re experts at planning, designing and developing websites for our clients. From initial ideas to completion, we create modern, accessible and eye-catching websites that are fast, easy to use and deliver creative and technical features.

Powered by AI Humans

Back

I'm just browsing, I love your work

Awww, that is really nice to hear. We do love what we do so any postive feedback is shared to the whole team as we all bring our unique skills to every project.

Perhaps browse the following pages to find out more about Chameleon:

Powered by AI Humans