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

Sketch: как нарисовать сайт для мобильного устройства

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

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

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

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

Принцип первый: Flash-элементы

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

2. Что такое адаптивная вёрстка

Адаптивная вёрстка — адаптация сайта под устройство, с которого пользователь переходит на сайт.

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

Google в первую очередь рекомендует делать акцент на адаптации сайта к смартфонам.

Адаптивная вёрстка избавляет от потребности в создании отдельного домена для мобильной версии, так как используется один адрес. При правильном внедрении адаптивной вёрстки сайт корректно отображается на разных экранах. Функционал сохраняется, но страницы могут дольше грузиться из-за тяжеловесных элементов (скрипты, объёмные изображения, gif-картинки, фильтры, калькуляторы). Чтобы снизить нагрузку, желательно упростить функционал.

Что можно сделать для улучшения адаптивного дизайна:

  • адаптировать изображения под размер экрана через параметр CSS;
  • масштабировать видео в CSS;
  • добавить горизонтальную прокрутку таблиц;
  • скрыть длинное описание под кнопками;
  • частично скрыть пункты меню либо спрятать все меню под «гамбургером»;

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

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

28. Google Developers – инструмент для проверки от Google.

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой

Pretty! This was a really wonderful post. Thank you for providing these details.

I blog frequently and I really appreciate your content. Your article has really peaked my interest. I am going to bookmark your website and keep checking for new details about once per week. I subscribed to your RSS feed too.

Nice post. I learn something totally new and challenging on websites I stumbleupon every day. It’s always useful to read through articles from other authors and practice something from other sites.

Лучший инструмент для создания сайтов адаптивных это руки) На помощь может придти плагины, скрипты, css-фреймворки. По моему мнению все эти сервисы шляпа. Никако инструмент не сделает адаптив лучше чем верстальщик. Ни один инструмент не может сказать что сайт оптимизирован на все 100%.

Пример:
На один сайт я поставил медиа запрос 320-480px (популярное разрешение мобилок). Однако, Яндекс Бета Вебмастер, Пейдж Спид и Мобайл Фёрст от Гугла говорят мол крч все з.

Лучший инструмент для создания сайтов адаптивных это руки) На помощь может придти плагины, скрипты, css-фреймворки. По моему мнению все эти сервисы шляпа. Никако инструмент не сделает адаптив лучше чем верстальщик. Ни один инструмент не может сказать что сайт оптимизирован на все 100%.

Пример:
На один сайт я поставил медиа запрос 320-480px (популярное разрешение мобилок). Однако, Яндекс Бета Вебмастер, Пейдж Спид и Мобайл Фёрст от Гугла говорят мол крч все збс, все оптимизировано. Но заглянув к примеру в Метрику срез по году по популярным разрешениям экранов, там много больше разрешений. Так вот, если делать адаптив под все разрешения хотя бы те что >960px то там как минимум 5 итераций надо. По времени и ресурсам накладненько. Но не сделав этого, пользователь зайдя с планшета ужаснется от внешнего вида и убежит как испуганная крыса с корабля.

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

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

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

Рассмотрим несколько характеристик эффективного мобильного сайта:

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

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

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

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

Как адаптировать сайт под мобильники

Три основных формата: адаптивная вёрстка, мобильная версия сайта и мобильное приложение. Я собрал комментарии экспертов и примеры адаптации, чтобы вы могли выбрать оптимальный вариант для своего (или несколько, одно другому не помешает).

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

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

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

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

Маркетолог Ольга Нерода в той же статье рассказывает о планах «Живой кофе»: «С введением удобной адаптивной версии планируем увеличить количество мобильных посещений до 50% и снизить показатель отказов при переходе с гаджетов. Ассортимент нашего магазина небольшой, товар не требует долгой аналитики или больших ярких картинок, поэтому цифра вполне реальна».

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

Студия Холмы на экране смартфона

Важно: если вы ставите на свой сайт, убедитесь, что этот сайт тоже адаптирован под мобильные устройства.

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

Мобильная версия — специальная версия сайта для смартфонов и планшетов. В отличие от адаптивной вёрстки, мобильная версия имеет отдельную страницу (как правило m.site.com или pda.site.com) и корректно отображается только на мобильных устройствах.

Мобильная версия «Техносила»

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

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

С ним не согласен директор по электронной торговле «Техносилы» Максим Шелуханов — он считает такой формат допустимым. «Мы не видим противоречия „или мобильный сайт, или мобильное приложение“, полагая их скорее разными ступеньками одной и той же лестницы. После ребрендинга, объявленного осенью 2015 года, Техносила запустила мобильную версию сайта, а мобильное приложение планирует представить в 2016 году».

Мобильное приложение

Мобильное приложение — это программа, которая устанавливается на смартфон (как правило, на базе операционных систем iOS или Android). Распространяются через специальные магазины приложений — App Store для iOS и Google Play для Android. В приложениях больше функций, что упрощает покупки. Но приложения стоят дороже адаптивной вёрстки и мобильных версий.

Приложение AliExpress для Android

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

Основатель мобильной рекламной сети Unilead Дмитрий Семенов отмечает: «В потреблении медиа приложения давно победили сайты. То же верно и для электронной торговли. Адаптации сайта магазина для мобильных устройств уже недостаточно. Приложения могут стать самым эффективным каналом продаж в силу своей нативности, доступа к функциям, удобства и скорости работы».

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

Мобильные приложения используют крупные игроки, вроде маркетплейсов Amazon, eBay, AliExpress и Яндекс.Маркет. Однако, такой формат осваивают и обычные и здесь Эквид может помочь.

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

Пример мобильного приложения сделанного с помощью ShopApp

  • Опросите покупателей своего удобно ли им просматривать ваш сайт с телефона? Насколько они готовы оплачивать покупки с телефона или планшета?
  • Адаптированный под смартфоны и планшеты повышает конверсию и улучшает позиции в поисковой выдаче. Изучите, насколько дружелюбен ваш сайт для мобильных устройств. Проверить это можно с помощью бесплатного инструмента Google.
  • Выберите оптимальный формат для адаптации под смартфоны и планшеты. Можно сделать сайт адаптивным или разработать мобильную версию. Если есть средства, то сделайте мобильное приложение. Или воспользуйтесь ShopApp, если ваш магазин на Эквиде.

Virgin America

Авиакомпанию Virgin America и ее харизматичного лидера Ричарда Брэнсона хорошо знают и в Беларуси. Пожалуй, у этой компании самые стильные самолеты и самые красивые стюардессы.

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

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

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

Мобильная и полная версия на смартфоне

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

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

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

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

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

Версия без адаптации и с адаптацией для мобильного

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

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

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

Принцип пятый: скорость загрузки

Речь пойдет о скорости загрузки. Сайт на мобильных устройствах должен грузиться мгновенно. Иначе пользователь просто его закроет. Если на PC пользователи готовы долго ждать загрузки сайта, то на мобильных устройствах они ждут от 3 до 5 секунд и без раздумий закрывают сайт, который никак не хочет открываться.

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

Еще раз напоминаем, что наличие мобильной версии сайта обеспечивает вам качественный трафик из мобильной выдачи поисковиков. Нет мобильной версии – нет мобильного трафика. Помните это.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector