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.

Mikhail Raevskiy
Nov 3, 2020 · 6 min read
Source: tenor

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:

Source: jadeinkdesign

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 h1contains 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-widthnot 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.

Source: tprogger

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:

Source: tprogger

To solve this problem, the tag is used meta:

If initial-scaleequal 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):

Source: tprogger

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-widthsets 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-widthdoes the opposite.

Example:

The media query will only work when its min-widthis 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-widthcan 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-widthand 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.

Source: digg

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:

Source: tprogger

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.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mikhail Raevskiy

Written by

Bioinformatician at Oncobox Inc. (@oncobox). Research Associate at Moscow Institute of Physics and Technology (@mipt_eng).

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Mikhail Raevskiy

Written by

Bioinformatician at Oncobox Inc. (@oncobox). Research Associate at Moscow Institute of Physics and Technology (@mipt_eng).

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store