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

Цена

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

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

5. Проблема: фотографии некрасиво вписываются в экран

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

Мы изменили viewport браузера — видимую область страницы, размеры которой изменяются при масштабировании окна браузера. Мы поменяли ширину и первоначальный масштаб viewport.

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

.section__content {
    max-width: 1200px; /* Вместо width: 1200px; */
}

Теперь содержимое растягивается по ширине экрана, а на большом экране компьютера ширина ограничена прежним значением.

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

3.1. Media Queries

@media all and (max-width: 400px) {
    .header__title {
        font-size: 36px;
    }
}

.header__title {
    font-size: 72px;
}

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

Основные типы носителей:

  • all — все типы, значение по умолчанию.
  • screen — экраны настольных компьютеров, планшетов и современных мобильных телефонов.
  • print — принтеры.
  • speech — речевые браузеры, которыми пользуются люди с ограниченными возможностями.

Наиболее часто используемые медиа-функции:

  • width (min-width, max-width) — ширина окна браузера.
    • min-width означает, что стили будут применены при ширине, равной или большей указанной.
    • max-width означает, что стили будут применены при ширине не больше указанной.
  • height (min-height, max-height) — высота окна браузера.
  • device-width (min-device-width, max-device-width) — ширина экрана устройства (может быть больше ширины браузера).
  • device-height (min-device-height, max-device-height) — высота экрана устройства.
  • orientation — принимает значения landscape или portrait для определения альбомной и портретной ориентации соответственно.

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

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

https://www.youtube.com/watch?v=ytdevru

Есть другой приём, который позволит изменить размер шрифта на всей странице разом — это единица размера rem (root em), которая похожа на em, но вместо сложной цепочки зависимостей по родительским элементам, она вычисляется только на основе размера шрифта элемента {amp}lt;html{amp}gt;.

html {
    font-size: 10px;
}

.header__title {
    font-size: 7.2rem; /* 72px */
}

.header__sub-title {
    font-size: 4.2rem; /* 42px */
}

@media all and (max-width: 400px) {
    html {
        font-size: 5px;
        /*
           .header__title → 36px
           .header__sub-title → 21px
         */
    }
}

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

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

4.1. Min-width

.item {
    float: left;
    width: 33%;
    min-width: 265px; /* Добавляем минимальную ширину. */
}

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

4.2. Flexbox

.list {
    display: flex; /* Flex-контейнер. */
    flex-wrap: wrap; /* Многострочный режим. */
}

.item {
    flex-basis: 260px; /* Базовая ширина элемента. */
    flex-grow: 1; /* Элементы должны максимально растягиваться. */
    max-width: 360px; /* Последний элемент не должен расползаться на всю ширину страницы в горизонтальной ориентации. */
}

В результате мы получим почти такой же результат, как с min-width, но лишённый его недостатков: элементы списка растягиваются на всю доступную ширину (с ограничением до 360px) и появление горизонтальной полосы прокрутки исключено.

.item {
    flex-basis: 260px;
    flex-grow: 1;
    max-width: 360px;

    display: flex; /* Каждый элемент, в свою очередь, тоже становится Flex-контейнером. */
    flex-direction: column; /* Для больших экранов сохраняем расположение иконки сверху. */
    align-items: flex-start; /* Выравниваем иконку по левому краю. */
}

@media screen and (max-width: 400px) { /* Для мобильных экранов. */
    .item {
        flex-direction: row; /* Ставим иконку в один ряд с текстом. */
    }
}

Flexbox может показаться сложным, но в действительности он открывает широчайшие возможности. Используя только CSS-стили, мы можем изменить порядок следования блоков! И наконец-то, в CSS можно легко задекларировать вертикальное центрирование.

Лучший способ разобраться с Flexbox — начать его использовать, а поможет в этом полное руководство и шпаргалка.

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

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

.image {
    height: 100vh; /* Устанавливаем высоту картинки, равную высоте экрана. */
    max-width: 100%; /* Ограничиваем ширину картинки шириной экрана. */
    object-fit: cover; /* Масштабируем картинку с соблюдением пропорций. */
}

Новые единицы размеров в CSS:

  • vw — 1% от ширины viewport.
  • vh — 1% от высоты viewport.
  • vmin — 1% от меньшей стороны (ширины или высоты) viewport.
  • vmax — 1% от большей стороны (ширины или высоты) viewport.

Наконец-то, в CSS можно легко указывать относительные вертикальные размеры! Поддержка современными браузерами достаточно хорошая, за исключением IE11 и Edge14, где не работает vmax.

Свойство object-fit позволяет легко управлять масштабом и соотношением сторон изображений, но при этом обязательно должны быть заданы как ширина, так и высота. Можно сказать, что это свойство является неким аналогом свойства background-size, только для обычных изображений, а не фоновых. Поддержка современными браузерами также на высоте, за исключением IE11 и Edge13.

Мы рассмотрели ряд практических техник, которые помогут быстро сделать обычный сайт адаптивным под любые размеры экрана. Адаптивная вёрстка — это удобно, как для пользователя, так и для разработчика, который со временем станет смотреть на дизайн сразу с точки зрения экранов различных размеров. Такой подход лёгок в поддержке и выглядит достойно даже в сравнении с отдельной мобильной версией.

Существует ряд инструментов, облегчающих задачу построения адаптивных раскладок. Они вводят единые соглашения написания кода, что может быть полезно в средних и больших командах. Наиболее популярные из них:

  • Bootstrap — пожалуй, самый известный CSS-фреймворк.
  • Foundation — мощный CSS-фреймворк для сайтов, писем и веб-приложений.
  • Skeleton — минималистичный CSS-фреймворк с фиксированными сетками.
  • Jeet — система сеток для SCSS и Stylus.
  • Susy — система сеток для SASS.
  • Fluidable — система сеток для LESS.

Удобство для пользователей

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

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

https://www.youtube.com/watch?v=ytaboutru

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

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

Как влияет на продвижение в поисковиках

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

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

Адаптивная верстка подобных трудностей не вызывает. Здесь один сайт – один адрес, а потому «недопонимание» со стороны поисковых систем не грозит.

Администрирование

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

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

Внешний вид

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

Потому преимущество за адаптивной версткой, ведь она помогает рациональнее использовать всю доступную площадь экрана любого устройства.

https://www.youtube.com/watch?v=upload

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

Заключение

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

Преимущества:

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

Недостатки:

  • часто не обладает достаточно высокой скоростью загрузки.

Мобильная версия

Преимущества:

  • высокая скорость загрузки;
  • простота в использовании, легко найти нужную информацию (если она есть);

дизайн

Недостатки:

  • высокая стоимость;
  • требует больше времени на разработку;
  • нет отдельного решения для экранов планшетов;
  • вызывает трудности на этапе продвижения сайта;
  • удваивает затраты труда и времени на поддержку и расширения функционала.

На сегодняшний день адаптивная верстка применяется гораздо чаще. Она универсальна и обладает сравнительно большим количеством преимуществ. Адаптивная верстка развивается и опытные разработчики уже научились устранять большинство ее изъянов, или даже превращать в преимущества.

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

https://www.youtube.com/watch?v=ytpressru

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

Поделиться:
Нет комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

×
Рекомендуем посмотреть
Adblock detector