Adaptive kerning changes the design of a page depending on user behavior, platform, screen size and orientation of the device and is an integral part of modern web development. It saves a lot of money by not having to render a new design for every resolution, but rather to change the size and layout of individual elements.
This article will review the basic elements of the site and how they can be adapted.
Note You are reading an improved version of a once released by us article.
- Adjusting the screen resolution
- Partial solution: making everything flexible
- Flexible images.
- An interesting feature for the iPhone
- Customizable page layout structure
- Adaptive layout with CSS3 media queries
Adjusting the screen resolution
In principle, it is possible to divide devices into different categories and layout for each of them separately, but it will take too much time, and who knows what standards will be in five years? Moreover, according to statistics we have a whole range of different resolutions:
It becomes obvious that we won’t be able to continue to layout for each device separately. But then what to do?
Partial solution: make everything flexible
Of course it’s not the ideal way, but it eliminates most of the problems with adaptive rendering.
Ethan Marcotte created a simple template that demonstrates the use of responsive layout:
The whole design is a mix of adaptive layers, images and, in some places, smart markup. Creating adaptive layers is a frequent practice, which is not the case with adaptive pictures. However, if you need them, check out the following techniques:
Hiding and Revealing Portions of Images;
Creating Sliding Composite Images;
Foreground Images That Scale With the Layout.
For more information, we recommend reading Zoe Mickley Gillenwater’s book Flexible Web Design: Creating Liquid Layouts with CSS and downloading the chapter on Creating Flexible Images.
An example of adaptive layout
If you shrink the whole image, the inscriptions will be unreadable. Therefore, to save the logo the image is divided into two parts: the first part (the illustration) is used as a background, the second (the logo) is resized proportionally.
Working with images is one of the biggest challenges when working with responsive website makeup. There are many ways to resize images, and most of them are fairly easy 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 image. Note that max-width is not supported in IE, so use width: 100%.
The above method is a good way to create adaptive images, but by changing only the size we will leave the weight of the image the same, which will increase the loading time on mobile devices.
You can use Picturefill to make images responsive to changes in screen size.
You will need to download the picturefill.js file and then write some code inside the head tag.
We recommend adding an async attribute to the script tag so that the loading of this file is not interfered with the loading of the site. This will allow the site to load without waiting for the picturefill.js file. However, for older browsers to recognize picture elements, you need to add a line, document.createElement(“picture” ); before the first script tag.
Now you can use the following code to tell the browser what images to display, depending on the size of the window.
The sizes attribute is used to specify how much space the image will occupy. Read more about the sizes and srcset values here.
For more explicit image control there is the picture element.
An interesting feature for the iPhone
The iPhone and iPod touch have a feature: designs designed for larger screens will simply shrink in a small resolution browser without any scrolling or additional mobile curl. However, images and text will not be visible:
The meta tag is used to solve this problem.
If initial-scale is one, the width of the images becomes equal to the screen width.
Customizable page layout
For significant changes in page size you may need to change the layout of the elements as a whole. This can be done through a separate CSS file with adaptive layout, or, more effectively, through a CSS mediaquery. This should be no problem, as most of the styles will remain the same, and only a few will change.
For example, you have a master styles file that sets #wrapper, #content, #sidebar, #nav along with colors, backgrounds, and fonts. If your main styles make the layout too narrow, short, wide, or tall, you can determine that and plug in new styles.
Customizable page layout structure
On a wide screen, the left and right sidebars fit nicely on the side. On narrower screens, these blocks are placed one below the other for more convenience.
Read about other peculiarities of CSS adaptive layout in this article about non-trivial moments of frontend development with CSS.
Adaptive layout with CSS3 media queries
Let’s see how you can use CSS3 media queries to create adaptive design. 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.
In this case, the class (aClassforSmallscreens) will work when the screen width is less than or equal to 600 px.
While min-width and max-width can apply to both screen width and browser window width, we may only need to work with device width. For example, to ignore browsers open in a small window. We can use min-device-width and max-device-width to do this.
Specifically for the iPad, media queries have an orientation property whose values can be either landscape (horizontal) or portrait (vertical).
If the screen size is reduced, you can, for example, use a script or an alternative styles file to increase the white space or replace the navigation for more convenience. So, with the ability to hide and show elements, resize images, elements, and more, you can create adaptive layouts for any device or screen.