🚀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:
- Hiding and Revealing Portions of Images;
- Creating Sliding Composite Images;
- Foreground Images That Scale With the Layout
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”.
Creating Liquid and Elastic Layouts with CSS
Get a peek into the book's content with this sample and bonus material. Learn about the four basic types of…
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.
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
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.
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
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
#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.
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.
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.
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
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:
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 used for objects to be hidden.
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.
Now we hide the columns and show the links:
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.
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.