DCSS - CSS Responsive Web Design [LESSON]

CSS Responsive Web Design

CSS responsive web design is the approach of creating web pages that adapt to different screen sizes and device types. This means that the layout font sizes, and other elements of a web page will adjust automatically depending on the screen size of the device that is being used to view the page.

To make a website responsive, developers use a variety of CSS techniques, such as media queries, fluid layouts, and flexible images. Media queries allow developers to apply different styles to a web page based on the screen size of the device. For example, a developer may apply a different style for small screens such as smartphones, medium screens such as tablets, and large screens such as desktops.

Fluid layouts are used to make the design of a web page flexible, meaning the layout will adjust to the size of the screen. This is done by using relative units such as percentages instead of fixed units, such as pixels to define the size of the elements on the page.

Flexible images are used to ensure that images on the page are not too large for smaller screens, which can slow down the page load time. By using CSS to adjust the size of images depending on the size of the screen, the website can load quickly on any device.

By using CSS to create a responsive website, developers can ensure that their site looks good and functions well on any device, whether it's a smartphone, tablet, laptop, or desktop computer. This can help to increase the usability of the site and improve the overall user experience.

Responsive Web Design (RWD) is a Web development concept focusing on making sites look and behave optimally on all personal computing devices, from desktop to mobile. Responsive web design responds to the needs of the users and the devices they are using. The layout changes based on the size and capabilities of the device. For example, on a phone users would see content shown in a single column view; a tablet might show the same content in two columns.

In the Responsive Web Design video below, the design moves from a narrow to a wide viewport, responding to the available screen real estate.

A multitude of different screen sizes exist across phones, "phablets," tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it's important that your site can adapt to any screen size, today or in the future. In addition, devices have different features with which we can interact.  For example, some of your visitors will be using touchscreen. Modern responsive design considers all these things to optimize the experience for everyone.

Set the Viewport

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980 pixels, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means the font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom to see and interact with the content.

Setting the viewport involves using the HTML meta viewport tag to inform the browser how to scale and display the web page content. The viewport tag sets the initial width and scale of the viewport, which can be used to adjust the layout and font sizes of the page to fit the screen size.

For example, the following code sets the viewport width to the device width and the initial zoom level to 1:

This code instructs the browser to set the width of the viewport to the width of the device screen, and to set the initial zoom level to 1. This means that the web page will initially be displayed at its actual size, without any scaling or zooming. The user can then zoom in or out as desired.

By setting the viewport in responsive web design, the layout and font sizes of the web page can be adjusted dynamically to fit the screen size, providing a better user experience for users on different devices.

Media Queries

Media queries are a technique used in web design to adapt the layout and styles of a webpage based on the characteristics of the device and screen size that is being used to view the page.

Media queries are typically written in CSS and allow developers to set different styles based on a variety of parameters, such as the screen width, height, orientation, resolution, and color depth of the user's device. This is particularly useful for ensuring that webpages are optimized for different devices, such as desktops, laptops, tablets, and smartphones, and can provide a better user experience.

Media queries can be used to create responsive design, which means that the layout and content of a webpage will automatically adjust and adapt to available screen size and device, without the need for separate designs for different devices. This can help to create a consistent and visually appealing experience for users across different devices and platforms.

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the types of device rendering the content, or the features of that device, for example width, height, orientation, ability to hover, and whether the device is being used as a touchscreen.

To provide different styles for printing, you need to target a type of output so you could include a stylesheet with print styles. 

For responsive web design, we are typically querying the features of the device to provide a different layout for smaller screens, or when we detect that our visitor is using a touchscreen.

Media query uses the @media rule to include a block of CSS properties if specific conditions are true. For instance, you can change the appearance of the webpage based on the size of the browser window. In the example below, the font-size will change from the original font size to 10 pixels if the width of the browser window gets to 400 pixels or smaller.

Breakpoints

A breakpoint is a point in the layout of a website or application where the design or layout needs to be adjusted to provide a better user experience on different screen sizes or devices.

In the context of a media query, a breakpoint is a specific width at which the design or layout of the website or application needs to be adjusted. Media queries are a CSS feature that allow developers to specify different styles for different screen sizes or devices. By setting specific breakpoints in a media query, developers can adjust the design of a website or application to fit the screen size of the user's device.

For example, a breakpoint might be set at 768 pixels wide, which is commonly used for tablets. When the user's screen width is less than 768 pixels, the design may adjust to display content in a single column or make other changes to improve the user experience. By using media queries and breakpoints, developers can create a more responsive and flexible design that works well on a wide range of devices.

 *Information on this page came from Mozilla MDN Web Docs and  Web.dev (https://web.dev/responsive-web-design-basics/ Links to an external site.). All of the content was Creative Commons.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION