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

About Responsive Web Design

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 tiny fonts, small images, and some elements that may overlap.

Block Moving

For Responsive Web Design, it is crucial 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 particular Area for switching the Mobile Views. It allows previewing and modifying 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 the most popular Mobile Views (Responsive Modes) supported in Nicepage are.

Mobile Views

Supported Viewports

The first view is the Desktop View, 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 that look beautiful 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 Content

How does the Grid (columns) help with the Mobile Views? There is usually a lot of 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 using the grid layouts to fit your Content on mobile devices at once.

grid-layouts.jpg

Blocks With Images

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

Adding a Block

  1. Add a new Block.
  2. Select Images.
  3. Select the “Business” thematic category.
  4. Select a style to the left.
  5. Let’s add this Gallery Block with three images.
  6. Click Done.
  7. Adjust the Block margins a bit.

There is a grid with three cells used in this Block. Switching the Mobile Views, we see the movement of the cells.

No-Grid Layouts

Adding an Intro Block

Some Blocks have less Content, for example, the Introduction (or Hero Image) Blocks.

  1. Add a new Block.
  2. Select Image With Text.
  3. Select any Block.
  4. Click Done.
containers.jpg

Containers Instead of Grids

Some Blocks use containers instead of grids. Let’s add an Introduction Block for the demonstration. Decrease the Block height if necessary. Switch the views to see the result.

Creating a Responsive Block

Adding a Blank Block

Now let’s create a simple Block with two cells to show that it is fast and easy to create the Responsive Web Design with Nicepage. Here is the Block that we will use as an example.

  1. Add a new Block.
  2. Select Blank.
  3. Increase the Block height.
  4. Add a Grid.
  5. Select Add -> Grid.
  6. In the list, select the Grid with two cells.
  7. Click Done.
adding-grid.jpg

Modifying the Block

By default, grids are added with the default image background, so it is easy to recognize cells.

  1. Decrease the Grid Height.
  2. Align the Grid in the Block.

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 Element from your local folder.

  1. Select the right cell.
  2. Disable the Fill for this cell.

Adding Texts

  1. Add the Heading 2.
  2. Click Add Elements -> Text -> Heading 2.
  3. Change the width of the text Block. The magnetic guides and sizes are beneficial again.
  4. Enter the Heading Text.
  5. Add the Text.
  6. Click Add-> Text -> Text.
  7. Align the Text.
  8. Change the Text.
editing-section.jpg

Adding a Button

  1. Add a Button alternatively.
  2. Click the small plus in the center of the cell.
  3. Select the Button.
  4. Align any Button.
  5. Modify the Button Text.
  6. Align the Content in the cell.

Testing Mobile Views

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

Editing in Mobile Views

Full Customization

We have to mention that all editing features are supported in all Mobile Views.

  1. Let’s switch to the Phone Landscape View.
  2. Change the crop of the Image.
  3. Now, change the size of the Heading.
mobile-crop.jpg

Hiding On Devices

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

Most Common Mistakes

Creating without Containers

We will review the most common mistakes 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 Block

Let’s see this.

  1. Add a Blank Block.
  2. Increase the Block height.
  3. Add Image.
  4. Click Add -> Picture.
  5. Align the Image and decrease its size.
  6. Select the Image.

Adding and Modifying the Content

  1. Add Heading 2.
  2. Click Add Elements-> Text -> Heading 2.
  3. Modify the size and the position of the Heading text Block.
  4. You see, unlike with the grid layout, it is more difficult.
  5. Modify the Heading Text.
  6. Add Text.
  7. Click Add Elements-> Text -> Text.
  8. Change the Text.
  9. Add Button.
  10. Click Add Elements-> Button.
  11. Align the Button.
  12. Change the Button Text.
mistake.jpg

Modifying Mobile Views

  1. Switch the Mobile Views.
  2. In the Laptop Mode, move the button right.
  3. In the Tablet Mode, again, the Button Element is not in place.
  4. The worst situation is in the Phone Views.
  5. In the Phone Landscape, the text Block overlaps the Image as there is not enough width.
  6. Move, resize, and align the text Blocks and the button manually.
  7. Repeat all movements for the Phone Portrait view.
  8. As a reminder, all editing features are supported.
  9. Let’s hide and unhide the Image in the Phone Landscape view for this Block.

We are done.

Deleting Blocks

So let’s delete this Block.

  1. Open the Block menu in the Page Navigator to the left and
  2. Select Delete.

Complex Layouts

Overlapping Style

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

overlapping.jpg

Adding a Block with Overlap

Let’s add a Block with overlap.

  1. Add a new Block.
  2. Go to the Overlapping Category
  3. Choose a Block.

You see, the layout of this Block is created using containers. Switch the Mobile Views to see how Blocks move.

Previewing

Finally, preview the page.

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

See Also

Get Started With Nicepage

Today it is essential that your visitors read the Content of your website on different screens comfortably. In this demo, we will show how to do 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 Responsive Web Design 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 tiny fonts, small images, and some elements that may overlap. ### Block Moving For Responsive Web Design, it is crucial 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 particular Area for switching the Mobile Views. It allows previewing and modifying 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 the most popular Mobile Views (Responsive Modes) supported in Nicepage are. ## Mobile Views ### Supported Viewports The first view is the Desktop View, 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 that look beautiful 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 Content How does the Grid (columns) help with the Mobile Views? There is usually a lot of 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 using the grid layouts to fit your Content on mobile devices at once. !grid-layouts.jpg! ### Blocks With Images In Nicepage, in the New Block dialog, the majority of pre-designed Blocks already use the Grid. Adding those Blocks, you have no worries, as all Mobile Views are already done correctly, and you do not have to do anything. ### Adding a Block 1. Add a new Block. 2. Select Images. 3. Select the “Business” thematic category. 4. Select a style to the left. 5. Let’s add this Gallery Block with three images. 6. Click Done. 7. Adjust the Block margins a bit. There is a grid with three cells used in this Block. Switching the Mobile Views, we see the movement of the cells. ## No-Grid Layouts ### Adding an Intro Block Some Blocks have less Content, for example, the Introduction (or Hero Image) Blocks. 1. Add a new Block. 2. Select Image With Text. 3. Select any Block. 4. Click Done. !containers.jpg! ## Containers Instead of Grids Some Blocks use containers instead of grids. Let’s add an Introduction Block for the demonstration. Decrease the Block height if necessary. Switch the views to see the result. ## Creating a Responsive Block ### Adding a Blank Block Now let’s create a simple Block with two cells to show that it is fast and easy to create the Responsive Web Design with Nicepage. Here is the Block that we will use as an example. 1. Add a new Block. 2. Select Blank. 3. Increase the Block height. 4. Add a Grid. 5. Select Add -> Grid. 6. In the list, select the Grid with two cells. 7. Click Done. !adding-grid.jpg! ### Modifying the Block By default, grids are added with the default image background, so it is easy to recognize cells. 1. Decrease the Grid Height. 2. Align the Grid in the Block. 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 Element from your local folder. 1. Select the right cell. 2. Disable the Fill for this cell. ### Adding Texts 1. Add the Heading 2. 2. Click Add Elements -> Text -> Heading 2. 3. Change the width of the text Block. The magnetic guides and sizes are beneficial again. 4. Enter the Heading Text. 5. Add the Text. 6. Click Add-> Text -> Text. 7. Align the Text. 8. Change the Text. !editing-section.jpg! ### Adding a Button 1. Add a Button alternatively. 2. Click the small plus in the center of the cell. 3. Select the Button. 4. Align any Button. 5. Modify the Button Text. 6. Align the Content in the cell. ## Testing Mobile Views Switch the Mobile Views to see the result. You understand that the required layout changes for the Responsive Modes are done automatically. ## Editing in Mobile Views ### Full Customization We have to mention that all editing features are supported in all Mobile Views. 1. Let’s switch to the Phone Landscape View. 2. Change the crop of the Image. 3. Now, change the size of the Heading. !mobile-crop.jpg! ## Hiding On Devices You may hide any layout elements, the image cell, for a certain view, for example, for the Phone Landscape. It is also effortless to unhide this element back. Switch places of cells of the same row, if needed. ## Most Common Mistakes ### Creating without Containers We will review the most common mistakes 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 Block Let’s see this. 1. Add a Blank Block. 2. Increase the Block height. 3. Add Image. 4. Click Add -> Picture. 5. Align the Image and decrease its size. 6. Select the Image. ### Adding and Modifying the Content 1. Add Heading 2. 2. Click Add Elements-> Text -> Heading 2. 3. Modify the size and the position of the Heading text Block. 4. You see, unlike with the grid layout, it is more difficult. 5. Modify the Heading Text. 6. Add Text. 7. Click Add Elements-> Text -> Text. 8. Change the Text. 9. Add Button. 10. Click Add Elements-> Button. 11. Align the Button. 12. Change the Button Text. !mistake.jpg! ### Modifying Mobile Views 1. Switch the Mobile Views. 2. In the Laptop Mode, move the button right. 3. In the Tablet Mode, again, the Button Element is not in place. 4. The worst situation is in the Phone Views. 5. In the Phone Landscape, the text Block overlaps the Image as there is not enough width. 6. Move, resize, and align the text Blocks and the button manually. 7. Repeat all movements for the Phone Portrait view. 8. As a reminder, all editing features are supported. 9. Let’s hide and unhide the Image in the Phone Landscape view for this Block. We are done. ### Deleting Blocks So let’s delete this Block. 1. Open the Block menu in the Page Navigator to the left and 2. Select Delete. ## Complex Layouts ### Overlapping Style There are modern Blocks with complex layouts that do not quite fit into the grid layouts. Also, overlapping is very popular in Web Design nowadays. In Nicepage [HTML Website Builder](https://nicepage.com/html), grids are not usually used for Blocks with complex overlap. However, the mobile views for such Blocks are also pre-made. !overlapping.jpg! ### Adding a Block with Overlap Let’s add a Block with overlap. 1. Add a new Block. 2. Go to the Overlapping Category 3. Choose a Block. You see, the layout of this Block is created using containers. Switch the Mobile Views to see how Blocks move. ## Previewing Finally, preview the page. We hope you have enjoyed this demo of how to create Responsive Web Design with Nicepage. ## See Also - [Nicepage Builders](page:2364) - [Nicepage Menu](page:9928) - [Nicepage Containers](page:13180) - [Nicepage Grids](page:17389) - [Nicepage Blocks](page:18664) - [Nicepage on YouTube](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh) - [Nicepage Video Tutorials](page:1318) ## Get Started With Nicepage - [HTML Website Builder](https://nicepage.com/html)