Adaptive design wasn’t born yesterday, but it’s only recently that it’s become a big topic of discussion, thanks to the improvements it brings to the user experience.

To understand which of the two types of design is best for you, you need to be clear about the advantages and disadvantages of both methods, and be aware of what the best solutions are for different types of sites and devices.

Responsive Web Design

Responsive web design is the scaling of the interface to the user’s device through media-queries, or CSS3 modules, which allow the user to set different styles (or even style sheets) depending on the screen resolution, size, and other characteristics.

Using this method is better suited for sites with a flexible, or “rubber” structure. Otherwise, developers will spend a lot of time and resources to remake the site for tablets and cell phones, to compensate for the lack of flexibility.

In addition to its variable structure, responsive design has several other advantages:

1. the same appearance of the resource in different browsers and on different platforms
2. The presence of the same URL, which contributes to SEO-optimization
3. Developers need to maintain only one site, which reduces the time spent on design and content

While the positives of responsive design are obvious, there are a number of drawbacks to this method. The biggest of these is the loading speed, which is significantly reduced due to the high resolution of images and other visual elements required to design the appearance of the resource.

If you opt for a responsive approach, your designers will always be limited by this factor, as complex visual elements can “slow down” loading on mobile devices.

Adaptive Web Design

Adaptive design functions a little differently. It segments users into categories based on what device they’re viewing the site from.

While sites created with responsive design technology look the same regardless of device size – an adaptive resource determines which device a user is accessing the site from and displays the version of the site that was designed specifically for that type of device.

For example, if you’re viewing a regular blog page with pictures, headlines, descriptions and a “Share” button on a cell phone, the page will take a very long time to load because of the large number of images. In addition, the small screen size will make the page look cluttered.

Instead of showing a smaller copy of the resource, the server of the site with an adaptive design identifies the user’s device type and displays a simplified version of the blog, containing only the most essential elements of the interface and lower quality images.

In other words, the server takes care of all the “hard” work, instead of forcing the site to optimize itself. Among the advantages of adaptive design are the following:

Images load much faster because they are compressed and adapt to the user’s device
The site loads faster because the server detects the user’s device type and loads the programming code corresponding to it
Developers enjoy creative freedom, as they can create different versions of sites and adapt them to the appropriate device types to make them more mobile-friendly.
The appeal of this method is overshadowed by the fact that creating an adaptive site is not easy. Because of the adaptation of the design to different devices, the time spent on development increases significantly. Moreover, if you need to make any modifications to the site, you will have to make changes to all its versions. Therefore, if you have a small budget and no team of specialists who will support the adaptive site, it is better yet to abandon this idea.

Which option is right for what?

Even if you have a preference for one of the two types of design described above, it’s important to realize that you need to think about user experience first.

If your users are more comfortable interacting with a resource that has the same structure on all devices, opt for a responsive design. If your users are more technically savvy and you want to lay a good foundation for the future, then adaptive design will be the best solution.

Despite the fact that developing an adaptive website is more difficult, its advanced features and high loading speed can have a positive effect on conversion rates, which is especially important in the e-commerce and media industries.

For simple web pages or sites that load beautifully on mobile devices, responsive design will be the optimal solution. Their owners should consider creating an adaptive resource as an option for the future.

Have a great conversion rate!

On the other hand, designers today do not have to engage in full-fledged creativity and make unnecessary efforts: there are thousands of fonts and necessary graphic solutions available online. There’s no need to come up with something new, to surprise and delight. But therein lies the problem.

According to Marko Dugonjić, creative director at the consulting agency Creative Nights, designers can do so much better if they can synthesize the current advances in adaptive design with a little bit of their own creativity.

This article will explore the ways in which familiar web typography becomes expressive.

Basic rules

You’re probably already familiar with the concept of adaptive typography and how it helps solve the complexities that tend to arise beyond the boundaries of adaptive web design. However, the key goal of this article is not to show you the advantages and disadvantages of adaptive typography at all, or even to explore it in great detail. If you have not mastered the issue, there are many sources of information on the Internet. Here is limited to enumerating the basic, basic rules of the organization of adaptive typography:

1. The size of fonts should be in direct relation to the existing distance between the user and the screen. Internet resource through a tool CSS – media queries (media queries) – should recognize the type of screen and automatically adjust the site to its characteristics. But that technology won’t solve the whole problem, Marco says. He suggests using Nick Sherman’s “Size Calculator” to calculate the physical or perceived size of the font at any given distance.
2. Maintain harmonious and readable proportions in a paragraph by using letter spacing, word spacing, and line height. Tim Brown’s Universal Typography is the best way to help you do this.
3.  don’t forget about the hierarchy of headings in your text. For this you can use the same Tim Brown modular scale. Or use different fonts of similar size.
4. For small screens, to highlight a new paragraph, use the red line, for larger screens – block points or additional graphic elements (lines, shapes, colors).
5. Use graded fonts to normalize the rendering (displaying on the screen) of text regardless of the screen resolution. Pixel density on the screen is a factor that you can’t influence, but it can make the readability of your text much worse. It’s much better if you don’t depend on it.
6. Use fonts of different widths. Each width must match the specific type of screen. To display harmoniously on small smartphone and tablet screens, use a condensed font; for wide screens, you can use a wider font.

These are the ground rules on which all adaptive typography rests. Below is an experience of creating an online brochure based on the Benton Modern font family, using the most available adaptive design techniques. The task was to develop two layouts: the first was formal and the second was expressive.

The adaptation work was done by Marko Dagonzik, who we have already mentioned. The whole activity was divided into several stages. It should be remembered that the Benton Modern font family includes 48 styles.

A study of fonts.

First, all large and small fonts were tested: each font was compressed and stretched to the limit. Optical sizes of The Reading Size font group (special fonts designed for small screens, sizes from 9 to 14 points) were used for subheadings, and display optical sizes (designed for headings) were used for the bulk of the text.

The purpose of the tests was to identify irregularities that may have occurred when a particular style was transformed. To avoid such distortions, it was decided to use each optical size with its intended purpose.

Next, it was studied how different styles behave in the context of narrow and wide columns of text, compacted and sparse writing. Finally, all glyphs were analyzed. A glyph is an element of writing, a specific graphical representation of a grapheme, sometimes several linked graphemes. A grapheme is a unit of written speech (in alphabetic systems – a letter). The following prototype is obtained:

The columns were too narrow for the text to be aligned harmoniously, so it was decided to use hyphenation: it improved the text’s texture a bit.

Columns were used only when there was enough horizontal space. Nevertheless, the designers tried to avoid having columns of text stretching down the whole page: in order to read such a text format, you would need to scroll up/down while reading from one column to another, and this is not very convenient. That’s why another @Media query was introduced to check the user’s screen height before applying a column to the page.

Content formatting

Next, the designers proceeded to examine the content itself in more detail. In this way, it was possible to establish section boundaries.

The formal version was designed first. First, a large headline was created, which was a sort of replica of the big newspaper headlines, and below that was the date from which the series traces its history. There was no navigation menu in the original version, but then it was decided to add one to improve the usability of the brochure. This also made it possible to demonstrate the potential of brackets as graphic elements.

At first, the sections were somewhat monotonous and looked boring. The hierarchy and organization of subheadings, introductory paragraph and columns were created without much trouble, but the designers felt they were missing something. After a series of agonizing trial and error, dotted dividing lines appeared between sections to further emphasize the fine details in the design of the Benton Modern font family. In addition to this, the paragraph symbol § was also used.

However, none of this was good enough either, so the designers again looked through numerous glyphs to find suitable symbols for other sections. In the end, they preferred the following: § for the “About” section, – for “optical dimensions,” italicized i for “How to use this,” + for the bonus section, etc. All of these symbols are fairly rarely used in web design, so using them as decorative elements seemed natural.

Expressive details

The formal version of the web brochure, designed in the spirit of the newspaper format, turned out quite well. It was well organized, with lots of fine detail. But it wasn’t enough for the designers. Their hearts demanded aesthetics, and they couldn’t express that in a formal prototype. That’s why the idea was born to create a glossy magazine version in addition to the “newspaper” version. Below you can see the result of this work: the emphasis was kept on the same elements, but the introductory section was omitted, and each subheading was strengthened with pseudo-elements.

Сonclusion

You are probably now fully aware of how far you can go in creating virtual typography. To take full advantage of the methods described in this article, use only those font families that have multiple styles (types of lettering) and optical sizes. The only reason designers were able to create an adaptive design for an online brochure is because the Benton Modern font family has a wide variety of styles and optical sizes.