Адаптация сайта под мобильные устройства: Как правильно создать мобильную версию сайта

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

Денис Ежков, эксперт курса «Адаптивная и мобильная вёрстка» и руководитель отдела вёрстки ITECH.group, поделился опытом оценки дизайн-макетов для мобильной вёрстки.  

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

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

Есть что скрывать

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

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

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

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

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

Программа обучения: «HTML-верстка: с нуля до первого макета»

Не дело принципа

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

Очень часто в заказной разработке заказчик не сразу видит конечный вид какого-то сложного сервиса. Например, конфигуратор комплектаций автомобиля. Элементы страницы, с которыми должен взаимодействовать пользователь, красиво выглядят на макете, но могут быть абсолютно нежизнеспособны в реально свёрстанном интерфейсе. Такой конфигуратор, в первую очередь, должен быть удобен для использования на десктопе, это основная доля посетителей. Соответственно mobile-first в таком случае будет вторичен.

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

И также важный фактор — сроки и приоритеты заказчика. Если заказчику важно запустить сначала десктоп-версию раньше, и только потом мобильную, то принцип mobile-first не сработает.

Loading…

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

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

О резиновых макетах

Как правило, для адаптивных страниц характерны точки разрыва, соответствующие популярным разрешениям устройств: 1280, 1024, 960, 768, 640, 480, 320 пикселей.

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

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

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

О тестировании

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

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

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

Читать ещё: «10 ошибок начинающего верстальщика и как их избежать»

И, наконец…

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

1. Упорядоченность в слоях. Слои с hover-состояниями или со всплывающими окнами должны быть вынесены отдельно.
2. Наличие артборда со всеми стилистическими элементами. Там должны присутствовать используемые цвета, шрифты, элементы интерфейса.
3. К макету должны прилагаться шрифты. В идеальном случае — нарезанные картинки и иконки.
4. В макете должны быть вертикальные сетки, а также горизонтальные, отмеряющие вертикальный ритм.
5. Макет должен быть очищен от неиспользуемых слоёв.

Успехов!

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Способы адаптации и оптимизации сайта под мобильные устройства — Plerdy

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

По данным Statcounter, в мире более половины пользователей ищут что-то в интернете именно с мобильных. Google, в свою очередь, в руководстве для занятых руководителей The Mobile Playbook Google утверждает, что 40% пользователей уйдут на сайт конкурента, если у него есть хорошая мобильная версия. Неслучайно не оптимизированная мобильная версия или ее отсутствие снижает рейтинг интернет-ресурса в поисковой выдаче этого поисковика.

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

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

Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

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

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

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

Быстрый адаптивный дизайн сайта

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

1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

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

• Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
• Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку .m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
• Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
• Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

Шаблоны и плагины

Сравнительно быстро адаптировать сайт можно с помощью готовых тем (шаблонов) или плагинов. Такая опция не требует технических навыков. Однако доступна она не всем — только владельцам сайтов на отдельных CMS.

Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

Чтобы быстро найти и установить шаблон

• В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
  Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
• В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
• В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

А как быть с магазином на OpenCart?

C OpenCart все немного сложнее. Да, в интернете вы найдете множество адаптивных шаблонов, разработанных специально для этой CMS, однако их не всегда можно применить. Дело в том, что сайт OpenCart состоит из разных функциональных модулей. Как правило, модулей “из коробки” недостаточно для полноценного интернет-магазина. Для этого используются дополнительные кастомные модули, в большинстве случаев не поддерживаемые мобильной темой, в которой предусмотрен лишь стандартный ограниченный функционал. Чтобы OpenCart магазин корректно отображался и работал на разных устройствах можно:

• Разработать отдельный мобильный дизайн, то есть отдельную мобильную версию сайта и настроить на нее редирект, предварительно определяя с какого устройства заходит пользователей (контакта с кодом не избежать).
• Выполнить адаптивную Bootstrup верстку, не разрабатывая отдельный дизайн (макет) для мобильных.

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

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

Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

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

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

• Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
• Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
• Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
• Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

ТОП-5 рекомендаций, как улучшить работу мобильного сайта

1. Не игнорируйте скорость загрузки

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

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

Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или  Pingdom Tools.

2. Проверяйте отображение элементов

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

Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

3. Придерживайтесь принципов Mobile First

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

4. Используйте технологию AMP

Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

Существенно ускорить загрузку страниц можно с помощью технологии AMP, которая сжимает объем данных страниц, уменьшая его в 8 раз. Эта технология разработана Google с целью повышения скорости загрузки сайтов. В результатах поиска ресурсы, использующие эту технологию, обозначены специальной иконкой-молнией. А также имеют URL с приставкой /amp.

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

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

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

Итоги

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

Итак, еще раз перечислим опции адаптации сайта под мобильные устройства:

• Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
• Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков.  Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

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

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

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

Можно выделить два основных способа решения этой задачи.

1. Отдельный шаблон сайта для мобильных устройств. RESS подход

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

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

Мобильный шаблон может загружаться на дополнительном домене типа m. domain.com (так реализованы мобильные версии вконтакте, facebook, одноклассники) или прямо на основном, в зависимости от вашего желания или потребностей.

Сайт с отдельным шаблоном для мобильных устройств

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

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

Рассмотрим плюсы и минусы такого подхода в общем случае:

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

Варианты реализации адаптивной верстки

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

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

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

Среди разных подходов к реализации адаптивной верстки, можно выделить три основных. Читать дальше…

Вариант первый.

Переключение между состояниями происходит один раз. Например, до ширины экрана 980px мы видим десктопный вид страниц, а на ширине меньше – сразу мобильный вариант. Дизайнер рисует один макет – для мобильного устройства. В шапку сайта подключаются два файла adaptive.css и adaptive.js, которые и управляют состоянием страницы. Мы не вносим изменений в ваш сайт, не дорабатываем шаблоны сайта, все изменения происходят за счет этих двух файлов.

• Если у шаблона сайта есть проблемы, то они не решаются, а просто маскируются с помощью «костылей».

• Чаще всего при таком подходе, приходится изменять (вырезать, переставлять, добавлять) блоки с помощью JavaScript. Что негативно сказывается на сео-оптимизации.

• Код для «мобильного вида» не интегрирован с кодом сайта, что может порождать проблемы при поддержке.

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

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

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

• Реальное состояние вашего сайта, проблемы верстки и проч. несущественно влияют на стоимость такого решения.

• Это самое дешевое решение.

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

Шаблонная адаптация с резким переходом и резиной.

Вариант второй.

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

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

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

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

• Это необратимо. Мы не пристраиваем немного своего кода в ваш сайт, мы дописываем и переделываем код вашего сайта.

• Это дешевле постепенной адаптации страниц (о которой ниже), но нет таких проблем как с первым поверхностным решением.

• Мы не закрываем проблемы верстки «костылями», мы решаем эти проблемы.

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

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

• Этот пункт вытекает из предыдущих – при доработке отдельных страниц, при редизайне или добавлении новых блоков не нужно переделывать все решение заново, ведь оно – просто часть вашего сайта.

Вариант адаптивной верстки с резкими переходами «экранов» и «ушами».

Вариант третий.

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

Пример сайта с постепенной адаптацией.

Средняя стоимость адаптации готового сайта. И от чего зависит стоимость такой разработки.

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

В данном контексте под «шаблоном» мы будем понимать один типовой элемент сайта.

Разберем на примере среднего интернет-магазина.

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

1. Шапка и футер сайта. Выделяем в один типовой шаблон, т.к. эти элементы повторяются на всех страницах и для всех страниц они одинаковы.

2. Главная страница. Все, что находится на главной Вашего сайта. В стандарте, это 1-2 одинаковых слайдера с банерами, 1-2 слайдера с товарами (например, «новинки» и «популярные товары», небольшой статичный текстовый блок.

3. Каталог. Состоит из меню разделов каталога и витрины товаров – обычно представляет собой список товаров «плиткой», каждый элемент которой представляет собой мини-карточку товара – изображение, название, цена, кнопка «купить».

4. Карточка товара. Страница с подробной информацией о товаре, состоит из картинки (или слайдера с картинками товара), описания продукта, списка характеристик и блока «купить».

5. Статичные страницы. Обычно подразумевают один общий шаблон, большую часть которого составляет статичный контент. Статичным в данном случае мы считаем текстовую или графическую информацию, которая добавляется кодом и не хранится в базе данных (не редактируется через административную панель). В среднем случае таких страниц 1-3 («о компании», «контакты», страницы с информацией о доставке, оплате или гарантии).

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

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

Средняя оценка разработки.

Для такого среднего по шаблонам ресурса вилка стоимости, будет следующей.

1. Отдельный шаблон для мобильной версии – 200-350 часов.

2. Адаптивная верстка, в зависимости от варианта:

   1. Первый вариант (один-два экрана, без внесения изменений в шаблон, только скрипты и стили) – 50-100 часов,
   2. Второй вариант (с изменением шаблона, внедрением стилей в сайт, ограниченное число состояний) — 100-250 часов,
   3. Третий вариант (с изменением шаблона, внедрением стилей в сайт, плавные переходы состояний страниц) – 200-300 часов.

О чего еще зависит цена адаптации сайта?

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

1. Сложность дизайн макета. (Для всех вариантов).

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

2. Сложность переносимого функционала. (Для мобильной версии шаблона).

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

3. Сложные по структуре страницы. (Для адаптивной верстки).

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

4. Большое количество интерактивных элементов на сайте. (Для адаптивной верстки).

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

5. Резиновая верстка сайта. (Для адаптивной верстки).

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

6. Качество верстки. (Для адаптивной верстки).

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

7. Соответствие дизайна для мобильного устройства существующему виду страниц. (Для адаптивной верстки).

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

Не останавливаемся на одном варианте.

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

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

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

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

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

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

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

Виды мобильных сайтов

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

• мобильная версия с поддоменом. Речь идет об отдельном сайте, имеющем собственный созвучный поддомен;
• сайты с динамическим контентом. Десктопная и мобильная версии сайта будут иметь одинаковый адрес, однако разное наполнение. Мобильные версии лишены «пустого» контента, такого как реклама, ненужные тесты, разнообразные слайдеры и прочие элементы, замедляющие загрузку и тормозящие работу страниц;
• адаптивные сайты. Контент и адрес такой же, как и у десктопной версии. Если пользователь посещает ресурс с мобильного устройства, то происходит адаптация под конкретные форматы: перестройка блоков, сужение слайдеров, изменение меню, иное.

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

Читайте также:

С чего начать оптимизацию мобильного сайта?

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

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

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

Robots.txt

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

Скорость загрузки страниц

В рамках адаптации сайта под мобильные устройства стоит провести проверку скорости загрузки страниц. Медленная загрузка может оттолкнуть посетителей, ведь они покидают сайт, если страница не отобразилась через 3-5 секунд после выполнения перехода. Для решения этой задачи можно использовать инструмент PageSpeed Insights от Google. После выполнения проверки вы можете увидеть следующие оценки:

• 90-100 баллов – отличный результат;
• 50-90 баллов – средний результат;
• менее 50 баллов – негативный результат, свидетельствующий о том, что страницы загружаются достаточно медленно.

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

Тег viewport

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

HTTP-заголовок Vary

Эта рекомендация ориентирована на динамический контент, на наличие которого стоит указать поисковым роботам. Сделать это можно с помощью HTTP-заголовка Vary. Поисковые роботы Google будут производить сканирование контента для мобильных устройств, к сожалению, у системы «Яндекс» таких роботов пока нет. Просмотр HTTP-заголовки выполняется с помощью функции «Проверка ответа сервера», которую можно найти в «Яндекс.Вебмастер».

Настройка переадресации

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

Тег alternate

Тег подается в форме <link rel=»alternate»/>, он необходим для того, чтобы поисковые роботы могли определить не только мобильную версию, но и языковые варианты. После этого пользователю предлагается оптимальный вид страницы, что зависит от условий перехода. При настройке необходимо помнить о том, что URL страниц должны быть указаны полностью и вместе с протоколами (http, https).

Например, есть сайт http://m.vesna.com, в этом случае тег будет выглядеть так:

<link rel=»alternate» media=»only screen and (max-width: 640px)» href=» http://m.vesna.com«>;

Использование Apple touch icon

Apple-touch-icon. Png – изображение, которое будет использоваться в качестве закладки на домашнем экране мобильных устройств на операционной системе iOS (на macOS не распространяется).

Адаптация контента под ширину экрана

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

Шрифт

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

Кнопки

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

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

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

Миниатюрные картинки

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

Удаление Flash

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

Устранение лишнего контента

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

Больше пользы, меньше рекламы

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

Отказ от pop-up окон

Компания Google не слишком жалует всплывающие окна, которые мешают просматривать контент и обеспечивают нецелевые переходы на сайт рекламодателя. В это же время огромные баннеры, разворачивающиеся на весь экран, способны вывести из себя самого уравновешенного человека. Такой формат можно оставить в десктопной версии, но не в мобильной (предварительно изучите список разрешенных pop-up). Для проверки оптимизации сайта под мобильные устройства целесообразно использовать сервис search.google.com, который поможет собрать информацию и о технических, и о визуальных аспектах.

Читайте также:

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

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

• простая и удобная навигация. Все пункты меню должны хорошо просматриваться, а также быть доступными в мобильной версии сайта (в том числе и «хлебные крошки»). Удобная навигация поможет юзеру хорошо ориентироваться на сайте и быстро находить то, что его интересует;
• быстрый набор. Необходимо добавить ссылки с номеров телефонов, благодаря которым клиент сможет осуществить набор без ошибок, делая несколько кликов. Такая мелочь может оказать положительное влияние на рост количества обращений, особенно если речь идет о коммерческом ресурсе;
• местоположение. Многие пользователи не выключают на смартфонах и планшетах функцию, позволяющую определить местоположение. Наличие учета местоположения облегчит процесс оформления заказа, поиска ближайшего склада или магазина, выбора способа доставки. Конечно, предварительно пользователь дает разрешение на то, чтобы ресурс получил доступ к данным о его локации;
• возможность перейти на десктопную версию, что актуально для сайтов на поддомене. Возможно, юзер захочет работать не с мобильной, а с десктопной версией – это его право, которое нельзя отбирать. Обязательно добавьте ссылку, с помощью которой пользователь сможет осуществлять переходы между мобильным и десктопным форматами.

Можно ли вместо мобильной версии использовать приложение?

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

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

В заключение

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

Адаптация сайта Joomla для мобильных устройств

Вступление

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

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

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

По назначению мобильные устройства могут быть информативными (например, электронные книги), коммуникативными (мобильный телефон), вычислительными (ноутбук, КПК (PDA), планшет), комбинированными (смартфон).

Большая часть мобильных устройств имеет выход в Интернет. Для чего создано и внедрено специальное программное обеспечение для мобильных устройств. К нему относятся:

• Операционные системы для мобильных устройств (OS). Android, Apple iOS, Windows Phone OS, Blackberry, BADA, Garnet.
• Мобильные браузеры. Например, для Android: Opera Mini, Opera Mobile, Mozilla Firefox, Dolphin Browser.
• Приложения для мобильных устройств.

Наиболее популярной ось для мобильных устройств остаётся Android. Его яростная конкуренция с Apple iOS даёт свои результаты. Девятая версия прошивки Android 9.0 Pre ещё больше добавила удобств для пользователя, снизив шансы конкурентов до минимума. Все прошивки Android 9.0 Pre на сайте http://proshivkis.ru/?a=android-9-0-pie-firmwares.

Адаптивность сайта

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

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

Адаптивность сайта Joomla

Для простого пользователя адаптация сайта Joomla под мобильные устройства заключается в выборе и применении одного из способов:

Способ 1. Использование адаптивного (responsive) шаблона для своего сайта

Способ крайне простой.

Способ 2. Применение специального расширения (плагина)

Не могу сказать, что количество плагинов с данным функционалом большое. Сказывается наличие адаптивных шаблонов. Как вариант посмотрите плагин Mobile Joomla (http://www.mobilejoomla.com/). Правда он в бесплатной версии с рекламой.

Способ 3. Заказать мобильную вёрстку

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

Проверка

Для проверки адаптивности сайта используйте новый сервис adaptivator.ru и читайте статью тут. К сожалению некорректная адаптация может увеличить время загрузки сайта. Поэтому проверяем скорость загрузки простой и мобильной версии на сервисе Google: https://developers.google.com/speed/pagespeed/insights/

Вывод

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

Видео статьи Helix3

©joomla3-x.ru

Еще статьи

Адаптация сайта под мобильные устройства: при помощи онлайн-сервиса или редактирования кода HTML

Автор Prodvigaem Team На чтение 11 мин. Просмотров 8 Опубликовано 06.04.2021

Сегодня востребованной проблемой становится адаптация сайта под мобильные устройства. Ещё каких-то 30 лет назад сложно было поверить, что компьютер и интернет будут в каждом доме, а в начале 2000-х никто не мог предугадать такой экспансии мобильных устройств на рынок. Если вы онлайн-предприниматель или просто ведёте блог, зарабатывая с рекламы – примите во внимание, что уже сейчас каждый третий пользователь в России заходит на ваш сайт с мобильного девайса, а в США данная цифра перевалила за 50 % ещё в 2014 году. Число мобильных юзеров будет только расти, поэтому если вы хотите максимизировать прибыль с вашего ресурса, прислушайтесь к советам и решениям, данным в статье.

Что можно потерять, отказавшись от адаптации

Ответ один: конверсию и, как следствие, ваши средства. Почему так происходит? Тому есть три причины:

• «Заботливые» поисковые системы. При заходе со смартфона или планшета, сайты, которые Google или Яндекс сочтут адаптированными под мобильные устройства, окажутся в выдаче поисковика выше устаревших десктопных версий. К тому же, их украсит пометка «для мобильных». Вряд ли вы когда-то листали дальше первой-второй страницы результатов поиска, ваши потенциальные посетители мало чем отличаются.
• Лояльность пользователя. Даже если пользователь попадёт на ваш сайт, он не захочет на ходу целиться пальцем в маленькие ссылки, масштабировать страницу и раскрывать огромные вложенные меню. Он предпочтёт воспользоваться сайтом поудобнее, пусть и предложение вашей компании выгоднее.
• Психология. Если ресурс удобен и понравился пользователю, он с большей долей вероятности сделает на нём что-то, т.е. повысит вашу конверсию.

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

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

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

• Скорость загрузки. Никаких тяжеловесных шрифтов и огромных картинок, которые будут подгружаться ещё полминуты после открытия страницы. Не забывайте, что мобильная сеть является весьма нестабильной средой передачи данных, а значит скорость загрузки может варьироваться.
• Лёгкая и понятная навигация. Только вертикальная прокрутка, максимальное использование площади экрана, основное меню сайта всегда под рукой. Не заставляйте посетителей прилагать усилия для связи с вами: разместите удобную кнопку звонка или хотя бы контакты в шапке.
• Крупный интерфейс. Формы и кнопки должны быть достаточно большими по сравнению с десктопной версией, чтобы пользователь мог легко попасть в них.
• Читабельный текст. Используйте CSS или различные плагины, чтобы текст не был слишком мелким на любых экранах.
• Возможность воспользоваться полной версией. Не заставляйте пользователя сидеть с мобильной версии принудительными переходами: возможно, версия для десктопа ему покажется удобнее.

Как обеспечить скорость загрузки

Следует стремиться к значению в 2-3 секунды. Медленнее – это отпугнёт и большинство пользователей, и поисковик при ранжировании вашего сайта. Оценить скорость можно с помощью прекрасного инструмента Think With Google. Если результаты будут неутешительными, предпринять можно следующее:

• Не раздувайте код страницы. Зачастую такое происходит по вине дизайнера, когда он сосредоточен только на внешнем виде сайта и слишком усложняет его макет. Напомните ему, что простота нынче в моде. Аскетичный интерфейс с одной кнопкой призыва к действию сам по себе приведёт к более высокой конверсии, а быстрота загрузки увеличит лояльность посетителей.
• Оптимизируйте изображения. Почти две трети веса страницы – это картинки. Картинок не должно быть чересчур много. Альтернативный вариант: используйте сжатие. Самый быстрый способ – воспользоваться онлайн-сервисами, например, Compressor.io.
• Меньше кастомных шрифтов. Во-первых, на загрузку необычных шрифтов тратится время, а затем браузер захлёбывается в тоннах CSS и JS-кода при рендеринге этих шрифтов. Можно использовать их в заголовках, но не для всего текста.
• Минимизируйте код. Другими словами, удалите из него лишние участки, не влияющие на функционал. При наличии знаний можно сделать это вручную, но быстрее с этим справятся онлайн-инструменты, Minifycode.com. Для сайтов на WordPress существует плагин Better WordPress Minify.
• Подключите «ленивую загрузку». Она загружает только ту часть сайта, которая сразу видна в окне, и подгружает остальное при прокрутке. Есть плагин Lazy Load для jQuery, для WordPress он называется BJ Lazy Load.

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

Mobile-friendly дизайн

Mobile-friendly (дружественный к мобильным устройствам) – это не просто отзывчивый веб-дизайн (Responsible Web Design), подразумевающий корректное и эстетичное отображение сайта на всех экранах. Помимо технических аспектов, необходимо учесть также психологию мобильного пользователя. Переносные гаджеты используются на ходу, поэтому сайт для них должен не повторять полную версию, а быть более упрощённым и оптимизированным:

• Меньше текста и перегруженных форм. Упростите процедуры подписки, заказа товаров и т.п. Большое количество информации и кнопок отталкивает мобильных пользователей.
• Расположение кнопки «call-to-action». Размещение кнопок на краях экрана вынуждают юзеров перехватывать устройство, что понижает конверсию. Помещайте ключевые элементы интерфейса в центр макета.
• Сдержанные цвета. Разноцветные и пёстрые сайты отвлекают внимание пользователей, сбивая их с толку. Сделайте так, чтобы цвета помогали им, подсказывая, куда и когда нажать.
• Учёт вертикальной прокрутки. Мобильные сайты читаются сверху вниз, в отличие от десктопа, где информация может быть распределена по всему экрану. Поэтому будет нелогичным размещение кнопки «Купить» перед информацией о продукте и его фотографиями.
• Меньше подвижных элементов. Слайд-шоу, карусели изображений – всё это уместно на десктопе, но не в дороге, когда человек менее сосредоточен.

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

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

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

Если ваш сайт «крутится» на базе CMS WordPress, превратить его в мобильный можно всего лишь в несколько кликов с помощью различных плагинов. Вот некоторые из них:

1. JetPack. Он входит в набор базовых плагинов, а включение адаптивного макета происходит всего в одно нажатие: зайдите в настройки плагина и поставьте галочку «Mobile Theme».
2. WPtouch. Плагин добавляет красивые анимации и быструю загрузку страниц через AJAX. Pro-версия имеет расширенную админ-панель и бесплатную техподдержку.
3. WP Mobile Detector. Создатели плагина заявляют о более чем 5000 различных устройствах в базе. Для каждого конкретного девайса в зависимости от разрешения экрана отображается своя тема, оптимизируются изображения. Предоставляются также инструменты аналитики.
4. WordPress Mobile Pack. Поддерживает перенаправление по доменам, имеет встроенный переключатель между мобильной и десктопной версией, множество твиков в CSS, отдельную мобильную панель для администрирования.
5. WP Mobile Edition. Очень похож на предыдущий, но здесь ещё и поддержка комментов от Disqus и автоматическое создание карты сайта, что улучшает позиции сайта в поиске.

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

Существует два подхода к созданию мобильного сайта. Первый – создать отдельную версию сайта с упрощённым макетом, такие версии как правило размещаются на поддоменах вида m.example.com. Второй – использовать адаптивную вёрстку, «резиновый макет», при котором элементы на странице автоматически меняют свой размер и местоположение в зависимости от разрешения или ориентации экрана. У второго подхода есть преимущества перед отдельной версией, а именно:

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

Если вы используете WordPress, то шаблоны с адаптивным дизайном можно найти в репозитории.

При самостоятельной вёрстке, можно использовать средства CSS и JavaScript для создания резинового макета, например:

• CSS: max-width в процентах для заполнения окна браузера по ширине.
• HTML-тег meta viewport с атрибутом initial-scale=1.0, тогда ширина картинок станет равной ширине экрана.
• Использование дочерних файлов CSS для мобильной версии, чтобы «вытянуть» макет по вертикали для узких экранов и упростить его.
• Медиазапросы в CSS3 могут использоваться для выборочного исполнения селекторов. К примеру, медиа-запрос с min-width: 480px может быть использован для применения стиля только если ширина окна больше 480px. Max-device-width позволяет определить ширину экрана устройства (полезно, если браузер открывается в оконном режиме). Медиазапрос по свойству orientation может помочь для выяснения ориентации устройства, и т.п.
• Подгрузка нужной таблицы стилей в зависимости от разрешения может быть выполнена на jQuery (если media queries не поддерживаются).

Создание адаптированных кнопок

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

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

• Standout Color Boxes and Buttons. Позволяет создавать разнообразные кнопки для навигации и меню.
• Responsive Menu. Создаёт удобные иерархические меню для мобильных экранов.

Адаптация форм под мобильный трафик

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

• Упрощайте: оставьте поля только для имени и e-mail, а все данные по регистрации высылайте автоматом на почту.
• При заполнении форма не должна вынуждать пользователя что-либо масштабировать и вызывать сомнения, что именно надо вводить в то или иное поле.
• Подписи к полям ввода следует размещать над ними, а не слева, где они вызовут необходимость использовать горизонтальный скролл.
• Используйте возможности мобильного устройства, например, определение местоположения по GPS, вместо того, чтобы заставлять пользователя вводить его вручную.
• Где уместно, проставьте значения по умолчанию, чтобы сэкономить время посетителя сайта.

Для форм на WordPress есть плагины: бесплатный SumoMe или платный OptinMonster, которые помогут создать гибкие формы ввода для вашего сайта.

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

Удобочитаемый контент для мобильных пользователей

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

• Структурируйте текст. Самая важная информация должна располагаться в начале, на первом экране, а остальная может выходить из зоны просмотра.
• Используйте крупный шрифт, по крайней мере, 15px.
• Абзацы должны быть небольшими, не более 4-5 строк.
• Не прибегайте к сложным и длинным предложениям, оптимальная длина для мобильного пользователя – до 70-80 символов.
• Текст должен быть контрастным и не сливаться с фоном.

На странице не должно быть никаких элементов ActiveX, плагинов Silverlight или анимации Flash.

Все эти технологии не поддерживаются мобильными платформами, а Flash давно уже должен быть заменён на HTML5 даже в десктопных версиях. То же касается и форматов файлов: то, что вы предлагаете к скачиванию, должно открываться на большинстве смартфонов. Например, уместнее форматы PDF или PNG для документов, чем DOC, потому что просмотрщик файлов Word установлен далеко не у всех.

Оптимизация электронных писем

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

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

В отличие от браузеров, не все почтовые клиенты могут поддерживать «мудрёный» CSS. Поэтому везде, где это возможно, следует отдать предпочтение HTML. Если вы верстаете адаптивный двухколоночный макет, откажитесь от CSS float: left, а используйте HTML-атрибут align=”left”.

Заключение

Сегодня новые сайты должны разрабатываться согласно подходу mobile first: сначала разрабатываете мобильный макет, а потом уже десктопный. Если всё делается в обратном порядке, мобильным юзерам зачастую уделяется недостаточно внимания, в итоге вы теряете трафик и деньги. В статье мы рассмотрели основные правила и методы создания mobile-friendly ресурса.

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

Зачем адаптировать сайт под мобильные устройства? / Арктическая Лаборатория

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

После заявления «Яндекса» об отключении влияния ссылок на поисковое ранжирование  трендом стали поведенческие факторы (дальше — ПФ). Каждый, кто мало-мальски интересуется процессом продвижения сайтов, сталкивался с этим понятием.

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

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

Рассматривать будем внутренние ПФ. Согласитесь, что чем удобнее сделан сайт, чем проще на нем найти и заказать продукт/услугу, тем больше посетителей конвертируется в клиентов.

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

Взгляните на этот показатель одного из российских сайтов. Статистика представлена за март 2015 года.

Обратите внимание: на сайте, который некорректно отображается с мобильных устройств, показатель отказов со смартфонов и планшетов в 2-2.5 раза превышает показатель отказов с ПК.

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

Что выбрать — адаптивный дизайн или мобильную версию

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

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

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

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

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

Мобильная версия –  фактически новый сайт, который чаще всего располагается на поддомене основного: m.site.ru, mobile.site.ru и т.п. С точки зрения SEO это не слишком хорошо из-за большого количества условных редиректов с основной версии на мобильную. Все-таки site.ru/page и m.site.ru/page – разные страницы с точки зрения поисковых систем.

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

Разумеется, этот вариант стоит дороже, чем адаптивный дизайн.

Однако совсем не обязательно платить огромные деньги за создание мобильной версии. К примеру, сайт dudamobile.com сделает это для вас за $9 в месяц. Можно оплатить пару месяцев, чтобы почувствовать разницу.

Вердикт

Что выбрать – мобильную версию или адаптивную верстку – решать вам, но все же отмечу:  

1. Если у вас небольшой сайт, например, салона красоты, не стоит делать для него мобильную версию. Обычной адаптации к мобильным устройствам вполне достаточно.
2. Мощный сайт с большим количеством подгружаемых страниц потребует мобильной версии. Например, если у вас онлайн-сми с аудиторией от нескольких тысяч человек в сутки, мобильная версия – то, что вам нужно.

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

Как сделать веб-сайт удобным для мобильных устройств

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

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

В 2016 году использование мобильного интернета впервые превысило использование компьютеров.И с тех пор эта тенденция только усилилась. Более половины всего трафика веб-сайтов в мире сейчас приходится на смартфоны.

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

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

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

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

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

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

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

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

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

1. Сделайте свой сайт адаптивным.

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

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

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

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

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

2. Сделайте так, чтобы людям было легче найти информацию.

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

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

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

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

3. Откажитесь от рекламы и всплывающих окон с блокировкой текста.

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

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

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

4. Сделайте скорость веб-сайта своим приоритетом.

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

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

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

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

5. Сохраняйте простой веб-дизайн.

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

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

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

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

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

Лучший способ избавить посетителей от этого разочарования — использовать кнопки большего размера. И подумайте о том, где на экране вы их разместите. Эксперт по пользовательскому интерфейсу Джош Кларк пишет: «»: «В то время как большой палец может охватить большую часть экрана на всех телефонах, кроме самых негабаритных, только треть экрана — это действительно легкая территория: внизу, на стороне, противоположной большому пальцу.”

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

7. Используйте шрифт большого размера.

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

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

8. Не используйте Flash.

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

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

9. Включите метатег видового экрана.

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

Добавить это в свой HTML довольно просто. Просто вставьте это в html для каждой страницы:

10. Отключите автозамену для форм.

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

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

В поле ввода убедитесь, что вы включили autocorrect = off в html.

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

11. Дайте возможность переключиться на вид рабочего стола.

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

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

12. Регулярно проводите мобильное тестирование.

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

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

Сделайте свой веб-сайт более удобным для мобильных устройств

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

[adrotate group = ”6 ″]

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

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

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

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

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

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

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

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

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

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

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

Сложнее сделать адаптивным

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

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

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

Что использовать: адаптивный или адаптивный дизайн?

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

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

Дополнительные ресурсы

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

Комментарии

комментария

Мобильный, адаптивный, адаптивный или настольный сайт?

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

• Mobile — выделенные сайтов предназначены для мобильных телефонов.
• Веб-приложения — это особый тип мобильного сайта, который выглядит и ощущается как приложение.
• Сайты с адаптивным дизайном — это сайты, предназначенные для множества устройств с экранами разных размеров; они автоматически корректируют макет своего контента в соответствии с доступным размером экрана.
• Full (или desktop) сайты предназначены для настольных компьютеров и не оптимизированы для мобильных устройств.

Выделенные мобильные сайты

Мобильные сайты — это сайты, разработанные специально для мобильных телефонов. Часто они размещаются под отдельным URL-адресом (например, m.site.com) и полностью отличаются от всего сайта. Они содержат функции или контент, которые считаются подходящими для мобильных устройств; часто это лишь часть того, что доступно на рабочем столе.Их часто противопоставляют адаптивным сайтам, которые обычно содержат одинаковый контент и функции для мобильных устройств и настольных компьютеров, но изменяют эти функции на мобильных устройствах.

Веб-приложения

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

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

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