A responsive website design means that the website elements (for example: text, images, videos) automatically adjust to the device it is visited from. This ensures the best user experience. 

Every day the number of mobile users on the Internet is increasing. In 2016, the percentage of mobile users exceeded that of desktop users globally and grows since then. A responsive website is not just important for the user experience but also for your ranking in search engines. Google, for example, looks at the mobile version of your website to determine where it should be ranked in search engine results. A bad mobile site means a bad ranking which results in less traffic. 

The good news is: All website templates in Sitejet are responsive by default - unless you disable this or make significant changes to your elements so that they are not responsive enough anymore for your mobile website. 

If you like to turn off the responsive design, you are able to do so under More > SEO Settings and uncheck the checkbox below the preview. This checkbox is on by default and we strongly advise to keep it activated.

Switch between the viewports

You can switch between the desktop, tablet, and smartphone view via the viewport buttons in the top menu bar of the Website Builder. This includes resolutions for popular devices and landscape and portrait orientation. You can also adjust the zoom to your needs. 

No matter which view you are selecting, the Preview Mode will work with it. The Presentation Mode, however, displays the desktop, tablet, and smartphone views all in one screen in a new browser tab. These previews are fully interactive.

Adjust elements for each viewport

In the Website Builder, you can quickly improve the responsiveness of most elements with a few clicks - from changing the number of columns in a section template to changing the order of elements in a container up to making elements invisible. 

Hide Elements

In some cases, it can make sense to not show certain elements in a specific viewport. To achieve this, go to the viewport you like to hide an element and click on that specific element. For this case, let us go to the smartphone view and hide a few elements. 

Double-click on the element or the container or a whole section template in that specific view and open the Style panel on the left side. 

Now expand the Visible option and uncheck the "Visible" checkbox. The Website Builder now shows you, that this element is "hidden for mobile" and greys out the elements selected:

Customise elements by viewport

This powerful feature and method works for most changes you want to apply to your elements, whole containers, and section templates. As an example, we use the four columns section template and adjust the number of images shown on tablet and mobile. In the desktop view, we want to display three images side by side.

Switching to tablet view, you can see that three images look cramped next to each other and that's why we are going to switch to two columns for this view. This looks much better. You will now see that the color of that setting has changed which reflects the color of the viewport.

Those colors indicate changes made only for a certain viewport. 

• No color = The default setting and for desktop
• Violet = The changes were made for the tablet view
• Yellow = The changes were made for the smartphone view

Changes that you make will always affect the other viewports - unless you have already made a viewport-specific adjustment. E.g. if you change the number of columns on desktop this will cascade down to the tablet and smartphone view. Now if you change the number of columns for tablet, this will affect the smartphone view and will only be changed if you make smartphone-specific changes. The color of the setting will always indicate if there have been viewport-specific changes. 

Generally, the Website Builder makes most of the section templates responsive unless you set specific settings that can disrupt the appearance in another viewport. So be careful with absolute heights and widths, for example. And always check the changes in each viewport.

With this feature, you can make significant changes to the apperance of your website in each view like for example:

• hiding elements for certain views
• change amount of columns for each view
• adjust the flexbox settings, as well as height, widths and element alignments
• adjust the menu and many other section templates for each viewport

Please be aware that e.g. deleting an element from one viewport will do so in every other viewport. If you like to add an element to one viewport only, you have to make it invisible for the other viewports. Also, changing colors or fonts will also affect all viewports.

Responsive Changes in the global Design Settings

Going back to a more global approach, this feature will allow you to make settings in the global design settings for each website to make your website more appealing adjusting to each viewport. 

Go to Design in the top menu and apply your changes for each viewport by switching through them. Don't forget to save your progress afterwards.

We highly recommend to use the Presentation Mode to see the changes you make for each viewport. This will ensure that the changes you made will look great on each device. 

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Back to the top