Оставить заявку

Отправлено!

Мы уже бежим звонить вам

Адаптивная верстка или мобильная версия: плюсы и минусы

Антон Ставицький

28.12.2022

5 хв читання

Адаптивная верстка или мобильная версия: плюсы и минусы1662554777

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

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

Что лучше – мобильная верстка или адаптивный сайт

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

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

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

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

Как отображается универсальный вебсайт

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

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

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

Какую пользу от адаптивности может извлечь владелец ресурса

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

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

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

Особенности разработки адаптивного вебсайта

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

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

Кстати, к факторам, по которым поисковыми машинами оценивается качество WEB-сайта и производится его ранжирование, относятся, например, следующее параметры:

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

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

Как узнать, приспособлен ли WEBсайт к просмотру на любых устройствах

Для проверки не обязательно иметь мобильные гаджеты – ее можно произвести даже на компьютере. Например, если вы пользуетесь браузером Mozilla Firefox, то стоит всего лишь открыть нужный вам интернет-ресурс и воспользоваться сочетанием кнопок CTRL + SHIFT + M. В браузере Chrome также можно осуществить проверку, используя сочетание CTRL + SHIFT + I. В результате этого открытая страница отобразится в том виде, в котором она будет видна на портативном устройстве.

Проверив соответствии ресурса условиям, описанным в предыдущем параграфе, вы сможете выяснить, является ли действительно WEBсайт по-настоящему адаптивным. Если вас не устраивает такой способ проверки, то можно воспользоваться и инструментом от Google – он называется «Проверка оптимизации для мобильных».

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

Два направления разработки вебсайта

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

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

Правила адаптивного дизайна

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

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

Размеры, масштабы и координаты – все относительно

Разработчиками приняты следующие стандартные значения ширины экрана:

  • Смартфон – от 320 пикселей и выше.
  • Планшет – от 768 пикселей и больше.
  • Ноутбук – 1024 пикселя.
  • Десктоп – 1280 пикселей.

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

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

Графика

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

Поточность

Корректное отображение веб-сайта невозможно при наличии сдвигов блоков – WEBсайт не должен допускать такую возможность.

Вложенность

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

Шрифты

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

Мобильная версия или адаптивная верстка?

Различие между мобильным и адаптивным вебресурсом заключается в следующем:

  • Версия WEBсайта для смартфонов и планшетов обычно создается под экран с определенными параметрами (разрешение и размер). Но многие из них могут нормально отображаться и на большинстве других экранов.
  • Адаптивный WEBресурс сам подстраивается под экран пользователя и корректно отображается на любых устройствах.

Фактически, владельцу вебресурса, не желающему возиться с адаптивностью, понадобится два варианта исполнения – для мобилок и для компьютеров.

Основные требования к мобильной версии

При разработке часто приходится решать следующие распространенные проблемы:

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

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

  • Открыта или нет индексация JS?
  • Разрешена ли работа каскадных таблиц (разрешение дается в файле robots)?
  • Предусмотрено ли перенаправление с десктопной версии на мобильную, и если да, то используется ли 302 редирект?
  • Предусмотрено ли использование метатега viewport, указывающего на то, какую область экрана пользователь будет видеть без применения прокрутки.

Кроме этого, нежелательно использовать любые виды всплывающих окон. Это критически важный момент для пользователя смартфона, поскольку при относительно небольших размерах экрана всплывающие поп-апы и подобные им элементы способны не только закрыть от глаз владельца смартфона контент, но и помешать взаимодействию с интерактивными объектами. Запрещается также использование Flash, Microsoft Silverlight и Applet.

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

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

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

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

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

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

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

То же самое относится и к размеру шрифта. Минимум, который допускается использовать, составляет 12px, хотя и такой размер символов заставляет напрягать глаза. Но шрифт размером 14–16px будет идеальным решением, и именно он чаще всего используется опытными разработчиками.

Необходимо учитывать также следующие моменты:

  • Кнопки должны быть крупными и удобными для нажатия пользователем. Это особенно важно и потому что владельцы смартфонов и планшетов часто используют их в движущемся транспорте.
  • Между интерактивными объектами должно соблюдаться расстояние не меньшее, чем 28px – по той же причине, что и большой размер кнопок.

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

Что же выбрать – мобильную версию сайта или адаптивную верстку?

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

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

Мобильная версия. К очевидным преимуществам данного варианта относится высокая скорость загрузки, идеальный дизайн, как с точки зрения красоты, так и с точки зрения удобства пользователя. В то же время мобильный сайт может некорректно отображаться на отдельных устройствах с нестандартными характеристиками экрана. Например, на планшетах изображение может растягиваться или сжиматься, могут меняться расстояния между отдельными элементами. Функционал такой версии чаще всего менее богат. Еще одним минусом является необходимость одновременного продвижения двух версий сайта – для компьютеров и портативных аппаратов.

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

Вывод

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

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

Антон Ставицький

Редактор, Ocean

Популярные статьи
Как выбрать хостинг для сайта?
Заказывая разработку сайта,интернет магазина или другой веб площадки важно подобрать хороший...
28-го декабря4 мин чтение
Как выбрать хостинг для сайта?1681154995
Что такое SERM?
Заказать услуги serm в современных условиях выбирает все больше владельцев бизнеса, от небольших...
28-го декабря5 мин чтение
Что такое SERM?1681155017
Этапы создания сайта
Что такое веб сайты и как и правильно создать знают специалисты веб студии Ocean-agency. От того,...
28-го декабря4 мин чтение
Этапы создания сайта1681155091
Что входит в создание сайта под ключ?
В последнее время в разных направлениях услуг стало популярно добавлять к презентации сочетание -...
28-го декабря4 мин чтение
Что входит в создание сайта под ключ?1681155211
Что такое лендинг и как его создать?
Многие владельцы бизнеса, людей связанных с продвижением продукции и просто любознательная часть...
28-го декабря5 мин чтение
Что такое лендинг и как его создать?1681155190
Как повысить посещаемость интернет-магазина?
Вложить деньги в разработку сайта, запустить его - только частичная работа к успеху...
6-го ноября6 мин чтение
Как повысить посещаемость интернет-магазина?1681155254
SEO-тренды в 2022 году
Специалисты Ocean-agency всегда быстро реагируют на все нововведения в продвижение сайтов. В 2022...
6-го ноября5 мин чтение
SEO-тренды в 2022 году1681155283
Выбираем CMS для интернет-магазина
Cms для интернет магазина - это движок, с помощью которого можно удобно управлять сайтом и...
6-го ноября5 мин чтение
Выбираем CMS для интернет-магазина1681155317
На что влияет CTR и как его повысить?
Качество запуска контекстной рекламы показывает CTR. Что такое CTR? Это показатель кликабельность....
6-го ноября5 мин чтение
На что влияет CTR и как его повысить?1681155373
Какие ожидания от SEO и почему они не оправдываются?
Владелец бизнеса часто сталкивается с разными вариантами продвижение. Понять их, человек без знаний...
6-го ноября5 мин чтение
Какие ожидания от SEO и почему они не оправдываются?1681155401