For browsing the web, users have a wide variety of devices they can make use of, including PCs, tablets, or smartphones. To make the content look nicely on each of these devices and screen sizes, web pages have to render well and adapt accordingly. This is what is known as "responsive design".
Visitors of a website may use a smartphone if they want to shop on the go, or a tablet to order something on the couch. Whatever device your visitors might use - we've got it covered: your website will always be displayed in a version that is optimized for the used device. Responsive design ensures that the content visitors look at adapts to their device without any compromise in user-friendliness.
This applies in particular to, but is not limited to:
In the following, we'll show you some examples of the above list and how these elements might look like on different devices.
Note
Depending on the chosen theme, the appearance of specific elements might differ.Header
In the header of your website, you can advertise your USPs. If you've added several USPs, it might be hard to read all of them on smaller screens, like e.g. smartphones or tablets. That's why USPs are shown in a slider format as soon as your visitors use a device with a smaller screen. The USPs will be automatically switched in a certain time frame, so that visitors will still see all of them. Furthermore, they can manually select the arrow to see the next USP.
Larger screen:
Smaller screen:
Search bar
As there is less space on smaller screens, the search bar is reduced on these devices. But the visitors can easily access the full search bar by selecting .
Larger screen:
Smaller screen:
Navigation menu
The navigation menu is also optimized for smaller screens. While the navigation menu is directly visible on larger screens, visitors can easily select to access the navigation menu on smaller screens.
Larger screen:
Smaller screen (with opened navigation menu):
Images in content elements
Responsive behavior is also relevant for images in content elements. The reason for that is that these image might be displayed in their entirety in the desktop version but might be cropped in the mobile version, or the other way around, depending on the original size and orientation of the image.
Here's an example of how an image can be displayed on larger screens:
And that's the area that would be visible on smaller screens:
As you can see, the upper and lower part of the image was cut off a bit on the larger screen. On the other hand, the left and the right side was slightly cut off on the smaller screen.
There are several tips and tricks for the handling of responsive images:
- Align your images in image sliders in order to prevent the most important parts of an image getting lost due to the screen size.
- Upload images that stick to the recommended image size.
- Try to put the most important content in the middle third in height for images uploaded in landscape orientation in order to ensure that it's still visible on larger screens.
- Try to put the most important parts in the middle third in width for very wide images to still display the important content on smaller screens.