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


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

Как выглядит Ваш сайт на мобильных устройствах? Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах. Конечно, это не симулятор, и в точности оценить настоящий вид можно только используя реальный девайс. Почитайте, что такое адаптивный Веб-дизайн, чтобы понять, как сделать Ваш сайт удобным в использовании с любого мобильного устройства.
Хотите сделать Ваш сайт более "дружным"? Звоните (032) 242-33-39 или просто свяжитесь с нами!

Режим статической ширины

Если Ваш сайт не адаптивный, и имеет статически заданную ширину, используйте режим статической ширины. Для этого добавьте параметр &width=x, где х - ширина Вашего сайта в пикселях. Например: http://www.webmark.com.ua/mobile/?url=webmark.com.ua&width=1024

iPhone вертикально 320 x 480

iPhone горизонтально 480 x 320

Android вертикально 240 x 320

Android горизонтально 320 x 240

Android вертикально (новый) 295 х 515

Android горизонтально (новый) 515 х 295

iPad вертикально 768 x 1024

iPad горизонтально 1024 x 768

Kindle вертикально 600 x 1024

Kindle горизонтально 1024 x 600

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

Страна

Выберите countryUnited StatesUnited KingdomAustraliaCanadaGermanyFranceSpainAfghanistanAlgeriaAngolaAntigua и BarbudaArgentinaArmeniaAustriaAzerbaijanBahrainBangladeshBarbadosBelarusBelgiumBeninBosnia и HerzegovinaBrazilBruneiBulgariaBurkina FasoCambodiaCameroonCape VerdeChadChileChinaColombiaComorosCosta RicaCote d'IvoireCroatiaCyprusCzechiaDemocratic Республику CongoDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl SalvadorEritreaEstoniaEswatiniEthiopiaFederated Штаты MicronesiaFijiFinlandFrench PolynesiaGabonGeorgiaGhanaGreeceGrenadaGuamGuatemalaGuineaGuyanaHaitiHong KongHungaryIcelandIndiaIndonesiaIraqIrelandIsraelItalyJamaicaJapanKazakhstanKenyaKuwaitKyrgyzstanLaosLatviaLebanonLesothoLiberiaLibyaLithuaniaLuxembourgMadagascarMalawiMalaysiaMaltaMauritaniaMauritiusMexicoMoldovaMongoliaMontenegroMoroccoMozambiqueMyanmar (Бирма) NamibiaNepalNetherlandsNew CaledoniaNew ZealandNicaraguaNigerNigeriaNorth MacedoniaNorthern Марианской IslandsNorwayPakistanPalauPanamaPapua Новый GuineaParaguayPeruPhilippinesPolandPortugalQatarRomaniaRussiaRwandaSaint Киттс и NevisSaint Винсент и GrenadinesSamoaSao Томе и PrincipeSaudi ArabiaSenegalSerbiaSierra LeoneSingaporeSlovakiaSloveniaSolomon IslandsSomaliaSouth AfricaSouth KoreaSri LankaSurinameSwedenSwitzerlandTaiwanTajikistanTanzaniaThailandThe GambiaTogoTongaTunisiaTurkeyTurkmenistanUgandaUkraineUnited Арабские EmiratesUruguayUzbekistanVanuatuVenezuelaVietnamYemenZambiaZimbabwe

.

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

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

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

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

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

1. iPhoney

iPhoney

Превосходный бесплатный тестер iPhone, iPhoney не совсем эмулятор, но позволяет разработчикам создавать веб-сайты с разрешением 320 x 480 пикселей для использования на iPhone.Он позволяет тестировать изображения и код в идеальной среде Apple-Safari со всеми обычными функциями, включая портретный и ландшафтный режимы, полноэкранный режим, масштабирование и плагины.

2. W3C mobileOK Checker

W3C mobileOK Checker

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

3. iPad Peek

iPad Peek

Этот удобный веб-инструмент позволяет увидеть, как выглядят ваши веб-сайты при отображении на iPad.Рекомендуется использовать браузер на основе WebKit, такой как Apple Safari или Google Chrome, чтобы получить как можно более точное моделирование - или, по крайней мере, браузер с поддержкой CSS3, который поддерживает преобразование в свойства (например, Opera), потому что он использует их, чтобы отобразить страницу в портретном режиме.

4. Дополнение Modify Headers для Firefox

Modify Headers Add-on for Firefox

Существуют надстройки для Firefox, которые могут манипулировать данными, отправляемыми на серверы, чтобы создать впечатление, будто пользовательский агент просматривает на мобильном устройстве, даже если это не так.Для этого вам понадобится надстройка Modify Headers (для Firefox).

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

Чтобы имитировать просмотр на мобильном устройстве, вам необходимо найти значение профиля агента пользователя (UAProf) вашего мобильного устройства, которое можно найти с помощью быстрого поиска в Google по запросу «агент пользователя», за которым следует модель вашего телефона (например, см. результаты Google по запросу «user agent ipad»).Или посмотрите этот список значений UAProf.

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

Для Google Chrome вы можете попробовать расширение User-Agent Switcher.

Для независимого от браузера настольного приложения, которое работает практически с любым интернет-приложением, попробуйте Fiddler Web Debugger, который, помимо прочего, позволяет изменять HTTP-запросы.

5. Adobe Device Central CS5

Adobe Device Central CS5

Являясь частью последней версии Adobe Creative Suite, Device Central имитирует работу мобильных устройств на вашем рабочем столе, позволяя вам тестировать HTML и Flash, не выходя из рабочего стола.

Чтобы открыть страницу или сайт, выберите Профили устройств> Обзор устройств, затем щелкните правой кнопкой мыши и выберите Добавить к устройствам для тестирования . Теперь, когда вы добавили устройство, просто выберите «Файл»> «Открыть» (для локального тестирования) или «Файл»> «Открыть URL» (для удаленного тестирования).

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

6. Google Mobilizer

Google Mobilizer

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

7. Гомес

Gomez

Тест

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

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

8. MobiReady

MobiReady

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

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

9. Эмулятор DotMobi

DotMobi Emulator

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

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

10. Симулятор Opera Mini

Opera Mini Simulator

С более чем 120 миллионами проданных смартфонов с предустановленной Opera [1] и выпуском, доступным практически для любой ОС, убедиться, что ваш сайт работает в Opera Mini (мобильная версия веб-браузера Opera), является хорошей практикой. для включения в рабочий процесс тестирования.

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

Для работы этого инструмента требуется подключаемый модуль браузера Java.

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

Дополнительная литература

  • Мобильный веб-дизайн: передовой опыт. В этой статье содержится список из 20 эмуляторов мобильных телефонов.
  • Разработка веб-приложений для iPad: советы и рекомендации по дизайну при разработке сайта для iPad.
  • 10 приложений для iPhone, о которых должен знать каждый веб-дизайнер. Это коллекция мобильных приложений для дизайнеров.
  • Начало работы с iPhone SDK: хотите узнать о создании приложений для iPhone? Прочтите это вводное руководство.

Список литературы

  1. Opera: отчет о состоянии мобильной сети. www.opera.com

Связанное содержимое

.

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

Большинство из нас просматривают Интернет, делают покупки в Интернете и даже оплачивают счета с помощью наших мобильных устройств, потому что они удобны и легко доступны. Согласно исследованию Forrester «Цифровой бизнес-императив», 43% банковских клиентов в США использовали мобильные телефоны для совершения банковских операций в течение трех месяцев.

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

Веб-страницы обычно состоят из одного или нескольких из следующих компонентов: верхний и нижний колонтитулы, основное содержимое (текст), изображения, формы, видео и таблицы. Устройства различаются по таким функциям, как размер экрана (длина x ширина), разрешение экрана (плотность пикселей), вычислительная мощность (процессор и память) и операционная система (iOS, Android, Windows и т. Д.)). Эти различия существенно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще одним важным фактором является то, что мобильные пользователи не всегда могут быть подключены к высокоскоростной сети, поэтому веб-страницы должны быть тщательно спроектированы для эффективной работы в соединениях с низкой пропускной способностью.

Самые неприятные проблемы на мобильных платформах

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

  • Сайты не адаптируются автоматически к разным размерам экрана. Некоторые веб-сайты предназначены для форматирования для экранов переменного размера, но их элементы могут не масштабироваться автоматически. Это приведет к тому, что сайт будет автоматически настраиваться для различных размеров экрана, но элементы сайта могут выглядеть слишком большими на небольших устройствах. Некоторые сайты могут быть не предназначены для настройки экрана переменного размера, из-за чего элементы выглядят очень маленькими на устройствах с меньшими экранами.
  • На сайтах слишком много контента для мобильных устройств. Некоторые веб-сайты загружаются контентом для заполнения пустого места на экране рабочего стола.Веб-сайты, разработанные без учета мобильных пользователей, обычно подпадают под эту категорию. Этим сайтам требуется больше времени и пропускной способности для загрузки, и если страницы не предназначены для мобильных устройств, часть контента может даже не отображаться.
  • Сайты загружают изображения слишком долго. Веб-сайты со слишком большим количеством изображений или тяжелыми файлами изображений, вероятно, будут долго загружаться, особенно если изображения не были оптимизированы на этапе проектирования.
  • Данные в таблицах выглядят сложными и загружаются слишком долго. Многие веб-сайты представляют данные в виде таблиц (например, сравнение конкурирующих продуктов, данные о стоимости авиабилетов с разных сайтов путешествий, расписания рейсов и т. Д.), А на мобильных устройствах эти таблицы могут быть медленными и трудными для понимания.
  • На веб-сайтах размещены видео, которые не воспроизводятся на некоторых устройствах. Не все мобильные устройства поддерживают все форматы видео. На некоторых веб-сайтах размещены медиафайлы, требующие лицензии, Adobe Flash или другие проигрыватели, которые могут не поддерживаться некоторыми мобильными устройствами.Это вызывает разочарование и плохое взаимодействие с пользователем.

Создавайте свои сайты для адаптации к различным устройствам

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

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

  • Адаптация к любому размеру экрана . Как минимум, веб-страницу необходимо масштабировать под размер экрана любого мобильного устройства. Сегодняшние мобильные устройства имеют очень высокое разрешение экрана. Плотность пикселей на мобильных устройствах намного выше, чем на экранах настольных компьютеров, поэтому важно отформатировать страницы в соответствии с шириной экрана мобильного устройства в пикселях, не зависящих от устройства.Тег «meta viewport», включенный в документ HTML, отвечает этому требованию.

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

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

Например, если устройство с окном просмотра 320 пикселей загружает страницу, условие мультимедиа (max-width: 320 пикселей) в списке размеров будет истинным, и будет выбран соответствующий слот 280 пикселей. Ширина первого изображения, указанного в srcset (elephant-320w.jpg), ближе всего к этому слоту. Браузеры, которые не поддерживают переключение разрешения, отображают изображение, указанное в атрибуте src, как изображение по умолчанию. Этот подход не только выбирает правильное изображение для области просмотра вашего устройства, но также предотвращает загрузку излишне больших изображений, которые потребляют значительную полосу пропускания.

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

    К счастью, есть несколько способов создания адаптивных таблиц. Вот один из самых эффективных:

    • Столбцы таблицы переставлены в строки. Размер каждого столбца равен ширине экрана, что исключает необходимость горизонтальной прокрутки. Использование цвета помогает пользователям четко различать каждую отдельную строку данных.В этом случае для каждой «ячейки» должно использоваться содержимое (: before) , созданное CSS, чтобы применить метку, чтобы можно было четко идентифицировать каждую часть данных.
    • Другой подход - отображать данные в одном из двух форматов в зависимости от ширины экрана: в формате диаграммы (для узких экранов) или в формате полной таблицы (для более широких экранов). Если пользователь хочет щелкнуть диаграмму, чтобы увидеть полную таблицу, можно использовать описанный выше подход для отображения данных в табличной форме. (: До)
    • Третий подход - показать мини-графику на узком экране, чтобы указать наличие таблицы.Пользователь может щелкнуть изображение, чтобы развернуть и отобразить таблицу.
  • Видео, которые всегда воспроизводятся. Видео файлы, как правило, не воспроизводятся на мобильных устройствах, если их форматы не поддерживаются или для них требуется проприетарный видеопроигрыватель. Рекомендуемый подход - использовать стандартные теги HTML5 для видео и анимации. Элемент видео в HTML5 можно использовать для загрузки, декодирования и воспроизведения видео на вашем веб-сайте. Создавайте видео в нескольких форматах для разных мобильных платформ и убедитесь, что размер видео выбран правильно, чтобы они воспроизводились в своих контейнерах.

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

Свойства videoWidth и videoHeight элемента video помогают идентифицировать кодированный размер видео.Размеры видео можно контролировать с помощью JavaScript или CSS. max-width: 100% помогает подобрать размер видео по размеру экрана. Медиа-запросы CSS можно использовать для установки размера на основе размеров области просмотра. Также существует несколько библиотек и плагинов JavaScript, которые могут поддерживать соотношение сторон и размер видео.

С учетом всех обстоятельств…

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

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

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

Список литературы

Что читать дальше

.

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

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

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

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

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

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

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшеты.

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

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

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

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

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

Видеоурок

Подписаться на WPBeginner

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

1. Использование настройщика тем WordPress

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

Просто войдите в свою панель управления WordPress и перейдите на экран Внешний вид »Настроить .

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, в левом меню вы можете увидеть немного разные параметры:

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

Примечание: Синие символы редактирования присутствуют только в средстве предварительного просмотра. Вы не увидите их на своем действующем сайте.

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

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

2. Использование режима устройства Google Chrome DevTools
В браузере

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

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

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

Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

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

Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы перейти к мобильному представлению.

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

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

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

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

Вы также можете удерживать клавишу «Shift», затем щелкнуть и переместить мышь, чтобы имитировать сжатие экрана мобильного телефона для увеличения или уменьшения масштаба.

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

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

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

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

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

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

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

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

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

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

Бонус: Ознакомьтесь с нашим выбором лучших телефонных сервисов для бизнеса, чтобы вы могли добавить кнопку «Щелкнуть для вызова» для мобильных пользователей.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий