When it comes to web design and development, we quickly reach a point where it’s impossible to keep up with new resolutions and devices.
For many websites, creating a version of the site for each new resolution and device would be impossible, or at least impractical.
Do we have to suffer the consequences of losing visitors from one device to gain visitors from another?
Or is there another solution?
The responsive site is an approach that suggests that website design and development should respond to user behavior and environment according to screen size, platform and orientation.
This practice involves a mix of flexible grids and layouts, images and intelligent use of CSS (Cascading Style Sheets) media queries.
When the user switches from laptop to iPad, the website must automatically adapt to the resolution, image size and scripting capabilities.
The device settings must also be taken into account.
In other words, the website should have the technology to respond automatically to user preferences.
This would eliminate the need for a different design and development phase for every new gadget on the market.
How do responsive sites work?
A classic website is made up of a set of files, each containing HTML code and content (text and images).
Web pages are styled using files called Cascading Style Sheets (CSS).
For ease of explanation, let’s say that a standard (non-responsive) website has one set of files and a few CSS files that govern the site’s appearance.
A responsive website applies another set of CSS files depending on the device used to access the site.
The site’s appearance and response vary according to the device.
For example, if someone viewing the site from a desktop device sees a horizontally aligned navigation menu, someone viewing the site from a mobile device gets a vertically aligned navigation menu with larger text, easier to read on a smaller screen.
There was a time when people only accessed sites from a desktop computer.
The vast majority had the same screen size.
Websites were designed for the average visitor.
Today, people access websites from a variety of different devices with screens ranging from a few inches up to 27 inches or more, and expectations have changed.
Consumers expect the site they’re visiting to know that they’re using a tablet rather than a PC.
They expect the site to adapt to them, not the other way around.
This is where the importance of responsive sites comes into play.
