What is Responsive Design?
See a demonstration of a website morphing into any device to ensure that every website visitor has a great experience.
There are two things that a website owner can’t control: the device a visitor uses to view the website, and their Internet connection speed. A good web design should consider these factors and ensure the website is at its best regardless of the visitor’s device.
So how does Responsive Design work?
When a visitor goes a website, no matter their device you want them to see the same kind of website, the same look and feel, and the same capabilities. To demonstrate, let’s watch 1happysite.com handle a change of screen size.
The content should flow like a fluid into the space it has been given so that everything can still work. As you can see here, the menu is adjusting to better fit the narrowing screen, and it works at every width.
Now that we are at the phone width, you can see that the content is laid out in a linear fashion, as we tend to flick down pages of information on our phones.
Responsive design should be part of the entire design process. Not just writing the software to allow it to work on any kind of screen, but actually thinking about it during the layout design of the website.
So let’s look at a section on the homepage where visitors can explore what else is on the website. It was designed as a grid, which works well on any screen height or width, because it is easy to calculate the space for each region.
When the screen is wide, we’ve got a centered three by two grid.
But as the screen narrows, the content of each region starts to get crowded and it is time to then flip to two by three, allowing each region to take up 50%.
Then as it narrows even further and the region once again gets crowded, it moves to the final one by six grid, allowing each region to fill up the entire width of the screen.
Responsive Design isn’t just about flowing content into screens, it’s also about the visitor interacting with the website. The website design should adjust for different devices.
For instance, it can be very challenging for a mobile visitor to click a small button, but with this grid, a visitor can click on any part of the region and it will then move to the page accordingly.
At the desktop level, it still works the same, but it lights up when the mouse hovers to show the visitor that they can click their mouse anywhere in the region to get to the page of interest.
So whether a visitor is on a desktop, or a TV or a iPad, or a smartphone or any other device, the website going to feel natural to them and that is the beauty of Responsive Design.