How to Create a Responsive Website on Siter.io

Building a responsive website with Siter is not complicated. Siter page editor allows you to build responsive websites that automatically adapt to specific screens or devices, particularly on desktop, tablet, and mobile screens where they are being viewed, delivering the best user experience to your website visitors. 

You can also watch the video version of this guide below:

With the screen frame feature, you can arrange and control your elements wherever you want to place them on a specific viewport or screen size, so they look perfect whenever a user visits them on their devices. 

Note: Siter has a built-in responsive feature that automatically resizes web page elements whenever a viewport or screen breakpoint is triggered. 

Using the existing Desktop screen design above, start by adding a new screen for Tablet Portrait on the right toolbar under the Screen option.

Next, duplicate the Desktop group on the Layers panel at the left toolbar. 

Afterward, arrange all the elements by clicking and dragging each of them, including the logo, menu, headlines, image slideshow, and paragraph to the Tablet Portrait screen canvas aligning them on top of each other and switching their position as needed. 

To work with mobile design, add a new screen for Mobile Portrait on the right toolbar under the Screen option.

Next, duplicate the Tablet group on the Layers panel at the left toolbar. 

Once again, arrange all the elements (except for the menu) by clicking and dragging them on the Mobile Portrait screen canvas. You might also need to resize elements such as the image slideshow and align the text and button at the top as needed. 

For the menu, create a rectangle shape using the rectangle tool on the left toolbar or by pressing the R key on your keyboard at the top of the Mobile Portrait screen canvas and change the background color to the #371e8d hexadecimal color or simply use the color picker to select the background color of the page. This will serve as a modal menu when the mobile screen size is triggered. 

Next, start arranging the menu text vertically on the menu. 

Afterward, create a hamburger icon using the icon tool on the left toolbar at the top of the Mobile Portrait screen canvas next to the logo. This will serve as the toggle button for the menu when the mobile screen size is triggered.

To connect the modal menu to the hamburger icon toggle button, switch on the Click Action option on the right toolbar and select the Open overlay from the dropdown menu on the URL field. 

Click on the menu to link to the hamburger icon toggle button. 

Alternatively, you can also directly select the menu on the Layers panel at the left toolbar.

To wrap the toggle button, switch on the Close when clicking outside option to trigger the close modal action whenever a user clicks outside the modal. 

To add a close button on the modal menu, create a close icon using the icon tool on the left toolbar at the top of the menu. 

Next, change the color of the close button icon to #9b90c8 hexadecimal color and align it to the top left of the menu. 

To wrap the close button, select the close icon button and then, switch on the Click Action option. Select the Close overlays link on the URL field to trigger the close modal action whenever a user clicks on the close icon button.

Click on the Publish button to save your changes. To view your responsive web design page, click on the eye icon, and a new window will pop up. 

You can shrink your browser's window to see the responsive design you created inside the Siter page editor. 

Desktop Screen

Tablet Screen

Mobile Screen