Responsive Web Design: Fundamentals for Beginners

Responsive web design allows your website to adapt to the device your users are viewing it on. The layout of the site changes dynamically, depending on the size of the screen and the capabilities of the device. Until recently, responsiveness was an advantage, but now it is an essential part of good web design!

In this blog post, we are going to introduce the fundamentals of responsive web design, explore the design principles that make a site responsive. If you are a beginner exploring this concept, the basics covered here will get you started. Create your own website that works on various devices: Desktop, Mobile or Tablet!

What is responsive web design and why is it important?

If you are building a website, you should be aware that your viewers can access it from a variety of devices with different screen sizes. There are a growing number of web browsers using their mobile phones or tablets to view web pages.

In the following example, the website has been designed to be responsive. As you can see, the layout and content are adapted to the screen based on the size and resolution of the screen.

If your site is unresponsive, the content will not be well laid out on a screen with a limited screen size. Therefore, it is essential that the design of your website is adapted to the device.

Is it multiple screen sizes?

The goal is not only to make them flexible, but also to adapt them to the device that runs your web pages. The size of the screen is the main factor, but there are other considerations as well, such as the pixel density of the screen, whether it is a touch screen, etc.

Your goal should be to design a website that works well on any device, regardless of the display port dimensions, resolution, or the way the user interacts with it. You must plan and create the layout, your media and even the navigation for the best usability on each device.

Ethan Mar cotte – Father of Responsive Web Design

When you hear about responsive web design, you may be inclined to think of it as a design or technology standard. However, the term is nothing of the kind. It refers to a set of design principles that you must adhere to while creating your web pages, in order to make them fluid.

Ethan coined the term and established the principles, and is popularly known as the father of responsive web design. Ethan Mar cotte invented a design principle that intelligently uses CSS to render the same web page in different screen sizes, without affecting its readability or usability.

Three basic ingredients of responsive web design

Using CSS media queries to customize styling

In the past, web designers relied on “User-Agent sniffing” to dynamically serve different HTML / CSS codes or rely on URL redirection. CSS3 introduced a new technique called ” media query “. ”

Using the @media you can include a specific block of CSS properties after checking a certain condition. You can check the following conditions:

Viewport Width / Height
Device Width / Height
Orientation (portrait / landscape)
Resolution

You can check the conditions and use media queries to provide specific style blocks, depending on the type of device.

Syntax for media query

@media not|only media type and (expressions) {
CSS-Code;
}

Media query example

There are many examples and a handy “Try it yourself” editor available on the W3Schools website.

In the following example, the @media query is used to check whether the display port width is 375px or more. If it is greater than 375px, the menu will be displayed above the content and if it is less than 375px, the menu will float to the left.

@media screen and (min-width: 375px) {
#left sidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}

Fluid Grid Based Layouts

The term “Fluid Grid” describes an arrangement where instead of using fixed pixel values, all of them are encoded in relative proportions of the other elements. As a result, the components flow (fluidity) and conform to the device.

In traditional designs, elements are positioned using fixed width grids. However, we are now dealing with a wide range of screen sizes. Such an approach will make your websites look poorly structured. Let’s take a look at an example of the traditional CSS design approach:
The Fluid Grid approach makes use of “relative proportions”, that is, you would encode the height and width of each item as a percentage or relative size. In the following example, the components are dimensioned using a “percentage” approach:

Fluid Images

In a responsive approach to web design, you should use CSS to define a maximum width for all images, but not a minimum width.

By specifying a maximum width, you ensure that the image will never be pixelated beyond a value that will affect its appearance quality. By not defining a minimum width, you are allowing CSS to reduce the size to any value (required to fit context).

CSS maintains the aspect ratio, and therefore your image will not look stretched.

Mobile First Design

The use of mobile telephony has surpassed that of desktops in 2017. As of today, Stat Counter reveals that 50.87% of users surf from mobiles compared to 44.78% from desktops.

This increase in mobile use means that designers must pay more attention to how their websites will look on mobile screens. Therefore, more and more designers follow the “mobile first” rule when designing.

“Mobile first” is a design methodology that suggests that you start designing the website to look its best for mobiles (because it has most of the restrictions), and then roll out to tablets and eventually to the desks.

Test Your Design -Simulate and Study

You will find many tools online to simulate the different requirements of different devices and to test your website. When designing a responsive site, you should use these tools to simulate and test the appearance and behavior of your website on various devices.

Firefox Developer Tools – Responsive Design Mode

Firefox offers a developer tool to toggle Responsive Design Mode on / off. When enabled, you can set the content area to a specific screen size, as shown in the following figure. You can simulate various sizes and test your web page.

Chrome Dev Tools – Device Mode

If you prefer Chrome Dev Tools, use Device Mode to simulate a wide range of screen sizes and resolutions. Test your web pages with device mode on, making sure you are building a fully responsive website.

The tool is very powerful and also allows you to emulate geolocation coordinates, simulate the orientation of the device. You can also emulate a variety of browsers to test how your web page will appear / behave in other browsers.
if you need help with web design, Day Digital can help! We have helped several companies build impressive websites and brand their presence online. Contact us now for a free consultation!