Адаптивный дизайн VS мобильная версия: почему адаптивный победит?
Опубликованно 04.10.2017 21:39
Will Critchlow еще в ноябре прошлого года объявила, что на блоге Distilled появился новый адаптивный дизайн, но то, что я недавно думал, что речь идет о том, что мы не знаем его основные характеристики, не знаем чем такой дизайн хорош в действительности.
В последние месяцы в кругах Интернет-маркетологов говорят об этом часто, но нужен ли такой стандартный дизайн-индустрии?
Ответ для неусидчивых: да. Что такое адаптивный дизайн и как жарко?
Адаптивный веб-дизайн означает, что вы не мобильная версия сайта, версию для планшетов и версию для компьютера отсоедините ваш сайт адаптируется к формату экрана устройства, на котором он выполняется. Пользователь видит все содержимое сайта в удобной для вас форме и, следовательно, сокращенный вариант прошлого сайтов.
Не звучит так, что вы можете придумать лучше, не так ли? Все началось с тщательного и простой теории Ethan Marcotte, изложенных в статье 2010 года под названием "Responsive Web Design". Вместо того, чтобы создавать темы предложено в рамках 800 пикселей, центрируемых дизайнеров на экране, создавать страницы из элементов, размер, форму и положение в зависимости от ширины экрана пользователя. На самом деле, только через запросы в CSS медиа-элементы информацию о получить разрешение экрана и адаптированы под ним.
Для начала простой пример: у нас есть 9 элементов, подписывает от А до я. На маленьком экране, например, планшета или старого компьютера с небольшим монитором, элементы располагаются в сетке 3*3.
Если экран шире элементы могут себя так:
И на телефонах они будут выглядеть так:
Теперь вы увидите "вживую", честно говоря, самые лучшие примеры, как это работает. Начнем с веб-сайта Microsoft.
Если экран относительно мал, страница выглядит следующим образом:
В дизайне от Microsoft все элементы сайта будут на всех возможных платформах.
Но ведь сайты отличаются, рассматривается через мобильные браузеры — вас пространство, да и "браузеру не хватает памяти", чтобы освободить место для более широкий спектр контента. Поэтому Smashing magazine избавляется от "ненужных", как только экран будет поменьше.
В полной версии на сайте есть по центру двухступенчатая навигации слева, главный материалам, поиск и реклама справа. Самое главное центрируется, но в зависимости от ширины экрана.
Как это будет выглядеть на iPad?
Если экран уже относительно, Smashing Magazine поиск и реклама права, но в меню оказывается выше — это просто удобнее для пользователя и поэтому он выглядит более компактным.
А вот так сайт выглядит на Kindle Fire:
Поиск перекочевал в верхнюю часть экрана, но меню остается слева, чтобы добраться до основного содержимого проще.
Но так сайт выглядит на смартфоне:
Как вы видите лишнего, ничего. Навигация "перевоплощается" в выпадающем меню. Поиск перекочевал в хэдер.
Как вы видите, ведет адаптивный дизайн-они будут в целый Арсенал решений для приятных старых добрых "сайтсерфингу" :) Как адаптивный дизайн хорошо с точки зрения SEO?
Юзабилити
Google хочет перенаправлять посетителей на сайты, которые вы ищете. Когда пользователь заходит на сайт, а затем немедленно вернуться на страницу поиска, Google делает вывод, что сайт не соответствует ожиданиям пользователя.
Если вас укороченная мобильная версия сайта или эта версия во многом отличается от рабочего стола пользователь может быть неприятно удивлен и расстроен — ведь он ждет сайт в мобильной версии, что уже нашли в столе. Если у вас вообще нет мобильной версии сайта, 61% посетителей предпочитают что-то более удобный сайт. Увеличьте интенсивность отказов и страницы ранжируются хуже. Если вы отзывчивый веб-дизайн, посетители смогут найти контент, который ищут в лучшем виде.
Duplicate content
Не волнуйтесь, мобильная версия сайта с тем же содержанием — не повод для санкций алгоритма Google Panda, но вы все еще в сети — 2 страницы с одинаковым содержанием. Есть вероятность, что кто-то из пользователей и отправляется не на ту версию сайта. Если сайт адаптивный дизайн — весь контент в одном месте, без перекрытия.
Ранжирование в мобильном поиске
Google заявил, что сайты, адаптированные для мобильных платформ занимает выше при поиске на мобильных устройствах.
Линкбилдинг
Если сайт адаптивный дизайн, веб-ссылка, в то же время является и ссылка на мобильную версию. Учитывая тот факт, что сайты для мобильных платформ — относительно новое явление, ваш сайт быстро обойдет конкурентов в мобильном поиске и, безусловно, получить много обратных ссылок. При этом выгоды и ваш основной сайт (несмотря на то, что борьба доступен для пользователей мобильных платформ). Количество пользователей мобильного Интернета постоянно растет, вебмастера начинают ставить все больше ссылок на сайты для моб. Платформы, разве это не прекрасно?
Легкая Слава
До адаптивного дизайна — "горячая" тема, ваш сайт будет замечен. Каков результат?
Как нетрудно догадаться, если ваш сайт не был адаптирован ранее на мобильной платформе, они наблюдали высокую интенсивность отказов пользователей модных гаджетов.
После внедрения адаптивного дизайна на сайте Distiller, рост трафика за месяц составил более 400%.
Это, конечно, крутой пример, и внедрение адаптивного веб-дизайна не гарантирует вам такой яркий эффект. Но улучшения если вы все сделаете правильно, ваша производительность (!).
Контраргумент
Отзывчивый дизайн — не Святой Грааль Интернет-маркетинга. Есть недостатки, которые стоит проанализировать, прежде чем реализовать адаптивный дизайн.
Выберите время
Адаптивный дизайн "жрут" прилично времени и у дизайнеров и программистов, по крайней мере, потому что и то и другое новое направление, которое нужно освоить. Но чем раньше начнете внедрять, тем лучше — конкуренты будут позади.
Громоздкие Страницы
Если ваш сайт нужно много контента, мы понимаем, что при адаптивном дизайне по-прежнему. Представьте сайт газеты The New York Times на смартфоне?
Поэтому NYTimes.com и CNN.com есть укороченные мобильные версии сайтов. Если вы действуете подобный портал, так же лучше.
Удобство для пользователей мобильных платформ
Как уже упоминалось, пользователи будут ожидать, что открыть сайт на планшете или смартфоне находим то же содержание, что найденные ранее в настольной версии. Даже если вы найдете его, тогда все будет несколько иначе — да и потому что пальцы вместо мыши и клавиатуры. Если вы на вашем сайте — большое количество хорошо перелинкованного материалами, которые подходят вам лучше всего еще мобильная версия сайта. В этом случае адаптивный веб-дизайн — оптимальное решение?
Мы делаем рисеч в Google Analytics.
Конвертирует ваших посетителей в клиентов ПК чаще, чем мобильные пользователи? Если процент конверсии посетителей передвижной ниже в половину, ваш сайт не соответствует стандартам отрасли и они должны работать.
Спросите себя: "Как выглядит мой сайт на экране?"
Выберите пункт меню отчеты > Audience > Mobile > Devices и выберите "Screen Resolution". Посмотрите на топ 10 разрешений и проверьте, как выглядит ваш сайт в каждом из них. Для этого используйте Screenfly. Даже если в половине случаев мобильная версия сайта выглядит вполне сносно, вы должны задуматься о второй половинке :)
Мои пользователи находят Mob. Площадок на вашем сайте, что вы ищете?
Обратите внимание на процент отказов с Mob. Устройств (Standard Reports > Mobile > Overview) Как быстро пользователи покидают сайт? Насколько отказов с Mob. Устройства отличается от процента отказов с ПК? По идее эти показатели должны быть примерно на одном уровне.
Если позволяет время, сделать SEO-аудит, с акцентом на пользователей моб. Платформы, чтобы определить, как ваш сайт должен выглядеть для данной аудитории. Aleyda Solis писал простой Гайд для таких аудитов. Главный Совет: переходите к адаптивному дизайну постепенно — начните с отзывчивый дизайн для компьютера и планшета, например.
Ethan Marcotte пишет, что подходящий дизайн-темы начали появляться в популярных CMS — WordPress, Drupal и Joomla. 5 ошибок, которых лучше избегать
1. Вес Картинки
На многих сайтах — просто отличные фотографии, которые будут загружаться без проблем на ПК, но не так круто выходит для пользователей мобильного Интернета. Статистика жестока: 74% пользователей покинуть сайт через 5 секунд, загрузиться если нет времени на содержание этого времени. Убедитесь, что фотографии весят как можно меньше (я знаю, звучит круто!).
2. Дизайн для всех разрешений экранов
Многие дизайнеры с удовольствием выбирают 1 разрешение смартфона, 1 планшет и 1 ПК и сделать "адаптивный" дизайн для устройств под эти нормы. Но есть стопицот различных гаджетов, и все они отличаются друг от друга. Адаптивный дизайн — это про изменяющиеся элементы в своих размерах на сайте.
3. Они всегда показывают все содержимое
Достаточно сложен весь сайт в версии для смартфонов и планшетов, но в этом смысле и отзывчивый дизайн. Как в примерах выше, единственный контент, где можно безопасно пренебрегать, это реклама (по крайней мере, это не так, что только пользователь на самом видном месте). Вы также можете играть "вокруг" с навигацией (для упрощения). Но не основной контент сайта — пользователи Mob скрыть. Платформы поиска примерно такое же, как и пользователи ПК. Она не нуждается в костылях!
4. Касаясь оптимизации пальцами
Помните, что планшета у вас нет мышей, но в то же время есть пользователи ПК с Windows 8, которые хотят, чтобы управлять сайтом легкими нажатиями на экран. Ваш сайт должен быть удобным и для тех, и для других, но это оптимально только точить под второй (с оглядкой на разрешение экрана).
5. Проверить во всех браузерах
Помните, как в старые времена, пришлось тестировать отображение сайта в IE и Firefox? Теперь вам нужно здесь есть ряд браузеров:
ПК:
? IE9 для Windows 7
? IE10 для Windows 8 (без вспышки)
? Firefox
? Chrome
? Safari
Планшеты/Смартфоны
? Safari
? Default Android browser
? Chrome beta
? Дельфин
? Opera
? Firefox
И это лишь самые распространенные. Не забывайте о различных разрешениях экрана ;)
Последний аргумент: это того стоит!
Категория: Автотехнический раздел