Web design. Each device has its own presentation
Regularly increasing number of various devices providing access to the World Wide Web pleases almost any geek , but often distresses developers and site designers. In the absolute majority of sites, there is absolutely no support for anything other than the usual computer browsers, and the notorious cross-browser compatibility is not always fully implemented. Although device developers strive to minimize differences in the required presentation, but this is not always possible for technical reasons.
Should I support different methods of access to your site? Definitely yes.
So what am I proposing in essence? I propose to implement different views of the site for different devices.
Let's try to determine what devices, today, people use to access the network and try to make out what the differences are in sites optimized for these devices.
')
The most mass part of users uses these classes of devices to access the network. First of all, developers of design and interfaces in Internet projects are guided by them. A lot of literature and articles have been written on ensuring cross-browser compatibility with websites, on various types of design, and even on screen typography. But almost all of this literature relies only on displaying information on a PC screen.
The main problems of developing a site for a PC I see two:
What problems does printing have? In the prevailing majority of sites, no styles are currently implemented for printers. Sites fighting for the user's attention do not do trivial things to help their users. Creating thousands of articles, the authors of the site do not realize that someone will read and print these articles. And why then are they? Many people having found articles on topics of interest to them immediately print them, and study them later. Often, information is generally sought for another person, for example, on the instructions of a manager, or a set of recipes for a grandmother. Forcing the user to independently process the article removing from it a lot of banners, registration forms, comments, etc., you lose a client. A separate “print page” improves the situation, but does not save. The sites of companies providing price lists and catalogs in the form of a site, as well as projects of news and information portals, suffer most of all from this problem.
The best way to solve this problem is to use the special features of CSS. By adding just one style sheet for printers, the problem is solved once and for all.
What then is the problem with the "rubber" layout? There are enough problems. To date, the width of the screens used on the PC ranges from 800px to 1980px (almost two and a half times). Attempts to stretch the text to the full width, as a rule, lead to a deplorable result, the text is very difficult to read on wide screens.
Attempts to reduce the width of the main text usually create very large voids on the sides of the site, and the most scarce screen space is simply lost. We have a classic situation, a lot of free space, and little information is placed.
The situation is different. When trying to fill the space of the screen in the sidebar put a variety of blocks (announcements, advertising, menus, etc.). This option is acceptable when we are sure that all visitors have a wide screen. But there is no such certainty. And this approach often leads to a very narrow column with the main content of the site.
We should also consider the screens of netbooks. They are 800px wide and 1024px wide. And the vast majority of modern sites do not fit into them without horizontal scrolling, and this is a huge mistake. Netbook users are getting bigger and bigger.
The features of this class of devices include a relatively small screen size, and at the same time a very wide step of its resolution. And also very limited navigation options on the page. Also usually this class of devices has a low connection speed. Downloading extra information on these devices is not worth it. It is better to turn off all ads, unnecessary images, etc. Show only the necessary information in a convenient form, give the possibility of easy navigation and in particular the search on the site, and do not forget to provide the opportunity to send a link to this material in the form of an email. mail with a single click, it will allow him to return later with a more traditional device.
Collecting devices is one of the main tasks of which is to browse the web. However, not all so simple. The resolution of modern tablets is within netbooks and significantly lower than the resolution of modern monitors. And the methods of communication of these devices are significantly different from the usual on the PC. When working with such devices, it is advisable not to use multi-column layout, to provide a convenient transition interface based on buttons of relatively large size, to simplify the use of the touch screen.
Televisions providing Internet access are gradually beginning to attract the attention of the public. With such devices it is convenient to get acquainted with the news, watch videos, get acquainted with movies and music online. In this connection, it is desirable to introduce support for this class of devices to news sites, as well as all sorts of entertainment portals. But it is worth noting a very specialized method of user interaction. It should be very careful when working through the interaction interface through the remote.
E-book makers are constantly reporting growing sales. More and more users can boast the presence of such devices at home. And some have even started using them to access information on the network. Wikipedia, search engines and some sites have already adapted to E-Ink-based devices, and I recommend integrating support for these devices into all news portals, corporate sites, blogs and information sites. Reading news, humorous notes, as well as all sorts of articles is very convenient with the help of such devices, if you take care of decent navigation. A good solution I see is the possibility of creating bookmarks inside the site for reading materials on a book.
And there is not much to do. You need to determine what devices your visitors can use, work out and create a presentation of your site for these devices, determine the device by means of checking browser headers, and send the most appropriate presentation.
This approach will allow you to stand out from the competition, increase the loyalty of your customers, which ultimately will increase profits.
The regular objection “And no one comes to me from phones, televisions and E-books. Why not support them? ”I will answer with the question“ What exactly did you do to be called in from these devices? ”.
In the near future, I will provide an article with a complete description of the method ensuring the development of convenient views for various devices and connecting this method to some of the most demanded CMS and a series of articles on the usability of the site interfaces for each of the classes of devices except the PC. About usability sites for the PC is written and so is very much.
Should I support different methods of access to your site? Definitely yes.
So what am I proposing in essence? I propose to implement different views of the site for different devices.
What devices are using now?
Let's try to determine what devices, today, people use to access the network and try to make out what the differences are in sites optimized for these devices.
')
PCs, laptops and netbooks
The most mass part of users uses these classes of devices to access the network. First of all, developers of design and interfaces in Internet projects are guided by them. A lot of literature and articles have been written on ensuring cross-browser compatibility with websites, on various types of design, and even on screen typography. But almost all of this literature relies only on displaying information on a PC screen.
The main problems of developing a site for a PC I see two:
- support for printing output;
- support for various screen resolutions (rubber layout).
What problems does printing have? In the prevailing majority of sites, no styles are currently implemented for printers. Sites fighting for the user's attention do not do trivial things to help their users. Creating thousands of articles, the authors of the site do not realize that someone will read and print these articles. And why then are they? Many people having found articles on topics of interest to them immediately print them, and study them later. Often, information is generally sought for another person, for example, on the instructions of a manager, or a set of recipes for a grandmother. Forcing the user to independently process the article removing from it a lot of banners, registration forms, comments, etc., you lose a client. A separate “print page” improves the situation, but does not save. The sites of companies providing price lists and catalogs in the form of a site, as well as projects of news and information portals, suffer most of all from this problem.
The best way to solve this problem is to use the special features of CSS. By adding just one style sheet for printers, the problem is solved once and for all.
What then is the problem with the "rubber" layout? There are enough problems. To date, the width of the screens used on the PC ranges from 800px to 1980px (almost two and a half times). Attempts to stretch the text to the full width, as a rule, lead to a deplorable result, the text is very difficult to read on wide screens.
Attempts to reduce the width of the main text usually create very large voids on the sides of the site, and the most scarce screen space is simply lost. We have a classic situation, a lot of free space, and little information is placed.
The situation is different. When trying to fill the space of the screen in the sidebar put a variety of blocks (announcements, advertising, menus, etc.). This option is acceptable when we are sure that all visitors have a wide screen. But there is no such certainty. And this approach often leads to a very narrow column with the main content of the site.
We should also consider the screens of netbooks. They are 800px wide and 1024px wide. And the vast majority of modern sites do not fit into them without horizontal scrolling, and this is a huge mistake. Netbook users are getting bigger and bigger.
Phones, PDAs and communicators
The features of this class of devices include a relatively small screen size, and at the same time a very wide step of its resolution. And also very limited navigation options on the page. Also usually this class of devices has a low connection speed. Downloading extra information on these devices is not worth it. It is better to turn off all ads, unnecessary images, etc. Show only the necessary information in a convenient form, give the possibility of easy navigation and in particular the search on the site, and do not forget to provide the opportunity to send a link to this material in the form of an email. mail with a single click, it will allow him to return later with a more traditional device.
Internet tablets
Collecting devices is one of the main tasks of which is to browse the web. However, not all so simple. The resolution of modern tablets is within netbooks and significantly lower than the resolution of modern monitors. And the methods of communication of these devices are significantly different from the usual on the PC. When working with such devices, it is advisable not to use multi-column layout, to provide a convenient transition interface based on buttons of relatively large size, to simplify the use of the touch screen.
TVs and HD players
Televisions providing Internet access are gradually beginning to attract the attention of the public. With such devices it is convenient to get acquainted with the news, watch videos, get acquainted with movies and music online. In this connection, it is desirable to introduce support for this class of devices to news sites, as well as all sorts of entertainment portals. But it is worth noting a very specialized method of user interaction. It should be very careful when working through the interaction interface through the remote.
Al. books
E-book makers are constantly reporting growing sales. More and more users can boast the presence of such devices at home. And some have even started using them to access information on the network. Wikipedia, search engines and some sites have already adapted to E-Ink-based devices, and I recommend integrating support for these devices into all news portals, corporate sites, blogs and information sites. Reading news, humorous notes, as well as all sorts of articles is very convenient with the help of such devices, if you take care of decent navigation. A good solution I see is the possibility of creating bookmarks inside the site for reading materials on a book.
What should be done?
And there is not much to do. You need to determine what devices your visitors can use, work out and create a presentation of your site for these devices, determine the device by means of checking browser headers, and send the most appropriate presentation.
This approach will allow you to stand out from the competition, increase the loyalty of your customers, which ultimately will increase profits.
Afterword
The regular objection “And no one comes to me from phones, televisions and E-books. Why not support them? ”I will answer with the question“ What exactly did you do to be called in from these devices? ”.
About future plans
In the near future, I will provide an article with a complete description of the method ensuring the development of convenient views for various devices and connecting this method to some of the most demanded CMS and a series of articles on the usability of the site interfaces for each of the classes of devices except the PC. About usability sites for the PC is written and so is very much.
Source: https://habr.com/ru/post/125041/
All Articles