CC BY
23
УДК 004.55: 373.31
Кожевникова Е.А. студент магистратуры 2 курса кафедра «Психология и безопасность жизнедеятельности» научный руководитель: Компаниец В.С., к.техн.н.
доцент
кафедра «Психология и безопасность жизнедеятельности»
Южный Федеральный Университет
Россия, г. Таганрог
ОСОБЕННОСТИ СОЗДАНИЯ АДАПТИВНОГО ДИЗАЙНА ДЛЯ ВЕБ -
СТРАНИЦЫ
Аннотация: Статья посвящена возможностям отображения адаптивной версии веб-ресурса на различном разрешении экрана и целесообразность ее разработки. Были указаны основные требования и особенности адаптивных версий, а также способы их реализации.
Ключевые слова: адаптивность, разрешение экрана, верстка, веб-дизайн, юзабилити, мобильные устройства.
Kozhevnikova E.A.
student
2 course, department "Psychology and life safety"
South Federal University Russia, Taganrog Scientific adviser: Kompaniets V.S., Candidate of Technical Sciences, Associate Professor Associate Professor of the Department "Psychology and Safety of Vital
Functions" South Federal University Russia, Taganrog FEATURES OF CREATING ADAPTIVE DESIGN FOR WEB
PAGES
Annotation:
This article analyzes the ability to display an adaptive version of a web resource at different screen resolutions and the expediency of its development. The main requirements and features of adaptive versions, as well as methods to implement them, were indicated.
Key words: adaptability, screen resolution, layout, web design, usability, mobile devices.
Адаптивный веб-дизайн - это дизайн страниц в интернете, который позволяет получить правильное отображение веб-ресурса на любых устройствах, подключенных к сети (смартфоны, планшеты, ноутбуки, ПК). Страницы с таким дизайном подстраиваются под параметры окна браузера, которые задаются пользователем или устройством. Как правило, чем меньше
ширина экрана — тем концентрированнее подача информации и тем меньше блоков задействовано. При этом пользователю нет необходимости изменять масштаб: всё просто и понятно даже на небольшом экране.
Сегодня подобный дизайн страниц сайта является не просто модным, а необходимым в веб-разработке. Причиной этому служит большое количество различных устройств и платформ, которые отличаются разными разрешениями. Адаптивная версия сайта будет работать на всех платформах с любым разрешением. Это позволяет потратить меньше усилий для реализации идеи, а также обходится заказчику намного дешевле разработки отдельной мобильной версии и версии для ПК.
С помощью адаптивного веб-дизайна один и тот же сайт можно без особых проблем просматривать и на компьютерах, и на мобильных девайсах. При этом вы не почувствуете какого-либо дискомфорта. Адаптивный дизайн позволяет отображать страницы и их содержимое в соответствии с тем устройством, на котором пользователь их открывает. Еще одна особенность адаптивных сайтов: укрупнение значимых элементов так, чтобы пользователь легко мог попасть пальцем на кнопку на экране или перейти по ссылке. От этого напрямую зависит конверсия сайта, поэтому адаптивный дизайн важно делать дружелюбным.
Сегодня существует несколько типов адаптивных макетов для разных сайтов:
- резиновый - отличается простотой реализации, главные блоки вебстраницы сжимаются до ширины устройства, на котором пользователь ее просматривает (если такое невозможно, то блоки перестраиваются в один ряд);
- колоночный - если у вас многоколоночный сайт, то этот способ является очевидным (при уменьшении ширины экрана дополнительные боковые блоки будут переноситься в нижнюю часть страницы);
- с переключением макетов - является самым удобным для чтения способом, основывается на разработке отдельных макетов для экранов с разной шириной (отличается трудоемкостью);
- простая адаптивность - подходит для сайтов с несложным дизайном, отличается простым масштабированием типографии и изображений;
- гибридная - все элементы на странице адаптируются: меняются их размеры, появляется/исчезает часть вспомогательного контента и декоративных элементов. При этом блоки перестраиваются так, чтобы пользователю было удобно — на значимой информации делается акцент, а второстепенные данные убирают или сворачивают. Сайтам со сложным функционалом и/или контентом, требующим достаточного количества экранного пространства для восприятия, полная адаптивность чаще идет во вред. Лучше выделить перечень устройств, на которых функционал будет
полным, и сделать для них версию с частичной адаптивностью, а для остальных сделать мобильную версию с урезанным функционалом и возможностью перейти на полноэкранную версию.
Так почему сайт должен быть адаптивным? Здесь можно выделить несколько основных моментов:
- Сегодня пользователи используют самые разнообразные устройства, с помощью которых можно выходить в интернет — все они отличаются размером экрана и разрешением, поэтому веб-сайт на каждом из них будет отображаться по-разному;
- Сегодня популярность мобильных устройств продолжает расти в быстром темпе, интернет-трафик увеличивается, поэтому значительная часть аудитории любой компании просматривает сайт именно со смартфонов или планшетов;
- Если на вашем ресурсе часто появляется срочная информация, которую пользователь может в любой момент прочитать на телефоне, то лучше всего использовать именно адаптивный дизайн.
Исторически так сложилось, что веб-дизайнеры сначала проводят разработку сайта для больших экранов, так как десктопы предлагают большую функциональность. Согласно последним исследованиям, которые были проведены в США, не меньше 25% людей используют для интернет -серфинга именно мобильные устройства. А в Китае эта цифра уже достигла 45%.
Многие элементы функционала и дизайна, которые хорошо выглядят на десктопе, невозможно успешно перенести на смартфоны или планшеты. Очень часто подобная попытка приводит к тому, что сайт становится сложным или непригодным для просмотра. Философия Mobile First означает, что дизайнер сначала продумывает дизайн сайта на мобильном девайсе, а уже потом переносит его на ПК или ноутбуки.
Зачем обращать внимание на Mobile First? Ваш сайт будет загружаться на небольших экранах намного быстрее, что дает немало преимуществ. Прежде всего, быстрая скорость загрузки положительно влияет на рейтинг сайта в Google. Данная поисковая система отдает предпочтение сайтам с хорошо оптимизированным адаптивным веб-дизайном. К тому же функционал на всех устройствах остается один и тот же. Так как сайт один, то и возможности его одинаковы, независимо от того, с какого устройства пользователи заходят на сайт.
Кроме того, благодаря использованию Mobile First вы сможете сэкономить на стоимости пропускной способности. Сегодня все больше покупателей используют именно мобильные устройства для совершения покупок. Если вы занимаетесь онлайн-бизнесом, то Mobile First поможет вам получить значительную финансовую выгоду.
Предварительно не разобравшись в теме, многие заказчики думают, что
мобильная и адаптивная версии сайта — это одно и то же. Но здесь существует немало отличий. Мобильный дизайн разрабатывается специально для просмотра страницы через девайс с небольшим экраном. Зачастую, мобильная версия — это отдельный полноценный сайт, у которого свой функционал, своя верстка и зачастую свой контент. Он также способен решить проблему с удобством просмотра сайта, но имеет несколько существенных недостатков:
- Вам придется создавать отдельное мобильное приложение или разный дизайн под каждый тип операционной системы, что требует дополнительных денежных затрат;
- Для использования мобильного приложения пользователям нужно будет его загружать на свое устройство, не все клиенты решаться на такое, особенно, если они не уверены, что будут просматривать сайт каждый день;
- Из-за разделения трафика вы получите меньшую посещаемость
сайта;
- Вам придется проводить интеграцию материалов.
По вышеописанным причинами разработка отдельной мобильной версии сайта не всегда является целесообразной, потому беспроигрышным вариантом остается адаптивность веб-ресурса. В отличие от мобильных версий, адаптивный веб-дизайн позволяет создать один сайт с одним адресом и одним дизайном.
Резюмируя, основными плюсами адаптивного веб-дизайна можно обозначить:
- Охват аудитории и продвижение — ресурсы, созданные по этой технологии, лучше ранжируются поисковыми системами, поэтому отличаются более эффективным продвижением;
- Вы не будете терять посетителей и потенциальных клиентов — согласно последним данным, 57% пользователей закрывают страницу, если она долго загружается на мобильном устройстве, а благодаря адаптивному дизайну эту проблему можно просто решить;
- Значительный прирост конверсии — создание такого дизайна подразумевает доскональную проработку юзабилити, что положительно влияет на конверсию.
- Конкурентоспособность сайта. С помощью адаптивного дизайна вы сможете значительно опередить своих конкурентов, привлечь больше пользователей, а также обогнать даже крупных игроков.
Использованные источники:
1. Кедлек, Т. Адаптивный дизайн. Делаем сайты для любых устройств / Т. Кедлек. - М.: Питер, 2013. - 288 с.
2. Кедлек, Тим Адаптивный дизайн. Приманка для пользователей (комплект из 2 книг): моногр. / Тим Кедлек , Стефен Андерсон. - М.: Питер, 2013. - 528 с.
3. Маркотт, И. Отзывчивый веб-дизайн: №2 1 / И. Маркотт. - М.: Манн, Иванов и Фербер, 2012. - 176 с
