Доля мобильного трафика растёт. Современный смартфон открывает любой сайт. Компании, у которых бизнес зависит от сайта, делают адаптивный дизайн для того, чтобы посетитель не тратил время: на ожидание загрузки, на сложную навигацию, на постоянный ресайз, чтобы прочитать текст или попасть по слишком мелким элементам.
Хотите узнать, как ваш сайт выглядит на смартфоне или планшете?
Проверить
Поисковые системы учитывают поведенческий фактор: от удобства сайта на телефоне или планшете зависит его положение в выдаче. Инструмент Гугла PageSpeed Insights рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования.
Я начал делать сайты и веб-сервисы адаптивными задолго до того, как это стало модным и современным. Мне хотелось, чтобы на любом экране сайт или веб-сервис выглядел красиво и удобно.
Это современная альтернатива бумажной визитке. Электронная визитка содержит контакты сотрудника и компании, и может располагаться на сайте компании. Адреса визиток могут быть любыми, в зависимости от количества сотрудников и ваших пожеланий:
1) отслеживать статистику посещаемости визитки и количество добавлений в адресную книгу, 2) нажатием кнопки добавить человека в контактную книгу (это работает и на компьютере, и в телефоне, но механизмы немного разные), 3) связаться с человеком через любой мессенджер, перейти на сайт компании, найти офис компании на карте и так далее, в зависимости от того, что вам нужно.
По сути электронная визитка — это мини сайт, или мини резюме, где вы можете сообщить какую-то дополнительную информацию о себе.
Команда SAFETYBOX помогает предприятиям сохранять жизнь и здоровье своих работников, изменяя отношение к вопросам безопасности. По макетам от дизайнера сделал для них адаптивный сайт в минималистичном стиле на собственном движке.
Оценка сайта в Google Page Speed
В моей работе одним из критериев качества сайта является оценка в сервисе Page Speed Insights. Для проверки возьмём длинную страницу сделанного сайта, на которой есть слайдер фотографий, калькулятор стоимости, иконки и форма обратной связи:
Мне удалось поднять оценки данной страницы до 96 (в мобильной версии) и 100 (для десктопной версии). На практике достаточно вывести сайт в так называемую «зелёную зону» (выше 90 баллов). Но сайт safetybox.ru новый и самописный, поэтому у нас есть возможность и спортивный интерес для того, чтобы оптимизировать его до максимума.
Оценка сайта на телефоне
Оценка сайта на PC
Вы можете сами проверить эту или другие страницы данного сайта в сервисе Page Speed Insigths:
Аккордеонисты братья Бондаренко решили обновить дизайн сайта. Новую версию по традиции заказали мне, и, как обычно, предоставили примерные эскизы того, что они хотят. Вот, что у нас получилось:
Сайт братьев Бондаренко (на PC и на телефоне)
Сайт создан в ультра минималистичном стиле, но главное — полностью автоматизирован, то есть, он обновляется сам. На него загружается свежая лента из Instagram, видео из Ютуба, актуальные треки из музыкальных стриминговых сервисов.
Русский и английский языки переключаются без перезагрузки страницы.
Чтобы передать опыт и серьёзный подход Сергея Канина, сайт оформлен в строгом стиле, а материалы изложены лаконично и ясно.
Всё, что нужно, показано на первом экране сайта
Структура и наглядность!
Каждый тренинг показан картинкой
Сайт представляет из себя одностраничный лендинг + несколько отдельных страниц, посвящённых тренингам. Базовые разделы сайта переключаются без перезагрузки: при нажатии на меню страница скроллится к нужному месту. В нижней части находятся два постоянных блока: форма обратной связи и отзывы клиентов.
Скоро буду делать адаптивную вёрстку сайта на моей основной работе. Один из этапов подготовки: перевод иконок в векторный формат SVG. Иконки сделаны по моде: плоские с лёгким намёком на объём.
Предыдущие иконки рисовал тоже я, но многие идеи брал из гугла или ещё откуда-нибудь.
Подготовка к адаптивной вёрстке
Кроме иконок, нужно было постепенно упростить вёрстку сайта. Мы отказались от бокового фона и от колонок, вместо них более логично разбили сайт на горизонтальные этажи сверху вниз. Всё это делали не сразу, а путём АБ-тестов.
Введите адрес сайта и посмотрите, как он выглядит на различных мобильных устройствах:
Проверить
Два экрана (или больше)
Во время разработки сайтов с адаптивной вёрсткой мне очень помогает наличие двух мониторов. На одном из них я пишу код, а на другом открыто 2-3 окна браузера, уменьшенных до «мобильного» размера. Чем больше физических экранов, тем лучше.
Оптимально — это просмотр на телефоне и планшете в реальном времени. Там тестируются поворот экрана, кнопки «Назад», «Обновить», жесты управления. Версия сайта, которая выдаётся пользователям мобильных телефонов, должна быть максимально лёгкой, чтобы жесты работали мгновенно и без глюков.
Web Developer Toolbar
Удобный инструмент: плагин Web Developer Toolbar для Firefox. Там есть кнопочка Resize, где можно задать список своих любимых разрешений, а затем изменять размер браузера одним кликом. В этом же окошке относительно недавно появился пункт Wiew Responsive Layouts, по нажатию на который откроется демонстрация сайта в самых популярных мобильных разрешениях:
Несмотря на разные размеры, или наличие ретино-подобного дисплея, большинство смартфонов и планшетов открывают сайты, приводя их к виртуальному стандарту:
Размер окна браузера
Как правило, показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны обычно показывают 800×480 пикселей, планшеты — 1280×800.
Таким образом, нам важны только 3 ключевых мобильных размера: 480, 800 или 1280 точек в ширину. Высота не так приципиальна при вёрстке, тут только один совет: выпадающее меню удобнее, если оно умещается на экране целиком.
PageSpeed Insights
Поисковые системы учитывают поведенческий фактор: от удобства сайта на телефоне или планшете напрямую зависит его положение в выдаче. Инструмент Гугла PageSpeed Insights рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования. Если выполнить все требования, оценка сайта повысится. Это нелегко сделать, но результат того стоит!
В процессе вёрстки возник вопрос: как оптимальнее всего обозначить границы для переключения версий? К чему привязаться: к размеру экрана или к назначению устройства? В итоге привязались к назначению, исходя из этого подобрали подходящие граничные значения в пикселях.
Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».
Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.
Главная страница: большая фотка и предложение запустить демо-ролик
Новости: отмечается время и телеканал выступления
Фотогалерея: превьюшки занимают всю высоту
На сером фоне нотки: приятная мелочь
Видео: превьюшки занимают всю ширину
Биография: здесь намёк на журнал
Контакты оформлены очень скромно 😃
Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.
Фишка сайта — постоянный плеер в нижней части:
Плеер работает на любом устройстве
Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.
Сайт для компании «Фералит» был сделан с целью мгновенного привлечения клиентов. Цель была достигнута. По словам заказчика, включение данного сайта в Яндекс.Директ на один день обеспечивает его заказами на несколько недель.
Главная и единственная страница
Секрет сайта — в его простоте. Посетитель за 3 секунды понимает, что попал именно туда, куда нужно. Это достигается за счёт крупного заголовка в верхней части сайта и полноэкранной галереи (на любом мониторе занимает всю высоту). Чуть ниже перечислены фишки компании. А дальше вариантов у посетителя немного: на странице всего четыре активные области, которые не уводят от основного экрана. Остаётся только позвонить, а по телефону гораздо проще вникнуть в задачу клиента и сделать так, чтобы он не ушёл.
Основная галерея содержит около 10 фотографий, отражающих основные виды деятельности. Дополнительные фотографии скрываются за кнопкой «Ещё».
Кликабельные области сайта
Дополнительные фотки во всплывающем окне
Схема проезда во всплывающем окне
Схему проезда мы рисовать не стали: путь слишком сложный для запоминания.
Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.
Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.
Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:
Недавно изменилась форма таблицы Менделеева, привычная нам ещё со школы. Новая форма имеет 18 ячеек в ширину вместо 10, она более красивая и величественная 😃
По этому случаю для сайта xumuk.ru был сделан новый адаптивный сервис:
Интерактивная таблица Менделеева
Искомые элементы подсвечиваются при вводе. Можно искать по названию или его части, обозначению, атомной массе — короче говоря, по любому параметру из таблицы.