How to make the best sites in Russia


The award ceremony of the Golden Site-2017 competition was held on March 1, and the evaluations of the competent jury were published the next day. Back in the fall of last year, the author of this article decided to take part in this fascinating event, and the process from a serious one (which was implied at the beginning) turned into an interesting one (which turned out as a result). I would like to share some of the web development trends that appeared in the sites that won the competition.


Tools:


I studied Desktop displays of the best sites in Russia in the Chrome browser - 47.46% of all desktop users (1st place in popularity, hereinafter - GA statistics for 2017 of the site I work with), on a monitor with a resolution of 1920 × 1080 px - 22.61% of all desktop, (TOP2, lags behind the most popular 1366 × 768 for a short time with its 27.11%)


I watched mobile displays on a smartphone (35.9% smartphones, 8.85% tablets, 55.26% monitors) S Galaxy Note 4 (SM-N910C) using a Yandex browser.


Note: since, like almost any other owner of a mobile device, I can choose how I can arrange this device when browsing the Internet, I decided to look at the best sites in Russia in landscape orientation.


The competition, which ended in March 2018, turned out to be anniversary, the twentieth, and a lot of work was submitted to it. I was initially interested in the thematic category “The site of a brand and an auto / motorcycle dealer,” so I’ll start describing the best principles of site building with the works submitted for this nomination.


The 3rd place in the nomination “Brand website of a car / motorcycle dealer” was taken by the site of auto accessories rcsbrand.ru. The developers declare: "We have created a stylish online store with a universal responsive interface, convenient functionality and animations, making it easier for the user to read information."


Main page (3), desktop: when you hover over an element of the top menu, an empty block appears under the element. It is not clear for what purpose it appears there, and why it is empty, probably some tricky UI move.



Smartphone, landscape orientation: the main menu moves down, but the browser toolbar closes it. And to understand which picture which accessory represents is impossible.



I would like to draw attention to the basket of the site rated by the jury as the 3rd best automobile in Russia. Here’s how to make-up so that, in the opinion of the developers, it turns out stylish, and in the opinion of the jury of the competition - so that this layout is included in the winners of the Golden Site. Desktop:



With the browser window size of 1917 × 940 px, the image size of the ordered goods is 110 × 50 px, i.e. the picture of the product that interests us takes up 0.3% (zero point, three tenths of a percent) of the browser window.


And so, you need to make up the basket (in which the product is already located, and it is the only one) for landscape in order to be among the best:



We pass to the second best auto / motobrand site in Russia, maximum-hyundai.ru. Authors on their work: “Modern Design. Easy, thoughtful interface. The site is convenient to view on all types of devices. ”


Separately, it is worth noting that this is the dealer’s best site (the first place went to the site of an automobile brand representative office). What should be the best dealer site (4)? First of all, the pop-up “we will call you back” is obligatory on it.



Pay attention to the banner for the pop-up. On the desktop, it looks like this:



By the way, the best practice is that the banner is not clickable, and the transition can be made only by clicking on the plate with the inscription "Details". And you need to make up a banner for a smartphone like this:



Let's try to go through the following user scenario: we were interested in a certain model (let it be Creta), we wanted to find out how much money they want to take from us and for something — what configurations this model has, how they differ and how much they cost.


Click “Model Line”, select “Creta”, get to the page with the model (5), see “Price and Options” below - what we need. True, another pop-up is dumped to us:



We remove the pop-up, click on "Prices and configuration". For some reason, instead of complete sets, the technical characteristics of the model appear, and an additional menu. But there is a paragraph “2. Options ", and you can click it. Here is one of the best typesetting of automotive equipment for monitors:



The content block occupies 61.5% of the width of the browser window, i.e. almost 20% of free and unused space on the left and right. Description complete sets occupies 11% of the width.


Let's try to find the same information on a mobile device. The menu is hidden behind the hamburger, by clicking on it we also select the “Model Range” and “Creta”, and we get to the page with the model. But here a surprise awaits us: on the page adapted for mobile, there are NO any navigation elements with which it would be possible to open the configuration of the model! Accordingly, it is impossible to study these configurations on a smartphone. Here is the full page layout of the best dealer site in Russia, adapted for landscape-orientation of the phone:



Separately, following the jury, I would like to note the excellent layout of the elements on the page and the effective use of the entire area of ​​the browser window.


But we are waiting for the best automobile site in Russia. The first place "Golden Site" gave the online showroom renault.ru. A link from the presentation page of the winner of the competition leads directly to the Kaptur model (6). We remove functional pop-ups with a region and a hint, and we see the perfect layout of the best auto site:



The page, by example, shows us that we need to make up so that with the browser window width of 1918 px, the content part should occupy 1140 px, and 20% of unused space should be left and right.


Well, the UX of this page is made on the principle of “Repetition - the mother of learning”: the content consists of two main blocks, one of which is “Choose a package and fill out an application ...”, and the second one “... choose a popular package ... the same functionality. We use the same user scenario as before: we will try to find and study what is included in the proposed configuration. Since already on the page itself we are offered to choose equipment, it is logical to assume that after the selection we can find out what equipment is included in these equipment. Leave the version of “Life”, click “Select”. A pop-up opens with the card and the heading "Choose a dealer."



We do not give up hope to study the selected equipment, select the first dealer to get (2nd click on “Show dealers by list”, 3rd click on any dealer). A new page with cars opens, and it is arranged in such a way that the Details buttons (where we still hope to find a description of the configuration) go beyond the visible part of the page on a widescreen monitor. Naturally, as with the banners of the previous winner, the car cards themselves are non-clickable, i.e. you must first scroll down to go somewhere.



4th action - scroll down, 5th - click on "Details". Another pop-up pops up, with information about the selected car, and, finally, we get to not even the button, but the inscription “all characteristics”, which will show us a list of equipment of the selected configuration.



The list of equipment shares half of the content space with the technical characteristics of the model (according to the scenario, we are interested in the first and so far are not interested in the second, but if they give it, we must take it). Scroll, see what is included in the selected package. A wonderful layout starts from the moment when those. characteristics end:



We try the same on a mobile device. Immediately we see how to make up the pop-up that defines the user's region:



An example of the best indentation:



Car card on the best car site:



We click on this card, scroll down, open “Equipment”, and below - “all equipment”. Hooray, we can see what the selected version is equipped with. The best car site shows us this:



But we got to some one configuration, and according to the scenario we want to understand what they are and how they differ. Desktop allows us to do this relatively simply: in the third upper menu there is a navigation element “Compare Versions”. We click on it, select the versions for comparison, and we get an example of the best display of the comparison of complete sets (7):



A table is opened for us, a cell with a description of a specific configuration takes a width of 244 px with a browser window width of 1918 px, i.e. information occupies 12.7% of the browser width, while left and right 20% each is an empty unused area. This is about design. Having looked at the page under the prism of UX, we will pay attention to the following steps and click on the proposed Configurator link. The best automotive site in Russia sends us to the 3D configurator (8), which I have displayed as follows:



How does the page with the comparison of versions show us the mobile device? Here, the developers of the best automotive site, apparently, very interestingly interpreted the principle of mobile first: in landscape we, as well as on desktop, can compare three configurations:



But if we turn the device over to portrait, then the third complete set selected disappears, and we already compare only two:



If on the phone we follow the UX tips about the next steps and click on “Configurator”, we will be redirected to a page where they will offer to download the “Renault 360” application or visit the Renault website, redirecting to the main page of the best automobile site we are exploring from perfectly made up banners:



Banners, in the best traditions of site building, are not clickable, a button "Learn more" has been added to each banner to go to the corresponding pages.


The author of this article submitted his work to the contest "Golden Site", and, as I said above, I was interested in the nomination "Site of the brand and dealer of an auto / motorcycle." However, I was guided by several other principles in the design of the site, its pages and elements of these pages. The competent jury decided that the site I made was worthy of the very last place, giving a rating of 3.5 points. The site about yachts was rated much more - by 5 points in the “auto / moto” category, the link (9) to which from the presentation page of the nominee shows this:



And even more highly - by 5.75 points - the jury rated the “KIA fleet cost calculator”, the link to which on the presentation page (10) is designated as “ xn — 7ug /”


Among the nominees was also the site “You can do more” (work for TOYOTA), which got the 4th place with 6.2 points. The authors of this work write: "Three films were made within the framework of the campaign, which became the center of all communication." Before that, it seemed to me that it was definitely more convenient to watch films in landscape-orientation. This is how this site (11) looks on the phone screen:



However, making it up for landscape means following the trend of Russian adaptive design.


“Party Without Edits 2117” (12), third place in the category “Promotional site for event, concert, exhibition, conference, cultural object” (jury rating - 7.75 points):



“Presentation of the first Airbus320neo in Russia” for S7 (13), second place in the same category (8 points, description of the developers: “High-quality mobile version”):



“FC Zenit. Form history ”(14), first place in the category“ Site of a sports organization, club, project, event ”(also 8 points):



OGK Group (15), second place in the category “Website of an industrial / energy company or dealer” (jury rating 8.4)



Finally, TONDO (16) is the third place in the “golden” nomination “Best Design” (jury rating is 8.2):



By the way, about the "golden" nominations. I naively hoped that my work could compete in two of them - “Best Design” and “Best usability / UX”. Naturally, with such trends, my hopes were not destined to be justified - web pages that adapt to any orientation of both smartphones and tablets, as well as different desktop monitors are inferior to the best just by insurmountable margin.


8.29 points from the jury, first place in the "Best Design", third in the category "Best usability / UX", second place in the thematic "Best Website for Consumers (b2c)", first places in the categories "Website of a bank or insurance company ”And“ Financial service, online banking ”took Raiffeisenbank, the work of AIC. That is, this is really the best website in Russia, an example of an ideal layout. I will not describe it in detail, I will show only a few points that immediately caught my eye.


If the main page of this site (17) on the monitor is scrolled to the block with the exchange rate, then you can see here is their display:



We see two currencies, their purchase rate and their sale rate. Let's see the same block on the phone in portrait:



And in landscape:



On the smartphone’s screen in both orientations, the sales rate did not fit in the visible content part, moreover, there were no elements indicating that this block would scroll horizontally, and that an invisible sale rate would be on the right - no.


But back to the desktop display. With the exception of the top banner, the page is not full-sized: with a browser window width of 1914 px, the content part occupies 1170 px, or 61% of the width, and, accordingly, almost 20% of the left and right are unused space. And such a layout is immediately evident if you start to consider the content immediately after the main banner:



After this main banner, there are two (apparently important) blocks decorated in the form of a carousel - nameless with 4 elements in it and the “Special offers” block, consisting of three blocks. And due to the fact that the layout “cuts” 20% of the right and left, the carousels either start or end, leaving unused space before or after.


Those. instead of a logical, it would seem, arrangement, when all the elements in these blocks are visible immediately, and you don’t even need to scroll them - the dimensions allow you to fit everything in one row, because of the side unused voids you can’t always see completely either the first or the last element of the carousel, and on the opposite side - a lot of unused space.


The fact that the layout is not made for widescreen 1920-pixel monitors is shown to us by other pages of the site, for example, with the selection of credit cards (18):



Pay attention to the signature of the zero-ruble service - “Concierge-Premium service”. On the phone in landscape orientation, this fragment colorfully illustrates the best design of the best Russian site:



How to make up the adaptive version for the phone: do not use the entire width, even if the picture (map image), then 46% of the empty space remains on the right, and if the text is 33%, even if the text does not fit. Well, and in height: with the browser’s visible toolbar, the content part occupies only 68.5% of the screen height, and let 31.5% (almost a third!) Occupy the white block, which is also not very filled - see the void between the “Leave a request” and the icon chat. 8.29 points and first place in the nomination "Best Design".


Based on the foregoing, we can identify the following trends in Russian site building:


  • No need to use the "rubber layout" in the adaptive display for desktop. The best standard is fixed width, so that on monitors 1920 × 1080 20% on the right and the same amount on the left is empty.
  • No need to layout for different orientations of mobile devices. The principle of the best Russian adaptive - it is not necessary, as it is more convenient for the user, let him adapt to layout, and not layout for the user.
  • No need to make banners clickable. The best standard is to add the “more”, “further” dice into each element that motivates you to go somewhere, and click only it.
  • The more vertical indentation between the elements - the better.
  • Typography - hanging pretexts, dashes in telephone numbers, etc. - you can not think about it at all.

Follow these trends and you will have the best design, the best usability and the best UX.


At least, in the opinion of the competent jury, one of the most authoritative (if not the most authoritative) competition of the Russian Internet. Quote from the official website about the competition (2):


The "Golden Site" is the key and oldest competition of Internet projects in Runet. Since 1997, an independent jury of the competition, which was headed by Artemy Lebedev, Anton Nosik, Alex Exler, Sergey Pugotarenko and other Runet stars in different years, has been awarding the coveted statues of the Golden Cybermaster to the most worthy projects. In 2014, the competition was restarted with the participation of Mikhail Vakhterov (founder and ideologist of the competition), the Russian Association of Electronic Communications (RAEC) and the RUWARD project group.


And finally, an example of how you don’t have to make sites, according to the key competition in Russia (the work scored 3.5 points, the lowest score by the jury):