Basic principles of responsive web design

Reading Time: 3 minutes

Responsive websites are websites that adapt to all screen sizes and resolutions. It will look good on desktops, mobiles, tablets, and sometimes even on smart TVs.

Businesses without a mobile responsive website are falling behind at an alarming rate because 8 in 10 visitors will stop engaging with a website that doesn’t display well on their devices. 

Approach to Creating A Responsive Web Design

 

The Flow

As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it’s called the flow.

That might be tricky to grasp if you are used to designing with pixels and points, but makes total sense when you get used to it.

Relative Units

The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere.

That’s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).

Breakpoints

Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. You can change CSS properties from one breakpoint to another.

Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. It is critical to ensure a good mobile user experience through mobile-first designing.

Max and Min Values

Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense.

This is why Min and Max values help. For example, having a width of 100% and Max width of 1000px would mean that content will fill the screen, but don’t go over 1000px.

Best Practices of Responsive Web Design

1. Honor Visual Hierarchy

Visual Hierarchy is used to rank design elements and influence in the order you want your users to view them. By using principles like contrast, scale, balance and, more, you can help establish each element in its rightful place and help the most important elements stand out. You can learn more about visual design in our article on visual design and gestalt principles.

UX design is all about removing friction and enhancing the usability of a product, and paying attention to visual hierarchy is a key way to do this.

2. Button Design

A button is a fundamental UI element that will heavily affect your interaction design. Buttons have the power to compel users to convert, to carry out an action.

The best way to design a button is to:

• Make it look clickable
• Make it easy to find and predict
• Tell users what each button does. Don’t make them guess.
• Size matters have buttons people can actually click on. Don’t have a button for everything.
• Provide feedback on what action the button will lead to or has led to.

3. Prioritize The Navigation

There is ample space for the desktop version of the website, but on mobile the world is small. You can provide the off-canvas menu or hamburger menu for non-intrusive navigation. This will save a lot of space and it will provide a good user experience too.

Summing it up

Responsive design is the future, with new techniques and great examples popping up every year.

Designers everywhere are looking at their products in a new light, focusing on the content and keeping up with the latest design trends.

After all, we want to offer a truly great and consistent user experience and that’s what responsive design brings to the table.

You may also want to read on:

Best Practices of Mobile App User Experience