Адаптивная верстка современных сайтов

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

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

Компания Google официально с 21 апреля 2015 года вводит новые способы ранжирования ресурсов, следуя ее примеру российская поисковая система Яндекс также запускает свой алгоритм, под названием «Владивосток», он стал применяться в февраля 2016 года. Согласно таким изменения, все сайты, которые имеют адаптивную верстку и дизайн — будут ранжироваться гораздо выше остальных ресурсов, которые не обладают таким дизайном. Соответственно, дизайн современных сайтов просто необходимо делать адаптивным, если вы хотите получать больше трафика с поисковых систем.

Для чего нужен адаптивный дизайн сайта?

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

Трафик многих современных сайтов состоит на 30-40% из мобильного типа устройств и планшетов, особенно это касается интернет магазинов или каталогов, если вы рассчитываете на большую аудиторию. Даже самые простые сайты, типа сайта визитки или одно-страничного сайта имея длинные линии прокрутки по горизонтали и вертикали, при открытии с мобильного устройства будут иметь низким показателем поведенческого фактора.

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

Как узнать — адаптивный сайт или нет?

В интернете существует большое количество бесплатных онлайн-сервисов, которые позволяют проверить как бы выглядел сайт на самых различных устройствах, даже на самых версиях смартфонов, например iPhone 4. Тоже самое можно и сделать при помощи популярного веб-браузера Google Chrome, в который встроено расширение Window Resizer. Оно позволяет выбрать определенное устройство, видеть его размеры и проверить на сколько корректно при таком разрешении экрана будут выглядеть страницы сайта, также в этом расширении можно посмотреть отображение с различным положением экрана — вертикальном или горизонтальном.

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

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

Пример сайта с адаптивными стилями дизайна.

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

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

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

Разработка адаптивного сайта начинается с дизайна макета.

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

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

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

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

Составление правильного и понятного ТЗ для дизайна макета:

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

---

Поделиться в соц. сетях: