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


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

Как выглядит Ваш сайт на мобильных устройствах? Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах. Конечно, это не симулятор, и в точности оценить настоящий вид можно только используя реальный девайс. Почитайте, что такое адаптивный Веб-дизайн, чтобы понять, как сделать Ваш сайт удобным в использовании с любого мобильного устройства.
Хотите сделать Ваш сайт более "дружным"? Звоните (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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанные

.

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

Страна

Выберите 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 простых способов сделать сайты удобными для мобильных

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

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

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

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

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

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

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

Веб-сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

Как просмотреть мобильную версию сайтов 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
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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