Заказы временно не принимаются

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

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

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

Проверить

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

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

📅 15 марта 2020

Создание электронной визитки для сотрудников

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

site.ru/@ivan-ivanov
site.ru/otdelenie/ivan-ivanov

Мобильная визитка сотрудникаМобильная визитка сотрудника

Примеры визиток

Мобильная визитка позволяет:

1) отслеживать статистику посещаемости визитки и количество добавлений в адресную книгу,
2) нажатием кнопки добавить человека в контактную книгу (это работает и на компьютере, и в телефоне, но механизмы немного разные),
3) связаться с человеком через любой мессенджер, перейти на сайт компании, найти офис компании на карте и так далее, в зависимости от того, что вам нужно.

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

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

📅 21 октября 2019

Создание и ускорение сайта Safetybox.ru

safetybox.ru

Экраны сайта на телефонеЭкраны сайта на телефоне

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

Оценка сайта в Google Page Speed

В моей работе одним из критериев качества сайта является оценка в сервисе Page Speed Insights. Для проверки возьмём длинную страницу сделанного сайта, на которой есть слайдер фотографий, калькулятор стоимости, иконки и форма обратной связи:

Пример страницы с разноплановыми блокамиПример страницы с разноплановыми блоками

Мне удалось поднять оценки данной страницы до 96 (в мобильной версии) и 100 (для десктопной версии). На практике достаточно вывести сайт в так называемую «зелёную зону» (выше 90 баллов). Но сайт safetybox.ru новый и самописный, поэтому у нас есть возможность и спортивный интерес для того, чтобы оптимизировать его до максимума.

  • Оценка сайта на телефонеОценка сайта на телефоне

Вы можете сами проверить эту или другие страницы данного сайта в сервисе Page Speed Insigths:

https://developers.google.com/speed/pagespeed/insights/?url=https://safetybox.ru/uslugi/e-learning/effektivnoe-sovesshanie&tab=desktop

Ваш сайт долго загружается, особенно на мобильных телефонах? Обращайтесь ко мне, если нужно оптимизировать устаревший или тяжёлый сайт.

📅 26 марта 2019

Изменение режима масштабирования старых программ под Windows

Многие старые программы под Windows запускаются в размытом виде. Шрифты плывут, графика выглядит ужасно.

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

Слева неправильный масштаб, справа — правильныйСлева неправильный масштаб, справа — правильный

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

📅 2 января 2019

Обновление сайта Братьев Бондаренко — 2019

bondarenko.show

Аккордеонисты братья Бондаренко решили обновить дизайн сайта. Новую версию по традиции заказали мне, и, как обычно, предоставили примерные эскизы того, что они хотят. Вот, что у нас получилось:

Сайт братьев Бондаренко (на PC и на телефоне)Сайт братьев Бондаренко (на PC и на телефоне)

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

Русский и английский языки переключаются без перезагрузки страницы.

📅 8 июня 2016

Создание персонального сайта бизнес-тренера Сергея Канина

kanin.ru

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

  • Всё, что нужно, показано на первом экране сайтаВсё, что нужно, показано на первом экране сайта

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

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

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

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

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

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

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

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

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

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

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

📅 13 декабря 2015

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

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

Проверить

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

Во время разработки сайтов с адаптивной вёрсткой мне очень помогает наличие двух мониторов. На одном из них я пишу код, а на другом открыто 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 рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования. Если выполнить все требования, оценка сайта повысится. Это нелегко сделать, но результат того стоит!

📅 7 декабря 2015

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

bg.nencom.com

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

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

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

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

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

📅 31 октября 2014

Создание сайта для Братьев Бондаренко

bbondarenko.ru

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

  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик

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

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

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

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

📅 9 апреля 2014

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

feralit.ru

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

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

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

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

  • Кликабельные области сайтаКликабельные области сайта

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

📅 13 апреля 2012

Сайт huberits.ru

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

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

huberits.ru

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

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

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

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

📅 26 ноября 2011

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

ekofriend.com

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

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

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

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

📅 12 октября 2011

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

Недавно изменилась форма таблицы Менделеева, привычная нам ещё со школы. Новая форма имеет 18 ячеек в ширину вместо 10, она более красивая и величественная 😃

По этому случаю для сайта xumuk.ru был сделан новый адаптивный сервис:

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

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

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

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

© 2004 – 2024