The responsive website designs must adjust to fit the platform or device being used. As reminder, responsive web design allows a website to change automatically depending on the size of the device.

You can check out how your most visited sites works by just resizing the brwoser. Or you can just open the site on tablet or mobile phone. The website layout will automatically adjust based on the screen size. Applying what you learned from the previous post on the common website layout. What type of layouts do your choosen websites have?

Then compare and contrast the elements on the desktop version and the mobile version. Notice how different elements and components are organized for each screen’s dimensions.

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 nelow? Designing with responsive layouts will prevent these kinds of usability issues from happening in your projects.

The good news is 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.

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 the three different screen sizes – a computer, tablet, and mobile phone screen.

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.

When plot down 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? Above the fold – content on a webpage that doesn’t require scrolling to experience.

• 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:

• Breakdown of responsive design from the Interaction Design Foundation.

• 11 Powerful examples of responsive web design from inVision.

Good luck!