Hello, dear blog readers. It’s not surprising that adaptive design is becoming more and more popular on the Russian Internet. And of course, layout designers need to study it. Since responsive design will soon be on almost all websites, because more and more people are using mobile devices.

And I would like to say that sites with it are much more convenient to read on such devices than without it.

Today I want to introduce you to 5 very useful and cool services with which you can check your website for adaptability.

And so, let's go.

5 services where you can check your website for adaptability. www.responsivedesigntest.net

A good service for checking sites. There are many screen resolutions for both tablets and phones.

mattkersley.com

A simple service for checking a website from Matt Kersley. All popular mobile device resolutions are also available.

screenqueri.es

A very cool service that will check any site. I really liked the design, as well as the functionality.

quirktools.com

Very beautiful and functional service. It is even possible to check how the site will look on TV :-)

An online store needs to be optimized for mobile devices. This problem is solved using adaptive design, which allows the site to be displayed correctly on any platform. However, implementing responsive design comes with a standard set of pitfalls. Let's list the 8 most common problems typical for online shopping sites.

Neglecting visitor behavior analytics

The rush to enter the mobile segment forces retailers to design a website without conducting serious analytics of visitor behavior. Analysis of visitor behavior is the most important stage of preparation, which allows you to identify the most popular mobile devices and optimize the site for them first. Analytics helps determine the most “popular” user action, for example, enlarging a product image; shows the conversion rate of mobile visitors, etc. This data will provide insight into user behavior preferences and help meet the expectations of the mobile audience. Analysis mobile traffic it is necessary to carry out systematically and consistently implement the results, finalizing and optimizing the site to meet the needs of customers.

Designing a Desktop Store

Usually the desktop version of an online store is redesigned for mobile screens, although it is more logical to use small screen mobile device and then scale to desktop. Retailers often don't realize technical problems Bringing a site designed for a desktop to the size of a smartphone.
Starting design for mobile screens, you focus on the mobile user experience. As a result, it will be easier for you to design for both channels: desktop and mobile.

Testing responsive design

Testing the mobile layout of an online store is a mandatory stage of launch, but many owners often neglect it and launch without testing. As a result, on the live version of the site for mobile devices, errors can appear even during the process of making a purchase and placing an order.

The shortcomings of adaptive design are easily identified by preliminary testing of an online store, but many sellers do not have the resources for this. To reduce the risk of losing money, test key user routes around the site in the main browsers - Chrome, IE, Firefox, Safari and operating systems– Windows, Mac OS, Android, IOS on popular mobile devices. Test every time you make changes; services like BrowserStack or Viewport Resizer can help reduce testing time to several hours.

Small elements for mobile screens

In an effort to fit more space on a smartphone screen, online store owners skimp on the size of their “call to action” buttons. Don't force users to zoom to click the Buy button and don't place small elements too close together, otherwise your users will choose to go to a more convenient site. Design interfaces with large navigation elements and call-to-action button sizes.

Slow page loading speed

Mobile audiences love fast sites and minimal loading times. Evaluate the components of your mobile pages– pictures, buttons, text, scripts – they must be optimized for mobile devices. Google takes page load time into account in its SERPs and ranks mobile sites and gives them preference in the top, so that “light” sites get an additional serious advantage.

Distribute content across different tabs, for example, a product page may only contain base image, description, price and “Buy” button. Customer reviews and videos can be posted on separate tab and reduce the “weight” of the main part of the page. In addition to content, optimize other elements that affect loading speed - CSS files, images and scripts, send only the necessary data. Tools that reduce the size of resource files and their loading time will help you with this: Uglify or JSCompress.

Trimming content for mobile users

Often, when developers hide some of the content so that loading is faster on mobile devices. However, often the page size is not actually reduced and the content is simply not displayed to the user. Your store should be able to dynamically generate a page, reducing page weight and loading times for mobile visitors. Additionally, giving mobile users less content is bad and negatively impacts the consumer experience. Typically, they use different devices during the purchasing process, as about 90% of online shoppers do. Limiting them to responsive design methods is a big mistake.

Supports images in only one resolution

A good website with a responsive design automatically changes the resolution of images depending on the type of device; heavy images increase loading time. There are several ways to automatically adjust image sizes to fit specific device. “Flexible” images (fluid images) are a CSS-based method that allows you to compress and stretch an image depending on the width of the element containing it, or an HTML5 element that allows you to load an image of the required size for each type of device.

"Non-responsive" emails

It happens that everything is fine with the site itself; responsive design works well on desktops and mobile devices. But emails aren't responsive, and mobile users have to struggle to check order details or scroll through an endless list of recommended products to get to their completed purchases. Emails This is a key point of contact with the client, integrate responsive email design into your mobile strategy. Design and test your letters and newsletters; letter templates should be “lightweight” and contain only important information.

Today there is no longer any need to convince anyone of the need mobile version site. After all, every day there are more and more visitors from smartphones and tablets. As of this writing, about 20% of my blog visitors use a mobile device for browsing. That is, every fifth person visits my website from a phone or tablet.

A few years ago, I didn’t even think about such visitors, but when their number exceeded 10% of the total, I began to use adaptive layout. This made it possible to display content correctly on mobile devices and increase loyalty to the site for both visitors and search engines.

A mobile version of a website and responsive design are not the same thing. In this article we'll talk about testing adaptive layout, when the site design changes depending on the screen resolution of the visitor’s device.

To be sure that your site displays correctly on mobile devices, you need to check it, and there are several useful services and tools for this.

Quick check of adaptive layout

Popular Internet browser (browser) Mozilla Firefox equipped with built-in tools for checking website design for suitability for display on mobile devices. To use it, go to “Menu” - “Development” - “Adaptive Design”. Or just press three keys on your keyboard at the same time ++[M]

You should see something like this:

By changing the screen resolution and orientation, you can check how your site will be displayed to mobile visitors.

Browser Google Chrome It also has built-in support for checking the adaptability of the site design. To do this, go to the menu, select the item “ Additional tools" and then "developer tools" (or press the key).

After that, click the responsive design icon (or simultaneously press ++[M] on the keyboard):

In the middle of the screen you will see how your site will be displayed on mobile device screens:

SEO testing of mobile design

As you know, the two world search leaders Google and Yandex have their own immodest opinion on how a website should look on mobile device screens. And if a site is deemed inconvenient for mobile visitors, then it is downgraded search results. So, from an SEO perspective, if you don't want to lose mobile visitors, not only do you need to have a responsive design, but search engines need to consider it responsive, meaning it's mobile-friendly.

To check adaptability using Google service go to the following address and enter the name of your site: https://www.google.com/webmasters/tools/mobile-friendly/.

This is what the result of checking my blog looks like:

With Yandex it’s a little more complicated; to check, you must register with the Yandex.Webmaster service and use the beta version of the interface:

Online services for testing adaptability

The main task of these services is to present (show) what your website will look like on a mobile device. There are a great many sites with such functionality. I will give just a few of them. In most cases, they duplicate the built-in functionality of FireFox and Chrome.

Google resizer

I’ll start again with Google, which has its own service for demonstrating adaptability: http://design.google.com/resizer/#

Quirktools screenfly

The second nice service is http://quirktools.com/screenfly/. It will show you how your website can look even on TV!

Symby.ru adaptest

Well, in order not to offend the “domestic manufacturer,” I’ll give an example of another site: http://symby.ru/adaptest/. On one page you will see several views with various resolutions screens.

Speed ​​of the mobile version of the site

Once you are sure that your site is responsive and displays correctly on most devices, you should check its speed. Again in relation to mobile visitors.

PageSpeed ​​Insights

Google, as always, is ahead of the curve: https://developers.google.com/speed/pagespeed/insights/. This service will show you what the site looks like on a phone screen and give recommendations for optimizing the code to increase loading speed on mobile devices.

WebPageTest

And in conclusion, I will give an example of a service that will not only show what a site looks like on a mobile device, but also show its speed: http://www.webpagetest.org/

conclusions

In my opinion, in everyday work, when making changes to the site design, it is easier to use the built-in capabilities FireFox browsers and Chrome. After which, of course, you need to check the loyalty of search engines to your design. And only then, to calm your soul or to show off, you can use online services.

With the development of web technologies, the requirements for web development also increase. Web developers, layout designers, or as they are called today frontend developers, feel the most pressure.

In this article we will talk a little about adaptive layout, since this “trick” is now very expensive. When it comes to adaptive layout, layout designers of any level look at customers or project managers, to put it mildly, with anger, because they understand how difficult it is.

Many people begin to confuse adaptive layout with flexible layout; this is a very common mistake of novice layout designers. What's the difference you ask?

Let’s first, so that it’s clear to you and so to speak, put all the dots and look at what types of layout there are.

There are 4 types of layout:

Fixed layout

Rubber layout

Adaptive layout

Responsive layout

Let's look at all types in more detail.

1. Fixed layout

Blocks do not change their width. On monitors with low resolution appears horizontal stripe scroll.

#temnyi, #svetlyi ( width: 440px; )

2. Rubber layout

The blocks change their width depending on the size of the browser window. It can take maximum and minimum value(max-width property). But you can’t make 50% from 50% to 100% as the screen gets smaller.

#temnyi, #svetlyi ( width: 50%; )

3. Adaptive layout

Implemented using @media or scripts. Customized for specific known devices (320, 768, 1024, etc.). Any change occurs in jerks, after reaching one of the specified levels. Definitely suitable for

#temnyi, #svetlyi ( width: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi ( width: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi ( width : 325px; ) ) @media (max-width: 680px) ( #temnyi, #svetlyi ( width: 200px; ) )

4. Responsive layout

This is a combination of fluid and adaptive layout. The most difficult to implement. But the result is the most acceptable. It's safe to say that the site will adapt to any device.

#temnyi, #svetlyi ( width: 50%; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( width: 100%; ) )

So we talked about 4 types of website layout. Now the time has come for our miracle adaptive layout script. I hope I don’t need to explain anything, the script is quite simple, we’re just saying that when you change some block will be mixed somewhere and that’s it. Of course, this is also possible through CSS styles, but you need to know all the methods; sometimes in some places some will not work and some will be just right.

Adaptive layout script:

/* Let's create a variable into which you can put monogest classes, for convenient use of them in code.< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

That is, here it detects them once and that’s it, and not before each sample! this is a useful feature */ var my = ( window: $(window) );

/*Actually the function itself*/ $(window).resize(function () ( /*A ​​variable that determines the width of the window and puts it in the width variable*/ var width = my.window.width(); /*window transformation condition i.e. a condition that is executed when the window width reaches a certain size */ if(my.window.width() That's all. If you have any questions, write in the comments, go to How to test a responsive website? What problems arise when testing websites on

different devices

? How is testing a website on a desktop monitor different from testing on a handheld device such as a mobile phone? What tools can we use to test responsive websites? Our What is responsive web design? Responsive web design (RWD) is a definition of an approach to web design that aims to create websites to provide an optimal experience - easy to read and navigate with minimal size, panning and scrolling on a wide range of devices (from desktop

computer monitors

• to mobile phones).
• A site built with RWD adapts its layout to the viewing environment using fluid, proportional grids, responsive images, and CSS3 media queries in the following ways:
• The fluid grid concept requires that page element sizes be in relative units, such as percentages, rather than absolute units, such as pixels or points. Flexible images are also evaluated in relative units to prevent them from being displayed outside of the containing element. Media queries allow a page to use different rules

CSS styling

, based on the characteristics of the device on which the site is displayed, most often the width of the browser. Challenges of testing responsive web design Many people nowadays use their mobile phones or tablets to access websites, so testing responsive web design is important because

Perhaps the most difficult part of testing a compliant website is that the website performs as expected on multiple devices and platforms, but actually testing on every mobile device on the market is impractical for most of us.

Many testers who start testing responsive web design usually start by resizing the browser window to fit the viewport size mobile phone, tablet and desktop. This method is generally suitable for quickly visually inspecting a website on different viewing ports and helps us identify underlying display issues when we reduce or enlarge the browser window.

However, testing on real mobile devices is a completely different experience.

Using emulators

A mobile emulator is a web-based simulation of how websites and applications will display and function in a mobile environment.

While emulators may not provide you with the exact testing tools you'll need, they are still a cost-effective solution for testing a website's high-level functionality.

Google DevTools

Google Chrome's DevTools has a feature called Device Mode, which is loaded with useful tools for testing and debugging responsive projects.

Unlike most other responsive design testing tools that simply resize your screen, this tool actually emulates the mobile device experience, especially touch interactions like tapping and scrolling, right within your web browser.

Some general rules testing responsive web design:

Text, controls and images are aligned correctly

Suitable click-through zone

Color, shading and gradient match

Check that the edges are filled correctly

Text, images, controls, and frames do not fall to the edges of the screen

Font size, style and color are appropriate for each text type

Scrolling text (data input) appears correctly

Check the location of modules as they shrink and expand the browser window or as you rotate your mobile device. Various modules may disappear when switching from desktop computer on mobile, but make sure you know exactly which modules should appear in which viewport.

Finally

Find out how your web application is being used. You can get a huge amount of information from the tool Google Analytics to see what devices your customers use to access your website. Use automated tools and emulators to perform basic checks and high-level functional testing and combine this with actual manual device testing.