Times when we used computers only at home, at the office and maybe at an internet cafe, are long gone. Nowadays, people expect to be able to shop for clothes while standing in line, waiting for their favorite cup of coffee or plan a world trip sitting on a park bench. Sites and applications have a very hard task of adapting to this changes and requirements to keep up with their users. That’s when responsive web design (RWD) comes in.
Content is like water
If I had to explain responsive web design to someone, I would say that content on the website should be like water. When you pour water into a cup – it becomes a cup. If you pour it into a teaspoon it should also become the teaspoon. That’s exactly how the websites should act. Everything that’s on the page should remain equally readable, presentable and work as good on every device.
Forget everything you know
…about building websites. Responsive sites should use fluid grids. The whole mechanism behind it is based on proportions. All page elements are sized according to the relation between other elements. For instance, if we have one column on the page it takes almost 100% of the page, while when we have two, then each takes away 50% of the space. This way even if screen resolution changes from 1366×768 (desktop) to 320×568 (mobile), you will see two columns with 50:50 proportions in each case. Media, such as graphics and images, are also resized relatively. That way they can stay in the same relation to other design elements. For example a column, that they’re placed in.
Back to the basics
As we all know, it’s usually easier to add new elements than to take one away once it’s already there. The same rules applies to responsive websites. That’s why it’s highly recommended to develop a mobile app first. It imposes selection and hierarchy of the elements due to the limited space of the phone screen. This way we make sure that the mobile app has only the key elements that are absolutely essential. This way we allow the user to perform the task or reach the information they need in a simple and quick way.
Web is no longer about the look – in the mobility era we have more of a real look & feel concept. Most smartphones already have touch screens so the users won’t navigate the site using a mouse but a finger, and for example PlayStation fans will use the pad. So contrasts go way beyond the size and it should be in your interest to use these differences to your advantage. Responsive design enables creating different styles of navigation, therefore making it possible to fit users needs and habits.
If you don’t invest in responsive design today, you may wake up tomorrow being far behind your competitors. And it’s going to be really hard to catch up. The mobility era forces us to adapt our businesses to the changing circumstances, investing in solutions that are able to face these challenges is extremely important to keep your users happy and profits high.