What is responsive web design? The Basics Concept of Responsive web design

Responsive web design capitalizes on the advantages of present-day computers to plan, design, and develop a website so it will function properly on various devices.

How to design websites that are responsive to the needs and capabilities of the device on which they are viewed.

The use of mobile devices to surf the web is growing at an exponential rate, and these devices are often limited by display size, necessitating a different approach to content layout on the screen.

The term “responsive web design” was invented by Ethan Marcotte in his book A List Apart to describe how a website adapts to the needs of its users and the devices they use. The layout varies depending on the device’s size and capabilities. Users on a phone, for example, would see content presented in a single column view; users on a tablet, on the other hand, might see the same content presented in two columns.

Phones, “phablets,” tablets, desktops, game consoles, TVs, and even wearables all have a variety of screen sizes. Because screen sizes are constantly changing. It’s critical that your site can adapt to any size, now or in the future. Furthermore, devices have a variety of features with which we interact. Some of your visitors, for example, will use a touchscreen. All of these factors are taken into account in modern responsive design to provide the best possible experience for everyone.

#Setup the viewport

A meta viewport tag in the head of the document is required for pages optimized for a variety of devices. A meta viewport tag instructs the browser on how to control the dimensions and scaling of the page.

To provide the best experience, mobile browsers render the page at a desktop screen width (typically around 980px, though this varies by device) and then try to improve the content by increasing font sizes and scaling it to fit the screen. Users may have to double-tap or pinch-to-zoom to see and interact with the content, which means font sizes may appear inconsistent.

!DOCTYPE html> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang … meta name=”viewport” content=”width=device-width, initial-scale=1″>… meta name=”viewport” content=”width=device-width, initial-scale=1″>… /head>…

The width=device-width meta viewport value instructs the page to match the screen’s width in device-independent pixels. A device (or density) independent pixel is a representation of a single pixel that may be made up of many physical pixels on a high-density screen. This allows the page to reflow content to fit different screen sizes, whether it’s being viewed on a small smartphone or a large desktop monitor.

When switching to landscape mode, some browsers keep the page’s width constant and zoom instead of reflowing to fill the screen. The value initial-scale=1 tells browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, allowing the page to use the entire landscape width.

Caution

Use a comma to separate attributes to ensure that older browsers can parse them correctly.

There is no width or initial-scale tag in the meta name=”viewport”> tag. Lighthouse audit can assist you in automating the process of ensuring that your HTML documents correctly use the viewport meta tag.

#Make sure the viewport is accessible

You can also set the following attributes on the viewport in addition to the initial scale:

minimum-scale

maximum-scale

user-scalable

When enabled, these can prevent the user from zooming the viewport, potentially causing accessibility problems. As a result, we do not advise using these attributes.

#Adjust the content size to the viewport

Users are accustomed to scrolling websites vertically but not horizontally on both desktop and mobile devices; forcing them to scroll horizontally or zoom out to see the entire page results in a poor user experience.

It’s easy to create page content that doesn’t quite fit within the specified viewport when developing a mobile site with a meta viewport tag. An image with a width greater than the viewport, for example, can cause the viewport to scroll horizontally. This content should be adjusted to fit within the viewport’s width so that the user does not have to scroll horizontally.

The content is not properly sized for the viewport. A Lighthouse audit can assist you in automating the detection of overflowing content.

Also Read: Web Design and SEO: How to Optimize Your Website Design for Top Rankings

#Images

An image’s dimensions are fixed, so if it’s bigger than the viewport, a scrollbar will appear. Giving all images a maximum width of 100% is a common solution to this problem. If the viewport size is smaller than the image, the image will shrink to fit the available space. The image will not stretch larger than its natural size because the max width, rather than the width, is 100 percent. It is generally safe to include the following in your stylesheet to ensure that images do not cause a scrollbar.

#Add the image’s dimensions to the img element.

You should still use the width and height attributes on your img> tag if you use max-width: 100 percent because it overrides the image’s natural dimensions. This is because modern browsers will use this information to set aside space for the image before it loads, preventing layout shifts as content loads.

#Layout

Content should not rely on a specific viewport width to render well because screen dimensions and width in CSS pixels vary widely between devices (for example, between phones and tablets, and even between different phones).

Previously, setting elements use to create a layout in percentages was required. A two-column layout with floated elements, size in pixels, is shown in the example below. We must scroll horizontally to see the content once the viewport is smaller than the total width of the columns.

Because the widths are expressed in percentages, the columns will always be a certain percentage of the container. As a result, rather than creating a scrollbar, the columns become narrower.

Flexible grids are much easier to create with modern CSS layout techniques like Flexbox, Grid Layout, and Multicol.

#Flexbox

When you have a collection of items of varying sizes and want them to fit comfortably in a row or rows, this layout method is ideal, with smaller items taking up less space and larger items taking up more.

display: flex; justify-content: space-between;.items.

Flexbox can be used in a responsive design to display items in a single row or wrapped across multiple rows as the available space decreases.

#CSS Grid Layout #CSS Grid Layout #CSS Grid Layout

CSS Grid Layout enables the creation of flexible grids with ease. Instead of using percentages to create our columns in the earlier floated example. We could use a grid layout and the fr unit, which represents a portion of the container’s available space.

grid-template-columns: 1fr 3fr;.container display: grid; grid-template-columns: 1fr 3fr;

The grid can also be used to make regular grid layouts with as many items as will fit in the space. As the screen size shrinks, the number of available tracks will decrease. We have as many cards as will fit on each row in the demo below, with a minimum size of 200px.

#Layout with multiple columns

You can use a Multiple-column Layout (Multicol) for some layouts, which uses the column-width property to create responsive numbers of columns. If there is room for another 200px column, columns are add as shown in the demo below.

#For responsiveness, use CSS media queries.

To support a specific screen size, you may need to make more extensive changes to your layout than the techniques shown above will allow. Here’s where media queries come in handy.

Simple filters that can be applied to CSS styles are known as media queries. They make it simple to switch styles depending on the type of device rendering the content or the device’s features, such as width, height, orientation, hovering ability, and whether the device is a touchscreen.

To provide different printing styles, you must first target a type of output, after which you can include a stylesheet with print styles like this:

!DOCTYPE html> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang=”en”> html lang … link rel=”stylesheet” href=”print.css” media=”print”>… link rel=”stylesheet” href=”print.css” media=”print”>… /head>…

Alternatively, you could use a media query to include print styles in your main stylesheet:

@media print /* print styles can be found here */

The @import syntax, @import URL(print.css) print, can also be use to include separate stylesheets in your main CSS file; however, this is not recommended for performance reasons. For more information, see Avoid CSS Imports.

We typically query the features of the device in responsive web design to provide a different layout for smaller screens or when we detect that our visitor is using a touchscreen.

_____________________________________________________________

Viewport size-based media queries

We can create a responsive experience by using media queries to apply specific styles to small screens, large screens, and everything in between. As a result, the feature we’re looking for is screen size, and we can check for the following.

length (min-width, max-width)

tallness (min-height, max-height)

orientation

aspect-ratio

All of these features have excellent browser support; see width, height, orientation, and aspect ratio on MDN for more information, including browser support information.

Device width and height tests were included in the specification. These have been condemned and should be avoided at all costs. device width and device height measured the actual size of the device window. Which was ineffective in practice because it could differ from the viewport the user is viewing. Such as if the browser window was resized.

#Queries about media based on device capabilities

We can’t assume that every large device is a regular desktop or laptop computer, or that people only use a touchscreen on a small device. Given the variety of devices available. We can now test for features like the type of pointer used to interact with the device and whether the user can hover over elements thanks to some newer additions to the media queries specification.

hover

pointer

any-hover

any-pointer

View this demo on a variety of devices, including a desktop computer, a phone, and a tablet.

All modern browsers have good support for these newer features. On the MDN pages for hover, any-hover, pointer, and any-pointer, you can learn more.

Using the any-hover and any-pointer techniques

Any-hover and any-pointer are features that test whether a user can hover or use a specific type of pointer even if it is not their primary method of interaction with their device. When using these, exercise extreme caution. Forcing a user to use a mouse when they’re using a touchscreen isn’t very user-friendly! Any hover and any-pointer, on the other hand, may be useful if it’s crucial to figure out what kind of device a user has. A laptop with a touchscreen and trackpad, for example, should have both coarse and fine pointers, as well as the ability to hover.

Learn more – What is motion graphics? 10 best motion graphics Explained

#How to choose breakpoints

Don’t be afraid to take advantage of revolutionary break-ins and their presentation opportunities, but don’t rely on breakpoints to decide where they should be placed. For lots of different devices, products, brand names, or operating systems to be in use today, breakpoint adjustments that are derived from device classes can prove to be both confusing and damaging to the landscape. Instead, you should use the breakpoints to present content in a customizable way.

#Start small and work your way up to major breakpoints.

Design the display’s content initially to be a workable size on a small display. Then enlarge it until the required breakpoint becomes feasible. This enables you to establish particular breakpoints that are dependent on the content you are displaying and manage several breaks to meet that demand as best as possible. We’ve gone through the forecast example from the beginning of this chapter.

Next, expand the size of a screen to keep the fewest breakpoints possible. Let’s utilize one of the weather scenarios described initially as an example. The goal is to develop a summary outline of the information being displayed on the small-screen version first and attract the user.

To place a breakpoint at 600px, compose two media queries after your CSS for the gadget, one for when it is 600px and below, and another for when it is wider than 600px.

With the introduction of the @media rule, write the code. Within the media query having a maximum width of 600 pixels, insert the CSS which is only for small screens. Inside the media query having a minimum width of 601 pixels, include the CSS for large screens.

Also Read: Small Businesses SEO Tips | SEO Company For Small

#Pick minor breakpoints when necessary

In addition to choosing the right major breakpoints when modifying layouts, it is also advisable to set for minor changes. For example, a major jump between breakpoints may mean adjusting the margins or padding on a component. While a minor change may be to increase the font size to make it feel more natural in the layout.

In addition to choosing major breakpoints when layout changes significantly, it is also important to regulate minor changes. For instance, between major breakpoints, changing the margins or spacing or increasing the font size in an element makes the layout participate in the design more naturally.

Let’s begin by transforming the compact screen. In this instance, let’s boost the color when the block Canyon width is greater than 360 pixels. Next, we’ll separate the high and low temperatures and normalize them so they are on the same line rather than on top of each other. Lastly, let us enlarge the weather icons by a bit.

Media (min-width 360px) text body font-size 1em; @media (min-width 500px) .seven-day-fc .temp-low, .seven-day-fc .temp-high display inline-block; width 45; .seven-day-fc .seven-day-temp margin-left 5; .seven-day-fc .icon width 64px; height 64px;

Similarly, on large screens, it’s best to keep the forecast panel’s maximum width to a minimum so that it doesn’t take up the entire screen.

RT @media (min-width: 700px) width: 700px;.weather-forecast;.

#Make text easier to read.

According to traditional readability theory, an ideal column should have 70 to 80 characters per line (about 8 to 10 words in English). Consider adding a breakpoint whenever the width of a text block exceeds about 10 words.

Let’s take a closer look at the blog post example from earlier. The Roboto font at 1em works perfectly on smaller screens, giving 10 words per line, but larger screens require a breakpoint. In this case, the ideal content width is 550px if the browser width is greater than 575px.

RT @media (min-width: 575px) article width: 550px; margin-left: auto; margin-right

#Don’t just hide content.

When deciding what content to hide or show based on screen size, be cautious. Don’t just hide content because it won’t fit on your screen. Screen size isn’t always a good indicator of what a user wants. For allergy sufferers who rely on the pollen count to determine whether or not they can go outside in the spring. Removing it from the weather forecast could be a serious problem.

#In Chrome DevTools, look at the media query breakpoints.

You’ll want to see how your site looks with media query breakpoints once you’ve set them up. To activate the breakpoints, you could resize your browser window. But Chrome DevTools has a built-in feature that allows you to see how a page looks at various breakpoints.

To see your page at various breakpoints, go to:

Open DevTools and then select Device Model from the drop-down menu. By default, this opens in responsive mode.

To see your media queries, go to the Device Mode menu and choose Show media queries. Your breakpoints will appear as colored bars above your page.