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

Мобильная версия сайта vs адаптивная верстка: отличия, плюсы и минусы

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

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

Что выбрать и в чем здесь нюансы? Разбираемся.

Что говорят исследования

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

Уже сейчас почти половина всего трафика приходится на мобильные устройства

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

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

Неудивительно, что доходы от рекламы на коммерческом телевидении резко выросли во время самоизоляции

Интересно, что это не предел.

Прогноз Ericsson Mobility Report по мобильному трафику говорит, что он увеличится на 25 % к 2025 году. По их мнению, это должно произойти за счет увеличения просмотров видео и потоковой передачи данных на мобильных устройствах.

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

Но все это, конечно, совсем не значит, что надо сосредоточиться на одних смартфонах.

Исследование от Statcounter по трафику с компьютеров, планшетов и смартфонов показывает, что трафик делится примерно поровну: десктопы не слишком уступают мобильным устройствам. Аудитория, для которой компьютер – рабочий инструмент, предпочтет компьютеры телефонам.

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

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

На что влияет адаптация под мобильные устройства

Основных вариантов адаптации сайта два, их я уже упомянул выше:

1. Отдельная мобильная версия сайта. На нее сервер перенаправляет тех пользователей, которые используют смартфоны. Обычно она размещается под отдельным URL-адресом: например – m.yoursite.ru или mobile.yoursite.ru.

2. Адаптивная верстка. Здесь нужно будет внести изменения в CSS и HTML. Для этого обращаются к программисту или верстальщику. URL-адрес сайта не меняется, контент тоже.

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

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

2. SEO. Мобильная версия оптимизируется и продвигается отдельно от основного сайта.

3. Стоимости. Разработка мобильной версии дороже, чем адаптация сайта.

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

Посмотрим на плюсы и минусы каждого варианта. Выскажу субъективное мнение, а выводы делайте сами.

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

Например, хорошие варианты мобильных сайтов – Etsy и BuzzFeed. Крупные картинки, читабельный шрифт, не слишком много контента на одном экране

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

Как правило, в мобильной версии у пользователей нет доступа ко всему контенту – отражается только часть. Например, flash-анимация не воспроизводится на многих устройствах, и поэтому ее заменяют текстом или изображением в формате PNG или JPG. В итоге возникает необходимость контролировать сразу два сайта, и в этом случае объем работы контент-менеджеров и разработчиков, соответственно, удваивается.

Контент и функции в мобильной версии подбирают так, чтобы обеспечить оптимальное взаимодействие. Чтобы сделать это правильно, ответьте себе на несколько вопросов:

1. Какие блоки в десктопной версии служат больше для декорации?

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

2. Что важно оставить? Обычно – форму обратной связи, кнопки соцсетей и подписки, рекламу.

3. На что посетители почти не реагируют? Ответить на вопрос помогут карты поведения пользователей на сайте. Например, отслеживание можно включить в «Яндекс.Метрике» и Google Analytics. Элементы, которые активны меньше других, тоже можно спрятать.

Для активации понадобится скопировать и установить код счетчика на сайт

Важно разобраться в поведении посетителей, чтобы оптимизировать контент для мобильной версии сайта.

Читайте также: Что такое гибрид сайта и мобильного приложения PWA и SPA

Что такое адаптивный сайт

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

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

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

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

1. Flash. Flash-содержимое считается потенциально опасным из-за мошенников, которые могут распространять через него вредоносный код. Именно поэтому на «Странице общей информации Adobe Flash Player EOL» сейчас висит новость о том, что Adobe прекращает поддержку плеера 31 декабря 2020 года. Ему на смену пришел HTML5 – язык разметки с поддержкой тегов отображения визуального содержимого. Упомянуть о flash-контенте стоит хотя бы потому, что его до сих пор используют на многих сайтах (например, в играх во «ВКонтакте»).

2. Java-апплеты. Апплет – это Java-программа, которая запускается в веб-браузере. Но в Android Java работает не на JVM (Java virtual machine), а на Dalvik VM. Приложения на Java могут быть написаны для Android, но они преобразуются во время компиляции в Delvik. Delvik – это регистровая виртуальная машина для выполнения программ, которая необходима для работы операционной системы Android. Если коротко – Java-апплеты не поддерживаются как на Android, так и на iPhone.

3. Silverlight-плагины. Это плагины для запуска приложений с элементами векторной графики, анимации, видео и аудио. Не поддерживаются в мобильных телефонах. На справочной странице Google Search Console о типичных ошибках при разработке мобильных устройств рекомендуется использовать стандартные теги HTML5 для анимации и видео.

Причем в мобильной выдаче «Яндекс.Видео» ролики, которые не поддерживают HTML5, а работают только с Flash, вовсе не показываются, потому что большинство современных мобильных браузеров не могут их воспроизвести.

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

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

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

Адаптивный сайт важно протестировать на всех типах экранов, чтобы избежать негативного пользовательского опыта.

Чем отличается SEO-оптимизация мобайл-версии от адаптива

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

В случае с мобильной версией надо:

1. Сообщить о родственности мобильного и основного сайтов «Яндексу» и Google, прописав атрибуты rel=alternate и rel=canonical. Атрибут rel=canonical устраняет дубли, объединяя одинаковые страницы, и этим улучшает ранжирование сайта. Благодаря атрибуту rel=alternate роботы поисковых систем могут идентифицировать мобильную версию сайта и показывать посетителям релевантный контент. «Яндексу» хватит rel=alternate, для Google нужны оба. Их важно прописать в теге <head> каждой страницы основного сайта со ссылкой на соответствующую страницу мобильной версии.

2. Разместить мобильную версию на поддомене основного сайта.

   Благодаря этому робот сможет корректно определить, что у yoursite.ru есть мобильная версия m.yoursite.ru.

3. Создать отдельный файл robots.txt, который должен быть доступен по адресу m.yoursite.ru/robots.txt. В файле запретить обход служебных страниц, указать на адрес Sitemap (его тоже надо создать отдельно для мобильного поддомена).

4. Установить редирект на мобильную версию в зависимости от User agent устройства пользователя. Если посетитель случайно зайдет со смартфона на основной сайт, то моментально будет перенаправлен на m.yoursite.ru. Так надо сделать для каждой страницы сайта. Например, редирект с yoursite/products.ru должен указывать на m.yoursite/products.ru, а не просто на главную страницу – m.yoursite.ru.

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

В «Рекомендациях по индексированию с приоритетом мобильного контента» указано, что с 1 июля 2019 года оно включено по умолчанию.

Это называется Mobile-First Index.

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

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

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

Выбор – за веб-мастерами.

В чем плюсы и минусы мобильной версии

Несомненные достоинства мобильной версии:

1. Скорость. Можно существенно облегчить сайт, что благоприятно скажется на скорости загрузки страниц.

2. Юзабилити. Так как дизайн рисуется отдельно от основного сайта, можно максимально удобно расположить блоки, адаптировав их расположение под мобильные устройства.

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

4. Экономия трафика. Это серьезный плюс для аудитории, которая сидит в интернете с мобильных устройств.

5. Мобильный контент. Контент можно подбирать без оглядки на основной сайт в поисках тонкой грани между коротко и скудно. Хотя это и противоречит рекомендации Консорциума всемирной паутины (W3C) о публикации одинакового контента для всех устройств.

Недостатки тоже есть, и их немало:

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

2. Большие расходы. Разработка и поддержка отдельной версии сайта требует дополнительных расходов времени и денег.

3. Подходит не всем. Есть основной сайт, есть его мобильная версия. Но еще есть телевизоры, планшеты, дисплеи Retina – как быть с ними? На других экранах сайт может отображаться некорректно. Чаще всего так и бывает.

В чем плюсы и минусы адаптивной верстки

Главные преимущества адаптивных сайтов:

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

2. Отсутствие редиректов. Когда URL-адрес один для пользователей любых устройств, это значительно экономит время и деньги владельца сайта: контент один для всех, нет дополнительных забот для SEO-специалистов.

3. Экономия времени и средств. Быстрая и удобная разработка. Благодаря современным технологиям и фреймворкам – например, BootStrap или Foundation – нет нужды переписывать весь код сайта, достаточно прописать стили в CSS и вставить необходимые операторы.

Но и недостатки тоже есть:

1. Медленная загрузка страницы. Стили и скрипты, которые не используются в мобильной версии, все равно будут загружаться и влиять на скорость. Поэтому для интернет-магазинов с большим ассортиментом товаров мобильная версия сайта предпочтительнее. Хотя с нормальным 4G-соединением эта проблема не слишком заметна. Каналы шириной 40–60 Мбит/с зачастую работают лучше, чем домашний интернет.

2. Отсутствие выбора. С адаптивного сайта пользователь не сможет перейти на полную версию в отличие от мобильного варианта, где выбор есть.

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

Что такое динамический показ

Есть еще вариант адаптивного дизайна – RESS (Responsive Design + Server Side), или динамический показ.

Динамический показ – это когда со стороны сервера приходит HTML-код, адаптированный под конкретное устройство. То есть для ноутбука, смартфона или планшета загружается разный HTML и CSS, при этом сохраняется один URL-адрес. Казалось бы, идеально. Но нет.

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

Уходят и время, и деньги, поэтому такое решение подходит далеко не всем проектам.

Читайте также: Как увеличить скорость загрузки сайта и от чего она зависит

Так что же выбрать?

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

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

Это все – пользовательский опыт (UX – user experience). UX – это то, как вы относитесь к тому или иному интерфейсу. И его тоже надо учитывать, когда вы выбираете, как именно адаптировать ваш сайт.

Не только Google – весь мир движется к принципу Mobile-First.

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

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

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

При помощи калькулятора для расчета стоимости digital-услуг на сайте Workspace вы узнаете примерную стоимость выполнения работ, и сможете уточнить все детали со специалистом, выбрав его в разделе с вакансиями и резюме IT-специалистов.

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

что лучше с точки зрения SEO — SEO на vc.ru

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

29 287 просмотров

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры», рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

Преимущества адаптивных и мобильных сайтов

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс. Маркет» — мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

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

Мобильная версия — более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

Хочу отметить ещё одну технологию — RESS. Она показывает пользователю десктопный или мобильный шаблоны в зависимости от устройства, но при этом URL-адрес страницы не меняется. RESS сочетает описанные выше плюсы адаптива и мобильной версии. Но у неё есть и два минуса: сложная и дорогая реализации и ошибки с определением редких и непопулярных моделей телефонов.

Проблемы с адаптивной вёрсткой

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

Ошибочная интерпретация адаптива

Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона — десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остаётся видимой, а остальная скрывается с помощью display: none. Так возникают три проблемы:

1. Все элементы контента загружаются дважды: тексты, изображения, заголовки h2 и H6, хлебные крошки, сопутствующие и рекомендуемые товары и так далее. А поисковые системы очень не любят дубли.
2. Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявляла, что игнорирует содержание скрытых блоков, а «Яндекс» — что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создаёт риск попадания под санкции.
3. Код дублируется, и сайт загружается медленнее.

Подобная реализация — неправильный подход к технологии RESS.

Скрытие ненужных элементов

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

Неверное использование JavaScript

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

Почему всё-таки используют адаптивный дизайн

Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.

Также это удобное решение для продвижения на несколько регионов. Мы направляем все усилия на один домен и получаем результат в десктопном и мобильном поисках. Для этого нужно привязать к сайту интересующие регионы в «Яндекс.Справочнике».

А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.

Можно пойти другим путём — использовать геоподдомены, чтобы повысить текстовую релевантность страниц. В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Ещё один плюс — для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам. Такой способ продвижения практикует MediaMarkt.

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

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

Двойная работа по продвижению

Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel=»alternate», настройте индексацию и генерацию XML-карты.

Хаос из-за абсолютных ссылок в контенте

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

• Если у десктопной версии определяется user agent, пользователю откроется мобильная версия страницы.
• В остальных случаях пользователь увидит десктопную страницу, и работа по созданию мобильной версии будет напрасной.

При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/.

Противоречия рекомендаций Google

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

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

У «Яндекса» в этом плане всё чётко — он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel=»alternate» с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.

Неясность требований mobile-first индекса

Чтобы подготовиться к переходу на mobile-first индекс, логично выбрать мобильную версию сайта в качестве канонической страницы. Правда, в рекомендациях относительно mobile-first есть свои неясности. Например, в руководстве Google сказано, что контент мобильной и десктопной версий должен быть аналогичным, но степень «аналогичности» не раскрывает.

А что, если для ранжирования в десктопном поиске требуется определённый блок контента, который в мобильной версии будет лишним, но приоритет будет отдаваться именно мобильной версии?

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

Выдержка из доклада Google о внедрении mobile-first индекса

Бездумное использование турбостраниц

Некоторые внедряют нововведения поисковых систем без разбора, с расчётом повлиять на ранжирование. Например, турбостраницы «Яндекса», которые не заменяют полноценные мобильные страницы в поиске, включают малую часть пользовательской функциональности и являются менее конверсионными. Если у вас коммерческий сайт и вы уверены в качестве мобильной версии, не спешите внедрять «турбо» — даже для страниц со статьями и обзорами.

Снижение эффекта от внешних ссылок

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

Особенности продвижения в регионах

Выше мы говорили о двух способах регионального продвижения адаптива — с использованием единого домена и геоподдоменов. Рассмотрим эти варианты и для мобильных версий.

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

Вариант с использованием поддоменов вроде m.spb.site.ru или spb.m.site.ru мы вообще исключаем. Хотя «Холодильник.ру», например, его использует. Но в этом случае нужно настраивать адресацию между всеми регионами мобильных и десктопных версий, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров. Это огромная работа, которая вряд ли окупится.

Отправка на проверку «мобилопригодности»

Если не отправить на проверку «мобилопригодности» оптимизированную версию сайта в «Яндекс.Вебмастере», он может не появиться в мобильной выдаче. Проблема касается и адаптива. Такое случается не всегда, но рекомендую следить за сообщениями в «Вебмастере».

Фрагмент общения с техподдержкой «Яндекса» о присвоении региона мобильной версии сайта

Почему же используют мобильные версии

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

Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива. Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование.

Какой вариант выбрать

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

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

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

Выдержка из руководства Google об индексировании сайтов, использующих RESS

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

Благодарю SEO-специалистов Валентину Кузнецову, Алексея Афонина и Игоря Малышева, которые помогли собрать информацию, используемую в колонке.

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

хэндбук заказчика

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

С вами снова рубрика «Хэндбук заказчика», в которой мы рассказываем, как сделать сайт и не облажаться.

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

У юзеров интернета в последние годы наблюдается тенденция срастания со смартфоном — доля мобильного трафика перевалила за половину ещё в 2014 году и с тех пор только увеличивается. Это важно учитывать, потому что хорошие сайты делаются в первую очередь для пользователей, а не для выставки, начальства или себя любимого. Всегда думайте о тех 60%, которые променяли компьютер на смартфон и планшет — не дайте им пожалеть о своём выборе.

Если вы настолько суровы, что нужды пользователей вас не беспокоят, сделайте адаптив ради SEO. Гугл теперь учитывает, удобно ли просматривать сайт с мобильных устройств. Если нет (а проверить можно здесь) — отправляет его в поисковой выдаче туда, где не ступает нога человека.

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

Какие есть варианты попроще?

Есть два решения — адаптивная вёрстка и мобильная версия сайта. Их опишем подробно, но позже. А пока поговорим, что бывает, если не заморачиваться с мобилками.

Вариант 1. Резиновый сайт. Это обычный сайт, любой, кроме самых древних — времён башорга и популярности ЖЖ. Он подстраивается под размеры разных экранов, сохраняя изначальное расположение элементов. Есть побочный эффект — чтобы рассмотреть мелкие детали, придётся поработать пальчиками и увеличить нужное место.

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

Вариант 2. Высшая наглость — показывать заглушку, если сайт открыт не на большом экране. А на ней написать «Мы так старались, когда делали супер-эффекты и 3D плюшки. Но ваш убогий экранчик не передаст прелесть нашего дизайна, поэтому посмотрите сайт с компьютера, ок?»

Последний вариант не любят пользователи, и оба не одобряют поисковики. Так что сделать с сайтом, чтобы все были довольны?

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

Мобильная версия сайта — это отдельный сайт (вот это поворот!), со своим дизайном и функциями. Разрабатывается дополнительно к основному, десктопному.

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

Слева веб-версия, справа — мобильная.

Слева веб-версия, справа — мобильная.

Отсюда же вытекает минус мобильных версий — здесь сложно найти что-то кроме фукционала. Если пользователь плотно подсел на десктопную версию, любит перечитывать раздел «О нас» и узнавать погоду из виджета на главной странице, мобильный вариант сайта его разочарует.

Хотя он почти всегда найдёт кнопку «Показать полную версию». Нажав на неё, увидит любимый сайт — правда, совершенно не предназначенный для просмотра на маленьком экране.

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

Отзывчивая и адаптивная вёрстка

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

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

У адаптивного сайта три варианта — также для десктопа, планшета и телефона в вертикальном положении. Если поиграться с размером окна, можно увидеть, как они переключаются, о ужас! — не плавно. На границе в 768 px и 320 px можно увидеть, как меняются расположение блоков, схлапывается меню, иконки становятся попроще. Но пользователей мобильных девайсов это не коснётся — они видят версию только для своего устройства.

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

Фото: experience.sap.com

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

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

Фото: blog.froont.com

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

Что выбрать?

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

Посмотрите внимательно. Вдохните. Выдохните. Подумайте о SEO. Загляните в кошелёк. Адаптивная 12-колоночная версия стоит минимум 20% от цены вёрстки плюс работа программистов (16-24 часа). С другим количеством колонок — больше. А стоимость мобильной версии рассчитывается индивидуально.

Если резиновый сайт — не вариант, осталось выбрать между адаптивной вёрсткой и мобильной версией. Последняя подойдёт, если на сайте много данных, которые в маленький экран поместятся только с ритуальными танцами и бубном. Или если его функционал можно урезать до одной-двух кнопок КУПИТЬ/ ЗАКАЗАТЬ.

А в остальных случаях — выбирайте адаптивную вёрстку. И расслабьтесь, дальше мы всё сделаем сами.

Какой мобильный дизайн лучше всего подходит для оптимизаторов?

Время от времени в индустрии оптимизации конверсии возникают большие дебаты. Были дебаты о карусели, дебаты о гамбургер-меню, дебаты о сгибе и т. д.

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

Это m(Dot) дизайн, адаптивный дизайн или адаптивный дизайн? Все три варианта имеют свои уникальные плюсы и минусы с точки зрения UX и SEO, но какой из них больше всего подходит для тех, кто регулярно проводит эксперименты и тесты?

Во-первых, что такое дизайн m(Dot)?

m(Dot) Дизайн – оригинальное решение для мобильных посетителей. До появления дизайна m(Dot) мобильным посетителям приходилось ждать, пока загрузится весь сайт, а затем с трудом ориентироваться в дизайне и UX, созданных для посетителей с компьютеров.

Сегодня трудно представить себе сайт, на котором нет какого-либо мобильного решения.

При использовании m(Dot) design вы должны создать отдельную версию своего сайта, специально оптимизированную для мобильных пользователей. Например, это был дизайн m(Dot) от Facebook…

Как правило, вы заметите меньше контента, упрощенную навигацию, меньше изображений и т. д.

Что такое адаптивный дизайн?

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

Вот как это определяет Google…

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

Вот, например, как сайт HAUS выглядит на десктопе…

А вот этот же сайт на мобильном телефоне…

Видите, как дизайн сайта буквально реагирует на размер устройства посетителя? Это адаптивный дизайн в действии.

Что такое адаптивный дизайн?

Адаптивный дизайн, также известный как динамический дизайн, является еще одной современной альтернативой m(Dot) дизайну сайта. Здесь сервер определяет тип устройства, которое использует посетитель, а затем загружает правильную версию сайта.

Так, например, если вы просматриваете на своем iPad, сервер загрузит версию сайта для планшета.

По сути, у вас есть три разные версии вашего сайта…

1. Сайт для ПК;
2. Сайт для планшета;
3. Мобильный сайт.

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

Каков текущий мобильный ландшафт?

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

1. Люди меняют устройства несколько раз, прежде чем совершить покупку.

Джоэл Харви из Conversion Sciences объяснил это аудитории CXL Live несколько лет назад…

Джоэл Харви, Conversion Sciences:

«Почти 50% мобильных исследователей начинают с поисковых систем. Остальные начинают с фирменных веб-сайтов и фирменных приложений. Итак, я бы предположил, что многие из них — это бренды, к которым они уже привязаны, и я бы также предположил, что большой кусок — это Amazon.

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

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

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

Итак, нужно быть готовым к посетителям, использующим самые разные устройства. Несколько лет назад, по данным Pure Oxygen Labs, это был анализ того, как готовятся 500 крупнейших ритейлеров…

Источник изображения

Как вы видите, m(Dot) быстро снижался.

Адаптивный дизайн быстро влез. Он определенно стал мейнстримом и занимает много внимания…

Было обнаружено, что больше розничных продавцов используют адаптивный дизайн, чем адаптивный. Несколько лет назад ожидалось, что он вырастет до 20% (или больше). Почему?

Брайан Клайс из Pure Oxygen Labs объясняет…

Брайан Клайс, Pure Oxygen Labs:

«Он представляет ритейлерам решение «Златовласки»: страницы mdot работают быстро, но используют отдельные URL-адреса и их сложнее оптимизировать. Адаптивные страницы интегрированы для упрощения обслуживания и SEO, но медленны и перегружены для мобильных пользователей. Динамически обслуживаемые страницы — это «правильное» решение, сочетающее в себе лучшее из одного URL-адреса, макета, оптимизированного для устройства, и быстро загружаемых страниц, которые просты в обслуживании и хороши для мобильного SEO». (через Pure Oxygen Labs)

Итак, в конце концов, m(Dot)-сайты уходят в прошлое, в то время как отзывчивый дизайн и адаптивный дизайн борются за первое место.

Развитие адаптивного мобильного дизайна

Сайты m(Dot) были созданы потому, что они лучше, чем пытаться загрузить полную настольную версию сайта на мобильное устройство. Их также было довольно легко создать, а это значит, что они не будут занимать слишком много ресурсов.

К сожалению, существует длинный список проблем, связанных с быстрым и дешевым способом…

• Вам необходимо управлять двумя отдельными сайтами и оптимизировать их.
• Перенаправление замедляет загрузку, что, как мы все знаем, убивает конверсию.
• Google не очень любит редиректы (потому что требует дополнительных ресурсов на их стороне).
• Вы когда-нибудь пытались поделиться ссылкой m(Dot) с кем-то на рабочем столе? Это ужасный опыт.
• Вы собираетесь создавать новый поддомен для каждого устройства? Таблетки? Игровые приставки? Смарт ТВ?

Эти проблемы позволили адаптивному дизайну расцвести. Фактически, он решает три основные проблемы, которые преследуют m(Dot)-сайты…

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

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

Источник изображения

Google подтвердил свое предпочтение адаптивному дизайну…

Адаптивный веб-дизайн: один и тот же HTML-код отображается на одном и том же URL-адресе независимо от устройства пользователя (например, настольный компьютер, планшет, мобильный телефон, невизуальный браузер), но отображение может отображаться по-разному в зависимости от размера экрана. Google рекомендует адаптивный веб-дизайн, потому что это самый простой шаблон проектирования для реализации и поддержки.

Но был осторожен, добавив, что Google не поддерживает какой-либо конкретный формат URL-адресов, если доступны страницы и все ресурсы страницы.

Адаптивный дизайн также является стандартной практикой для инструментов целевых страниц…

Проблемы с адаптивным дизайном

Но нет ничего идеального, верно? У адаптивного дизайна есть свои проблемы, как и у m(Dot).

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

Джоэл объясняет, как адаптивный дизайн может повлиять на скорость…

Джоэл Харви, Conversion Sciences:

«Адаптивный дизайн, потому что им приходится принимать все эти решения — и дела идут лучше, но — два года назад Internet Retailer обнаружил, что для крупных компаний электронной коммерции с адаптивным дизайном загрузка домашних страниц занимала в среднем 18,24 секунды.

Это слишком долго.

Иногда, продолжает Джоэл, адаптивный дизайн принимает неверные решения…

Джоэл Харви, Conversion Sciences:

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

Но он будет принимать глупые решения, и, кстати, для этого мы рискуем коэффициентом конверсии нашего десктопа.

Это не означает, что отзывчивость — это не то направление, в котором нужно двигаться, это просто означает, что вы должны делать это ответственно. Вы принимаете решения и проверяете каждую вещь».

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

Слишком часто редизайн делается на основе субъективных мнений, а не фактических исследований конверсии. Результат? Конверсионный танк.

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

Это также ограничивает ваши возможности тестирования. Допустим, вы провели A/B-тестирование вашего адаптивного дизайна, и оно привело к снижению конверсии на 15%.

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

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

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

Несмотря на то, что адаптивный дизайн, безусловно, привлекает внимание, Брайан утверждает, что многие компании переходят на адаптивный дизайн, чтобы решить проблемы, связанные с адаптивным дизайном…

Брайан Клайс, Pure Oxygen Labs:

мобильное решение первого поколения; адаптивный дизайн представляет собой второе поколение индустрии. Но, как и его предшественник, у отзывчивого решения есть собственные технические недостатки, которые незаметно подталкивают ритейлеров к решениям с динамическим обслуживанием». (через Pure Oxygen Labs)

Итак, чем адаптивный отличается от адаптивного?

Он легче, а значит быстрее загружается.

Как упоминалось выше, одной из самых больших проблем адаптивного дизайна является скорость. » Ритейлеры правы в том, что с осторожностью относятся к адаптивности, учитывая влияние скорости страницы на онлайн-конверсию и рейтинг в поиске». (через Pure Oxygen Labs)

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

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

Питер Нельсон из UnDelay.io, создатель адаптивных целевых страниц, описывает тест скорости, который провела его команда, и то, как адаптивность сочетается с адаптивностью…

Питер Нельсон, UnDelay.io:

«На самом деле мы провели собственное тестирование производительности около года назад. Мы использовали Dotcom-Monitor, который дал нам водопад, время загрузки и вес страницы.

Мы загрузили тот же контент, формы, изображения, копии и т. д. на платформы наших конкурентов, которые предлагают адаптивное решение.

Вес нашей мобильной страницы в среднем был примерно на 75% меньше, чем у них».

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

Catchpoint Systems также проверила скорость адаптивного дизайна по сравнению с отзывчивым дизайном. Они создали два одинаковых сайта на WordPress. У обоих был один и тот же текст и изображения, одно и то же содержание. Неудивительно, что оба сайта работали одинаково на десктопе.

Однако когда вы переключаетесь на мобильные устройства, все становится интереснее…

Источник изображения

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

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

Источник изображения

Преимущества по всем направлениям, но вы все равно увидите, что адаптивный быстрее.

Наконец, они объединили CSS и JavaScript, чтобы уменьшить количество загружаемых объектов…

Источник изображения

Опять же, преимущества по всем направлениям, но адаптивность все же быстрее. Мне не нужно говорить вам, насколько ценна эта скорость, это сэкономленное время.

Оптимизация для каждого устройства, упрощающая тестирование

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

Питер объясняет, почему это важно для оптимизаторов…

Питер Нельсон, UnDelay.io:

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

Вот почему вам нужно настроить путь клиента по типу устройства. Он начинается с анализа намерений посетителя в отношении каждого устройства. Чего они хотят добиться, используя свое мобильное устройство? Какова их главная цель?»

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

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

В этом конкретном примере, зачем тратить время на подталкивание мобильного трафика к конверсии, когда они там для проведения исследований?

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

Вы могли бы, по сути, пожертвовать настольным компьютером в пользу мобильного телефона или мобильным телефоном в пользу настольного компьютера или планшетом в пользу мобильного телефона… что угодно.

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

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

Питер Нельсон, UnDelay.io:

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

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

Еще один важный момент, на который стоит обратить внимание, — A/B-тестирование. Мы говорили о проблемах, которые мешают адаптивному дизайну, когда дело доходит до фактического тестирования. С адаптивным дизайном это работает примерно так…

Источник изображения

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

Но… Это требует больших ресурсов

Все это звучит великолепно, так какого черта кто-то использует адаптивные или m(Dot) сайты? Ну, потому что адаптивный дизайн тоже имеет свои недостатки. А именно, что требуется много человеческих и денежных ресурсов, чтобы осуществить…

Брайан Клайс, Pure Oxygen Labs:

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

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

Динамически обслуживаемые мобильные страницы могут решить проблемы со скоростью загрузки адаптивного дизайна, избегая при этом требований мобильного SEO для сайтов mdot». (через Retail Dive)

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

Питер возвращает нас к тому времени, когда адаптив был впервые представлен…

Питер Нельсон, UnDelay.io:

«Адаптивность существует уже некоторое время, и первыми реализациями адаптивности были сайты с 30-40 шаблонами, по одному для каждой модели устройства.

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

В то время только крупные компании с ресурсами могли воспользоваться преимуществами адаптивности.

Ого… 30-40 разных шаблонов? Готов поспорить, что никто не читает это и не думает: «Звучит весело». Времени разработчика не хватает, особенно времени старшего разработчика. Небольшие и даже средние компании просто не имеют ресурсов для такого дизайна, даже если они этого хотят.

Как развивается адаптивный дизайн

В статье UXPin написано…

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

Я должен согласиться. Адаптивный дизайн по-прежнему становится все более доступным для малого бизнеса. Я ожидаю, что отзывчивый будет эквивалентом m(Dot) в не столь отдаленном будущем.

Несмотря на то, что все еще находится в стадии бета-тестирования, вы можете видеть, что адаптивные конструкторы, такие как UnDelay.io, уже предприняли шаги…

Питер Нельсон, UnDelay.io:

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

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

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

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

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

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

Мобильная оптимизация — это не только технологическая проблема

Талия Вульф из GetUplift попадает в самую точку о дебатах об отзывчивости и адаптивности…

Талия Вольф, GetUplift. co :

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

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

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

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

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

У обоих есть плюсы, у обоих есть минусы. Ваш сайт потерпит неудачу из-за того, что вы выбрали адаптивный дизайн вместо адаптивного? №

На самом деле все сводится к следующему…

• Знаете ли вы, кто ваша аудитория?
• Знаете ли вы, чем отличается поведение вашей мобильной аудитории (по сравнению с настольной)? Как насчет поведения вашей аудитории с планшетами?
• Знаете ли вы, что они ищут на каждом устройстве? Чего они пытаются добиться?
• Провели ли вы надлежащее исследование конверсии, чтобы определить проблемные области и облегчить им поиск и выполнение того, что они намеревались сделать на этом устройстве?

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

Заключение

Подводя итог…

1. m(Dot) не мертв, но его жизненные силы слабы.
2. Responsive привлекает много внимания, но имеет неоспоримые проблемы со скоростью и гибкостью. Это по-прежнему наименее популярный из трех вариантов.
3. Adaptive решает основные проблемы адаптивного дизайна и лучше подходит для оптимизации в теории, но требует больших человеческих и денежных ресурсов. Технологии начинают это исправлять; ожидать значительного роста в этом пространстве.
4. Более важным, чем эти дебаты, является понимание вашей аудитории, ее поведения на разных устройствах, их желаний/потребностей на разных устройствах и того, как облегчить им получение того, что они хотят/нужно, на каждом устройстве.

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

Адаптивный и адаптивный дизайн: выберите лучшее для своего веб-сайта

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

В отличие от адаптивного веб-дизайна, адаптивный дизайн имеет фиксированные макеты, адаптируемые к определенным размерам экрана. Если у пользователей адаптивный веб-дизайн, им необходимо создать несколько версий сайта, чтобы обеспечить совместимость с различными устройствами. Вы хотите прояснить разницу между отзывчивым и адаптивным дизайном и какой дизайн лучше всего подходит для лучшего взаимодействия с пользователем? Вы хотите улучшить пользовательский опыт, выбрав правильный дизайн сайта для своего сайта? Если да, то вы в безопасном месте! Благодаря разнообразию мобильных устройств разработчики веб-сайтов и дизайнеры стремятся создавать несколько веб-макетов. Разработка гибкого макета сайта, который масштабируется на всех устройствах, является сложной задачей. Вам может быть интересно, как сделать ваш сайт масштабируемым для всех устройств? Итак, ответ заключается в том, что оба дизайна могут удовлетворить ваши потребности в дизайне, но найти лучший макет сложно. В этой статье мы расскажем о разнице между этими двумя веб-дизайнами и о том, как они могут улучшить взаимодействие с пользователем. Давайте углубимся в детали:

Прежде чем углубляться в различия, давайте рассмотрим, что представляют собой эти два дизайна:

Адаптивный веб-дизайн

Адаптивный дизайн настраивает свои элементы дизайна в соответствии с шириной экрана. Эти веб-дизайны отображают контент в соответствии с размером экрана. Допустим, вы открываете адаптивный сайт в своем браузере, а затем меняете окно браузера; содержимое будет автоматически корректироваться в соответствии с экраном браузера. Точно так же адаптивные веб-сайты автоматически настраивают их на мобильных экранах.

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

Адаптивный веб-дизайн

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

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

• 320 пикселей
• 480 пикселей
• 760 пикселей
• 960 пикселей
• 1200 Pixels
• 16101046. думаю, что оба веб-дизайна одинаковы. Но есть факторы, которые отличают адаптивный дизайн от адаптивного.

  Давайте углубимся в эти факторы:

  1. Гибкость

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

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

  2. SEO

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

  3. Контроль

  Адаптивные веб-сайты предлагают меньше контроля, но менее опытные разработчики могут легко создавать и поддерживать адаптивный сайт. Благодаря системам управления контентом (CMS), таким как WordPress, Joomla и Drupal, которые предлагают бесплатные встроенные шаблоны для разработки сайта, удобного для мобильных устройств. С другой стороны, адаптивные веб-сайты требуют больших усилий со стороны опытных дизайнеров и имеют гораздо больший контроль над макетом сайта. Кроме того, адаптивный дизайн также является плавным, но в адаптивном веб-дизайне используется процент плавности при масштабировании. Эти проценты могут снова вызвать скачок при изменении размера экрана. Процент гибкого макета определяет, что сайт будет регулировать размер экрана для каждого пользователя.

  4. Макет

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

  5. Сложность

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

  6. Время загрузки

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

  1. Бесшовный пользовательский интерфейс

  Адаптивный веб-дизайн обеспечивает единообразный и бесшовный пользовательский интерфейс на всех устройствах, таких как компьютеры, мобильные телефоны и т. д. Это чувство единообразия и бесшовности прививает чувство принадлежности и доверия, даже если пользователи посещают эти сайты. на разных устройствах. Dropbox, Dribble и GitHub — лучшие примеры веб-приложений, обеспечивающих удобство работы пользователей.

  2. Доступность

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

  3. Автоматизация

  Адаптивный дизайн проще в разработке и требует меньше времени для внедрения. Хотя он предлагает пользователям ограниченный контроль, он по-прежнему является наиболее предпочтительным методом для привлечения большего количества посетителей. Вы также можете использовать системы управления контентом (CMS), такие как WordPress, для создания адаптивного сайта без помощи ИТ-специалистов.

  4. Улучшение сканирования и индексирования браузером

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

  5. SEO-оптимизация

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

  6.

  Единообразие

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

  7. Минимум обслуживания

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

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

  1.

  Низкая производительность

  Другим недостатком адаптивного сайта является его медленное время загрузки. Поскольку адаптивный дизайн имеет одинаковый контент для всех устройств, загрузка всего контента занимает больше времени. Даже если пользователь загрузит мобильную версию сайта, десктопная версия тоже загрузится. Исследования показывают, что 40% пользователей покидают сайт, если он не загружается в течение 3 секунд. Таким образом, показатель отказов для мобильных сайтов увеличивается из-за их более медленной работы.

  2. Неполная оптимизация

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

  3. Трудно интегрировать рекламу

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

  4. Отказ от некоторых функций

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

  Изучив плюсы и минусы адаптивного дизайна, вы получите четкое представление о выборе дизайна для своего сайта. Давайте копнем глубже:

  1. Высокая оптимизация

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

  2. Быстрая загрузка

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

  3. Поддержка монетизации

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

  4. Повторно используемые существующие веб-сайты

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

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

  1. Требуются большие усилия

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

  2. Требовать высокого уровня обслуживания

  Поскольку адаптивные веб-дизайны имеют разные макеты для разных сайтов, каждый макет требует отдельного обновления после развертывания. Допустим, вы разработали макеты сайта для шести размеров экрана, включая 320, 480, 760, 9.60, 1200 и 1600 пикселей. Таким образом, обслуживание сайта потребует от дизайнеров больших затрат времени и сил. Помимо усилий, обслуживание также требует от владельцев сайта дополнительных денег.

  3. Дорого

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

  4. Сложности в создании ссылок

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

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

  Существуют следующие сценарии, когда вы можете выбрать адаптивный веб-дизайн:

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

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

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

  Заключительные мысли

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

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

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

  В чем разница между отзывчивыми, адаптивными и мобильными сайтами?

  Мобильные адаптивные и мобильные адаптивные сайты — это одно и то же, и оба являются синонимами для мобильных устройств… верно? Не совсем. Вот разбивка различий.

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

  Mobilegeddon был естественным ответом на естественный сдвиг в предпочтениях людей в отношении просмотра веб-страниц, которые все чаще перемещаются в сторону мобильных устройств. Сделав нехарактерно прозрачный шаг, Google уведомил всех об обновлении почти за два месяца до его начала, даже включив советы по повышению удобства для мобильных устройств: избегайте программного обеспечения, такого как Flash, которое не распространено на мобильных устройствах; текст достаточно большой, чтобы его можно было прочитать без увеличения; звенья и кнопки расположены достаточно далеко друг от друга, чтобы вместить пальцы.

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

  Дружественный и адаптивный

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

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

  Видите, мобильный веб-сайт Spirit Airlines — это всего лишь уменьшенная версия настольного сайта?

  
  

  Сравните это с H&M, чей мобильный сайт совершенно другой. Макет сайта для настольных компьютеров не очень хорошо подходит для мобильных устройств. На меньшем экране эти шесть вкладок в верхней части были бы либо слишком громоздкими, либо слишком маленькими для чтения.

  
  

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

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

  Чтобы сохранить примеры Spirit и H&M, я просмотрела оба сайта в своем браузере, прежде чем сделать его более узким. Я сделал его настолько уже, что ни один из сайтов не мог идеально вписаться, но обратите внимание, как вкладки в верхней части H&M сближаются, поэтому все они подходят друг другу. Говоря о вкладках, да, я знаю, что коплю их и что мне следует использовать расширение OneTab.

  
  

  Отзывчивые и адаптивные

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

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

  Этот GIF от Froont, латвийского стартапа, специализирующегося на адаптивном веб-дизайне, прекрасно иллюстрирует разницу:

  Стив Мэдден — пример бренда с адаптивным сайтом. Войдите на сайт продавца со своего компьютера и измените размер окна браузера.