Адаптация сайта на мобильных устройствах — студия Палыча
Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).
Этот метатег вставляют в контейнер head вашего сайта.
<meta name="viewport" content="width=device-width">По умолчанию мобильные браузеры отображают страницу сайта точно так же как и в ПК. Что естественно портит внешний вид сайта и делает мало пригодным для использования сайта на мобильных устройствах.
Для более детальной настройки отображения используем дополнительные значения
Ширина сайта на экранах мобильных устройств
Позволяет адаптировать ширину сайта под ширину экрана устройства
<meta name="viewport" content="width=device-width">Это конечно несколько улучшает просмотр сайта, но только в плане того что ширина сайта становится такой же как и ширина экрана мобильного устройства. Зато делает абсолютно не читабельные страницы т.к. очень сильно уменьшает текст, картинки и т.п. А так же нарушает модульную сетку сайта.
Для того что бы сделать сайт еще и читабельный, зададим фиксированную ширину отображения страницы и уже при этой ширине будем в стилях править отображение текстов, блоков и т.д. На нашем примере возьмем за основу ширину сайта 600px:
<meta name="viewport" content="width=600">А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.
Нужно еще учитывать то обстоятельство что задав фиксированную ширину отображения контента мы получим одинаковый результат на разных разрешениях экрана. Но все равно при любом разрешении самого экрана страница будет отображаться на весь экран. Это даст нам два основных преимущества.
- Мы получим одинаковое отображение на различных разрешениях экранов.
- Нам нужно менять стили только для этого медизапроса, а не подстраивать под каждое разрешение экрана.
@media screen and (max-width: 600px) {
…
}Высота сайта на экранах мобильных устройств
В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.
Для исправления этой ошибки мы можем использовать правило
<meta name="viewport" content="height=device-height">Масштабирование сайта на экранах мобильных устройств
С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.
Разрешить масштабирование на смартфоне:
<meta name="viewport" content="user-scalable=yes">Запретить масштабирование на мобильном телефоне:
<meta name="viewport" content="user-scalable=no">Подитог
И так мы создали свой viewport и так же для него создали медиапзапрос
В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)
Viewport:
<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">Медиазапрос:
@media screen and (max-width: 600px) { body { font-size:1.5em; } … h3 { font-size:2.5em; } }
|
рис.1 Отображение сайта без метатега viewport |
рис.2 Отображение сайта с атрибутом width=device-width |
рис.3 Отображение сайта с атрибутом width=600 |
Верный viewport
Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:
<meta name="viewport" content="width=device-width, user-scalable=yes">Читайте также
- Фреймворк для адаптивной верстки
- Адаптивная верстка для мобильных устройств
palpalych.ru
Проверка мобильной версии сайта — онлайн сервис GoToMobi.Ru
Посмотреть, как выглядит сайт на мобильном устройстве, проще всего на вашем телефоне. Более того, скриншот с такого реального устройства будет самым точным отображением сайта на мобильных устройствах, нежели использование любого эмулятора.
Если же необходимо проверить мобильную версию сайта онлайн на компьютере, то на помощь приходят эмуляторы мобильных устройств. Самые точные из них — это средства для разработчиков мобильных операционных систем, самыми популярными из которых являются Android Studio и Apple Xcode. В этих наборах есть самые полные эмуляторы различных устройств и проверка мобильной версии сайта будет наиболее точно приближена к реальному мобильному устройству. Однако, чтобы установить средства для разработчиков на обычный компьютер, потребуется очень много времени, опыта и знаний по владению программным обеспечением.
Простые способы проверки мобильной версии сайта
В противовес самому сложному способу проверки сайта на мобильных устройствах, рассмотренному в предыдущем абзаце, самым простым способом является уменьшение ширины окна браузера до размера узкой колонки. Если ваш сайт адаптируется к такой ширине, то значит мобильная версия вашего сайта сделана с помощью технологии адаптивного дизайна.
Однако, такой способ не работает в случае, если мобильная версия сайта сделана с применением отдельного дизайна. В этом случае сервер, на котором расположен сайт, нуждается в явном указании того, что посетитель пришел с мобильного устройства. Эти данные сервер получает из строки User Agent, в обязательном порядке запрашиваемой из вашего браузера любым посещенным сайтом. Поэтому, чтобы посмотреть, как сайт выглядит на мобильных устройствах, необходимо «обмануть» сервер и предоставить ему строку User Agent от телефона, а не от компьютера.
Вторым по сложности вариантом, позволяющим проверить мобильную версию сайта через компьютер, является установка специального браузера. Например, Opera Mobile Classic Emulator. Его версии существуют для Windows, Mac и Linux. К сожалению, эта разработка основана на старом движке Presto, использованном до 12 версии браузера Opera, и не покажет реально, как отображается сайт в современном мобильном браузере. C 2013 года браузер Opera работает на программном движке Blink, поэтому проверку мобильного сайта лучше провести на современном браузере. Это может быть как Opera так и Chrome, работающие на одинаковом движке Blink на основе WebKit, используемого в Apple Safari.
Необходимо включить в указанных браузерах специальный режим разработчика (F12 в Chrome или Ctrl+Shift+i в Opera) и переключиться в режим мобильного устройства:
После этого можно без проблем посмотреть, как выглядит сайт на мобильном устройстве.
Если визуальной личной оценки для проверки мобильного сайта вам недостаточно, то существуют специальные программы, которые могут проанализировать сайт с точки зрения мобильного устройства и выдать не только количественную оценку мобильности сайта, но и дать рекомендации по улучшению видимости сайта на смартфонах. На нашем сайте как раз находится такой сервис, основанный на технологии Google Mobile Friendly. Вам достаточно только вбить адрес своего сайта в специальную строку и нажать кнопку «Проверить». Робот перейдет по указанному адресу, сделает снимок страницы в формате мобильного устройства и даст заключение о качестве вашего мобильного сайта.
Проверить сайт на мобильных устройствах? онлайн-проверка
Поделиться ссылкой на наш сервис: gotomobi.ru
Проблема масштабирования адаптивной верстки на мобильных браузерах — Toster.ru
Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.
Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.
И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport
<meta name="viewport" content="width=device-width; initial-scale=1">
который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.
Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.
Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).
Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.
Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.
В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?
Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?
Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.
P.S. прошу прощения что не разместил этот текст в q&a, упустил этот момент, а теперь уже не могу поменять.
toster.ru
Как оптимизировать сайт для мобильных устройств с помощью PageSpeed Insights
Уровень подготовки веб-мастера: для всех
Мы опубликовали на сайте PageSpeed Insights новые рекомендации, которые помогут улучшить сайты для мобильных устройств.
Недостаточная оптимизация может свести на нет все преимущества быстрой загрузки сайта. В среднем загрузка одной страницы на мобильных устройствах длится более 7 секунд, но правильное использование инструмента PageSpeed Insights позволяет значительно сократить это время. Предположим, вам удалось добиться загрузки сайта не за семь секунд, а всего за две. Но какой в этом смысл, если пользователю все равно придется потратить ещё 5 секунд на то, чтобы увеличить размер шрифта и прокрутить страницу до нужного места? Новые рекомендации PageSpeed Insights помогут выявить и устранить подобные проблемы.
Вот список новых рекомендаций:
- Настройте область просмотра. Если на сайте отсутствует метатег viewport, современные мобильные браузеры не обнаружат оптимизированную версию страницы и покажут версию для компьютеров. В результате текст на странице может отображаться слишком крупным шрифтом. Оптимизацию сайта для мобильных устройств следует начинать с настройки тега viewport и установки параметра width=device-width.
Адаптируйте размер контента для области просмотра. На сайтах для мобильных устройств пользователи предпочитают видеть вертикальную прокрутку, а не горизонтальную. Указав область просмотра, убедитесь, что ваше содержание не выходит за ее пределы. Помните, что существует множество стандартов ширины для экранов мобильных устройств.
Используйте шрифты легко читаемого размера. Сайт, на котором посетителям приходится увеличивать масштаб для того, чтобы прочитать текст на экране смартфона, не может считаться оптимизированным. PageSpeed Insights проверяет, подойдет ли размер шрифта на сайте для пользователей мобильных устройств.
Увеличьте размер активных элементов на странице. Область касания при сенсорном управлении значительно больше курсора мыши, и не всегда удается нажать нужную кнопку или ссылку. Это раздражает пользователей смартфонов и планшетов. Убедитесь в том, что размер активных элементов позволяет попасть по ним пальцем.
Откажитесь от плагинов. Большинство смартфонов не поддерживает Flash и другие плагины для браузеров, поэтому не следует рассчитывать на них, создавая мобильную версию сайта.
этого сервиса.
habr.com
Показать или скрыть контент на сайте для разных устройств
Адаптивный – это какой?
Адаптивный дизайн – тот, который подстраивается под разные разрешения экрана при этом не теряя своей привлекательности. Это может производится как и засчёт адаптации каждого элемента сайта, так и банальным управлением отображения/скрытия контента на мобильных устройствах. Процесс создание адаптивного дизайна достаточно трудный, но скрыть или показать блоки сайта в зависимости от разрешения можно за несколько минут.
Как сделать адаптивную вёрстку?
Для того, чтобы сайт подстраивался под разные типы устройств, необходимо задать значения под все диапазоны экранов в таблице стилей CSS. Каждый шаблон состоит из блоков, у которых есть свой класс или идентификатор. Необходимо найти в таблице стилей нужный блок и прописать его поведение при различных экранных разрешениях. Возьмём, к примеру, фрагмент из таблицы стилей моего сайта. Блок w-container.
.w-container{margin-left:auto;margin-right:auto;max-width:940px} @media screen and (max-width:991px){.w-container{max-width:728px}
Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.
И таким образом, нужно спроектировать и описать каждый блок шаблона сайта. Задача не из лёгких, согласитесь? Да и к тому же, очень индивидуальная. Однако, большинство шаблонов и фреймворков уже итак неплохо отображаются на мобильных телефонах, за мелкими исключениями. Поэтому, скрыть или показать некоторую информацию для определенных экранных разрешений будет достаточно, чтобы сайт более-менее сносно отображался на разных типах экранов.
Как скрыть часть информации от мобильных устройств?
Как Вы уже поняли, в помощь нам приходит media screen в CSS, с помощью которого можно регулировать отображение структуры сайта в зависимости от разрешений экранов. Для начала, нам нужно заключить скрываемую информацию в дополнительный div-контейнер, назовём его hidemobile.
<div>информация, которую не надо отображать на мобильных телефонах</div>
А после этого, добавить в style.css вашего сайта следующий фрагмент кода:
@media screen and (max-width: 600px) { .hidemobile { visibility: hidden; display: none; } }
В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.
Как сделать информацию видимой только на мобильных устройствах?
Возможно, у вас есть какое-то целевое предложение или контент, предназначенный только для владельцев смартфонов. Или же вы банально хотите показывать мобильным посетителям принципиально другое содержание страницы. В любом из этих случаев, рассмотрим способ отображения контента только на маленьких разрешениях экрана.
Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.
<div>информация, которую будет видно только на телефонах</div>
А после добавим в style.css сайта этот фрагмент кода:
.showmobile { display: none; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .showmobile { display: inline; }}
Удачной вёрстки!
Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.
ser-ser.ru
Дизайн сайта для мобильных устройств
Все больше и больше пользователей заходят на веб-сайты с мобильных телефонов. Компания Gfk опубликовала данные новых исследований: по статистике доля пользователей, которые используют мобильные устройства для поиска в интернете составляет 61%. Однако, дизайнеры часто совершают ошибки в проектировании макетов для мобильных телефонов. В этой статье мы поговорим об основных правилах дизайна сайта для мобильных устройств и приведем реальные примеры.
Правило 1. Адаптивность
Самое главное в дизайне сайта для мобильных телефонов — адаптивность. Если дизайнер не продумает расположение блоков, элементы могут «поехать», накладываться друг на друга или остаться очень мелкими и пользователю придется пользоваться зумом. Например, на сайте интернет-магазина книг блоки расположены также, как и на десктопной версии сайта, поэтому текст и изображения мелкие, приходится увеличивать макет и перемещаться по экрану в разных направлениях (нет скроллинга и навигации):
Чтобы этого не произошло, дизайнеру нужно позаботиться об адаптивности сайта. Мобильные устройства имеют ряд ограничений:
- маленький размер экрана;
- низкая скорость загрузки, по сравнению с компьютерами;
- сложности при вводе данных;
- некоторый контент не может быть отображен или отображается некорректно.
Все это учитывается при разработке адаптивной версии. Кроме того, наличие мобильной версии сайта повышает позиции ресурса в поисковых сетях, что влияет на количество переходов на сайт и, соответственно, количество потенциальных клиентов. Так выглядит адаптивная версия сайта IDBI:
Блоки на адаптивной версии расположены таким образом, чтобы пользователь мог легко читать текст и рассматривать изображения, кнопки достаточно большого размера для удобства при нажатии и переходе на следующую страницу.
Остальные правила относятся к проектированию адаптивной версии сайта.
Правило 2. Большие размеры
Так как телефоны имеют маленький размер экрана, элементы сайта должны быть видны пользователю, не должно быть затруднений при взаимодействии с интерфейсом. Например, кнопка «Купить» или «В корзину» должна быть заметна для пользователя, удобной для нажатия пальцем.
На примере — мобильная версия интернет-магазина «Озон». Кнопка зафиксирована внизу экрана, чтобы при прокрутке всегда была перед глазами. Выделена контрастным синим цветом для привлечения внимания. Достаточно крупная, для удобства при нажатии и при переходе в корзину. Также разработчики указали конкретное целевое действие: добавить в корзину товар определенной цены.
То же самое касается других элементов — форм, изображений, надписей и других блоков. Если элемент не привлекает внимание, неудобен для нажатия (например, пользователь «промахивается» и переходит на другую страницу), то есть большая вероятность, что клиент закроет сайт и уйдет к конкурентам.
Рекомендации по размерам элементов для нажатия: минимальный размер 26 px. Компания Apple рекомендует использовать размеры 44×44 px.
Правило 3. Крупная типографика
Третье правило тесно связано со вторым и касается текстовых блоков. Читать мелкий шрифт с мобильных экранов очень трудно. Если пользователю приходится вглядываться или увеличивать макет, чтобы прочитать нужную информацию, вы рискуете потерять клиента. Типографика должна быть настроена таким образом, чтобы текст был читабельным, также важно контролировать отступы между блоками и от края экрана:
На примере видно, что шрифт довольно крупный, удобен для чтения. Не используется больше 2-х шрифтов, соблюдены интервалы между текстовыми блоками, настроен интерлиньяж и кернинг. Текст читается легко, так как разбавлен иконками и кнопками контрастных цветов.
В нашем блоге также подобран оптимальный размер шрифта, который легко читается с устройств с маленьким экраном, изображения также оптимизированы, не снижают скорость загрузки сайта:
Правило 4. Ничего лишнего
Так как сайты на мобильных устройствах не смогут обеспечить пользователей всей функциональностью десктопных версий, дизайнерам следует отделить необходимую информацию и сделать контент полностью доступным. Для этого нужно убрать все лишние детали, которые усложняют дизайн и функционал сайта. Так выглядит десктопная и мобильная версия интернет-магазина одежды Lady Maria:
Десктопная версия
Мобильная версия
Как видно из примера, в мобильной версии убрали большое изображение с главного экрана и пользователь сразу переходит к категориям товара. Также уменьшили блок «Распродажа» — на мобильных устройствах акция отображается вверху в шапке, для привлечения внимания используется красная иконка со знаком %.
Если сайт слишком большой и нельзя уместить весь функционал в мобильной версии, компании разрабатывают мобильные приложения и предлагают пользователям установить их:
Такой подход безусловно требует больших вложений, но разнообразие функционала, возможность оповещений пользователя и постоянная доступность приложения для пользователя может компенсировать все затраты высоким уровнем конверсии.
Правило 5. Контент в одной колонке
Чтобы блоки хорошо просматривались пользователями, дизайнеры помещают контент в одну колонку. Текст и изображения располагаются по ширине, вертикальный скроллинг, одноколоночная структура.
На примере продукты располагаются в одной колонке, просматриваются при скроллинге. При проектировании такой ленты нужно учитывать, что пользователи не будут бесконечно прокручивать сайт. Поэтому контент разделяется на смысловые блоки, продолжить просматривать товары соответствующей категории можно после перехода по ссылке на отдельную страницу.
Правило 6. Нет поп-апам и виджетам
Некоторые инструменты на сайтах корректно отображаться могут только на десктопных версиях. Например, к ним можно отнести различные чаты с онлайн-консультантами, появляющиеся формы для подписки, поп-апы и прочее. На мобильных версиях они, как правило, раздражают пользователей или неадаптированы под меньший размер экрана («наезжают» на другие блоки, слишком нагружают сайт и прочее).
Поэтому при дизайне сайта под мобильные устройства лучше отказаться от всплывающих окон, виджетов, и разрабатывать дизайн элементов призыва к действию под мобильные устройства: встраивать короткие формы в контент, помещать кнопки для звонка в нижнюю часть экрана.
Если же без поп-апов не обойтись, лучше адаптировать их под размер устройства:
На сайте «Билайн» есть всплывающее окно с предложением оформить SIM-карту. Чтобы собрать лиды и не раздражать при этом другую группу пользователей, на всплывающем окне отчетливо видно значок закрытия, разработана очень простая форма: телефон и кнопка.
Правило 7. Доступные контактные данные
Основная цель сайтов с мобильной версией — призыв пользователя к целевому действию. В отличие от десктопной версии, главное целевое действие для мобильных устройств — получить звонок от клиента. Для этого делают следующее:
- размещают кнопку для телефонного звонка;
- контактные данные размещаются на первом экране, чтобы пользователь сразу обратил на них внимание;
- телефон компании делают кликабельной ссылкой, которая перенаправляет пользователя в контакты или сразу выполняет вызов.
Например, на нашем сайте значок телефона ведет пользователя сразу к совершению вызова через приложение на устройстве:
Пример 8. Социальные сети
Один из самых больших плюсов мобильных устройств — возможность быстро реагировать на новости, делиться с другими пользователями найденными товарами с помощью социальных сетей. С развитием Instagram и мессенджеров все больше пользователей пользуются социальными сетями только с мобильных телефонов. Поэтому для продвижения компании в сети разумно использовать социальные сети. Для этого на сайте оставляют ссылки на самые популярные ресурсы и кнопку «Поделиться».
Пример 9. Короткие формы
Заполнять длинные анкеты на телефоне — медленно и неудобно. Чтобы упростить пользователям ввод данных и побудить к целевому действию, формы разрабатывают следующим образом:
- если анкета предполагает большое количество полей, форму разбивают на несколько этапов;
- поля и кнопки делают больших размеров для удобного нажатия;
- кнопки выделяются, чтобы привлечь внимание пользователя;
- количество полей сводится до минимума;
- для некоторых полей применяется автозаполнение или размещается маска. Например, при заполнении поля «номер телефона» используется маска на ввод.
Самое лучшее решение — оставить клиенту минимум полей для заполнения. Упрощение ввода данных увеличивает уровень конверсии сайта, так как пользователю не нужно совершать сложные действия, чтобы получить нужный результат.
Вот как разработали форму для получения кредитной карты дизайнеры банка «Тинькофф»:
Достаточно сложная форма разбита на несколько шагов, добавлены различные интерактивные элементы (ползунок для выбора лимита), мотивация к действию (50% вероятность одобрения). Также добавлена маска для ввода телефона, поля крупные, добавлены подсказки на каждом шаге.
Проектирование веб-форм — отдельная задача дизайнера, которая требует максимального внимания от разработчика, так как форма — один из главных элементов призыва к действию. Подробнее о создании форм можно прочитать в этой статье.
Правило 10. Пространство
Переходя с десктопной на мобильную версию, нужно контролировать расположение блоков. Очень часто дизайнеры используют белое пространство — интервалы между элементами, с помощью которых можно привлечь внимание пользователя к нужной детали, облегчить восприятие контента. Однако, при перестройке макета под меньший размер экрана, интервалы сокращаются. Чтобы сохранить концепцию дизайна и интервалы, пространство перераспределяют, изменяют расположения блоков и элементов сайта:
Десктопная версия
Мобильная версия
Дизайнер должен контролировать отступы между текстовыми блоками и изображениями, выделять достаточно места для кнопок, с помощью интервалов выделять нужные элементы для привлечения внимания.
Правило 11. Проектирование навигационных элементов
Чтобы пользователь понимал, где он находится, легко ориентировался на сайте и воспринимал контент, важно продумать навигацию на сайте. Более подробно мы писали об этом здесь. Для мобильных устройств это также важно: клиент должен быстро находить нужную информацию и знать, как заказать товар.
Самый распространенный прием — фиксированное меню. При скроллинге такое меню остается перед глазами и позволяет быстро переходить из раздела в раздел:
Еще один важный элемент навигации — переход на полную версию сайта. Так как мобильная версия урезанная, пользователю может понадобиться полный функционал сайта. Некоторые разработчики забывают о необходимости проставить ссылку на полную версию, чем вызывают недовольство пользователей.
Правило 12. Целевая аудитория
Самый важный инструмент для анализа уровня конверсии сайта — использование аналитики. Сейчас есть множество сервисов и программ, которые позволяют отслеживать трафик, анализировать качество контента на сайте, выявлять целевую аудиторию сайта.
Есть некоторые сайты, на которые чаще переходят с мобильных устройств, а не с компьютеров. Например, интернет-магазины, которые продвигаются только за счет социальных сетей — Instagram, Telegram и прочее. При разработке дизайна таких сайтов возможна технология Mobile first — подход, при котором сначала разрабатывается мобильная версия сайта, а затем остальные варианты.
Также это правило касается используемых технологий на сайте. Пользователи iPhone не могут просматривать контент, который создан с помощью устаревшей технологии Flash-анимации. Поэтому нужно заменять такие инструменты на более современные, если большинство ваших клиентов используют устройства Apple.
Студия дизайна IDBI всегда разрабатывает несколько вариантов дизайна: для десктопа, планшетов, мобильных телефонов. Такой подход помогает предпринимателям получить большую прибыль с сайта, а пользователям — быстро найти нужный товар, связаться с менеджерами для уточнения информации. Примеры наших работ можно посмотреть в разделе «Портфолио».
idbi.ru
Как оптимизировать страницы сайта для мобильных устройств
Приветствую Вас, мой Друг!
В этой статье мы поговорим с Вами об оптимизации страниц блога для мобильных устройств. Эта проблема сегодня, я уверена, волнует многих блоггеров.
Содержание этой статьи:
Сервис Google Webmaster
С 21 апреля 2015 года компания Google начала отдавать предпочтение в своей поисковой выдаче сайтам, адаптированным под мобильные устройства. Поэтому я не осталась равнодушна к судьбе моих сайтов и приняла решение исправить все недостатки отображения страниц моих сайтов на тех же смартфонах.
После диагностики своих блогов на сервисе Google Webmaster Tools (инструменты для веб-мастеров), в своем профиле я получила результаты анализа на совместимость их с мобильными устройствами. И вот что я увидела…
Проверив домен http://deklife.ru Google выдал мне вот такую картинку с четырьмя проблемами отображения блога на смартфонах и айфонах.
- Контент шире экрана
- Значение метатега viewport не задано.
- Интерактивные элементы расположены слишком близко
- Слишком мелкий шрифт
Ну, тут все понятно. Просто этот домен является зеркалом моего основного домена https://deklife.ru, который я недавно перевела на SSLзащищенный сертификат и плюс еще активировала на нем плагин WPTouch.
Обязательно почитайте мою Пошаговую Инструкцию со скриншотами по бесплатному переводу сайта на «https». Уверена, она Вам очень понравится и пригодится в работе с блогом.
На зеркале своего блога я до этого вообще ничего не делала для оптимизации сайта под разные мобильные гаджеты. Вот Гугл и возмутился…
А после установки на основной домен блога умного плагина по мнению Гугл все нормализовалось.
Сервис Yandex Webmaster
Практически тот же результат после проверки сайта был и на сервисе Yandex Webmaster.
Было обнаружено правда три ошибки. Но их нужно было как-то решать. Свои рекомендации Яндекс выдал мне в таком виде.
Решение проблемы оптимизации страниц сайта для мобильных устройств
- С помощью плагина WPtouch Mobile;
- Вручную прописывая html-коды.
Самым простым и быстрым решением этой проблемы была установка на мой блог WordPress специального плагина, который без дополнительных настроек помогал бы сайту корректно отображаться в первую очередь на смартфонах.
Полное и правильное название этого чудо-плагина WPtouch Mobile Plugin.
Скачать его дистрибутив Вы можете на официальном сайте WordPress: wordpress.org/plugins/wptouch/ (скопируйте ссылку и вставьте ее в адресную строку своего браузера).
Как установить и активировать плагин WPtouch Mobile на свой блог
- Скачайте файл с архивом плагина себе на компьютер по ссылке с официального сайта WordPress;
- Зайдите в админке WP в раздел Плагины, затем- Добавить новый;
- Загрузите файл плагина на свой сервер из админки своего блога, с помощью ftp-клиента FileZilla или на своем хостинге;
- Активируйте плагин.
После загрузки и активации плагина на сервер в меню слева в Амин-панели Вашего блога появится кнопка WPtouch. Нажмите на нее и выберите Настройки. Появится страница с настройками по умолчанию.
Ничего не меняйте, оставьте все как есть. Но если Вам потребуются более расширенные настройки сайта для мобильных устройств, то Вы можете обновить плагин до Pro-версии. Но это уже платная услуга.
Тарифы сами видите какие… :-)) Но, кому нужны более расширенные настройки плагина для оптимизации страниц сайтов для мобильных устройств, про и про+ будут очень даже кстати.
Двум моим блогам настройки ПО УМОЛЧАНИЮ вполне помогли. Проверив оба сайта на специальных сервисах я успокоилась. Там было все ОК!
Единственное, что меня насторожило при диагностике сайтов, это отсутствие какого-то загадочного метатега viewport, с которым я решила серьезно разобраться.
Сервисы для проверки сайта после оптимизации для мобильных устройств
Проверьте видимость Вашего сайта на смартфоне с помощью трех сервисов.
Сначала войдите на сайт этого сервиса Google:
www.google.com/webmasters/tools/mobile-friendly/
Введите там адрес Вашего блога в поле для проверки и нажмите на кнопку Analyze. Если с Вашим сайтом все хорошо, то Google выдаст такую надпись.
Второй сервис Google для проверки мобильности сайта PageSpeed Insights
developers.google.com/speed/pagespeed/insights/
Внизу этой страницы я скачала zip-архив с рекомендациями по исправлению небольших косяков на моем сайте. Внутри архива Google было три папки с изображениями, текстовым файлом со ссылками на не оптимизированные страницы и папка с файлами js.
Будет время-разберусь с всем этим хозяйством. А пока плагин WPtouch Mobile неплохо справляется со своими обязанностями. Главное- мои посты на смартфонах читать МОЖНО и вполне удобно.
Третий вебресурс для проверки сайта: www.cy-pr.com
Этот сервис часто используют для полного Анализа сайтов. Что касается совместимости с мобильными устройствами, сервис выдал мне подробнейший отчет.
Как видно на скриншоте, с моим блогом все чики-пики кроме табуляций, лишних пробелов и переносов в html-кодах. Это и не удивительно, что-то же должно быть не так. Тем более, что я обожаю ковыряться в кодах и модернизировать свой блог.
Думаю, что это не критичные погрешности. А вот что касается метатега viewport, то тут уже проблемка посерьезнее. И нужно ее как-то решать.
Как и где прописывать этот метатег я не знала. Пришлось перелопатить кучу сайтов по сео оптимизации и техническим моментам блоггинга, пока я не нашла то, что мне было нужно.
Для чего нужен метатег «viewport» и куда его вставить
Давайте разберемся теперь с этим метатегом. Для чего Google и Yandex так упорно требуют его присутствие в html-коде нашего сайта.
Мета-тег viewport был введен компанией Apple для корректировки отображения страниц сайта на мобильных устройствах. Как говорит в своих инструкциях Google, мета-тег «вьюпорт» должен обязательно присутствовать в блоке «head».
Чтобы выполнить рекомендацию Гугла зайдите в свою Админку WordPress, в меню слева нажмите на Внешний вид, затем на Редактор.
Справа в списке файлов Темы выберите файл header.php и проверьте, есть ли там у вас между тегами «head» и «/head» что-то типа этого кода:
<meta name=»viewport» content=»width=device-width»>
или как в моем шаблоне: (этот вьюпорт оказывается у меня есть в коде хейда!)
<meta name=viewport content=»width=device-width, maximum-scale=1.0″>
В первом случае метатег viewport прописывает то, что просмотр контента стандартный-происходит только «подгон» по ширине мобильного устройства. А во втором (моем) мета-теге еще и стоит ограничение на максимальный масштаб=1.0.
Короче вдаваться в этот «дремучий лес языка программирования» я больше не стала. Главную суть темы я Вам передала, есть повод теперь поразмышлять над своей ситуацией.
Мой сайт с мобильных устройств читать можно. А с мелочами я может быть разберусь со временем.
Если мой пост был Вам полезен, напишите об этом в поле для комментариев. Будет интересно всем!
И конечно же, по традиции — подпишитесь на новости этого блога, если он Вас зацепил.
С уважением, Елена Контиевская
Петух — символ Нового 2017 года, встречайте!:) Приколы с петухом в главной роли))
deklife.ru