Вы спрашивали себя: «Что такое адаптивный веб-дизайн?». Адаптивный веб-дизайн - это подход, при котором дизайнер создает веб-страницу, которая «реагирует» или изменяет свой размер в зависимости от типа устройства, через которое оно просматривается. Это может быть негабаритный монитор настольного компьютера, ноутбук или устройства с небольшими экранами, такие как смартфоны и планшеты.
Адаптивный веб-дизайн стал незаменимым инструментом для всех, кто имеет цифровое присутствие. С ростом количества смартфонов, планшетов и других мобильных вычислительных устройств все больше людей используют меньшие экраны для просмотра веб-страниц.
$config[code] not foundЭти веб-сайты также должны учитывать индекс «сначала для мобильных устройств», анонсированный Google в апреле 2018 года. По мере того, как все больше малых предприятий увеличивают свое мобильное присутствие, их веб-сайт, электронная коммерция, страница Google Business, страницы социальных сетей и другие ресурсы должны быть легко доступны для всех устройства.
Что такое адаптивный веб-дизайн?
Целью адаптивного дизайна является создание одного сайта, но с разными элементами, которые по-разному реагируют при просмотре на устройствах разных размеров.
Давайте возьмем традиционный «фиксированный» сайт. Например, при просмотре на настольном компьютере веб-сайт может отображать три столбца. Но когда вы просматриваете ту же раскладку на меньшем планшете, это может вынудить вас прокрутить горизонтально, что пользователям не понравится. Или элементы могут быть скрыты от глаз или выглядят искаженными. Воздействие также осложняется тем, что многие планшеты можно просматривать либо в книжной ориентации, либо повернуть вбок для альбомной ориентации.
На крошечном экране смартфона веб-сайты могут быть еще более сложными для просмотра. Большие изображения могут «сломать» макет. Сайты могут загружаться медленно на смартфонах, если они имеют большую графику.
Однако, если сайт использует адаптивный дизайн, версия планшета может автоматически настроить отображение только двух столбцов. Таким образом, контент удобочитаем и прост в навигации. На смартфоне контент может отображаться в виде одного столбца, возможно, в вертикальном положении. Или, возможно, у пользователя будет возможность провести пальцем, чтобы просмотреть другие столбцы. Размеры изображений изменятся, вместо того, чтобы искажать макет или обрезать его.
Дело в том, что благодаря адаптивному дизайну веб-сайт автоматически настраивается в зависимости от устройства, на котором его видит зритель.
Как работает адаптивный веб-дизайн?
Адаптивные сайты используют жидкостные сетки.Все элементы страницы имеют размеры пропорционально, а не пикселей. Таким образом, если у вас есть три столбца, вы не скажете точно, насколько широким должен быть каждый из них, а скорее, насколько они должны быть шире по отношению к другим столбцам. Столбец 1 должен занимать половину страницы, столбец 2 должен занимать 30%, а столбец 3 должен занимать, например, 20%.
Размер таких носителей, как изображения, также изменяется относительно. Таким образом, изображение может оставаться в пределах своего столбца или относительного элемента дизайна.
Связанные вопросы
Мышь против прикосновения: Проектирование для мобильных устройств также поднимает проблему мышки против сенсорного экрана. На настольных компьютерах пользователь обычно имеет мышь для навигации и выбора элементов. На смартфоне или планшете пользователь в основном использует пальцы и касается экрана. То, что может показаться простым с помощью мыши, может быть трудно выбрать с помощью пальца в крошечном месте на экране. Веб-дизайнер должен принимать во внимание «прикосновение».
Графика и скорость загрузки: Также существует проблема графики, рекламы и скорости загрузки. На мобильных устройствах может быть целесообразно отображать меньше графики, чем для настольных ПК, чтобы сайт не загружался на смартфоне вечно. Большие размеры объявлений, возможно, придется заменить на более мелкие объявления.
Приложения и «мобильные версии»: В прошлом вы, возможно, думали о создании приложения для своего веб-сайта, например, приложения для iPad или приложения для Android. Или у вас есть мобильная версия специально для BlackBerry.
Но с таким количеством различных устройств сегодня становится все труднее создавать приложения и разные версии для каждого устройства и операционной платформы.
Почему малому бизнесу нужно перейти на адаптивный веб-дизайн
Все больше людей используют мобильные устройства. Недавнее исследование Pew 77% американцев теперь владеют смартфонами в 2018 году, что больше, чем 35% в первом исследовании Pew Research Center, проведенном в 2011 году.
Проверьте свой трафик, и вы можете быть просто шокированы тем, сколько посетителей попадают на ваш сайт через мобильные устройства. (В Google Analytics выберите «Аудитория» с левой стороны, затем «Мобильный», чтобы увидеть, какая доля трафика поступает с мобильных устройств. Вы можете даже просмотреть детали, с которых устройства отправляют трафик.)
Адаптивные шаблоны дизайна сейчас везде, для покупки. Если, например, у вас есть сайт WordPress, вы можете посетить авторитетную галерею шаблонов, такую как ThemeForest, и выполнить поиск «адаптивных тем WordPress». Купите одну за менее чем 50 долларов. Ваш веб-разработчик может затем настроить его для вашего логотипа и бренда.
Примечание редактора: здесь, в отделе малого бизнеса, мы работаем над новым адаптивным дизайном. Не так ли?
Фото через Shutterstock
Ещё в: контент-маркетинг, что такое 95 комментариев ▼
