Stop resizing the browser window, stop raping it! I bet you've heard this more than once. Okay, maybe you haven't heard. But if you're a professional responsive web developer, you know what I mean: any DOM change or CSS edit, and you start dragging the edge of the browser back and forth again, testing the changes and seeing if anything's broken.
The purpose of your movements is to simulate the screens of various devices.
AT corporate environment often, you have a lot of gadgets provided by the company for the test. At my job, I have an iPad, iPod, other tablets, laptops, and desktop monitors at my disposal. If you don't have that luxury, you have to use what is at hand.
Fortunately, there is an impressive set online tool s imitating various diagonals devices. Of course, each of them has its own advantages and disadvantages, we will consider several such tools.
For testing, I chose a really responsive site called PajamasOnYourFeet.com, which is based on an HTML5 template provided free of charge by EGrappler.
Am I Responsive?
Am I Responsive, a very simple tool that allows you to quickly view your site on 4 devices. All of them are IOS and the developer explains this with a feature of the site. In general, no settings, no choice, but very simple and clear.Available sizes:
- desktop monitor - 1600 x 992px;
- laptop - 1280 x 802px;
- tablet - 768 x 1024px;
- mobile phone - 320 x 480px.
There are two nice features: the ability to drag devices around your screen, and the ability to share a link to a test site.
device-positive
deviceponsive is very similar to Am I Responsive, in that it is just as simple, with minimal settings and options. All available devices displayed immediately on one long page. Of all the options available, this is the ability to edit the header background and add your logo there, which will be useful when you decide to share a screenshot.Devices and available permissions screens.
- Macbook - 1280x800
- iPad portrait - 768 x 1024
- iPad portrait - 1024 x 768
- Kindle portrait - 600 x 1024
- kindle landscape orientation- 1024x600
- iPhone portrait - 320 x 480
- iPhone landscape orientation - 480 x 320
- Galaxy portrait - 240 x 320
- Galaxy landscape - 320 x 240
responsive test
Like deviceponsive, responsive test renders your site in various devices. But instead of showing them all at once, you choose required device in top menu pages. By the way, scaling works correctly here, which allows testing higher resolution on the smaller one.30 various resolutions available on the site, ranging from a huge desktop monitor to what they call a "crappy android" (to be fair, there's also a normal android).
Concerning Firefox browser, then it does not work correctly with this site. Notice that the screenshot doesn't show the slider between the green header and the white background content area.
responsive.is
Very similar to the previous two tools, but there is one thing that makes responsive.is different from the others. it smooth animation when moving from one device to another, as well as a semi-transparent area that shows the real area of the site that does not fall into the viewing area.Available device options are auto (the way you see the site), desktop, tablet in landscape and portrait, smartphone in portrait and landscape. Unfortunately, you cannot set arbitrary sizes in px.
Screenqueries
And here are the possibilities available options distinguish Screenqueries from previous services. 14 phones and 12 tablets are featured here, with separate opportunity switching to portrait and landscape mode. The results are displayed on a grid with rulers. It is also possible to set an arbitrary resolution by dragging the right or bottom edge.An interesting feature of this site is that for a number of devices there is a “Trueview” option that shows your site in the device's native browser.
Unfortunately, Firefox couldn't display the slider here either. No need to blame me, Firefox is my favorite browser, but that's the way things are.
Screenfly
Screenfly is perhaps the most functional of all. 9 more than tablet devices are available - from 10" laptops, up to 24" monitors, 5 tablets, 9 phones, 3 TV resolutions, as well as custom resolutions. Add here a separate switch for portrait and landscape mode, as well as the option to show scrolling. You can also share a link to the test with a single button.For each device, the screen size in px is indicated in the menu, as well as in the right upper corner displays the actual size of your browser window.
All of these advantages allow you to claim leadership if it were not for one but (developer quote): “Screenfly can use a proxy server to imitate devices while browsing your site. The proxy mimics the user agent string, but not the behavior of these devices." Screenfly is the only service on the list that allows testing based on the user agent string.
Do you use these tools in your practice? Share your secrets of developing responsive websites in the comments.
P.S. Errors in the translation, please report in a personal.
Greetings, casual visitors and regular readers of the blog site!
During the existence of this site, I changed the template several times and even created my own from scratch.
One of the main tasks when choosing a new template is the adaptive layout of the site for all screen resolutions.
Brief outline of the article:
In a previous article, I already wrote about why it is needed. But how to achieve this very adaptability?
For this there is different ways. Some use javascript, some use something else. But I think that the simplest and The right way- it is adaptive using CSS.
How to make a responsive website layout
Firstly,
if you undertook to type adaptive design site, between tags
What a fool I was that I did not do this right away when I tried to make an adaptive layout of the site !!!
The problem of mobile browsers is their scaling of the site layout, even adaptive.
Imagine, I draw a design, then I write all the necessary styles and requests, I check the adaptability of the site at different resolutions. Everything seems to be good! But when I open my blog on my smartphone, I see that the site has simply shrunk. It did not adapt to the mobile device, but simply reduced the size of the font, pictures, etc.
How so? I began to double-check all the styles, whether I wrote the classes correctly, as a result, I reached the point that I checked the width of the browser window in px through javascript. I was shocked. When I checked it on a laptop, I got a result of 1024px, and I got about the same result when I opened the site on a smartphone!
But this cannot be!
Turns out, if you do not prescribe the code that I indicated above, mobile browser does not understand that the site is responsive and is trying to simply reduce the page of the site so that it fits into small screen mobile phone.
Because of my stupidity and incompetence, I lost a lot of time. But now I remember forever))).
Responsive CSS media queries
To make it responsive with CSS, you need to use media queries.
What is it like? Yes, very simple. AT css file you need to write queries like:
@media screen and (min-width: 1440px) and (max-width: 1599px)( )
This code means that styles enclosed between “( ) ” will work for screens with a minimum width of 1440px and a maximum of 1599px.
That is, those styles of site elements that should be adapted depending on the screen resolution should be written separately for each possible screen width.
The most important screen resolutions for responsive layout
- 320px- Mobile devices (portrait orientation);
- 480px- Mobile devices (landscape orientation);
- 600px- Small tablets;
- 768px- Tablets (portrait orientation);
- 1024px- Tablets (landscape) / Netbooks;
- 1280px or more- PC.
It is these permissions that need to be emphasized and given to them. Special attention with adaptive layout. These are the most common types of screen resolutions.
bootstrap responsive design
Very handy for creating adaptive layout bootstrap. The convenience is that all styles for adapting blocks, buttons, tables, etc. already registered in bootstpap. You just need to figure out which class to assign to which element.
To get started, download the latest version of bootstrap and connect it to your site. Please note that connecting styles and scripts to wordpress has its own characteristics.
The layout on bootstrap is different in that the width of the block or screen is divided by 12 equal parts. And appropriating certain class block, you can set the width of the block to the desired number of parts.
For example, this design will allow one wide block for content with a width of 8 parts and one narrow for a sidebar with a width of 4 parts of the screen:
The width of the blocks will be calculated automatically depending on the width of the screen. And when viewed on a mobile device, these blocks will shift under each other.
You can also adjust the indentation of the block from the edge, again, by the desired number of parts. For example, this construction:
This will create a block that is 10 parts wide, indented from the left by 1 part of the screen.
If you figure it out, then working with bootstrap makes work with very fast. Moreover, these styles definitely work correctly and there will be nothing crooked on the site.
In the future, I plan to post some tutorials on working with bootsrap. Therefore, I advise you not to miss this moment.
Website responsiveness check
But the question arises: how to check the adaptability of the site? Here you have written media queries in CSS, connected bootstrap and use required classes. And how do you check that the site adapts correctly to all screen resolutions.
Very accurate and important free service, which deserves respect and gratitude from webmasters and layout designers who are engaged in adaptive layout of sites.
Well, how do you like the article? All clear? If not, write in the comments, we will figure it out together.
Yes, to make a responsive website design, you need to work hard. But these works will be rewarded with a favorable attitude towards your site of search engines, and most importantly, visitors to your site.
Frameworks, such as or , which greatly facilitate and speed up page layout.
implies an excellent display of a web page on all devices and monitor extensions. Probably not every layout designer has full set devices with all possible display extensions, for testing your 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 will go bankrupt. What to do? For these purposes, we have developed services for testing adaptive sites. Their working principle is very simple. Most often there is a frame of a certain size where the page opens. The effect is about the same as when viewed on a mobile device. I want to note that the service does not always accurately show the display of the page on a phone or tablet. During layout, you should test using services, but after completion, if possible, test on the most common devices.
So. For your attention best tools for testing responsive websites.
Responsive website testing tool 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 the this moment supported devices with the following operating systems: iOS, Android, Kindle Fire.
People involved in website development typically need to test how site layouts will render in different screen resolutions and web browsers. It is difficult to track the display of the site on different devices with different screen resolutions. Luckily, some websites offer a great tool for checking page layout at different screen resolutions.
These websites display preview web page by entering the site's URL. If you want to see how your web page will look in different screen resolutions, you can try these free resources, easily checking compatibility with different screen sizes.
Some of these sites offer wide range popular resolutions of desktops, laptops, TVs, tablets and mobile devices, others provide the option to enter the resolution manually and check the page layout at a specific resolution.
While all tools are simple and easy to use, they have their own own set advantages over each other.
In the first place can be taken out - very good service for online testing of the site in various resolutions, which has a clear and pretty user interface. On the site you will find various screen resolution options, including desktops, netbooks, laptops, tablets, TVs.
It is possible to select the name of the device directly in case you do not know its exact resolution. So you can select Kindle, Google, Samsung, Motorola, Apple from the drop down list and check the page layout in the corresponding resolution.
In addition, Screenfly allows you to install custom size screen in pixels and allow you to apply it to your page. Thus, you can easily check web pages in almost any resolution.
In addition, you can rotate the screen, enable or disable web page scrolling, or use a proxy server to test the web page.
Other free online resource, where you can easily check the site in different resolutions. On the site you will find a good range of devices from desktop computer, laptop, tablet to smartphone. In addition, it also allows you to manually enter the resolution and check page layouts.
In addition, there is an "in browser" option that leaves room for the browser borders and controls, as well as the taskbar in the preview window.
Next comes, another free tool, which allows you to test the site in different resolutions. It is possible to choose from the proposed resolution options or enter your own dimensions for the site.
This site offers two various options display: windows and frames. The window option goes well with low resolution screen, however, if the selected resolution larger size screen size, you can use the frames option to check its screen size compatibility.
also detects your current screen resolution and displays it for reference.
Another web tool that allows you to test website pages in various sizes. The site works best with Internet Explorer and displays web pages at the selected resolution. However, the list of permissions is very limited. This means that you can only check web pages in 8 resolutions, including 800×600, 1024×768, 1280×960, 1440×900, 1600×1200, 1680×1050 and 1920×1200.
Doesn't have as many options as other similar websites, but it's worth a try.
Last on the list is TestSize.com, a free online tool that offers 9 different resolutions for testing a website page: 240×380, 640×480, 800×600, 1024×600, 1024×768, 1280×600, 1280×1024 , 1366×768 and 1920×1024.
In addition, here you can also enter screen dimensions manually and check the website in a separate window. (open popup). TestSize.com is user friendly and easy to use.
Leave your comment!
This tutorial will show you how to use browser device emulation feature Google Chrome (Google Chrome Device Emulation). This feature will help you test your site's responsive design by simulating different sizes and screen resolutions.
How to use the device emulation feature of the Google Chrome browserTo activate Device Mode
Using Screen Emulation:
Screen emulation will help you check adaptability(test the responsiveness ) of your site. You will find many in advance established regimes emulation.
To work with media queries:
With Device Mode, it's easy to explore the effect of media queries.
Media queries match the following colors:
Blue: Requests for maximum width screen;
Green: Requests for a specific range of screen widths;
Orange: Requests for minimum screen width.
To preview styles for certain permission screen(preview screen styles), click on media query panel (media query bar) to set the resolution of the emulator window and preview styles(preview styles) for the desired screen size range:
Click right click mouse on the panel in order to find where the media query definition is given(view where the media query is defined) in CSS and go to this definition(jump to the definition) in source code:
To disable (turn off) emulate mobile devices without leaving Device mode, click on the icon ‘Reset all overrides’(Reset all overrides) and refresh the page:
You can even change operating system (Operation System) of the mobile device.
Open the Developer Tools panel by clicking on the icon ‘More overrides’(More overrides) in the upper right corner of the browser window. Then, select 'Net'(Network) in the window that opens:
To enable the media query tool, click the icon ‘Media Queries’(Media queries) in the upper left corner of the window. Developer Tools(DevTools) will find the media queries in your stylesheet and display them as colored bars at the top of the window:
We hope this tutorial was helpful to you. You can also check out the detailed video tutorial below.
