Now various gadgets are becoming more widespread – smartphones, tablets, smart watches and other devices that allow you to access the Internet, view the contents of sites. According to some estimates, almost half of the Internet traffic is generated by such gadgets, the screen resolution of which differs from the resolution of the screens of standard computers. Such a spread of gadgets brings new opportunities for developing websites, attracting new visitors, promoting information services, etc. But at the same time, new problems also arise.
The main problem is that a standard web page will look different on different devices with different screen resolutions. The initial solution to this problem was to create special versions for mobile devices.
In the early days of mobile phones, users could access special wap sites through the phone using the WAP protocol, which were written in the wml language, an xml-based language similar to html. For example, the simplest web page in this markup language could have the following code:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="main" title="WapSite">
<p mode="wrap">Simple WML page.</p>
</card>
</wml>
However, the development of the gadgets themselves, their capabilities have led to the fact that now mobile phones are much more capable of receiving and displaying site content, and in writing such sites, the same HTML5 and CSS3 are used as for regular sites.
In addition, the advent of more and more diverse devices has meant that web pages need to fit not only on the small screens of smartphones or tablets, but also on the huge screens of full-screen widescreen TVs or giant tablets like the Surface Hub, which can also access the Internet.
And to solve the problem of compatibility of web pages with a variety of resolutions of a wide variety of devices, the concept of adaptive design arose. Its essence is to properly scale the elements of a web page depending on the width of the screen.
Although it is not uncommon to still encounter a situation where a separate mobile version is created for the site, often with the m prefix , for example, m.vk.com . However, the concept of adaptive is becoming more common and dominant.
Responsive Design Testing
When developing responsive web pages, we may encounter testing difficulties, since, as a rule, development takes place on ordinary computers. But fortunately, many modern browsers allow us to emulate the launch of a web page on a particular device with different screen widths.
For example, in Google Chrome, you need to go to the menu More tools -> Developer tools . After opening the developer panel, at the beginning of the menu of the panel itself, you can click on the mobile phone icon, and after that it will be possible to emulate the display of the page on various devices – from small phones to widescreen TVs:
In this case, the web page is displayed as it would look on a Samsung Galaxy S III device. But if you wish, you can select another device, or even create an emulation of some new device that is not in the built-in list.
There are similar tools in other modern web browsers. For example, in Mozilla Firefox, to open them, go to the menu Development -> Responsive Design
Another solution is to use mobile device emulators. A small list of such emulators can be found at the following address: http://www.mobilexweb.com/emulators .
The most popular is the Opera Mobile browser emulator, which can be found at http://www.opera.com/developer/mobile-emulator .