Before we get started, let me clarify what responsive website is. Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Regardless of what device you are viewing your website at, it should be displayed properly. What is more, you can change elements style and size in each website version: desktop, tablet, and mobile, which is impossible 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 desktop project first. When you are done with it, read the article below and get started with building your first responsive website. 

 

Building a responsive website is mostly about adjusting to another screen size already existing project by changing the content and size of elements to breakpoints. Why to breakpoints? Because everything that is outside of breakpoints is not visible for the user.

 

Activate RWD

Select screen type

Adjust

Publish website versions

Reset settings

Disable RWD

 

 

Activate RWD

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

 

 

Select screen type

We will be working on a tablet screen, so select its icon. 

 

 

 

Adjust

Elements layout has been copied from the Desktop version, which has different width and height. Now you need to adjust each element separately to make sure it suits a tablet screen. 

 

 

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

 

 

It might turn out that content or menu, which you created for Desktop version, needs to be changed. Read more about possible solutions how to place elements differently or create them again from scratch. You should also learn how to hide elements.

 

Adjusting elements looks the same for each website version.

 

 

Publish website versions

When you are finished with adjusting elements, now it is time to publish a certain version o your website. At the top of the builder select cogwheel icon, tick boxes next to the version you want to activate and save settings by pressing the green button.  

 

 

 

Reset settings

If something goes wrong, you can always reset all settings for a particular version and start over. No need to start a new project or click undo a hundred times. To reset settings enter cogwheel icon and select "Reset all RWD settings for whole RWD mode". 

 

 

 

Disable RWD

In case you decide, that you don't need RWD now, we created a feature which allows disabling RWD versions of a website. Once again, you can do it by entering cogwheel icon and scrolling down to "Disable RWD edition".

 

First responsive website (RWD)

15 January 2019

Back

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!

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