Today it is important that your visitors read the content of your website on different screens comfortably. In this demo we will show how to do the Responsive Web Design fast and easily.

About Responsiveness

What is Responsive Web Design? Responsive Web Design is how your website will look on various devices, in the Mobile Views.

respposive-concept.jpg

Possible Problems. If one does not follow the rules of Responsive Web Design, then websites are hard to read because of very small fonts, small images, and some elements may overlap.

Block Movement. To understand how to create the Responsive Web Design, it is important to understand what happens with your data in Mobile Views. Usually your website width shrinks and the content blocks are moved one under another.

block-responsive.jpg

Switch Area. In the reviewed User Interface of Nicepage, there is a special Area for switching the Mobile Views. This allows to preview and to modify the design for each specific view. And this is how your website will look on various mobile devices and the desktop.

Let’s review what are the most popular Mobile Views (Responsive Modes) supported in Nicepage.

Mobile Views

Supported Viewports. The first view is the Desktop View, it is the widest supported viewport. The next is the Laptop View, further the Tablet View, then the Phone Landscape and, finally, the narrowest, and one of the most popular modern screens - the Phone Portrait View.

phone-view.jpg

Solution for Various Devices. The most common question is how to create websites look nice in the Responsive Modes? If the data does not fit on mobile devices in width, you need to use grid layouts or columns, in other words. And we will explain why.

block-movement.jpg

Using Grid Layouts

Fitting the Content. So, how do the grid (columns) help with the Mobile Views? There is usually much content data that does not fit on the Phone screen, for example. In Nicepage, the grid layouts are created, so that if there is not enough screen width the grid cells are moved one under another automatically. We recommend to use the grid layouts to fit your content on mobile devices at once.

grid-layouts.jpg

Image Sections. In Nicepage, in the New Section dialog, the majority of pre-designed sections already use the grid. Adding those sections you have no worries, as all Mobile Views are already done correctly and you do not have to do anything.

image-sections.jpg

Adding a Section. Add a new section. Select Images. Select the “Business” thematic category. Select a style to the left. Let’s add this Gallery section with 3 images. Click Done. Adjust the section margins a bit. There is a grid with three cells used in this section. Switching the Mobile Views we see the movement of the cells.

Layouts Without Grids

Adding an Intro Section. However, there are section that have less content, for example, the Introduction (or Hero Image) sections. Add a new section. Select “Introduction”. In the New Section dialog, select the “Business” thematic category at the top. Select this Section. Click Done.

containers.jpg

Containers Instead of Grids. Such sections use containers instead of grids. Let’s add an Introduction section for the demonstration. Decrease the section height if necessary. Switch the views to see the result.

Creating a Responsive Section

Adding a Blank Section. Now let’s create a simple section with two cells to show that it is fast and easy to create the Responsive Web Design with Nicepage. Here is the section that we will use as an example. Add a new section. Select Blank. Increase the section height. Add a Grid. Select Add -> Grid. In the dialog, select the Grid with two cells. Click Done.

adding-grid.jpg

Modifying the Section. By default, grids are added with the default image background, so it is easy to recognize cells. Decrease the grid height. Align the grid in the section. While moving you see the red magnetic guides and numbers that help you to align the content.

Adding the Content

Working with Images. Replace the image in the left cell by dragging and dropping the image from your local folder. Select the right cell. Disable the Fill for this cell.

Adding Texts. Add the Heading 2. Click Add -> Text -> Heading 2. Change the width of the text block. The magnetic guides and sizes are very helpful again. Enter the Heading Text. Add the Text. Click Add-> Text -> Text. Align the Text. Change the Text.

editing-section.jpg

Adding a Button. Add a Button alternatively. Click the small plus in the top upper corner of the cell. Select the Button. Align the Button. Enter the Button Text. Align the Content in the cell.

Testing Mobile Views. Switch the Mobile Views to see the result. You see that required layout changes for the Responsive Modes are done automatically.

Editing in Mobile Views

Full Support. We have to mention, that all editing features are supported in all Mobile Views. Let’s switch to the Phone Landscape View. Change the crop of the Image. Now change the size of the Heading.

mobile-crop.jpg

Hiding / Unhiding. You may hide any layout elements, for example the image cell, for a certain view, for example for the Phone Landscape. It is also very easy to unhide this element back. Switch places of cells of the same row, if needed.

Most Common Mistake

Creating without Containers. Now we will review the most common mistake people make while creating layouts. One may prefer not to use the grid. In Nicepage it is possible without any limitations, however, it requires much more work and layout modification for each Mobile View.

Adding a Section. Let’s see this. Add a blank section. Increase the section height. Add image. Click Add -> Picture. Align the image and decrease its size. Select the Image.

Adding and Modifying the Content. Add Heading 2. Click Add-> Text -> Heading 2. Modify the size and the position of the Heading text block. You see, unlike with the grid layout, it is more difficult. Modify the Heading Text. Add Text. Click Add-> Text -> Text. Change the Text. Add Button. Click Add -> Button. Align the Button. Change the Button Text.

mistake.jpg

Adjustments in Mobile Views. Switch the Mobile Views. In the Laptop Mode move the button right. In the Tablet Mode, again the button is not in place. The worse situation is in the Phone Views. In the Phone Landscape the text block overlaps the image as there is not enough width. Move, resize and align the text blocks and the button manually. Repeat all movements for the Phone Portrait view. As a reminder, all editing features are supported. Let’s hide and unhide the image in the Phone Landscape view for this section.

We are done. So let’s delete this section. Open the section menu in the Page Navigator to the left and select Delete.

Complex Layouts

Overlapping Style. There are modern sections with complex layouts that do not quite fit into the grid layouts. Also, overlapping is very popular in the Web Design nowadays. In Nicepage, grids are not usually used for sections with complex overlapping. However, the mobile views for such sections are also pre-made.

overlapping.jpg

Adding a Section with Overlapping. Let’s add a section with overlapping. Add a new Section. Select Images. Select the “Business” thematic category at the top. Select “Overlapping” Style to the left. Select the Section. Click Done. You see the layout of this section is created using containers. Switch the Mobile Views to see how blocks move.

Finally, preview the page.

We hope you have enjoyed this demo of how to create Responsive Web Design with Nicepage.

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

Today it is important that your visitors read the content of your website on different screens comfortably. In this demo we will show how to do the Responsive Web Design fast and easily. <div class="video-container"><iframe width="885" height="500" src="https://www.youtube.com/embed/Hc2X3K3t4Fk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> ##About Responsiveness ## **What is Responsive Web Design?** Responsive Web Design is how your website will look on various devices, in the Mobile Views. !respposive-concept.jpg! **Possible Problems**. If one does not follow the rules of Responsive Web Design, then websites are hard to read because of very small fonts, small images, and some elements may overlap. **Block Movement**. To understand how to create the Responsive Web Design, it is important to understand what happens with your data in Mobile Views. Usually your website width shrinks and the content blocks are moved one under another. !block-responsive.jpg! **Switch Area**. In the reviewed User Interface of Nicepage, there is a special Area for switching the Mobile Views. This allows to preview and to modify the design for each specific view. And this is how your website will look on various mobile devices and the desktop. Let’s review what are the most popular Mobile Views (Responsive Modes) supported in Nicepage. ##Mobile Views## **Supported Viewports**. The first view is the Desktop View, it is the widest supported viewport. The next is the Laptop View, further the Tablet View, then the Phone Landscape and, finally, the narrowest, and one of the most popular modern screens - the Phone Portrait View. !phone-view.jpg! **Solution for Various Devices**. The most common question is how to create websites look nice in the Responsive Modes? If the data does not fit on mobile devices in width, you need to use grid layouts or columns, in other words. And we will explain why. !block-movement.jpg! ##Using Grid Layouts## **Fitting the Content**. So, how do the grid (columns) help with the Mobile Views? There is usually much content data that does not fit on the Phone screen, for example. In Nicepage, the grid layouts are created, so that if there is not enough screen width the grid cells are moved one under another automatically. We recommend to use the grid layouts to fit your content on mobile devices at once. !grid-layouts.jpg! **Image Sections**. In Nicepage, in the New Section dialog, the majority of pre-designed sections already use the grid. Adding those sections you have no worries, as all Mobile Views are already done correctly and you do not have to do anything. !image-sections.jpg! **Adding a Section**. Add a new section. Select Images. Select the “Business” thematic category. Select a style to the left. Let’s add this Gallery section with 3 images. Click Done. Adjust the section margins a bit. There is a grid with three cells used in this section. Switching the Mobile Views we see the movement of the cells. ## Layouts Without Grids## **Adding an Intro Section**. However, there are section that have less content, for example, the Introduction (or Hero Image) sections. Add a new section. Select “Introduction”. In the New Section dialog, select the “Business” thematic category at the top. Select this Section. Click Done. !containers.jpg! **Containers Instead of Grids**. Such sections use containers instead of grids. Let’s add an Introduction section for the demonstration. Decrease the section height if necessary. Switch the views to see the result. ## Creating a Responsive Section## **Adding a Blank Section**. Now let’s create a simple section with two cells to show that it is fast and easy to create the Responsive Web Design with Nicepage. Here is the section that we will use as an example. Add a new section. Select Blank. Increase the section height. Add a Grid. Select Add -> Grid. In the dialog, select the Grid with two cells. Click Done. !adding-grid.jpg! **Modifying the Section**. By default, grids are added with the default image background, so it is easy to recognize cells. Decrease the grid height. Align the grid in the section. While moving you see the red magnetic guides and numbers that help you to align the content. ##Adding the Content## **Working with Images**. Replace the image in the left cell by dragging and dropping the image from your local folder. Select the right cell. Disable the Fill for this cell. **Adding Texts**. Add the Heading 2. Click Add -> Text -> Heading 2. Change the width of the text block. The magnetic guides and sizes are very helpful again. Enter the Heading Text. Add the Text. Click Add-> Text -> Text. Align the Text. Change the Text. !editing-section.jpg! **Adding a Button**. Add a Button alternatively. Click the small plus in the top upper corner of the cell. Select the Button. Align the Button. Enter the Button Text. Align the Content in the cell. **Testing Mobile Views**. Switch the Mobile Views to see the result. You see that required layout changes for the Responsive Modes are done automatically. ##Editing in Mobile Views## **Full Support**. We have to mention, that all editing features are supported in all Mobile Views. Let’s switch to the Phone Landscape View. Change the crop of the Image. Now change the size of the Heading. !mobile-crop.jpg! **Hiding / Unhiding**. You may hide any layout elements, for example the image cell, for a certain view, for example for the Phone Landscape. It is also very easy to unhide this element back. Switch places of cells of the same row, if needed. ##Most Common Mistake## **Creating without Containers**. Now we will review the most common mistake people make while creating layouts. One may prefer not to use the grid. In Nicepage it is possible without any limitations, however, it requires much more work and layout modification for each Mobile View. **Adding a Section**. Let’s see this. Add a blank section. Increase the section height. Add image. Click Add -> Picture. Align the image and decrease its size. Select the Image. **Adding and Modifying the Content**. Add Heading 2. Click Add-> Text -> Heading 2. Modify the size and the position of the Heading text block. You see, unlike with the grid layout, it is more difficult. Modify the Heading Text. Add Text. Click Add-> Text -> Text. Change the Text. Add Button. Click Add -> Button. Align the Button. Change the Button Text. !mistake.jpg! **Adjustments in Mobile Views**. Switch the Mobile Views. In the Laptop Mode move the button right. In the Tablet Mode, again the button is not in place. The worse situation is in the Phone Views. In the Phone Landscape the text block overlaps the image as there is not enough width. Move, resize and align the text blocks and the button manually. Repeat all movements for the Phone Portrait view. As a reminder, all editing features are supported. Let’s hide and unhide the image in the Phone Landscape view for this section. We are done. So let’s delete this section. Open the section menu in the Page Navigator to the left and select Delete. ##Complex Layouts## **Overlapping Style**. There are modern sections with complex layouts that do not quite fit into the grid layouts. Also, overlapping is very popular in the Web Design nowadays. In Nicepage, grids are not usually used for sections with complex overlapping. However, the mobile views for such sections are also pre-made. !overlapping.jpg! **Adding a Section with Overlapping**. Let’s add a section with overlapping. Add a new Section. Select Images. Select the “Business” thematic category at the top. Select “Overlapping” Style to the left. Select the Section. Click Done. You see the layout of this section is created using containers. Switch the Mobile Views to see how blocks move. Finally, preview the page. We hope you have enjoyed this demo of how to create Responsive Web Design with Nicepage. Please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).