11 April 2017

Before we get to work, it's worth to mention what is "responsiveness" – it is the page ability to adapt to different widths, depending on the screen on which it is displayed. It is irrelevant whether we open a page on a tablet or phone, each time our site will be adapted to a given resolution, and our project may look unique on every device. It can't be achieved on the "mobile" pages, which are already being replaced by responsive ones. We already wrote about the differences between a responsive and a mobile page in one of the articles. After this introduction we can proceed to action.

 

To create your first responsive page, you must first prepare the project for the desktop – the first, default view selected in the WebWave wizard. When this project is done we can go on to create a responsive page.

 

Creating a responsive page is primarily based on adjusting one of the previously made views to the rest, matching the content and size of the elements to the breakpoints. Why to them? Because everything that goes beyond their borders may be invisible / cut off in some resolutions, everything depends on the display / device on which our site is viewed.

 

Let's get through all necessary steps:

Activating RWD modes

Select working view

Adjustment

Publishing views

Reset settings

Disable RWD

 

Activating RWD modes – In the upper right corner, we click on the icon representing the mobile devices and we enable the possibility to go to any mode using the "on" button



 

Select working view – In our case it will be a tablet, so we click on the image that represents it and go to edit.



 

Adjustment – As we can see, our website now requires us to adjust each item individually. Its present appearance is a cropped page from the desktop version we had previously created.



 

Correct placement of items should take a moment, everything depends on the page and the size of the modifications we want to make.

 

You may find that the text or menu that we created requires modification, so we need to find a solution to somehow reposition some items or re-create them. We should then learn more about how to hide elements.

 

These actions can be applied to each of the views that we edit, so the methodology of action is thus the same for each of them.

 

Publishing views – After adjusting the site to our expectations we should go to publication. To do so, click again on the icons representing the different mobile devices, then in the drop-down menu select the “gears” icon. In the "RWD Settings" select the views we made and by selecting "checkmarks" we decide on their visibility. After all, press the green "save settings" button and exit by pressing the cross in the upper right corner.



 

Reset settings – There is also a "reset" option for each view. It allows you to start creating any view without having to undo or start a new project. These options can be freely activated in the RWD settings.

 

Disable RWD – If we decide that RWD is useless for this moment, we can turn this option off. We do this in the previously mentioned RWD settings.

GO BACK             

First responsive web site

 

 

Copyright © 2011 — 2018

All Rights Reserved

PRODUCT

CONTACT 

contact@webwave.me 

YOU SHOULD USE WEBWAVE TOO!

Try - it's free

SIGN UP

SUCCESS STORIES

HELP & SUPPORT

LANGUAGE

SIGN UP

LOG IN

SIGN UP

LOG IN