Adaptive layout using a JavaScript script. The best tools for testing responsive layout Supports images in only one resolution
Hello, dear blog readers. It’s no longer 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 :-)
From the author:“Stop resizing this browser, it's about to wear itself out!” How often do you hear this? Well, okay, maybe not that often, but if you develop responsive websites, you know what I'm talking about: every time you edit the DOM or CSS, you're dragging the edge of the browser back and forth, testing the changes and looking for inaccuracies.
In general, most of these efforts are an attempt to mimic the screen sizes of different devices.
If you're doing enterprise development, you probably have a lot of company-provided devices to test. Where I work, we have iPads, iPhones, one or two other tablets, laptops and desktops. If you don't have that luxury, you have to use what you have at hand.
At home I have two different laptops, two different Android devices: Kindle and Nexus 7. I use these devices to test my freelance developments, but it is clear that this is not an exhaustive selection. Not at all iOS devices, and while I'm considered an early adopter, I don't plan on buying every new phone/tablet/tablet as soon as it goes on sale.
So what should a developer do? Fortunately, there are a growing number of browser-based tools that simulate the screen sizes of a variety of devices. Different tools, of course, come with different sets of features and different levels of efficiency. We will look at some of them here.
For testing purposes, I took the first truly responsive website I created, PajamasOnYourFeet.com. It is based on the Brownie HTML5 template, very generously and freely provided to the developer community on EGrappler.
Am I responsive?
Am I responsive? – a completely easy, instant preview of your site in terms of how it will appear on four different devices. All four are iOS, and the developer explains his choice on the website. It doesn't offer any controls or selections, just a very simple and elegant display. View window dimensions:
Desktop - 1600 x 992px, decreasing by scale (0.3181)
Laptop - 1280 x 802px, decreasing in scale (0.277)
Tablet - 768 x 1024px, decreasing by scale (0.219)
Mobile - 320 x 480px, decreasing by scale (0.219)
To quote the developer: “This is not a testing tool, it is very important to do this on real devices. But it is a tool for taking quick screenshots (for me) and providing a visual opportunity to “drill down” in client meetings what you meant.”
device responsive
deviceponsive is similar to the Am I Responsive site? one that displays your site simply and neatly, but has no controls or available options when it comes to devices. All of them are shown simultaneously on one long page. It has an interesting property - you can modify the header by editing its background color and inserting your own logo, and then “print it”. This way, in a sense, you can brand your site when showing screenshots to the client. Devices and screen sizes simulated on this site:
Macbook - 1280 x 800
iPad (portrait) - 768 x 1024
iPad (landscape) - 1024 x 768
Kindle (portrait) - 600 x 1024
Kindle (landscape) - 1024 x 600
iPhone (portrait orientation) - 320 x 480
iPhone (landscape) - 480 x 320
Galaxy (portrait) - 240 x 320
Galaxy(landscape) - 320 x 240
As with most similar tools, scroll bars appear on small devices. They won't show up on a real device, but to be able to scroll the test view on a non-touch device you have to make some concessions.
responsive test
Like deviceponsive, responsive test displays your site on multiple devices, but instead of showing them all at once on one page, you choose which device to view from a simple menu at the top of the page. Browsing this site on a medium-sized laptop, I found that shrinking the page works great, allowing you to see the entire site inside the window of the device I'm testing.
Thirteen different viewing windows are offered here, from a large monitor desktop computer to the so-called “Crappy Android” (to be honest, they also have an option called “ Android is better"(Nicer Android).
Once again, Firefox stumbles a bit on this site. Notice in the screenshot - between the green header and the content area with a white background - there is only a blue bar where the image slider should appear.
responsive.is
It's very similar to the previous two, and the only thing that sets responsive.is apart from them is the smooth animation of the display from one device to the next, as well as a translucent overlay showing the site's real estate falling out of the viewport.
The only available device options here are automatic ones, which fill your browser window, showing the site as you would see it if you went to it: Desktop; Tablet (landscape orientation); Tablet (portrait orientation); Smartphone (landscape orientation) and Smartphone (portrait orientation), pixel dimensions are not given.
Screenqueries
Once again, several different features and options set Screenqueries apart from other sites. Here are 14 telephone and 12 tablet devices with a separate element for switching portrait and landscape modes. These are displayed on a numbered pixel grid, with the dimensions shown at the bottom right of the test display. The edges of the display are draggable so you can test custom sizes. Drag or click over the testing area and the background will turn gray, with a less cluttered appearance.
An interesting feature of this site is that for multiple devices there is an option “ The right kind” (“True view”), which shows your site wrapped in the chrome browser assigned to this device. Unfortunately, and I'm already used to this, Firefox is unable to display the image slider of the test site. Don't worry, I really prefer Firefox when it comes to browsers, but luckily we have options.
Screenfly
Screenfly really increases the usability factor. It offers nine devices larger than tablets, from a 10-inch laptop to a 24-inch desktop, five tablets, nine smartphones, three TV sizes and a custom screen size option. Any option you select can be rotated in portrait or landscape using individual element menu controls. You can choose whether to allow scrolling or not and generate a shareable link with one click of a button.
The site is proactively useful in the way it presents pixel sizing information. Each device in the menu is shown with a name and pixel dimensions, the size of your own browser window is shown near the top right corner of the window, and the dimensions of the selected option are shown in the footer below the display along with the URL of the site being tested. This small feature makes it easier to document screenshots and share information with clients.
All of the above would have already made it an ideal tool, but the Screenfly developers found an opportunity to make it simply top class and provided a proxy server property. Quoting from their website: “Screenfly may use a proxy server to impersonate devices while you view their website. The proxy simulates the user agent string of the devices you select, but not the behavior of those devices." All other tools covered here deal exclusively with CSS. Screenfly is the only one that allows testing based on the user agent string.
Having tested one website I created with an existing mobile version in this way, I can say that the results were very good. Everything displayed exactly as I expected and the features were testable. It must be said that testing user agent strings has become traditional, but this site was made a long time ago, and the proxy property turned out to be a very useful addition to it indeed.
Conclusion
So, you can see that there are plenty of resources available for testing responsive websites. They differ in unique properties; which sites you use will depend on your personal preferences and requirements, and I try to encourage you to explore and experiment with them. The more we, developers, have truly useful tools, the better.
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 allowed content to be displayed correctly on mobile devices and increased loyalty to the site for both visitors and search engines.
A mobile version of a website and responsive design are not the same thing. This article will focus on 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, and for this there are several useful services and tools.
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.
Google Browser Chrome It also has built-in support for checking the adaptability of the site design. To do this, go to the menu, select “Additional tools” and then “developer tools” (or press the ).
After that, click on the responsive design icon (or simultaneously press on your keyboard ++[M]):
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 considered inconvenient for mobile visitors, then it is demoted in 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 different screen resolutions.
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.
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 expectations mobile audience. Mobile traffic analysis must be carried out systematically and the results must be consistently implemented, refining 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.
Separate content into different tabs, for example, a product page may contain only a basic image, description, price and a “Buy” button. Customer reviews and videos can be placed on a 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, developers hide some of the content so that loading on mobile devices is faster. 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. Fluid images are a CSS-based technique that allows you to compress and stretch an image depending on the width of the containing element, or HTML5 element.
"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.
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 now use their mobile phones or tablets to access websites, so testing responsive web design is important because the user experience on mobile devices is very different from desktop computers.
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 usually suitable for quickly visually inspecting a website in 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
Mobile emulator is a web simulation of how websites and apps 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 cost-effective effective solution to test the functionality of the website at a high level.
Google DevTools
In DevTools Google Chrome There is a feature called device mode that 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 to 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 great amount information from Google tool 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.