10 заметок с меткой адаптивный дизайн

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

Хотите узнать, как ваш сайт выглядит на смартфоне или планшете?

Проверить

Поисковые системы учитывают поведенческий фактор: от удобства сайта на телефоне или планшете напрямую зависит его положение в выдаче. Инструмент Гугла PageSpeed Insights рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования.

Я начал делать сайты и веб-сервисы адаптивными задолго до того, как это стало модным и современным. Мне хотелось, чтобы на любом экране работа выглядела красиво и удобно.

Персональный сайт Сергея Канина

kanin.ru

Чтобы передать внушительный опыт и серьёзный подход Сергея Канина, сайт был оформлен в строгом стиле. Также мы позаботились о том, чтобы всё было изложено коротко и ясно. Основные разделы на сайте переключаются без перезагрузки (при нажатии на меню страница скроллится к нужному месту). В нижней части находятся два постоянных блока: форма обратной связи и отзывы клиентов.

  • 1
  • 2
  • 3
  • След. →
  • Знакомство: фото, профессиональный девиз, основные услугиЗнакомство: фото, профессиональный девиз, основные услуги
    Информация подана структурированно и наглядноИнформация подана структурированно и наглядно
    Каждый тренинг представлен понятной картинкойКаждый тренинг представлен понятной картинкой

Адаптивный дизайн

Как выглядит сайт на различных устройствахКак выглядит сайт на различных устройствах

Векторные иконки для ретины

Скоро буду делать адаптивную вёрстку сайта на моей основной работе. Один из этапов подготовки: перевод иконок в векторный формат SVG. Иконки сделаны по моде: плоские с лёгким намёком на объём.

Флэт иконки с бликами в формате SVGФлэт иконки с бликами в формате SVG

За основу взяты старые иконки:

Иконки в формате PNGИконки в формате PNG
PNG vs SVGPNG vs SVG

Предыдущие иконки рисовал тоже я, но многие идеи брал из гугла или ещё откуда-нибудь.

Подготовка к адаптивной вёрстке

Кроме иконок, нужно было постепенно упростить вёрстку сайта. Мы отказались от бокового фона и от колонок, вместо них более логично разбили сайт на горизонтальные этажи сверху вниз. Всё это делали не сразу, а путём АБ-тестов.

Инструменты для проверки адаптивного сайта

Введите адрес сайта и посмотрите, как он выглядит на различных мобильных устройствах:

Проверить

Два экрана (или больше)

Во время разработки сайтов с адаптивной вёрсткой мне очень помогает наличие двух мониторов. На одном из них я пишу код, а на другом открыто 2-3 окна браузера, уменьшенных до «мобильного» размера. Чем больше физических экранов, тем лучше.

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

Web Developer Toolbar

Удобный инструмент: плагин Web Developer Toolbar для Firefox. Там есть кнопочка Resize, где можно задать список своих любимых разрешений, а затем изменять размер браузера одним кликом. В этом же окошке относительно недавно появился пункт Wiew Responsive Layouts, по нажатию на который откроется демонстрация сайта в самых популярных мобильных разрешениях:

Wiew Responsive Layouts — Посмотреть адаптивные макетыWiew Responsive Layouts — Посмотреть адаптивные макеты

Под какую ширину верстать

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

Размер окна браузера

Как правило, показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны обычно показывают 800×480 пикселей, планшеты — 1280×800.

Таким образом, нам важны только 3 ключевых мобильных размера: 480, 800 или 1280 точек в ширину. Высота не так приципиальна при вёрстке, тут только один совет: выпадающее меню удобнее, если оно умещается на экране целиком.

PageSpeed Insights

Поисковые системы учитывают поведенческий фактор: от удобства сайта на телефоне или планшете напрямую зависит его положение в выдаче. Инструмент Гугла PageSpeed Insights рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования. Если выполнить все требования, оценка сайта повысится. Это нелегко сделать, но результат того стоит!

Адаптивная вёрстка для NENCOM

bg.nencom.com

Версии сайта для телефона, планшета и обычного компьютераВерсии сайта для телефона, планшета и обычного компьютера

Разделение версий

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

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

▼ Читать дальше

Сайт Братьев Бондаренко

bbondarenko.ru

Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • След. →
  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик
    Новости: отмечается время и телеканал выступленияНовости: отмечается время и телеканал выступления
    Фотогалерея: превьюшки занимают всю высотуФотогалерея: превьюшки занимают всю высоту
    На сером фоне нотки: приятная мелочьНа сером фоне нотки: приятная мелочь
    Видео: превьюшки занимают всю ширинуВидео: превьюшки занимают всю ширину
    Биография: здесь намёк на журналБиография: здесь намёк на журнал
    Контакты оформлены очень скромно :)Контакты оформлены очень скромно :)

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

Фишка сайта — постоянный плеер в нижней части:

Плеер работает на любом устройствеПлеер работает на любом устройстве

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

Feralit: сайт под Яндекс.Директ

feralit.ru

Сайт для компании «Фералит» был сделан с целью мгновенного привлечения клиентов. Цель была достигнута. По словам заказчика, включение данного сайта в Яндекс.Директ на один день обеспечивает его заказами на несколько недель.

Главная и единственная страницаГлавная и единственная страница

Секрет сайта — в его простоте. Посетитель за 3 секунды понимает, что попал именно туда, куда нужно. Это достигается за счёт крупного заголовка в верхней части сайта и полноэкранной галереи (на любом мониторе занимает всю высоту). Чуть ниже перечислены фишки компании. А дальше вариантов у посетителя немного: на странице всего четыре активные области, которые не уводят от основного экрана. Остаётся только позвонить, а по телефону гораздо проще вникнуть в задачу клиента и сделать так, чтобы он не ушёл.

Основная галерея содержит около 10 фотографий, отражающих основные виды деятельности. Дополнительные фотографии скрываются за кнопкой «Ещё».

  • 1
  • 2
  • 3
  • След. →
  • Кликабельные области сайтаКликабельные области сайта
    Дополнительные фотки во всплывающем окнеДополнительные фотки во всплывающем окне
    Схема проезда во всплывающем окнеСхема проезда во всплывающем окне

Схему проезда мы рисовать не стали: путь слишком сложный для запоминания.

Сайт huberits.ru

Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.

Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.

huberits.ru

Страница продукцииСтраница продукции

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

Вид сайта на разных экранахВид сайта на разных экранах

▼ Читать дальше

Фитнес в Марфино

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

Сайт

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

fitnes-marfino.ru

— тем более, что в нашем районе нет других фитнес-залов.

Главная и единственная страница сайтаГлавная и единственная страница сайта

▼ Читать дальше

Эко-упаковка от EKOFRIEND

ekofriend.com

На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:

Главная страницаГлавная страница

Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.

▼ Читать дальше

Таблица Менделеева

Не так давно изменилась привычная форма таблицы Менделеева. Новая принятая форма выглядит так:

Интерактивная таблица МенделееваИнтерактивная таблица Менделеева

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

Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.

▼ Читать дальше

Заметки:← старее
Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017