🚀Responsive Web Design 🚀: Why You Should Care
By: Mikhail Raevskiy
Tags: Web Development, JavaScript, Software Development, Web Design, CSS

WEB DEVELOPMENT

🚀Responsive Web Design 🚀: Why You Should Care

Responsive web design allows you to significantly save money and not to draw a new design for each resolution.

Responsive layout changes the page’s design depending on the user’s behavior, platform, screen size, and device orientation and is an integral part of modern web development. It allows you to significantly save money and not draw a new design for each resolution, but to change individual elements’ size and location.

This article will go over the basic elements of a website and how to adapt them.

Screen Resolution Adjustment

In principle, you can divide devices into different categories and typeset for each of them separately, but it will take too long, and who knows what standards will be in five years? Moreover, according to statistics, we have a whole range of different resolutions:

It is becoming obvious that we cannot continue to code for each device separately. But then what can we do?

👉 Solution #1— making everything flexible

Of course, this is not ideal, but it fixes most of the problems.

The entire design here is a mix of responsive layers, images, and, in some places, smart markup. Creating responsive layers is a common practice, which is not the case with responsive images. However, if you need them, consider the following techniques:

For more information, I recommend you check out Zoe Mickley Gillenwater’s book “Flexible Web Design: Creating Liquid Layouts with CSS” and read the chapter “Creating Flexible Images”.

If you reduce the entire image, the labels will become unreadable. Therefore, to preserve the logo, the picture is divided into two parts: the first part (illustration) is used as a background, the second (logo) is resized proportionally.

The element h1 contains an image as a background, and the image is aligned to the background of the container (header).

👉Solution #2 — flexible images

Working with images is one of the biggest challenges when working with responsive design. There are many ways to resize images, and most of them are fairly straightforward to implement. One solution is to use max-width in CSS:

The maximum width of an image is 100% of the width of the screen or browser window, so the smaller the width, the smaller the picture. Note that this is max-width not supported in IE, so use width: 100% .

The presented method is a good option for creating responsive images, but by changing only the size, we will leave the image weight the same, which will increase the loading time on mobile devices.

👉 Solution #3 — responsive images

The technique, presented by the Filament Group, not only resizes images but also compresses the resolution of images on small screens to speed up loading times.

This technique requires several files available on Github. First, we grab the JavaScript file (rwd-images.js), the .htaccess file, and rwd.gif (the image file). Then we use a bit of HTML to link the high and low resolutions: first a small image with the .r prefix (to indicate that the image should be responsive), then a link to the large image with data-fullsrc :

For any screen wider than 480 px, a high-resolution image (largeRes.jpg) will be loaded, and on small screens (smallRes.jpg).

👉 An interesting feature for iPhone

The iPhone and iPod Touch have a special feature: a design created for large screens simply shrinks in a browser with a small resolution without scrolling or additional mobile layout. However, images and text will not be visible:

To solve this problem, the tag is used meta :

If initial-scale equal to one, the width of the images becomes equal to the width of the screen.

👉 The customizable page layout structure

For significant page size changes, it may be necessary to change the layout of the elements in general. This is conveniently done through a separate stylesheet or, more efficiently, through a CSS media query. This shouldn’t be a problem as most styles will remain the same, and only a few will change.

For example, you have a master file with a style that specifies #wrapper , #content , #sidebar , #nav together with the colors, backgrounds, and fonts. If your main styles make the layout too narrow, short, wide, or tall, you can define that and include new styles.

style.css (main):

mobile.css (child):

On a widescreen, the left and right side panels fit well on the side. On narrower screens, these blocks are located one below the other for greater convenience.

👉 CSS3 media queries

Let’s take a look at how you can use CSS3 media queries to create responsive designs. min-width sets the minimum width of the browser window or screen to which certain styles will be applied. If any value is lower than min-width , the styles will be ignored. max-width does the opposite.

Example:

The media query will only work when its min-width is greater than or equal to 600 px.

In this case, the (ClassforSmallscreens) class will work when the screen width is less than or equal to 600 px.

While min-width , and max-width can be applied to the screen width, and the width of the browser window, we may need to work only with the device width. For example, to ignore browsers open in a small window. To do this, you can use min-device-width and max-device-width :

Specifically for the iPad, media queries have an orientation property that can be either landscape (horizontal) or portrait (vertical):

Also, the values of media queries can be combined:

This code will only run for screens or browser windows with a width of 800 to 1200 px.

You can load a specific sheet with styles for different values of media queries like this:

👉 JavaScript

If your browser does not support CSS3 media queries, then the replacement of styles can be arranged using jQuery:

👉 Optional content display

Being able to shrink and swap elements to fit on small screens is great. But this is not the best option. For mobile devices, there is usually a wider set of changes: easier navigation, more focused content, lists, or rows instead of columns.

Fortunately, CSS gives us the ability to show and hide content with incredible ease.

display: none;

display: none used for objects to be hidden.

Example:

Here’s our markup:

In the main stylesheet, we are changing the column references because we have a large enough screen to display all the content.

style.css (main):

Now we hide the columns and show the links:

mobile.css (simplified):

If the screen size is reduced, you can, for example, use a script or an alternate style file to increase the white space or replace the navigation for more convenience. Thus, having the ability to hide and show elements, resize pictures, elements, and much more, you can adapt the design to any device and screen.

Read More

If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.