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:
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.
Copyright © 2011 — 2018
All Rights Reserved
YOU SHOULD USE WEBWAVE TOO!
Try - it's free
HELP & SUPPORT