Проект Webdoors
Контакты
//Статья

Мания адаптивности в эру смартфонов

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

В чем собственно разница? Обычный сайт фиксированной ширины при правильной верстке будет корректно отображаться на экране мобильного устройства на всю ширину рабочей области. Но текст, элементы дизайна и фото будут при этом очень мелкими. Раньше эта проблема решалась путем масштабирования тремя пальцами по экрану. Такая возможность есть и сейчас. Но это, безусловно, не так удобно. На помощь пришла адаптивность, которая предполагает позиционирование основных областей контента на экране в пропорциях, позволяющих не пользоваться масштабированием. Это достигается путем создания компактной навигации и увеличения плотности верстки. Иными словами, если на обычном мониторе мы видим 2 блока в строчку, каждый из которых занимает 50% ширины экрана, то на экране гаджета эти блоки могут располагаться друг под другом. Каждый из них будет занимать 100% ширины экрана.

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

Услышав это, клиент может сказать: "Урезать?! Скрывать?! Вы сума сошли! Это работающий проект, я деньги зарабатываю!". По этому, давайте рассмотрим несколько вариантов реализации адаптивности, подходящих для новых и существующих сайтов:

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

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

Тем не менее, в любом из описанных случаев необходимо создать новую верстку "на все случаи жизни". Этим вопросом разработчики задавались еще много лет назад. Как не странно все началось не с маленьких экранов, а напротив - с 20 дюймовых (и более) LCD мониторов, которые внезапно стали общедоступными и наводнили рынок. По этому, первоначально, разработчики сайтов решали проблему с переизбытком свободного места. Пионерами в этой области стали, конечно же, "резиновые макеты", где контент растягивался на любое разрешение экрана, но данная реализация так и не стала широко распространённой. Во-первых, сайт, который размазан на всю ширину большого монитора не очень удобен для пользователя. Приходится постоянно переводить взгляд от края до края монитора, трудно удержать переход строки и т.д. Во-вторых, в таком формате практически невозможно красиво заверстать текст, фотогалереи и какие-либо сложные дизайнерские решения. Уже на этом этапе большинство разработчиков сделали выбор в пользу фиксированных по ширине макетов, ориентированных на среднее разрешение настольных мониторов.

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

В результате появился третий и наиболее распространённый сейчас подход, вобравший в себя преимущества и недостатки двух предыдущих. Это использование фреймверков для адаптивной верстки. Наиболее популярным на сегодняшний день является Bootstrap. Данный инструмент позволяет создать адаптивную верстку, разбитую на блоки (по сетке), каждому из которых задается определенное поведение, исходя из диапазонов возможных разрешений экрана "от мала до велика". Так же в Bootstrap присутствует инструментарий для работы с навигацией, анимацией, графикой и многое другое. Не смотря на все это, фреймверк не решает многие проблемы динамического изменения пропорций сайта, а, значит, не претендует на абсолютную универсальность. Пора поговорить о недостатках:

1) Легко реализуется только для небольших проектов. Решение "из коробки" хорошо подходит для проектов типа сайт-визитка или лендинг. При создании более сложных сайтов все равно приходится решать проблему дефицита свободного места путем скрытия функциональности для мобильных устройств и других ухищрений.

2) Необходимость минимизации графики. Если у Вашего адаптивного сайта должен быть художественный дизайн, не поддающийся верстке через CSS, то придётся выбрать что-то одно. Любая рисованная графика создается в четких пропорциях. Исходя из этого выстраивается композиция - расположение и размеры всех элементов изображения друг относительно друга. С тем же расчетом все заверстывается относительно всех объектов на сайте. Но в адаптивном дизайне все подвижно! По этому, единственным способом получения визуальной гармонии является упрощение.

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

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

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

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

Закажите разработку сайта прямо сейчас

Контакты