0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

А также вопросы перехода на адаптивный дизайн при использовании мобильной версии

Адаптивный дизайн

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

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

Преимущества адаптивного дизайна:

  • Удобство разработки.
  • Стоимость ниже, чем создание мобильной версии на поддомене.
  • Грамотное отображение страниц сайта и всех его элементов на любых устройствах за счет адаптации стилей к мобильным браузерам.
  • Один URL у обычной версии сайта и с адаптивной версткой, благодаря чему не понадобится перенаправление пользователей, а также, посетителям не нужно будет запоминать отдельный адрес поддомена.
  • Соответствует требованиям Google к удобству просмотра на мобильных устройствах.
  • Красота изначального сайта: все-таки красивый дизайн можно сохранить и это немаловажно.
  • Медленная загрузка из-за большого веса страниц сайта. Адаптивный дизайн не дает возможности заменить тяжелые десктопные элементы облегченными, поэтому сайт дольше грузится с мобильных устройств. Это критично, поэтому скорость загрузки нужно оптимизировать.
  • В случае проблем на адаптивной верстке, посетитель сайта не имеет возможности перейти на обычную версию сайта.
  • Адаптивный дизайн предполагает переработку всех страниц сайта, что может оказаться неудобным, если ваш бизнес полностью зависит от сайта и от его работы.
  • Разные задачи – типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Поэтому для программистов это добавит дополнительные сложности, нежели внедрение разных версий сайта на отдельных доменах.

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

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

Мобильная версия предполагает разработку версии сайта на поддомене, например, «m.site.ru», на который перенаправляется посетитель в случае использования мобильного устройства. Такая технология позволяет создать мини версию сайта с наиболее важной информацией, не перегруженную контентом и различными элементами дизайна, а главное большими элементами навигации.

  • Мобильная версия сайта удобна для пользователя, потому что сильно упрощена по сравнению с обычной версией. Мобильная версия дает наиболее приоритетную информацию, а также позволяет совершать заказ/покупку с минимумом действий.
  • Легко вносить существенные изменения, т.к. это отдельная версия и не требуется вносить изменения в основной сайт.
  • Быстрая загрузка страниц, так как все необходимые элементы имеют меньший вес.
  • Есть возможность перейти на полную версию сайта, в случае с проблемами на мобильной.
  • Мобильная версия соответствует требованиям Google к удобству просмотра на мобильных устройствах.
  • Стоимость разработки – разработка мобильной версии сравнима с созданием полноценного сайта.
  • Стоимость обслуживания – необходимо поддерживать работу версии для разных устройств.
  • От части информации: контента, файлов и возможностей сайта придется отказаться.

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

Если у вас мобильная версия сайта на поддомене

  • Легко вносить существенные изменения, т.к. это отдельная версия и не требуется вносить изменения в основной сайт.
  • Быстрая загрузка страниц.
  • Высокая стоимость обслуживания и разработки (бюджет основного сайта х 2).
  • В случае создания нового сайта с нуля предпочтительнее вариант с адаптивной версткой (это дешевле и в разы быстрее в разработке).
  • В случае, если сайт УЖЕ работает на поддомене, то тут необходимо принимать решение исходя из конкретной ситуации. В общем случае, в виду уже ранее разработанной версии сайта на поддомене, предпочтительно оставаться на текущей мобильной версии, так как на данный момент она удовлетворяет текущим тенденциям создания сайтов.

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

  • Реализуйте на своем сайте адаптивный дизайн.
  • Настройте переадресацию 301 так, чтобы прежние URL мобильной версии указывали на обновленные страницы с адаптивным дизайном. Эту процедуру необходимо выполнить для каждого URL по отдельности.
  • Убедитесь, что для URL сайта не заданы какие-либо настройки, связанные с адаптацией для мобильных устройств, например, HTTP-заголовок Vary или переадресация, которая зависит от определенных условий. Рекомендуем задать атрибут rel=»canonical» на URL сайта с адаптивным дизайном, которые указывают на самих себя.

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

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

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

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

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

Читать еще:  НДФЛ с возмещения морального вреда по соглашению

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

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

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

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

3.1. Media Queries

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

  • 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 для определения альбомной и портретной ориентации соответственно.

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

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

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

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

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

4.1. Min-width

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

4.2. Flexbox

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

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

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

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

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

Новые единицы размеров в 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.

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

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

Читать еще:  Как в 6 ндфл отражаются квартальные премии

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

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

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

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

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

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

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

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

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

Внешний вид

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

Адаптивная верстка VS мобильная версия

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

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

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

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

Читать еще:  Второй класс условий труда

Остается два варианта: адаптивная верстка или мобильная версия. Для начала определим в чём разница между эти двумя методами.

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

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

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

Делается на поддомене. Чаще всего встречаются такие варианты m.clickon.ru, mobile.clickon.ru, pda.clickon.ru ну или вообще просто — clickon.ru/mobile/.

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

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

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

Есть общие плюсы:

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

заточенность под мобильные устройства.

возможность “вырезать” ненужный функционал

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

На серверной стороне использовать другую или чуть изменённую логику, что позволяет гибко управлять функционалом мобильной версии и увеличивать её скорость загрузки

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

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

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

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

Тот же домен, те же адреса. Никаких редиректов, проблем с сайтмапами и роботсами. Сеошники улыбаются.

Сложный, высоконагруженный проект будет долго открываться на мобильном устройстве. Хоть 4G, хоть 24G, мобильный интернет — это мобильный интернет.

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

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

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

Как мы видим, несмотря на то, что это довольно-таки близкие понятия, различия есть.

В пользу чего сделать выбор.

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

Если сайт не очень “тяжелый” или вовсе простой, то адаптивная вёрстка будет лучшим, изящным и красивым решением.

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

Быстрый сайт — хороший сайт.

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

Адаптивная верстка — лучший вариант. И лучше задуматься об этом ещё на этапе формирования технического задания. Отложенная на потом такая проблема может аукнуться :

  • сео-оптимизаторам понижением в мобильной выдаче и, следовательно, снижением количества заходов с мобильных устройств(а это огромное постоянно увеличивающееся количество людей) ;
  • программистам временем потраченным на на то, чтобы сайт “хоть как-то” выглядел на смартфонах, а позже на адаптивную переверстку или создание мобильной версии
  • владельцам сайтов потерянными клиентами, которые уйдут к конкурентам, у которых сайт на телефоне выполняет свои функции и выглядит корректно.
Ссылка на основную публикацию
Adblock
detector