Adaptive interfaces. Ways to implement interface adaptability What is responsive web design
Internet users browse websites on different devices with different screen sizes. Screen sizes are constantly changing, so it is important that the site adapts to any of them. There are two main approaches to creating websites that easily adapt to different types of devices:
Responsive Design (RWD) - responsive design - designing a site with certain property values, for example, a flexible layout grid, which allow one layout to work on different devices;
Adaptive Design (AWD) - adaptive design, or dynamic display - designing a site with conditions that change depending on the device, based on several fixed-width layouts.
1. Responsive Design TechniquesThe philosophy behind responsive web design is to make the site easy to view on any device, regardless of screen size. The phrase responsive design was coined by Ethan Marcotte in 2011. The main feature of responsive web design is that due to the fluid grid, the layout automatically responds to changes in screen size, inflating or contracting like a balloon.
Responsive Web Design combines three techniques - flexible grid-based layout, flexible images and media queries.
Layout flexibility is based on the use of relative units of measurement instead of fixed pixel values, allowing the width to be adjusted to suit the available space.
Flexibility of text content is achieved by calculating font sizes relative to browsers' default font size of 16px, for example for a fixed size of font-size: 42px the relative size is 42px / 16px = 2.625em.
The problem of flexible images is solved using the img (width: 100%; max-width: 100%;) rule for all images on the site. This rule ensures that images are never wider than their containers and never exceed their true size on larger screens.
Media queries modify styles based on device characteristics associated with displaying content, including screen type, width, height, orientation, and resolution. Media queries create a responsive design that applies appropriate styles to each screen size.
Rice. 1. Responsive Design Additional Responsive Design Techniques Scalable vector graphics - Use SVG images that scale to any size without losing quality and look good on Retina displays.
Card Interfaces - Use so-called card interfaces - rectangular shapes with rounded corners that represent containers for content. Such blocks are self-contained interface units and are easy to move around the layout.
Rice. 2. Pinterest, card-based layout Keeping only the essentials is a good technique, especially for responsive design. Create responsive and friendly minimalist interfaces that are becoming increasingly popular nowadays.
Rice. 3. Hotellook, minimalism in web design Prioritize and hide content correctly - use hidden controls, especially for devices with small screens. Pop-up windows, tabs, off-canvas menus and other similar techniques will help reduce the number of elements on the page. By freeing up space from unnecessary elements, you will make the interface convenient and user-friendly.
Create a large clickable space for your buttons - the larger the clickable area of a button, the easier it is for the user to interact with it.
Add interactivity to your interfaces - in response to a user action, create a response action - an animation that will work when hovering over an element on desktop devices and when touching an element on mobile devices.
2. Customizing the viewport using the viewport meta tagTo prevent mobile browsers for Android and iOS operating systems from automatically resizing site pages, a special tag with the name="viewport" attribute is used. This tag allows you to set a specific value for the width and initial-scale parameters:
— initial-scale=1 means that the page size in the browser will be equal to 100% of the viewport size. That is, the ratio between the physical pixel and the css pixel will be 1:1;
— width=device-width means that the page width will be equal to 100% of the width of the window of any browser. That is, the width of the site page corresponds to the width of the device, so it does not need to be scaled.
In this example, the content in the browser window will be 2 times larger compared to its physical size.
The tag can also be used to control how much users can increase or decrease the width of the page:
This code will allow you to increase the page width to a value equal to 3 times the width of the device screen and reduce it to half the width of the device screen.
You can deny users the ability to scale using the user-scalable attribute:
3. Universal templates
Most of the layouts used to create responsive web design fall into one of the five pattern categories defined by Luke Wroblewski:
Mostly Fluid (Most rubbery),
Column Drop (Columns under each other),
Layout Shifter (Moving layout),
Tiny Tweaks (Tiny changes),
Off Canvas.
In some cases, a page may use a combination of templates, such as Column Drop and Off Canvas.
A popular layout consisting mainly of rubber mesh. On large or medium-width screens, its size usually remains unchanged; on large screens, only the margins are adjusted. On smaller screens, the rubber grid causes the layout to be recalculated for the main content, and the columns are placed one below the other. The advantage of the template is that it only requires one control point between small screens and large screens. 
Columns are placed one by one vertically if the width of the window cannot display all the content. As a result, the columns will be positioned vertically below each other. The choice of breakpoints for this layout template depends on the content and is determined for each design option separately. 
The most responsive template, as it provides multiple control points for screens of different widths. The main difference with this layout is that instead of recalculating the render tree and placing columns underneath each other, the content is moved. Due to the significant differences between the major breakpoints, maintaining this layout is more challenging, and you may have to change not only the overall layout of the content, but also its elements. 
The template makes small changes to the layout, such as adjusting the font size, resizing images, or moving content. It works well on single-column layouts, such as single-page sites and articles with a lot of text. 
Content that is rarely used, such as navigation elements or application menus, is placed off-screen and shown only when the screen size allows it. On smaller screens, content opens with one click. 
Unlike responsive design, Adaptive Web Design focuses on device sizes. It uses several static layouts for different types of devices (mobile devices, tablets, desktop computers), based on control (breaking) points. That is, layouts load at certain device browser window sizes, and transitions between layouts occur abruptly rather than smoothly.
Typically, responsive layouts have six layout options depending on screen width:
320
480
760
960
1200
1600.
Responsive layouts focus on functionality, meaning the design takes device features into account, such as touch controls for mobile devices or large spaces for desktop monitors.
Basic Responsive Design TechniquesMaintain consistency – any website needs to build trust with the user so that they feel comfortable navigating and interacting with it. Consistent design means that when moving to another page on a site, the user does not feel like they are on another site. Pay attention to small details, build a visual hierarchy, and highlight important elements in bold. Use a consistent color scheme throughout the site, reusing the same elements for different situations, such as the same popup notification design.
Use a grid—a 12-column structure is preferable to control column width and space between columns.
5. What is the difference between responsive and adaptive web design
Rice. 4. Responsive and adaptive design on different devices To create responsive layouts, you use media queries and the relative sizes of grid elements specified with % . In responsive design, server-side scripts first determine the type of device the user is trying to access the site on (desktop, phone, or tablet), then loads exactly the version of the page that is most optimized for it. Grid elements are given fixed px sizes.
Therefore, the main difference between these techniques is responsive design - one layout for all devices, adaptive design - one layout for each type of device.
6. Useful services and toolsAndroid emulator for Windows, Linux and Mac OS X. The iOS simulator is available only for Mac OS X users and is part of the Xcode package (it can be downloaded for free from the Mac App Store).
A PHP script running on any website detects the screen size and adjusts the image size to fit it, resulting in a small image size on small screens.
Tables of correspondence between the physical dimensions of devices and CSS values for height and width, as well as the pixel-ratio value for mobile devices.
A collection of websites using media queries and responsive web design.
CSS framework based on 12-column layout, maximum 960px. Supported by Chrome, Safari, Firefox, IE 7 and above, mobile versions of browsers.
A set of tools for developing web applications. LESS language, 12-column adaptive layout, support for mobile devices, tablets and monitors, many components, buttons, drop-down menus, custom style of input fields, lists, headings, labels, icons, alerts, tabs, progress bars, tooltips, “accordion”, “carousel”, and so on, various Javascript plugins, Scaffolding support, including applying Bootstrap style to already created HTML.
Adaptive layout changes page design depending on user behavior, platform, screen size and device orientation and is an integral part of modern web development. It allows you to save significantly and not have to draw a new design for each resolution, but change the size and location of individual elements.
This article will look at the main elements of the site and how to adapt them.
Adjusting screen resolutionIn principle, you can divide devices into different categories and design for each of them separately, but this 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 will not be able to continue to design for each device separately. But what to do then?
Partial solution: make everything flexibleOf course, this is not a perfect method, but it eliminates most of the problems.
Ethan Marcotte created a simple template demonstrating the use of responsive layout:
At first glance it may seem that everything is easy, but it is not. Take a look at the logo:
If you reduce the entire image, the inscriptions will become unreadable. Therefore, in order to save the logo, the picture is divided into two parts: the first part (illustration) is used as a background, the second (logo) changes its size proportionally.
The h1 element contains an image as the background, and the image is aligned to the background of the container (header).
Flexible imagesWorking with images is one of the most important problems when working with responsive design. There are many ways to resize images, and most of them are quite simple to implement. One solution is to use max-width in CSS:
Img (max-width: 100%;)
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 presented method is a good option for creating 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.
Another way: responsive imagesThe technique, introduced by Filament Group, not only resizes images, but also compresses the resolution of images on small screens to speed up loading.
This technique requires several files available on Github. First we take the JavaScript file ( rwd-images.js), file .htaccess And rwd.gif(image file). Then we use some HTML to associate large and small resolutions: first a small image with a prefix .r(to show that the image should be responsive), then link to the large image using data-fullsrc:
For any screen wider than 480 px, a higher resolution image will be loaded ( largeRes.jpg), and on small screens it will load ( smallRes.jpg).
The iPhone and iPod Touch have a feature: a design created for large screens will simply shrink in a low-resolution browser without scrolling or additional mobile layout. However, images and text will not be visible:
To solve this problem, use the meta tag:
If initial-scale is equal to one, the width of the images becomes equal to the width of the screen.
Customizable page layout structureFor significant changes in page size, you may need to change the overall arrangement of elements. This can be conveniently done through a separate styles file or, more efficiently, through a CSS media query. There shouldn't be any problems as most of the styles will remain the same and only a few will change.
For example, you have a main style file that specifies #wrapper , #content , #sidebar , #nav along with colors, background and fonts. If your master styles make your layout too narrow, short, wide, or tall, you can identify this and include new styles.
style.css (main):
/* Basic styles that will be inherited by the child style sheet */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul() /* Structural elements */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )
mobile.css (child):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Additional styles for the new design */ border-top: 1px solid #ccc; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; )
On a wide screen, the left and right sidebars fit nicely to the side. On narrower screens, these blocks are located one below the other for greater convenience.
CSS3 media queriesLet's look at how you can use CSS3 media queries to create responsive designs. min-width specifies the minimum width of the browser window or screen to which certain styles will be applied. If any value is below min-width , the styles will be ignored. max-width does the opposite.
@media screen and (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
The media query will only work when the min-width is greater than or equal to 600 px.
@media screen and (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )
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 opened in a small window. You can use min-device-width and max-device-width for this:
@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth ( clear: both; margin-bottom : 2px solid #ccc; ) )
Especially for iPad, media queries have the property orientation, whose values can be either landscape(horizontal), or portrait(vertical):
@media screen and (orientation: landscape) ( .iPadLandscape ( width: 30%; float: right; ) ) @media screen and (orientation: portrait) ( .iPadPortrait ( clear: both; ) )
You can also combine media query values:
@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )
This code will only be executed for screens or browser windows between 800 and 1200 px wide.
You can load a specific sheet with styles for different media query values like this:
JavaScript
If your browser does not support CSS3 media queries, then style replacement can be done using jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // If the width is less than 600 px , mobile stylesheet is used if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // If the width is greater than 600 px, the desktop stylesheet is used $("link").attr((href: "style.css")); ) ) ));
Optional content displayThe ability to shrink and rearrange elements to fit on small screens is great. But this is not the best option. Mobile devices typically feature a broader set of changes: simplified navigation, more focused content, lists or rows instead of columns.
Luckily, CSS gives us the ability to show and hide content with incredible ease.
Display: none;
display: none is used for objects that need to be hidden.
Here's our markup:
Main Content A Left Sidebar A Right Sidebar
style.css (main):
#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )
mobile.css (simplified):
#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
If the screen size is reduced, you can, for example, use a script or an alternative styling file to increase the white space or replace the navigation for greater convenience. Thus, having the ability to hide and show elements, change the size of pictures, elements and much more, you can adapt the design to any device and screen.
How Yandex uses your data and machine learning to personalize services -.
Adaptive user interfaceIn the presented work, the adaptive web interface was improved, the main part of which was developed in the course work “Adaptive interface for working with decision tables”, author - Derbeneva E.E.
In comparison with the previous version, pages appeared that display the history of working with the system and responses from specific clients, and a page with information about the bases with which it is possible to work in this system. Work with extended input of client responses has also been implemented.
Data exchange with the user interface is carried out using Ajax technology, using the JSON format. On the client side, a connection to the DBMS is created and SQL queries are generated.
To work with decision tables, the user calls the procedures and functions he needs, located in the PKG_GET_ANSWER package. When calling, the user indicates, in general, the name of the system, area and subarea, the number of the table with which the user works, as well as the client id. The result is output to temporary tables, data from which can be retrieved using the appropriate SQL query.
The main page of the interface (Figures 18-20) is a menu through which the user can log into the system and select the appropriate area and subarea of knowledge. New users have the opportunity to register. If desired, the user can download training materials on both decision tables and interface operation.
Figure 18 - main interface page
Figure 19 - Main interface page
Figure 10 - main page
When authenticating (Figure 20), the user selects the appropriate area of knowledge from a dynamically constructed list of all available areas.
Figure 20 - authentication
This is what the registration form looks like (Figure 21). Only three fields are required: name, login and password.
Figure 21 - user registration
If authentication is successful, the user is taken to the second page (Figure 22). It contains a dynamically built list of his clients. To ensure dynamics, the necessary parameters (system name, area, subarea, user ID) are transferred to the page in the address bar.
Figure 22 - customer base
If necessary, the user can add and delete clients (Figure 23). These manipulations are carried out with the Data_Clients table.
Figure 23 - client registration
By clicking on the Bases inscription in the upper left corner, a page opens with the bases of this system (Figure 24). The user only has viewing rights and cannot change data.
Figure 24 - page with bases
On the client data page, the ANS and HIS columns contain links to pages displaying data about all responses of a particular client and the history of his work with the system, respectively (Figures 25-26).
Figure 25 - page with client responses
Figure 26 - client history page
The user has the ability to delete some rows, but does not have the rights to manually add new data or change existing ones.
The CURRENT_PROGRESS column contains the number of the next decision table. And when you click on the link, you go to the filling page (Figures 27-28). The parameters are: system name, area, knowledge subarea, table number and client identifier.
Figure 27 - client survey (option with limited input)
Figure 28 - client survey (option with limited input)
In the first tab, when loading, a form is created to fill out the current decision table. When you click the Submit button, the rows generated from the user's selection are inserted into the DATA table. The second tab contains a table with data on previous completions of tables for this client; this information is located in the DATA table.
Figure 29 - Decision table display
The third tab contains a decision-making table for the current form to be filled out (Figure 29). The upper part of the table is conditions and combinations of conditions, the lower part is actions and combinations of actions. Data is queried from a temporary table created by the PRC_TRANS() procedure.
Upon completion of the work, a page opens with the results: the step, tablename, actions, value fields of the passed decision tables, loaded from the client’s history (Figure 30).
The box displays the activities with the highest production value.
Figure 30 - results page
At the moment, about 11-12% of the 100,000 most visited sites are responsive, and there is no doubt that this number will increase in the next few years.
As more organizations roll up their sleeves to embrace the realities of the multi-device web, it's worth considering a few strategies used to achieve nirvana:
Adaptive modernizationResponsive redesign is the process of taking an existing desktop-only website and essentially "remodeling it responsive."
Dan Cederholm
For most organizations, large-scale creation of a new design from scratch is not even considered. This is why responsive modernization is a popular approach to creating a good experience for mobile devices.
Advantages- Relatively fast.
There are quite a few ways to do responsive modernization, this strategy could be adding a small-screens.css file to the site. Despite this rather crude example, adaptive modernization is an attractive option for a large number of organizations because it does not require rebuilding everything from scratch. - Familiar.
Doesn't confuse users. People have spent years getting used to the interface, and by modernizing the existing one, organizations maintain a familiar approach while improving the lives of people with mobile devices. - Organizationally faster.
Politically speaking, modernizing the interface is safer than starting from scratch. There will be less debate about what shade of green to choose, what trivial stock photos to use, and management will not have to twist their arms. This allows teams to launch responsive sites faster.
- Only affects a small part.
Again, there are many options for doing a remodel, but the goal of most of them is to “make it look pretty.” By focusing on redesigning the layout, redesigns often miss the myriad of other factors that need to be considered when creating a successful design for a variety of devices. - 10 liters of water in a three-liter jar.
Since desktop sites are designed only for desktop computers (and often last for a long time), they can contain a lot of clutter. And since modernization mainly consists of re-melting the layout, most problems with content are not fully taken into account. - Performance.
There's something strange about writing code to better support small devices. Removing unnecessary stuff can go too far, but without focusing on productivity, it won't grow on its own. - Worst support.
Media queries, originally designed for desktop computers, are poorly supported on most mobile devices. - Temporary fixes.
I feel like dying when I hear people asking me to “make responsive” something, as if it were just a checkbox in the project plan (which sometimes it actually is). This type of limited thinking misses the real opportunities that responsive design offers.
The mobile version gives you the opportunity to plant a seed that will grow from your legacy website.
Over time, an outdated site can be removed, and the site will evolve from being mobile-first, responsive, and taking into account future trends.
- Lower risk.
Most organizations still see traffic from mobile devices as a minority. So launching a mobile responsive website allows these organizations to test the waters without having to jump into the topic head first. - An opportunity to learn to be flexible.
Designers can learn to think more flexibly. Developers will learn the myriad tricks of Android devices. Managers can figure out how to move away from pixel perfection. A responsive mobile site can be a great sandbox for learning. - Infrastructure.
Teams can learn how to solve content management problems, such as image creation, once and for all - Remove excess.
This approach offers a great opportunity for teams to ask themselves “do we really need this” while also focusing on performance. Why? Because their primary focus is on improving the user experience of their site on mobile devices. - The future is mobile-first websites.
Although initially lacking in content or functionality, with enough time and effort these mobile sites can eventually replace their full-page ancestors.
- It's still a mobile site.
Whether it is responsive or not, this approach still retains a large number of disadvantages of mobile sites: problems with URL redirection, content management, consistent content, consistency, SEO optimization, and others. - Temporary fixes.
Many mobile sites are created as a Band-Aid - to stop the bleeding. Such sites are created with the aim of unloading the growing traffic coming from mobile devices. These solutions may still meet existing needs, but given future trends, they are unlikely to save you in the long run. - The likelihood of withering away on the vine.
Some organizations may start such projects, get halfway through, and then abandon the whole thing until the next year's budget is passed. - Design for small screens.
Since the initial focus is on small screens, later porting the interface to larger displays without losing quality can be a challenge.
Flaws - 50 shades of imperfection.
This approach may fail because users will have to deal with a Frankenstein interface that is both old and new. - The possibility of withering away on the vine.
These types of projects need clear end goals or they can end up stuck in purgatory forever. - Technical coexistence.
What happens when one module, using the latest technologies and techniques, collides head-on with an outdated module? There are many architectural challenges to this approach.
But over time, it has become increasingly clear that organizations need to work towards an increasing variety of devices that can access the Internet.
This is a translation of an article entitled "Responsive Strategy" by Brad Frost. Translated by UXDepot with the approval of the author. PS from the translators: I hope you enjoyed the article. We will be glad if you point out any errors in the translation so that we can correct them promptly. Write to us at[email protected]
