[Перевод] Как делать сайты в 2019 году

Веб стремительно меняется, не отставай и ты!


10b4cdf7ccce317d4d838704cef4a345.jpg

Я писал такую подобную статью в 2018 году, но веб меняется так быстро, что те гайдлайны уже безнадёжно устарели.

Давайте-ка шаг за шагом разберём важнейшие принципы веб-дизайна в 2019 году.


Обязательно дайте пользователю знать, что у сайта есть мобильная версия

Это важнейший принцип, и на то есть свои причины. Фокус-группы, на которые мы уже потратили кучу денег, показали что первое же, чего захочет пользователь попав на ваш сайт — установить мобильное приложение.

Ну, а кратчайший путь к этому — показать здоровенное модальное окно:


964dcbe75c97f189d17e64bc278e3c5b.png

В качестве необязательной опции можно добавить кнопку или ссылку, чтобы закрыть это окно, но принципиально важно, чтобы текст на ней был слабо различим и сформулирован так, как будто пользователю должно быть стыдно отказываться или он ещё захочет установить приложение в будущем.

Совет: Если у вас нет мобильного приложения, не беда! Просто запихните весь сайт в webview с отключенной безопасностью и пишите, что это мобильное приложение!


Разработайте стратегию для Do Not Track

Большинство современных браузеров (чтоб их!) поддерживают HTTP заголовок DNT, который расшифровывается как Do Not Track («Не отслеживать»). Этот заголовок сигнализирует, что пользователь не хочет, чтобы его отслеживали и, к огромному сожалению, этот заголовок включен по-умолчанию с некоторых браузерах типа Brave (опен-сорс браузер с блокировкой рекламы от создателя JavaScript Брендана Эйха).

Без паники! Оказалось, что большинство пользователей отключат заголовок, как только вы их попросите, а чтоб всё прошло как по маслу, приложите подробную инструкцию, как это сделать:


449454e0e6840f972c7f059befebbecd.png

Совет: Не спрашивайте, хочет ли пользователь отключать DNT в мануале по отключению DNT, а то вдруг ещё согласится.


Разработайте стратегию для Кук

Спрашивать про куки не требуется, если на сайте они используются по адекватным соображениям, но гораздо лучше запросить разрешение на все куки скопом, тогда мы сможем отслеживать всё что захотим, не опасаясь последствий!


48ae94048a8008bd2d7f5d85e98306a8.png

Совет:  Не загружайте страниц без кук, даже если они не нужны для работы, ведь тогда получится отслеживать гораздо меньше персональной информации, которую потом можно продать.


Блокируйте блокировщики

Блокировщики рекламы повсюду, а это сказывается на барышах, так что без блокирования блокировщиков никуда!


0adfb743db07d1ed16f8e0a62c3c3476.png

Chrome сам планирует блокировать блокировщики (золотце моё!), так что если кто-то зайдёт на Brave можно будет спокойно заявить, что его браузер устарел:


83722b36c5d42e56a4941e5981cba0ea.png

Совет: Никому не рассказывайте про Brave, опен-сорс Chromium браузер со встроенной блокировкой рекламы.

Так же не рассказывайте никому про Firefox, Opera или Vivaldi — совет переводчика.


Блокируйте заходы из других стран

Со всеми этими законами, GDPR, налогами на ссылки и баном Huawei (в США — прим. перев.), хотя ещё до конца не понятно что он означает, лучше просто взять и заблокировать их всех от греха подальше.


4b7dbe0874cd58277abb6f8723f75446.png

Совет: Вы можете…


Сделайте лэйаут как можно больше

Дни лэйаутов по 800 пикселей давно прошли. Сейчас всё больше широкоформатных дисплеев, так что постарайтесь задействовать как можно больше пространства.


c826ab4f703f04c600760861421dfd95.png

Совет: Исследования показывают, что модальные окна без кнопки закрытия закрывают гораздо реже!


Используйте уведомления

Современные браузеры поддерживают уведомления, значит их нужно обязательно включить, но если не прокатит, всегда можно попытаться по-умолчанию подписать пользователя на почтовую рассылку или sms.


1cb12cd3422a1895c0c63e3b3e71b901.png

Совет:, а ещё эти уведомления можно использовать, чтобы сообщать пользователям о новой версии мобильного приложения.


Напоминайте пользователю

Иногда пользователи забывают, что они могут зарегистрироваться, так что регулярно напоминайте об этом и показывайте большущую ссылку или кнопку:


40eabd15e6e82fc81903f7a9fb4e0509.png

Совет: Не забудьте напоминать пользователю, как только его курсор будет выходить за область сайта.


Дайте пользователю возможность отказаться

Очень важно быть юзер-френли и ненавязчивым, а значит, мы должны дать возможность отказаться от постоянных напоминаний, рассылок и окон.

Главное в таком деле — поместить опции туда, где они заметнее всего, например, в одну из подсекций «настроек аккаунта»:


835c7bcd62660b120b5e3f73abecf88e.png


Используйте JavaScript

Общеизвестно, что всегда нужно использовать JavaScript.

Не, вы, конечно, можете подумать: «Но зачем, ведь у меня только тест и пара картинок?» А про будущее вы подумали? Скоро, не сомневайтесь, у вас будет куча модальных окон. И когда это произойдёт, вы сто раз пожалеете, что не использовали модный JS фреймворк, работающий в serverless облаке.


79f527ff736895e99a27eda59e6b8204.png

Совет: Конкретно эту страницу джаваскриптом не рендерите.


© Habrahabr.ru