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.netA good service for checking sites. There are many screen resolutions for both tablets and phones.
mattkersley.comA simple service for checking a website from Matt Kersley. All popular mobile device resolutions are also available.
A very cool service that will check any site. I really liked the design, as well as the functionality.
Very beautiful and functional service. It is even possible to check how the site will look on TV :-)
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 with the goal of providing an optimal experience - easy to read and navigate with minimal size, panning and scrolling on wide range 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 rendered outside the containing element.
- Media queries allow a page to use different CSS styling rules based on the characteristics of the device on which the site is being displayed, most often browser width.
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 challenging 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 a quick visual inspection of 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
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
In DevTools Google Chrome There's a feature called device mode that's 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:
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.
In conclusion
Find out how your web application is being used. You can get huge amount information from the Google Analytics tool 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.
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:
Let's consider all types in more detail.
1. Fixed layout
Blocks do not change their width. On low-resolution monitors, a horizontal scroll bar appears.
#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 values (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 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. 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()< 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's it. If you have any questions, write in the comments, go to
From the author: “Stop resizing this browser, it will soon be erased!” 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.”
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. IN real device they won't show up, but you have to make some concessions to be able to scroll the test view on a non-touch device.
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.
There are thirteen different viewing windows available here, from large monitor desktop computer to the so-called “Crappy Android” (to be fair, 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.
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 clicked on it: Desktop; Tablet (landscape orientation); Tablet (portrait orientation); Smartphone (landscape orientation) and Smartphone (portrait orientation), pixel dimensions are not given.
Once again, several different features and options set Screenqueries apart from other sites. There are 14 phone and 12 tablet devices with a separate element for switching between portrait and landscape orientation. 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 test area and the background will turn gray, with a less cluttered appearance.
Interesting feature of this site – for multiple devices there is a “True view” option that shows your site wrapped in the appropriate view for that device chrome browser. 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 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 already make it an ideal tool, but the Screenfly developers found an opportunity to make it simple upper class and provided the proxy 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 in this way one site I created with the existing mobile version, 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.
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.
Frameworks, such as or, which greatly facilitate and speed up page layout.
implies excellent display of a web page on all devices and monitor extensions. Probably, not every layout designer has a full set of devices with all possible display extensions to test their layout. This is not surprising, because technology is not cheap these days.
So. Buying mountains of mobile phones and tablets is not an option - we'll go broke. What to do? For these tasks, services have been developed for testing adaptive websites. The principle of their operation is very simple. Most often there is a frame of a certain size where the page opens. The effect is approximately the same as when viewing on mobile device. I would like to note that the service will not always accurately show the display of the page on a phone or tablet. When coding, you should test using services, but after completion, if possible, test on the most common devices.
So. For your attention best tools for testing adaptive websites.
A tool for testing responsive websites from Adobe. To use it you need to install it on your computer.
The program allows you to synchronize your devices via WIFI and view the site as it will be displayed on your device. On at the moment Devices with the following operating systems are supported: iOS, Android, Kindle Fire.