You probably heard the term “responsive design” before, but what exactly does it mean? And what do you need it for? Crunch gives you the answer in this blogpost.
Nowadays it is usually necessary to have a responsive design for you website. A responsive website design makes it possible for your website to suit multiple devices no matter what size. Back in the good old days, the only way to visit a website was from a computer and therefore there was no need for adjusting the content for different formats. Today people uses smartphones, tablets and many different screen sizes to surf the internet. A website made for a computer screen, does not look particularly nice on a smartphone screen. That is the reason why it is important for you to make sure that your website has a responsive design.
The most common way to make a responsive design is by using a grid for the website. A grid is a kind of table that you can add you content into. A grid has the advantage that it changes the position and size of your content depending on the size of the screen. Below you can read about some of the functions that makes responsive design important to use.
Imagine you place 3 pictures beside each other on your website. These 3 pictures will look nice and have a good size when you’re looking on a computer screen. On the other hand – if you look at it on a smartphone, the pictures would be very small and maybe you wouldn’t even be able to see what the pictures represent. With a responsive grid you’d be able to change the size of the image only on the smartphone. Then they could be below each other instead of next to each other, which gives each photo more space.
Try to imagine the same scenario again. You’re looking at the 3 pictures on your smartphone, and you can now clearly see what the presents. But you have to scroll past three pictures now to get your body text, and you’re afraid that people won’t get that far. With a good responsive design you can hide elements like pictures, buttons or text from some devices. You can keep the 3 pictures on your website seen from a computer screen and then hide 2 of the pictures from the website when it’s seen on a smartphone. Suddenly the users don’t need to scroll through the 3 pictures anymore when they’re using their smartphone, and the ones using a computer can still see all 3 pictures. Smart isn’t it?
The last thing we’re going to tell you about is sizing and especially changing of it. A good grid can help you adjust the sizes of your fonts and images for different devices. An image often needs to be smaller on a mobile device than on a regular computer screen. A great responsive design will adjust almost all sizes for you so it will suit any screen size.
There is a lot of different ways to make a responsive design. You can code your own or you can use already made and very popular grids as Bootstrap and SimpleGrid. In most WordPress themes, a grid is already installed, so that you easily can make your website responsive.
Another, and less common way is to make different websites for different devices. For an example, make 3 websites, one for computer screens, one for tablets and one for smartphones. The problem by using this method is that if you make changes in the design like changing a color on a button, changing an image or changing some text, you have to do it on 3 different websites instead of just one.
If you have any question regarding responsive design you’re welcome to ask us. One tings is certain – responsive design is here to stay.