иконка телефонапозвонить
Главная / Блог / Адаптивная верстка

Адаптивная верстка

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

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

В чем суть адаптивности?

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

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

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

Даже при изобилии гаджетов не все имеют под рукой устройства с разным размером экрана. Но, технологии и разработка ПО на месте не стоит, поэтому в качестве проверки сайта на адаптивность используйте расширение для веб-браузера Google Chrome Window Resizer. Оно поможет быстро проверить адаптивный дизайн на основных размерах. С плагином для Chrome можно проверить адаптивность сайта на основных размерах, включая старые версии смартфонов на Андроиде и iPhone.

  1. Откройте в браузере Google Chrome сайт, который необходимо проверить на адаптивность.
  2. Нажмите правую кнопку мыши и выберите в меню "Посмотреть код" или воспользуйтесь командой Ctrl+Shift+I
  3. В дополнительном меню выберите пункт "Toggle device mode" или воспользуйтесь комбинацией клавиш Ctrl+Shift+M
  4. В появившемся окне выбирите размер экрана мобильного устройства и посмотрите, как отображается сайт

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

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

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

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

   

 

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

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

Создание адаптивного сайта начинается с дизайна макета

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

  • для компьютера,
  • планшета
  • мобильного устройства.

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

Какие требования предъявляются к адаптивному макету?

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

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

Что нужно для составления понятного ТЗ

  1. Макет должен быть только в формате PSD. Для верстальщика это очень важно, ведь цвета, тени и отступы берутся из макета.
  2. Каждый элемент располагается на отдельном слое. Так проще выделить определенный элемент, на который наложены другие слои.
  3. Меньше фотографий.
  4. Меньше вычурных шрифтов. Их подгрузка тормозит страницы, а необычные шрифты поддерживаются не всеми версиями браузеров.
  5. Больше стандартных шрифтов. Это ускорит загрузку страниц и избавит от некорректного отображения на компьютерах некоторых пользователей.
  6. Все коротко и по делу. Не нужно нагружать макет лишними элементами.
  7. Нет вычурным и громоздким элементам. Простота — залог успешного ресурса.
  8. Выпадающее меню. Без него никуда.


У вас есть вопросы?

Наши специалисты готовы перезвонить Вам в течение 5 минут (в рабочее время) и подробно проконсультировать по любым вопросам.
Заказать звонок специалиста


Ещё записи


вверх
Узнать стоимость
Отправлено
Спасибо, Ваш запрос отправлен!
Мы свяжемся с Вами в ближайшее рабочее время.
Заказать звонок
Отправить

Мы свяжемся с Вами в ближайшее рабочее время.
Отправлено
Спасибо, Ваша заявка отправлена!
Мы свяжемся с Вами в ближайшее рабочее время.
По возможности ответьте на вопросы:
Какая услуга интересует? Создание сайта Продвижение сайта Контекстная реклама Поддержка сайта Другое стрелка выпадающая
Отправить
Оставить заявку
Отправить
Мы свяжемся с Вами в ближайшее рабочее время.
Отправлено
Спасибо, Ваша заявка отправлена!
Мы свяжемся с Вами в ближайшее рабочее время.
Какая услуга Вас интересует? Создание сайта Продвижение сайта Реклама сайта Поддержка сайта Предложение сотрудничества Другое стрелка выпадающая
Отправить

Отправлено
Спасибо, Ваша заявка отправлена!
Мы свяжемся с Вами в ближайшее рабочее время.