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


Опубликованно 24.09.2017 01:13

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

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

В последние несколько месяцев в кругах Интернет-маркетологов часто говорить об этом, но такая конструкция является промышленным стандартом?

Ответ для неугомонная: да. Что такое отзывчивый веб-дизайн и чем он хорош?

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

Звучит как это может быть лучше, не так ли? Все началось с твердым и простая теория Итан Маркотт, изложенные в статье 2010 года под названием "отзывчивый веб-дизайн". Вместо того, чтобы создавать дизайн в 800 пикселей, по центру экрана дизайнеров пригласили для создания страниц предметов, Размер, форму и расположение которых зависит от ширины экрана пользователя. На самом деле, использовать Media-запросы CSS для элементов, которые получают информацию о разрешении экрана и адаптироваться к нему.

Для начала простой пример: мы имеем 9 пунктов подписанных от А до И. на маленьком экране, например, планшета или старого компьютера с небольшим монитором, детали будут размещены в сетке 3*3.

Если экран шире, элементы могут быть размещены таким образом:

А на смартфонах они будут выглядеть так:

Сейчас смотрю "Реал", откровенно говоря, лучших примеров, как это работает. Давайте начнем с веб-сайта Microsoft.

Когда экран относительно небольшой, на сайте выглядит так:

В Microsoft дизайна всех элементов сайта появляются на всевозможных платформах.

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

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

Как это будет выглядеть на iPad?

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

А вот как сайт выглядит на разжечь огонь:

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

А вот как сайт выглядит на смартфоне:

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

Как вы можете видеть, проектировании адаптивного дизайна вы руководствуетесь целый арсенал решений, которые способствуют комфортному старый добрый "siderperu" :) Что адаптивный дизайн-это хорошо с точки зрения SEO?

Юзабилити

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

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

Дублированный контент

Не волнуйтесь, мобильная версия сайта с тем же контентом — не повод для санкций алгоритма Google Панда, но вы все-таки сеть — 2 сайта с одинаковым контентом. Есть вероятность, что кто-то из пользователей будут направляться не на "ту версию" сайта. Если ваш сайт имеет адаптивный дизайн — весь контент в одном месте, без дублирования.

Ранжирование в мобильном поиске

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

Ссылка здание

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

Легкая слава

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

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

После внедрения адаптивного дизайна на сайт Дистиллятор, роста трафика в месяц составил более 400%.

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

Счетчик

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

Выберите время

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

Громоздкие страницы

Если ваш сайт имеет много Контента, вы должны понимать, что адаптивный дизайн, все это останется. Можете ли вы представить сайте газеты Нью-Йорк Таймс на смартфоне?

Вот почему NYTimes.com и CNN.com существует сокращенный мобильной версии сайтов. Если вам нравится Portal, лучше будет сделать то же самое.

Удобство для пользователей мобильных платформ

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

Давайте проведем исследование в Google аналитике.

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

Спросите себя: "почему мой сайт на своих экранах?"

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

Найти моб пользователей. платформы на вашем сайте что вы ищете?

Обратите внимание на процент отказов с толпой. устройства (стандартные отчеты > мобильные устройства > Обзор) как быстро пользователи покидают ваш сайт? Как процент отказов с толпой. устройства отличаются от процент отказов с вашим ПК? Идеи эти целевые показатели должны быть примерно на одном уровне.

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

Итан Маркотт пишет, что подходящих тем оформления уже начали появляться в популярных CMS — Вордпресс, Друпал и джумла. 5 ошибок, которых следует избегать

1. Вес картинки

На многих сайтах — просто отличные фото, которые могут быть легко загружены на ПК, но не так это касается пользователей мобильного Интернета. Статистика беспощадна: 74% пользователей оставляют сайт после 5 секунд, если не успеете за это время загрузиться. Убедитесь, что картинки весят много (я знаю, звучит круто!).

2. Дизайн для всех разрешений экрана

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

3. Всегда отображать все содержимое

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

4. Оптимизировать для прикосновения пальцами

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

5. Тест во всех браузерах

Помните, как в старые времена, вы должны были проверить отображение сайта в IE и Firefox? Теперь вам нужно сделать здесь ряд браузеров:

ПК:

? В IE9 для Windows 7

? В ie10 на Windows 8 (без вспышки)

? В Firefox

? Хром

? Сафари

Планшетов/смартфонов

? Сафари

? Браузер по умолчанию андроид

? Хром бета

? Дельфин

? Опера

? В Firefox

И это только самые распространенные. Не забывайте о различных разрешениях экрана ;)

Последний аргумент: это того стоит!



Категория: Телефония