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

Как адаптивный сайт подстраивается под размер экрана?

Для адаптивного сайта заранее задают правила вида «если экран уже такой-то ширины, располагай элементы так» и показывают те, что подходят под ширину экрана клиента. Ширину, при которой правила меняются, называют «брейкпоинтом» (breakpoint).

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

В самом начале кода сайта есть строка «показывай страницу по ширине устройства» (настройка viewport). Без неё на телефоне отображается уменьшенная компьютерная версия.

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

Чем адаптивный дизайн отличается от адаптивной подачи и отдельной мобильной версии?

При адаптивном дизайне один сайт подстраивается под все экраны, а при адаптивной подаче (adaptive) и отдельной мобильной версии под каждый экран показывают отдельно сделанный вариант. Google рекомендует адаптивный дизайн: его проще создавать и поддерживать.

Google читает и ранжирует сайты по мобильному содержимому. Если в отдельной мобильной версии меньше информации, то содержимое, которое есть только в компьютерной версии, может проигрывать в поиске.

Если у вас уже есть отдельная мобильная версия вроде m.yourshop.kr, при создании нового сайта объедините всё в адаптивный дизайн, а старый адрес m. настройте на автоматическое перенаправление. Тогда клиенты, перешедшие по давно разошедшимся ссылкам, не потеряются.

Что должно меняться на экране телефона?

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

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

Для экрана телефона нужно заново определить и порядок блоков. Блоки «О заведении» и «Кнопка записи», стоявшие на компьютере рядом, на телефоне выстраиваются друг под другом, и сверху должна оказаться информация, которую клиенты ищут первой.

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

• Основной текст — достаточно крупный, чтобы читать без увеличения
• Кнопки и ссылки — достаточного размера и с отступами для нажатия пальцем (обычно рекомендуют около 48 пикселей по ширине и высоте)
• Номер телефона — звонок по нажатию, адрес — открытие приложения карт по нажатию
• Не закрывать первый экран большим попапом
• Не вписывать текст в фото — текст должен быть текстом (на телефоне он уменьшится и станет нечитаемым)
• Фото уменьшать до размера экрана телефона, чтобы они быстро загружались

Можно ли переделать текущий сайт в адаптивный?

Можно, но старый сайт часто выгоднее сделать заново, чем переделывать. Если сайт свёрстан с фиксированной шириной колонок под экран компьютера, перестраивать придётся сам каркас, и объём работ почти сравняется с созданием нового сайта.

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

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

Как проверить адаптивный сайт?

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

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

1. 01Пролистайте на своём телефоне сайт от первого экрана до конца и проверьте, ничего ли не съезжает вбок.
2. 02Посмотрите сайт и в горизонтальной ориентации телефона.
3. 03Откройте сайт на телефонах других марок (iPhone · Galaxy) и на планшете.
4. 04На компьютере медленно сужайте окно браузера и смотрите, естественно ли перестраивается страница.
5. 05Сами нажмите кнопки звонка, открытия карты и записи.
6. 06Отключите Wi-Fi, откройте сайт через мобильный интернет и проверьте, не слишком ли долго грузятся фото.

Что часто упускают, заказывая адаптивный сайт?

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

Ещё часто меню или описание акции вставляют одной большой картинкой. На телефоне текст становится мелким и плохо читается, а поисковики плохо распознают текст на изображениях.

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

• Покажете ли вы отдельно макет для телефона?
• Как прайс-лист, таблицы и расписание будут выглядеть на телефоне?
• Будут ли фото уменьшаться под размер экрана при загрузке?
• На каких устройствах вы проверяете сайт перед запуском?