Before we get started, let's clarify what responsive website is. Responsive web design (RWD) is an approach to web design that makes web pages match the screen sizes on a variety of devices. Regardless of the device you are viewing your website at, it should be displayed properly. What is more, you can change an elements style and size in every website version: for desktop, tablet or mobile. It is impossible to modify in  websites of "mobile" type. Read more about differences between responsive and mobile website

 

In order to create your first responsive website, you should finish your website project for desktops first. Once you are done with it, read the article below and get started with building your first responsive website. 

 

Building a responsive website is mainly adjusting the project you have created to the other screen sizes  by  modifying the content and size of elements to breakpoints. Why to breakpoints? Because everything outside breakpoints is not visible to a user.

 

Activate RWD

Select a screen type

Adjust

Disable RWD

 

 

Activate RWD

At the top of your website choose the icon of a version you want to edit and activate RWD.

 

 

Select a screen type 

 

Adjust

The elements layout is normally copied from the Desktop version which has different width and height. Now you have to adjust each element separately to make sure it fit the mobile screen (in this case).

 

 

Adjusting elements layout shouldn't take long, but everything depends on the website and the number of modifications you want to apply.

 

 

It might turn out that the content or menu, which you created for Desktop version, need to be changed. Read more about possible solutions on how to place elements differently or create them again from scratch. The helpful thing to know would be  how to hide elements as well.

 

Adjusting elements looks the same for each website version.

 

 

Disable RWD

If you decide you don't need RWD now, you can turn it off by moving the slider to the left.

 

Separate object association for different RWD versions

You already made a page where you have binds, but you would like the page to be different in the order of elements or layout in the phone view? Nothing simpler, just select an element, go to the settings panel, and then to the "Bound Objects" tab. Click the button "bind for RWD differently" and set your own conditions on how these binds should look like in one of the mobile views:

 

First responsive website (RWD)

15 January 2019

Back

Didn't find a solution to your problem? Contact us on live online chat or ask on Facebook group.

 

Missing any feature? Share your ideas with us.

 

PANEL WEBMASTERA

LOG IN

GET STARTED

This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.

FIND US ONLINE

HELP DOCS

WEBWAVE

FOR CUSTOMERS

OFFER

WEBSITE BUILDER

Click here to chat with us.

CONTACT

contact@webwave.me

PANEL WEBMASTERA

GET STARTED

Free website builder WebWave makes creating websites effortless. You can start building your website either from scratch with a blank page or, if you are looking for some inspiration, with a free template.  Web design software for free? It is easy!

PL

EN

RO