Learn more about plotting responsive layouts

The responsive website designs you create in this course and in the real world must adjust to fit the platform or device being used.

Try this quick activity: On your computer, open two of your favorite or most visited websites. Remember the common website layouts that you learned about earlier in the course, like grid of cards, feature image, and multicolumn? What type of layouts do your chosen websites have?

Then, open the same websites on a mobile phone or tablet. Does the website have a different layout on this smaller screen size than it did on your computer? Notice how different elements and components are organized for each screen’s dimensions.

As a reminder, responsive web design means creating changes to the appearance, or layout, of a website, depending on the device being used to view it and the size of the screen. In the image above, the website uses a multicolumn layout on a laptop screen size, and a single column layout on a mobile phone screen size.

Responsive design is an integral part of good UX, as it increases your product’s usability. Have you ever used a website where you couldn’t see a button or a graphic went off the side of the screen, like in the image below? Designing with responsive layouts will prevent these kinds of usability issues from happening in your projects.

The good news it that when you design with responsive layouts, you don’t have to create a different design for every potential device and every different screen size. Instead, you design for a few key sizes in a framework that allows content to adjust to the screen size.

Behind the code of the website are parameters called breakpoints. Breakpoints are the visual limits that determine when a responsive layout should change to fit all the elements and components properly. In other words, if you adjust the shape of a browser window on your computer to a vertical rectangle, the website will eventually shift to the mobile version of the site.

Plot a responsive layout

So, how do you start to build a responsive design for a website? You’ll need to plan for it from the beginning! The first thing you need is grid paper, which is paper with dots in evenly spaced rows and columns, like this:

If you don’t have grid paper handy, don’t worry! There is a printable template you can use here: Grid Paper Template.

Now, you can start plotting wireframes on the grid. Placing wireframes on the grid will help you visualize the proportions of design and how those can change depending on the size of the screen. Here’s an example of wireframes plotted on grid paper, for a responsive website on three different screen sizes — a computer, tablet, and mobile phone screen.

By using grid paper, you can easily notice the size of each element and component and how they relate to one another. In this example, the responsive website has four columns of content on a laptop computer screen, three columns of content on a tablet, and two columns of content on a mobile phone-sized screen.

As you plot your own designs on grid paper and resize the layout for different screen sizes, ask yourself these questions:

• Do elements on the page need to move location? As you move from a large screen size to smaller screen sizes, which parts of the design need to stay above the fold? Which can move down the page, to below the fold?
• How do images need to be scaled? Are there certain images, like a hero image, that need to remain large across all screen sizes?
• How will you adjust the navigation elements for the page as the screen size changes, such as moving from a top navigation bar to a hamburger menu?

Responsive web design is great UX

Designing a great user experience means that your website needs to look great and work effectively on various screen sizes. As you begin to create your responsive website designs, compare the layouts of existing websites — such as websites you find visually appealing or competitor websites to the product you’re designing — on different screen sizes and devices. Take note of how the design adapts, and use those experiences to inspire your work.

To learn more about plotting responsive layouts, check out this breakdown of responsive design from the Interaction Design Foundation. If you need some inspiration for your own project, check out 11 powerful examples of responsive web design from InVision.

Sources: Google UX Design Professional Certificate

Coursera | Responsive Web Design in Adobe XD