x
 
Максим Семенов
20 февраля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Артём, давно слежу за работами бюро, читаю советы.

Когда увидел новую главную, первая мысль была, что что-то сломалось и стили не подгрузились. Вторая — что вас взломали.

Не покидает ощущение, что новый дизайн нарушает многие из ваших принципов, о которых вы рассказываете в советах.

(Часть третья)


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

Не бояться больших картинок

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

Дизайнеры боятся поставить на страницу большие картинки. А если ставят, разработчики открывают отладчик и делают большие глаза — страница весит мегабайты! Последняя картинка загрузилась через полминуты!

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

Но мир изменился. Важно, когда пользователь увидит страницу и как быстро она работает. Больше нет нужды заставлять пользователя нажимать на ссылку «следующая страница». Большие картинки не так страшны, если с ними правильно работать.

В книге «Типографика и вёрстка» 176 разворотов, почти на каждом из них есть картинки. Иллюстрации — в «ретиновом» разрешении. По внутреннему издательскому стандарту полноформатная иллюстрация сохраняется с шириной 3000 пикселей. При этом вся книга открывается в одном окне браузера и листается как пёрышко, а иллюстрации заранее ждут читателя.

Обновлённый раздел «Проекты» сайта бюро вообще состоит из одних картинок. Я расскажу, почему это стало возможно.

1. Самый важный для восприятия интервал — время от начала загрузки сайта до момента, когда браузер хотя бы что-то показал на экране. Разработчики называют его CRP (critical render path). В это время входит загрузка и обработка скриптов и стилей, поэтому важно держать их в порядке, следить за количеством и размером файлов.

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

2. У компьютеров, планшетов и телефонов ограничена память, поэтому страница с большим общим весом иллюстраций может замедлить или даже «повесить» браузер.

Но не стоит бояться страниц с большим количеством картинок. Разработчик может загружать и выгружать картинки в произвольном порядке, в том числе на телефонах. Управлять загрузкой может сложная стратегия с учётом сценариев чтения (как в наших книгах) или простейший скрипт, привязанный к прокрутке (как на нашем сайте). На мобильных устройствах важно не забывать выгружать лишние картинки.

И, конечно, разработчик должен позаботиться о том, чтобы картинки на первом экране загрузились первыми, чтобы пользователь не сидел перед отрисованной, но пустой страницей.

3. Картинки можно оптимизировать автоматически. В первый день после открытия все картинки раздела весили сто с лишним мегабайт, на второй день — семьдесят.

Высший пилотаж — автоматический генератор «неретиновых» версий картинок — ведь читатель может прыгнуть через полстраницы. Этот подход уже работает в наших книгах и может быть рекомендован для любых сайтов с большими картинками.

Чтобы выжать ещё 10% скорости загрузки, наши разработчики рекомендуют использовать протокол ХТТП/2.

4. Отладчик, мегабайты, статистика — это всё очень важно и полезно, если разработчик смотрит на нужные цифры.

Но дизайнеру важно верить глазам и ощущениям. В первом задании на движок книги было написано: «Прокрутка должны быть максимально лёгкая, ощущение, что под пальцами пёрышко, а не гиря». И если под пальцами получалось не «пёрышко», никакие цифры разработчиков меня бы не убедили принять результат.

И наоборот — сколько бы мегабайт и секунд ни показывала панель отладчика, даже в первый «стомегабайтовый» день сайт бюро без проблем открывался на мобильном телефоне при плохом соединении.

В конечном итоге важны не размер и не время загрузки всех картинок, а время отображения нужного фрагмента страницы.

Спасибо Василию Половнёву за консультации. См. также о ретиновом загрузчике в бюрошных книгах.


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 Фиолетовый цвет в новом дизайне советов не уместен 1




Недавно всплыло

Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 Защититься от случайного нажатия «Сдаться» 1 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Это какие‑то другие пиксели? Как они соотносятся? 2