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

Похожие вопросы:

Я искал, чтобы увидеть, как открыть веб-сайт на мобильном устройстве, которое построено с использованием Silverlight 4.0 и VS 2010. Можно ли открыть сайт на мобильном телефоне, который построен с…

Возможный Дубликат : веб-сайт в мобильном телефоне больше, чем дисплей Я понял этот сайт: agriandgolf.com К сожалению, на мобильных устройствах (я пробовал с samsung galaxy 2) веб-сайт больше, чем…

Как я могу сделать так, чтобы мой сайт выглядел как полноценный сайт на мобильном устройстве? Я использую jquery-mobile на настольном сайте и хочу отображать веб-страницу как обычную страницу…

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

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

Есть ли какая-либо техника, используемая для входа на мой сайт, на моем мобильном телефоне, используя qr-код из браузера PC ? (Мобильный телефон будет захватывать код QR с ПК, а затем открывать…

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

У меня есть веб-сайт php driven, и один из блоков данных-это номер телефона, однако он отображается в интернете, и сайт bootstrap правильно реагирует на мобильные устройства. Однако номер, и только…

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

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

Для просмотра на мобильных устройствах, используется метатег 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;
    }
}

Верный viewport

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

<meta name="viewport" content="width=device-width, user-scalable=yes">

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

1. Фреймворк для адаптивной верстки
2. Адаптивная верстка для мобильных устройств

Мобильная версия сайта: виды оптимизации для SEO

Все знают знаменитую фразу Билла Гейтса: “Если тебя нет в интернете, значит у тебя нет бизнеса”… Для более актуального отражения ситуации в наши дни это высказывание будет звучать немного по другому: “Если твоего сайта нет в мобильном поиске, значит у тебя нет сайта”.
Мобильный интернет-трафик в России рекордно растет в 2019 году. Наблюдается увеличение в полтора раза по сравнению с прошлым годом. Учитывая постоянный рост количества пользователей современных гаджетов и повышенный интерес к видео-контенту в интернете, такой скачок вполне логичен.

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

Мобильная версия — что это такое и для чего нужна?

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

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

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

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

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

Основные преимущества мобильной версии сайта:

1. Дает наиболее приоритетную информацию и позволяет совершать заказ/покупку с минимумом действий.
2. Можно вносить существенные изменения, так как это отдельная версия и не нужно что-то менять в основном сайте.
3. Быстрая загрузка страниц, так как все необходимые элементы имеют меньший вес.
4. Есть возможность перейти на полную версию сайта в случае проблем с мобильной.
5. Соответствие требованиям Google для удобства просмотра на мобильных устройствах.

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

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

Виды мобильной версии сайта: адаптивный дизайн и отдельная мобильная версия

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

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

Основные плюсы адаптивной верстки:

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

Адаптивная версия — удобное и экономичное решение, но с точки зрения поискового продвижения у него есть несколько подводных камней. Многие реализуют адаптивную верстку неверно и выводят на одной странице в коде сразу два шаблона — десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остается видимой, а остальная скрывается с помощью display: none. Исходя из этого возникают такие проблемы:

1. Все элементы контента загружаются дважды: тексты, изображения, заголовки и т. д., что негативно сказывается на ранжировании.
2. Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявлял, что игнорирует содержание скрытых блоков, а Яндекс — что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создает риск попадания под санкции.
3. Код дублируется и сайт загружается медленнее.

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

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

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

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

Основные преимущества:

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

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

1. Двойная работа по продвижению. Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется гораздо больше ресурсов. Чтобы мобильная версия не конкурировала с десктопной и корректно индексировалась, нужно связать их в Яндекс.Вебмастере и Search Console, прописать корректные атрибуты rel=“alternate”, настроить индексацию и генерацию XML-карты.
2. Десктопные и мобильные шаблоны в большинстве случаев загружают контент из одной базы. Если в нем используются абсолютные ссылки на внутреннюю страницу десктопного сайта с указанием протокола и домена, то они отобразятся и на мобильной странице. Если у десктопной версии не определяется user agent, то при переходе по ссылке пользователь увидит страницу той же версии. Работа по созданию мобильной версии будет напрасной. При этом внутренний ссылочный вес сайта может нарушиться. Чтобы проблема не возникла, используйте в контенте относительные ссылки.
3. Противоречия рекомендаций Google. Существует мнение, что Google некорректно индексирует две версии сайтов и выбирает необходимую для отображения. Поисковая система рекомендует на мобильной версии указывать, что основным является контент десктопного сайта. С другой стороны, поисковик говорит, что содержимое не основных страниц не учитывается. У Яндекса в этом вопросе все гораздо проще — он отдельно индексирует контент мобильных и десктопных страниц.
4. Снижение эффекта от внешних ссылок. Ссылки по-прежнему важны для ранжирования, особенно в поиске Google. когда дополнительно появляется мобильный поддомен, часть пользователей начинает ссылаться на него в соц. сетях и форумах. В итоге ссылки дают меньше эффекта в мобильном и десктопном поисках, чем при ссылках на один домен.

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

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

Технология RESS

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

В качестве решения этой проблемы подойдет технология RESS (Responsive Design + Server Side Components). Эта технология позволяет выполнять часть задач при работе с адаптивным сайтом за счет ресурсов серверной части. При посещении сайта с мобильных устройств выдаётся облегченная версия сайта по тому же самому адресу. Сайт сам определяет, что пользователь зашел именно с телефона и загружает в браузер мобильный вариант страницы. В отличие от адаптивного дизайна, вес её намного меньше и в телефон грузятся только те блоки, которые для него предназначены. Вес таких страниц легче, а скорость загрузки намного выше. Технология RESS сочетает описанные выше плюсы адаптива и мобильной версии. Но у неё есть и два минуса: сложная и дорогая реализации и ошибки с определением редких и непопулярных моделей телефонов.

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

Согласно алгоритму работы Mobile First Index в первую очередь Googlebot для сматрфонов будет сканировать мобильные версии сайтов. Поскольку мобильная версия теперь находится в приоритете, отсутствие части важного контента будет влиять на ранжирование.

В справке для веб-мастеров Google дает такие рекомендации:

• Мобильная версия должна содержать те же материалы, что и полная. Основной контент должен совпадать с десктопной версией: тексты, изображения с атрибутом alt, видео и другие элементы.
• Обе версии сайта должны содержать структурированные данные. URL в структурированных данных мобильных версий должен вести на оптимизированные для мобильных телефонов страницы.
• В обеих версиях сайта должны быть метаданные. Убедитесь, что на обеих версиях совпадают заголовки и метаописания.

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

Почитать по теме:

Как улучшить мобильные факторы ранжирования

Google mobile-first index вступил в силу

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

Тем не менее Яндекс тоже дает рекомендации:

• Ресурсы должны быть доступны для краулеров.
  Не закрывайте страницы от ботов, в robots.txt разрешите в файле сканирование CSS, JavaScript, от которых зависит отображение сайта на мобильных устройствах. Иначе страницы сайта могут некорректно отображаться в результатах поиска.
• 200 ОК.
  Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK.
• Не используйте Flash, Silverlight или Applet.
  Эти технологии могут не открыться на мобильных.
• Контент на вертикальной прокрутке.
  Не размещайте контент так, чтобы пользователю приходилось прокручивать горизонтально. Размер в пикселях должен быть удобным для чтения.

Про отличия сказано:

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

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

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

Google Mobile Friendly. Сервис выводит на экран вид сайта на мобильном устройстве и оценивает в целом его оптимизацию под гаджеты.

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

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

Responsinator. обеспечивает просмотр мобильной версии сайта с шести разных устройств.

Adaptivator. Имеет возможности, аналогичные сервису Responsinator и оценивает результат адаптивности.

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

Технологии ускоренных мобильных страниц

АМР-страницы в Google

AMP (accelerated mobile pages) — это технология ускоренных мобильных страниц, которая была разработана и активно продвигалась компанией Google еще в конце 2015 года.

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

Среди преимуществ АМР-страниц следует отметить следующие:

• Поддержка крупнейшими поисковыми системами, среди которых — Baidu, Yahoo, Google и Bing. Кроме того, поддержка есть и в социальных сетях Twitter, LinkedIn и Pinterest.
• АМР-страница загружается за 0.7 секунды, как утверждают специалисты Google. Такая высокая скорость позволяет пользователю сразу же пользоваться веб-сайтом, не ожидая долгой загрузки. Для сравнения, загрузка обычных страниц занимает, в среднем, 20-23 секунды.
• AMP-страница показывается и в карусели фото/записей в поисковой выдаче, однако для корректного отображения такой страницы необходима структура метаданных, которая поддерживается Google.
• Ошибки в валидности разметки для АМР можно обнаружить в Google Search Console, где отображается информация по таким страницам, дополнительно к этому АМР-расширение позволяет проводить А/В-тестирование.

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

• Неудобная прокрутка.
• АМР значительно усложняет обмен ссылками — для того, чтобы пользователь скинул ссылку другому пользователю, нужно нажать специальную кнопку, которая копирует оригинальный URL.
• Пользователям приходится использовать АМР-страницы, даже если они этого не хотят — попросту отсутствует функция отключения рендеринга.
• Контент сайта частично урезается — в некоторых случаях отключаются комментарии, иногда не загружаются изображения.

Таким образом, сформировалось неоднозначное мнение касательно использования АМР-страниц. Вопрос о том, использовать их или нет, остается открытым.

Читать по теме:

Рекомендации по использованию АМР-страниц в Google Поиске

Турбо-страницы Яндекса

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

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

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

Преимущества Турбо-страниц в том, что после их внедрения на сайте:

• Падает показатель отказов. Если пользователь вынужден долго ждать загрузки страницы из-за плохого соединения с интернетом, чаще всего он просто не выдерживает, закрывает страницу и снова возвращается в поисковую выдачу, чтобы найти более быстрый ресурс. Таким образом показатель отказов растет, соответственно позиции сайта в поисковой выдаче снижаются.
• Растет мобильный трафик. Многие пользователи уже знают, что сайты, отмеченные в выдаче значком ракеты, грузятся очень быстро и поэтому кликают по ним в первую очередь. Это дает преимущество перед конкурентами и позволяет увеличить посещаемость сайта с мобильных устройств.
• Снижается нагрузка на хостинг. Если на сайте довольно высокая посещаемость, то этот пункт будет тоже актуален. За счет того, что загрузка контента идет не с хостинга ресурса, а с серверов Яндекса, нагрузка снижается. При этом для создания и хранения Турбо-страниц Яндекс использует собственную сеть доставки контента (CDN), что также положительно влияет на скорость загрузки.

Недостатки Турбо-страниц:

• Ограниченный шаблон оформления страницы. По этой причине не получается сочетать уникальный дизайн и высокую скорость загрузки. Приходится выбирать, что в конкретном случае важнее. Чтобы не потерять узнаваемость, можно разместить логотип и на основе CSS стилизовать страницы.
• Лимит постов, изображений и ограничение веса в пределах 15 МБ. Это вызывает сложности у крупных проектов.
• Дополнительные затраты времени в процессе работы вебмастеров, которым придётся следить сразу за несколькими версиями сайта: основной, мобильной, Турбо и AMP.

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

Читать по теме

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

Типичные ошибки мобильной версии

№1 Сокращение контента.

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

№2 Тяжелые изображения.

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

№3 Маленькие элементы.

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

№4 Невнимание к особенностям мобильных гаджетов.

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

№5 Адаптирование десктопной версии версии под мобильную.

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

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

Что выбрать?

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

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

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

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

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

Все инструменты в одном аккаунте. Присоединяйтесь к Sape!

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

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

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

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

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

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

Также для этой цели можно воспользоваться статистикой, полученной из Яндекс.Метрики.

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

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

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

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

Для того чтобы указать браузеру на мобильную версию сайта, нужно воспользоваться тегом link, указав в нем ее адрес. Таким образом, когда мы заходим на сайт с мобильного устройства, сервер видит User Agent и переадресует нас на мобильную версию 301-м редиректом.

2. Динамическая верстка страниц

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

3. Сайт с адаптивным дизайном

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

Плюсы и минусы подходов

Первые два способа используют директиву User Agent. Также их объединяет наличие двух версий сайта – обычной и мобильной. У двух этих подходов есть ряд общих особенностей:

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

Для сайтов с адаптивным дизайном характерны другие особенности:

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

Полезные ссылки

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

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

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

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

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

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

В данном примере мы указали размер шрифта в 72px для обычной версии и в 36px для окон, ширина которых меньше или равна 400px.

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

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

Данная формула говорит о том, что минимальный размер шрифта равен 12px + 2,5 единицы ширины окна браузера. Рекомендуется задавать размер шрифта не менее 12px. Если текст довольно длинный, для мобильных устройств, лучше указать хотя бы 15px.

Удобства

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

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

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

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

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

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

Формы

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

Цифровая клавиатура

Почтовая клавиатура – добавляет @ и точку

Телефонная клавиатура

Переворачивание устройства

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

Пример работы сайта при переворачивании устройства. В вертикальном режиме – кнопка с иконкой. В горизонтальном режиме – кнопка с текстом.

Вписывание фотографий в экран

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

Устанавливаем для картинки свойство height в 100 единиц viewport. Получаем подходящий размер, но картинка выходит за экран с правой стороны.

Устанавливаем max-width в 100 %. Картинка влезла, но деформировалась по ширине.

Устанавливаем свойство object-fit в cover. Картинка вписалась и будет корректно отображаться на любом экране.

Роскошь

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

Адаптивные изображения

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

Иконки для домашнего экрана

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

Хорошая новость – иконки можно генерировать автоматически. Для этого существуют специальные сервисы. Например, www.favicon-generator.org.

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

Фундамент пирамиды

При всем вышесказанном, не стоит забывать о фундаменте веба.

Как измерить скорость загрузки?

• Для измерения скорости загрузки можно воспользоваться бесплатным сервисом www.webpagetest.org. У него много опций, и он рисует неплохие графики.
• У Google есть хороший инструмент, дающий советы непосредственно для Вашей страницы: https://developers.google.com/speed/pagespeed/insights/.

Как ускорить загрузку в браузере?

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

• В первую очередь, необходимо сократить количество и объем HTTP-запросов. Для этого можно предпринять следующие шаги:
  • Использовать CSS-спрайты. Множество картинок оформляется в одну большую, которая отправляется в браузер и уже там нарезается.
  • Использовать встроенные в CSS картинки, чтобы не тратить на них отдельный запрос (data:URL).
  • Собирать один минифицированный CSS- и JS-файл.
• Подключать JS-файл в конец страницы, чтобы не блокировать отрисовку.
• Сжимать изображения с помощью таких инструментов, как ImageOptim или ImageAlpha.
• Использовать адаптивные изображения.
• Использовать CDN-сервера, которые хранят популярные библиотеки.
• Использовать поддомены. У браузера существует ограничение на параллельное скачивание ресурсов с одного домена. Использование поддоменов может увеличить количество параллельных запросов.
• Использовать сжатие – gzip, zopfli, brotli, sdch.
• Использовать браузерный кэш – Expires, Cache-Control, Last-Modified, ETag.

Подробнее об ускорении загрузки читайте в статье «Как ускорить работу мобильной версии вашего сайта».

Профилирование в браузере

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

Ссылка на полную версию

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

В случае с мобильной версией добавляется параметр, открывающий новую версию перезагрузкой страницы: m.example.com → example.com?v=desktop.

В случае с динамической версткой используется аналогичное решение, но в пределах одного домена: example.com → example.com?v=desktop.

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

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

Семантика и доступность

Разумеется, всегда нужно помнить о семантике и доступности.

Источник (видео): Мобильные штучки — Артём Курбатов.

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

Разработка адаптивных сайтов под мобильные устройства возможна с помощью конструктора сайта Elementor так же просто как 1-2-3. Вам не нужно знать коды, медиазапросы, стили css, а достаточно просто для каждого «типа мобильного устройства» отредактировать параметры виджета, элементов или секций. Давайте рассмотрим простой пример.

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

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

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

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

Как изменить свойства для другого устройства

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

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

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

Скрытие элементов и реверс

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

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

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

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

Как сделать сайт дружественным для мобильных устройств. Читайте на Cossa.ru

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

Доля мобильных пользователей неуклонно растет

Уже несколько лет подряд в своем ежегодном исследование аудитории РунетаЯндекс отмечаетсущественный прирост пользователей, выходящих в интернет с мобильных устройств. Статистические данные подтверждают еще одну наметившуюся тенденцию — в ряде тематик доля пользователей, которые заходят на сайт с различных мобильных устройств, уже превышает долю пользователей ПК. Это прекрасно иллюстрируют сайты социальных сетей. Например, по состоянию на октябрь 2014 года мобильная аудиторияFacebookсравнялась с общей ежедневно активной аудиторией сервиса.

Возрастает и процент покупок, совершаемых с мобильных устройств. Постатистике Google39% пользователей смартфонов совершали покупки с помощью мобильных устройств, 55% пользователей, ищущих на смартфонах информацию о товарах или услугах, планируют совершить покупку в течение одного часа, 83% в тот же день. В 47% случаев такой поиск конвертировался в последующую покупку с ПК, в 82% в покупку в офлайн-магазине, в 17% в покупку с помощью смартфона.

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

Варианты дружественных к мобильным устройствам сайтов

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

• Мобильная версия сайта(у некоторых сайтов так же есть WAP-версия) – это вынесенные на отдельные URL (www.domain.ru/mobile/page_1) или даже отдельный поддомен (m.domain.ru/page_1) страницы сайта. Чаще всего это урезанная версия основного сайта с ограниченным функционалом. В последнее время мобильные версии теряют свою актуальность из-за совершенствования CSS и ряда недостатков при разборе user-agent-ов на серверах. Дополнительное неудобство для пользователя — необходимость запоминать несколько URL сайта.
• Мобильное приложение сайта —специальное приложение, разработанное под определенную мобильную платформу (iOS, Android, Windows Phone). Привлекательно наиболее тесной интеграцией с платформой, что позволяет реализовать привычный для пользователей интерфейс, также отличается высоким быстродействием. Оправданный вариант, если проект больше рассчитан на оффлайновую работу и на мобильных пользователей. Основной недостаток — необходимость скачивания приложения, в противном случае пользователь видит полную версию сайта в маленьком масштабе. Поэтому, даже если у вас есть мобильное приложение, этого не достаточно, в любом случае необходимо делать качественную мобильную версию ресурса.
• Сайты с адаптивным дизайном —автоматически адаптируется под параметры того устройства, с которого осуществляется вход. Существенный плюс — один URL для всех устройств, что избавляет разработчиков от редиректов, а пользователей от необходимости запоминать адрес мобильной версии сайта. Наиболее популярный в последнее время вариант, так как позволяет работать над одним сайтом для всех типов устройств и дает существенную экономию на трудозатратах при внесении изменений в сайт и его последующую оптимизацию.

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

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

• оптимизацию CSS и настройку медиазапросов;
• настройку области просмотра с помощью специальных метатегов;
• оптимизацию используемых плагинов.

Оптимизация CSS и настройка медиазапросов

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

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

.container {width:210px;height:200px;}

Избежать этого можно, если при обозначение размеров элементов на странице использовать вместо абсолютных величин относительные (например, в процентах):

.container {width: 21,75%;height: 20,408%;}

Это позволит элементам страницы подстраиваться под изменения масштаба всей страницы.

Настройка области просмотра

Большинство сайтов при просмотре с экрана небольшого размера показываются пользователю в точно таком же разрешении (обычно это около 980 пикселей), как и при просмотре с ПК, например:

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

Использование специализированного метатега “viewport” помогает настроить ширину экрана под любое устройство:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут “initial-scale=1” указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1 независимо от ориентации дисплея) для корректного отображения в альбомной ориентации.

Оптимизация используемых плагинов

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

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

Дополнительные рекомендации

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

• Правильно подходите к выбору контрольных точек при задании процентных величин элементов макета, на эту тему можно почитать гуру адаптивного веб-дизайна –Итана Маркотта.

Пример оптимизации текста под смартфон и ПК

• По возможности максимально оптимизируйте JavaScript.
• Используйте понятную навигацию по сайту в верхней части страниц. Особенно это актуально для сайтов с гибким дизайном. Помните, что при «серфинге» с мобильной платформы пользователю должно быть так же удобно пользоваться сайтом, как и с ПК. Понятное меню и удобная навигация позволят не потеряться на страницах ресурса. Хороший вариант верстки лендинга с адаптивным дизайном —http://www.theverge.com/a/virtual-reality.

Пример навигации по сайту с адаптивным дизайном на экране ПК и смартфона

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

Заключение

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

Мобильная версия Joomla сайта, три способа реализации

Вступление

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

Неоценимую помощь в самостоятельном создании сайта могут оказать онлайн курсы программирования. Они помогают получить базовые знания в необходимой области IT, понять мир интернет технологий и возможно найти свою новую специальность в сфере IT. Найти источник хороших курсов программирования не просто, рекомендуем почитать блог https://itvdn.com/ru/blog.

Три подхода к одной проблеме

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

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

• Создать мобильную версию сайта;
• Использовать адаптивный дизайн;
• RESS (адаптивный веб-дизайн + серверные компоненты).

Посмотрите все три этих решения и выберете лучшее для своих задач.

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

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

К серьёзным минусам этого способа относим:

• Наличие полного дубля сайта, который нужно либо закрывать от поисковиков, либо работать с мета-тегами rel=» alternative» и rel=»canonical».
• Не добавляет данный способ удобства для пользователя. Зачем пользователю запоминать ваш сайт по двум адресам или искать кнопку переключения.

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

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

Адаптивный дизайн сайта это способ при котором ширина сайта (max-width: ) автоматические перестраивается под размеры используемого мобильного устройства.

Реализовать адаптивный дизайн не сложно. Выручают CSS3 и HTML5, а также браузеры, которые их поддерживают. При верстке сайта используется метод mobile-first, который по умолчанию показывает сайт в виде одной колонки и меню под кнопкой в «три полоски». С увеличением экрана, сайт начинает раздвигаться.

Адаптивный дизайн Joomla сайта реализуется на уровне шаблонов, который называются отзывчивые (responsive) или просто адаптивные.

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

По теме статьи: Что такое адаптивный шаблон Joomla 3 и Где скачать шаблон Joomla

Явные плюсы этого способа не требуют комментариев. Так как найти отзывчивый шаблон для Joomla 3 это не проблема, больше того, практически нельзя найти не адаптированный шаблон для Joomla 3.x, то этот вариант лучший.

Расширения адаптивного дизайна

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

Responsivizer

Компонент для создания адаптивного мобильного сайта, на версиях Joomla 1.5, 1.6, 1.7, 2.5, 3.x. Стоит компонент 59$. Вот его адрес в каталоге расширений: https://extensions.joomla.org/extension/responsivizer/.

Mobile Joomla!

Хорошее расширение, позволяющее адаптировать ваш сайт Joomla для iPhone, iPad, Android. К сожалению, работает только на версиях Joomla! 1.5, 1.6, 1.7, 2.5, 3.0, 3.1. Вот адрес сайта этого инструмента:  https://www.mobilejoomla.com/.

RESS

В начале статьи я упоминал о способе RESS (адаптивный веб-дизайн + серверные компоненты). На Joomla он реализовывался расширением Mobile Joomla!.  Возможно будут другие попытки.

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

Вывод

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

©joomla3-x.ru

Еще статьи

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

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

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

Помните, ваш веб-сайт часто является вашим первым впечатлением.

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

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

Как я могу увидеть, как выглядит мой сайт на разных устройствах?

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

1. Перейдите на http://mobiletest.me/ и выберите устройство, которое вы хотите протестировать с помощью
2. Введите URL-адрес веб-сайта, который вы хотите протестировать
3. Нажмите «Go»

Для просмотра сайта с другого устройства или для изменения ориентации экрана просто используйте вкладки «Параметры» и «Устройства» в верхнем левом углу экрана.

Что делать, если мне не нравится то, что я вижу?

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

Очевидно, что самое простое решение — попросить кого-нибудь починить его , однако это может оказаться дорогостоящим и трудоемким.

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

Хорошее краткосрочное решение — установить бесплатный плагин, такой как WPTouch . WPTouch создает мобильную версию вашего сайта и появляется только при просмотре на мобильном устройстве. Лучше всего то, что он доступен бесплатно и занимает всего минуту для установки (хотя вы можете потратить время на настройку цветов в соответствии с вашим сайтом и значков для каждого пункта меню).

Что такое веб-сайт, оптимизированный для мобильных устройств? Chicago Mobile Web Design

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

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

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

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

Если сайт не оптимизирован для мобильных устройств, как это выглядит?

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

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

В чем разница между мобильным и адаптивным веб-сайтом?

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

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

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

Как насчет рейтинга Google?

SEO (поисковая оптимизация) также играет большую роль во всем этом. Знаете ли вы, что Google ставит сайт, оптимизированный для мобильных устройств, выше? Ага. Они видят важность предоставления пользователям, просматривающим веб-страницы на своих мобильных устройствах, возможности щелкать ссылку в результатах поиска и с легкостью перемещаться по сайту.

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

Согласно Google, 94% американских пользователей смартфонов «ищут местную информацию на своих телефонах», и когда большинство людей ищут компанию, они готовы сделать покупку или связаться с нами прямо сейчас?

Колоссальные 57% пользователей не порекомендуют компанию, если мобильный сайт плохо спроектирован. Кроме того, 57% всего онлайн-трафика в США проходит через смартфоны и планшеты.

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

Заключительные мысли.

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

Нужна помощь?

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

Что такое мобильный веб-сайт?

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

Однако 87% малых предприятий не имеют веб-сайтов, оптимизированных для мобильных устройств.

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

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

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

Теперь мы более подробно рассмотрим другую стратегию мобильного присутствия в Интернете: мобильные веб-сайты.

Что такое мобильный веб-сайт?

Компании, использующие этот подход, обычно имеют два веб-сайта:

Настольный или «полный» сайт, который находится по обычному URL-адресу вашего веб-сайта (например,г., www.yourwebsite.com)

И отдельный сайт, созданный специально для мобильных устройств, который обычно находится по URL-адресу, например m.yourwebsite.com или yourwebsite.com/mobile.

Посетители автоматически перенаправляются на соответствующий веб-сайт в зависимости от типа устройства, которое они используют (например, iPhone или ноутбук Dell).

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

Плюсы и минусы мобильных сайтов

Плюсы

Индивидуальный подход

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

Простота внедрения для существующих веб-сайтов

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

Отличная производительность

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

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

Минусы

Отсутствие содержимого и функций

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

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

Беспорядочные адреса веб-сайтов

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

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

Несколько сайтов для обновления

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

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

Поддержка и обслуживание, требующие больших затрат времени и ресурсов

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

Различия между мобильными и адаптивными веб-сайтами

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

Оба имеют свои преимущества и свои проблемы. Но действительно ли один вариант лучше другого?

В то время как тенденция смещается в сторону адаптивного дизайна, во многом из-за потребительского спроса на паритет контента, адаптивный дизайн не является универсальным решением.В разных отраслях существует множество компаний, которые продолжают использовать мобильные веб-сайты; включая Delta, Yahoo !, BBC, Amazon.com и Walmart, и это лишь некоторые из них.

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

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

Фотография предоставлена: William Hook

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

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

Адаптивные веб-сайты предоставляют только ограниченное количество вариантов отображения, но по мере увеличения количества мобильных устройств возрастает потребность в более гибких типах отображения. Многие операторы веб-сайтов предпочитают адаптивный дизайн, который также основан на медиа-запросах CSS3. Как и в случае с адаптивным дизайном, сервер доставляет один и тот же HTML-код на все устройства.Это означает, что сайт доступен во всех вариантах макета по одному и тому же URL . Но в отличие от адаптивного дизайна, адаптация к размеру экрана устройства осуществляется плавно, без жесткой сетки определенных окон просмотра. Это позволяет мобильному сайту полностью использовать все доступное пространство на экране устройства. Из-за сложности адаптивного дизайна запуск веб-сайта по этому принципу утомительно и дорого. Контент, как и макет, должен разрабатываться гибко.Текстовые сегменты, изображения, видео и таблицы должны работать как на смарт-телевизорах, так и на мобильных телефонах. Вместо разработки собственного дизайна многие операторы веб-сайтов предпочитают использовать системы управления контентом , такие как , такие как WordPress, Joomla, Drupal и Typo3. Эти проекты с открытым исходным кодом зависят от крупных сообществ пользователей и разработчиков и предлагают широкий спектр готовых шаблонов дизайна с адаптивным дизайном, некоторые из которых можно использовать бесплатно.

Преимущества:

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

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

• Хороший адаптивный дизайн позволяет сравнивать пользовательское восприятие на всех поддерживаемых устройствах.

• Google предпочитает адаптивный дизайн.

Недостатки:

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

• Контент сложных веб-страниц не всегда так просто перенести на маленькие дисплеи.

• Мобильные устройства загружают тот же объем данных, что и настольные ПК. Таким образом, время загрузки страницы на мобильных устройствах обычно ниже, чем на отдельных мобильных веб-сайтах.

10 простых способов сделать сайты мобильными

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

В мире жили 7 человек.Тогда было 2 миллиарда гаджетов, которые росли в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм в пользу мобильных сайтов .

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

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

Итак, приступим.

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

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

BiQ Cloud является хорошим примером веб-сайта, который разработан с учетом потребностей мобильных пользователей.

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

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

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

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

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

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

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

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

Проверить, оптимизирован ли ваш вид для мобильных устройств, очень просто — у Google есть удобный для мобильных устройств тестер веб-сайтов под названием Webmaster Tool , чтобы делать именно это, и он доступен прямо здесь, .

Все, что вам нужно сделать, это вставить URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.

Затем тест Google проанализирует ваш веб-сайт и отобразит результат.

Анализ вашей веб-страницы может занять некоторое время…

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

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

Удобство мобильных устройств стоит проблем?

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

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

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

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

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

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

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

1) Используйте медиа-запросы

Я знаю, это звучит так, будто вы собираетесь поговорить с репортером или кем-то еще, но «медиа» в данном случае — это контент, который вы доставляете пользователю.

В этом случае медиа-запросов — популярный метод доставки адаптированной таблицы стилей на различные устройства

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

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

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

2) Используйте фреймворки, такие как Bootstrap

Существует множество фреймворков, которые можно использовать бесплатно, например Foundation 3 или Skeleton.Одним из наиболее популярных фреймворков является Bootstrap от Twitter.

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

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

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

3) Не отключайте кнопку отправки

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

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

4) Используйте адаптивную тему на CMS

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

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

Современная тема от Somothemes

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

5) Использование процентов

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

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

6) Сосредоточьтесь на простом дизайне

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

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

7) Убедитесь, что вы не заблокировали JavaScript, CSS или файлы изображений

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

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

8) Оптимизировать размер изображения

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

Итак, если вам нужно, чтобы ваши пользователи загрузили файл jpeg размером 1 МБ, чтобы они могли видеть изображение размером с миниатюру, они будут разочарованы и покинут ваш сайт.

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

9) Не используйте Flash

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

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

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

10) Используйте стандартные шрифты

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

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

Заключительный совет

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

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

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

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

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

Этот пост был первоначально написан Чжи Юань и опубликован 12 августа 2015 г. Последний раз он был обновлен 2 июня 2019 г.

Обновлено: 24 мая 2021 г.

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

Как обнаружить мобильные устройства, попадающие на ваши веб-страницы

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

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

Предоставьте ссылку на другой сайт Версия

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

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

К недостаткам можно отнести:

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

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

Использовать JavaScript

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

Использовать CSS @media Handheld

Команда CSS @media handheld кажется идеальным способом отображения стилей CSS только для портативных устройств, таких как сотовые телефоны. Это кажется идеальным решением для отображения страниц на мобильных устройствах. Вы пишете одну веб-страницу, а затем создаете две таблицы стилей.Первый тип мультимедиа «экран» стилизует вашу страницу для мониторов и экранов компьютеров. Второй для портативных устройств стилизует вашу страницу для небольших устройств, таких как мобильные телефоны. Звучит просто, но на практике это не работает.

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

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

Использование PHP, JSP, ASP для обнаружения агента пользователя

Это гораздо лучший способ перенаправить мобильных пользователей на мобильную версию веб-сайта, поскольку он не полагается на язык сценариев или CSS, которые мобильное устройство не использует. Вместо этого он использует серверный язык (PHP, ASP, JSP, ColdFusion и т. Д.).), чтобы посмотреть на пользовательский агент, а затем изменить HTTP-запрос, чтобы он указывал на мобильную страницу, если это мобильное устройство.

Простой PHP-код для этого будет выглядеть так:

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

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

Используйте WURFL

Если вы по-прежнему полны решимости перенаправить своих мобильных пользователей на отдельный сайт, то WURFL (Wireless Universal Resource File) — хорошее решение. Это XML-файл (а теперь и DB-файл) и различные библиотеки DBI, которые не только содержат актуальные данные пользовательского агента беспроводной сети, но также функции и возможности, которые эти пользовательские агенты поддерживают.

Чтобы использовать WURFL, вы загружаете файл конфигурации XML, затем выбираете свой язык и внедряете API на своем веб-сайте.Существуют инструменты для использования WURFL с Java, PHP, Perl, Ruby, Python, Net, XSLT и C ++.

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

Лучшее решение — адаптивный дизайн

Итак, если поддержка разных сайтов для разных устройств — это не ответ, то что? Адаптивный веб-дизайн.

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

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

Как использовать режим мобильной эмуляции в Chrome

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

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

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

Запустите Chrome, перейдите на веб-страницу, которую вы хотите протестировать, и откройте инструменты разработчика (Меню> Инструменты> Инструменты разработчика, Cmd + Opt + I на macOS или F12 / Ctrl + Shift + I в Windows и Linux).

Теперь вы можете включить эмулятор браузера, щелкнув значок Toggle device toolbar в левом верхнем углу:

Появится симуляция устройства:

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

Эмуляция с сенсорным управлением

Наведите указатель мыши на устройство, чтобы увидеть круговой «сенсорный» курсор. Это будет реагировать на сенсорные события JavaScript, такие как touchstart , touchmove и touchend .События, связанные с мышью, и эффекты CSS не должны возникать.

Удерживайте Shift , затем щелкните и переместите мышь, чтобы имитировать масштабирование щипком.

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

Элементы управления по умолчанию:

• тип устройства (или Отзывчивый )
• текущее разрешение
• масштаб (экран можно увеличивать или уменьшать, чтобы он лучше вписывался в панель эмулятора)
• скорость сети
• Кнопка переключения книжной / альбомной ориентации

Меню из трех точек позволяет отображать или скрывать дополнительные элементы управления:

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

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

• СИНИЙ: запросы с максимальной шириной
• ЗЕЛЕНЫЙ: запросы с целевой шириной в диапазоне
• ОРАНЖЕВЫЙ: запросы, нацеленные на минимальную ширину

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

Опции эмулируемых устройств

Выпадающее меню слева позволяет выбрать устройство. Предусмотрено несколько десятков предустановок для популярных смартфонов и планшетов, включая iPhone, iPad, Kindles, планшеты Nexus, Samsung Galaxy и так далее.

Не все устройства представлены сразу. Щелкните Edit… внизу раскрывающегося списка устройств или щелкните значок шестеренки DevTools Settings и выберите вкладку Devices :

Вы можете включить или отключить устройства или ввести свои собственные, указав:

• имя
• классификация, такая как «Мобильный» или «Планшетный».
• строка пользовательского агента браузера
• разрешение устройства
• и соотношение пикселей (например, 2 для экранов Retina iPhone, где плотность пикселей в два раза выше заявленного разрешения области просмотра)

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

Моделирование регулирования полосы пропускания

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

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

Нажмите Добавить собственный профиль , затем введите:

• имя профиля
• скорость загрузки в килобитах в секунду
• скорость загрузки в килобитах в секунду
• задержка в миллисекундах (типичная задержка при выполнении сетевого запроса)

Эмулированные мобильные датчики

Смартфоны и планшеты часто имеют такие датчики, как GPS, гироскопы и акселерометры, которых обычно нет в настольных устройствах.Их можно эмулировать в Chrome, выбрав Дополнительные инструменты , затем Датчики в главном трехточечном меню инструментов разработчика:

Появится новая панель, позволяющая определить:

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

Удаленная отладка реального устройства

Наконец, Chrome позволяет подключать реальное устройство Android через USB для удаленной отладки устройства. Введите в адресную строку, убедитесь, что установлен флажок Discover USB devices , затем подключите телефон или планшет и следуйте инструкциям.

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

Можно использовать полный набор инструментов разработчика, включая вкладку Application для тестирования прогрессивных веб-приложений в автономном режиме. Обратите внимание, что, в отличие от реального приложения, которому требуется HTTPS, Chrome разрешает PWA запускаться с локального хоста через HTTP-соединение.

Отлично! Мне сейчас не нужны никакие устройства!