x
 
Николай Товеровский
4 июля 2013

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?



Плавная загрузка без скачков и грациозная деградация — две стороны одной медали. Медали технологу за качественную, а не халтурную вёрстку.

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

Для начала перенесите ваш сайт на сервер в интернете. Так вы сразу окажетесь в реальных условиях.

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

См. также доклад Артёма Поликарпова «Технолог тоже дизайнер — 2»

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

Если иллюстрация нужна для информации, а не декорации, загрузите её уменьшенную версию и растяните на фоне контейнера:

Проставьте картинкам ширину и высоту. Это предотвратит беспорядочные скачки содержания страницы — «эффект Упячки»:

С указанной шириной и высотой картинок страница не прыгает:

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

Если используете нестандартные шрифты, то загружайте их через data/url, если это разрешено лицензией. Шрифты загружаемые из файлов, могут привести к такому эффекту:

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

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

На Вебораме я допустил ошибку. Кнопка «Следующая песня» в верхнем плеере нажимается, но не ничего не делает две секунды после нажатия. Создаётся ощущение, что она не работает:

А теперь продвинутый уровень. При загрузке больших изображений может пригодиться прелоадер и эффект плавного проявления. Обратите внимание, как загружаются промостраницы на сайте Эпла. Уделяется внимание даже появлению отдельных элементов.

Ультраотполированная загрузка (если смотреть в Сафари) — на сайте Айклауда.

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


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

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

Комментарии

Виталий Кузнецов
4 июля 2013

Вся это прекрасная верстка требует времени, а, следовательно, и финансов. С финансами всегда проблема.

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


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

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

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

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

Сайты для слабовидящих 2 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1