Каждый владелец или разработчик сайтов на WordPress в процессе разработки сталкивается с этапом проверки, тестирования и адаптации работы ресурса на разных разрешениях экранов, например, на смартфоне или планшете. Хорошо, если все современные гаджеты есть под рукой и можно наглядно оценить работу сайта, его отображение на экране того или иного устройства. Однако позволить себе их покупку может далеко не каждый. Поэтому на выручку приходят различные эмуляторы. Давайте рассмотрим несколько симуляторов для тестирования и оптимизации работы WordPress шаблона на смартфонах и планшетах.
Тестирование WP сайтов на мобильных платформах
Для разработчиков большой проблемой является тестирование WP сайтов на различных платформах. И, если раньше разработка по стандартам в основном позволяла сайтам одинаково отображаться во всех популярных браузерах, то с появлением планшетов и смартфонов, проблема значительно усложнилась.
Конечно, значительное облегчение вносит адаптивность, которая позволяет подстраивать структуру страниц под экран устройств, однако перед запуском обновлений все-равно необходимо протестировать новую версию на различных платформах и лично убедиться в качестве работы, эффективности и функциональности. И, если у вас нет под рукой необходимых гаджетов, можно использовать современные инструменты, о которых мы и поговорим дальше.
Симуляторы iOS
Самый простой и эффективный способ проверки сайта на устройствах от Apple – воспользоваться приложением iOS, которое является частью ХСоdе. Это интегрированная среда для разработки различного программного обеспечения и приложений для iOS и OS X от компании Apple.
Не стоит бояться сложных названий. Данный симулятор — это специально разработанное приложение, которое может работать и без запуска Хсоde. Для начала работы, вам понадобится пройти бесплатную регистрацию и получить индивидуальный Apple Developer ID. А дальше, переходим по ссылке в Загрузки для Applе разработчиков, и устанавливаем скачанный файл.
Теперь, для запуска приложения, необходимо выполнить ряд команд. Так, открываем Finder>Applications, щелкаем правой клавишей мыши по Хсоde и в открывшемся окне контекстного меню выбираем Show Package Contents.
После запуска приложения, оно автоматически определит тестируемое устройство как iPhone. Заменить его на дугой гаджет, можно выбрав в меню пункт Hardware. После чего, для тестирования WordPress cайта, вам останется просто открыть браузер Safari и ввести адрес сайта.
Симуляторы Android для Windows и OS X
Работа со симуляторами Android, практически не отличается от симуляторов iOS, однако может быть немного непонятнее и сложнее.
Давайте рассмотрим симулятор Android SDK, который сегодня является наиболее доступным и подходят для популярных платформ MS Windows и OS X.
Для начала работы с симулятором, его необходимо установить, предварительно скачав программу с Android SDK. После завершения загрузки, переходим в папку с прогой, выбираем Tools>Android, после чего откроется командная строка и приложение Android SDK Manager. Далее переходим в папку Android 4.3, в которой находится Install (x) Packages и запускаем процесс установки.
По завершению установки, вам останется создать или настроить виртуальные устройства. Для этого переходим в Tools>Manage AVDs в меню SDK Manager. Для создания собственного устройства кликаем на Device Definitions и выбираем раздел Create AVD, затем жмем ОК. Новое устройство будет находится в списке List of existing Android Virtual Devices. Вот и все, можно приступать к тестированию вашего сайта. Выбираем устройство из списка и нажимаем Start. Находим браузер, вводим адрес сайта, а дальше все также как и при работе с iOS Simulator. Однако есть одно отличие, о котором стоит сказать. В Android Simulator нет опции для смены устройств, что достаточно неудобно. Приходится переключаться вручную, используя для этого командные комбинации клавиш. Так, для Мас ОS Х используется комбинация FN + Control + F11 или F12, а для Windows - CTRL + F11 или F12.
Онлайн симуляторы для тестирования сайтов
Если вы не хотите ломать голову и устанавливать симуляторы или быть может на это просто нет времени, всегда можно провести онлайн-тестирование, например, на сервисе BrowserStack. С его помощью, без установки программ, вы сможете протестировать множество устройств и платформ, в том числе и другие браузеры и операционные системы.
Однако ничто не идеально, и все не могло быть так просто. Подвох заключается в том, что сервис платный, начальный тариф обойдется в 19 долларов в месяц. Предоставляется возможность бесплатного тестирования работы сервиса на протяжении 30 минут. Кроме того, для проведения локальной проверки сайта необходимо дополнительно устанавливать Java, что может стать проблемой для пользователей Мас.
Сервис выполняет проверку кроссбраузерности сайта, посредством виртуальных машин основных операционных систем, а для проверки мобильных версий запускается симулятор. Так, например, при тестировании сайта на iPad запускается iOS Simulator на образе операционки OS X. Из-за такой подгрузки работа сервиса может быть замедлена, но это не критично.
Какой симулятор выбрать?
Выбор симулятора зависит от того, какую именно платформу вы используете и вашей уверенности в установке SDK.
Если вы хотите полностью протестировать работу сайта с помощью одного интерфейса, логичнее использовать онлайн сервисы как BrowserStack. Здесь даже есть некоторые инструменты для разработчиков. Так, например, в 10 Internet Explore для Windows 8 есть набор инструментов Firebug. В целом сервис за месяц полностью отрабатывает потраченные 19 долларов.
Что касается пользователей OS Х, для проверки они могут использовать и Android SDK, и Хсоde. У пользователей Windows выбор не так велик, для работы с ней подходит только Android SDK.
Исходя из этого специалисты настоятельно рекомендуют использовать как можно больше симуляторов, что позволит обеспечить максимально полное и эффективное тестирование локальных сайтов. Именно такой метод, позволит вам полностью убедиться в том, что сайт отлично работает и поддерживается всеми популярными платформами.
Готовые адаптивные дизайны WordPress
А еще, сегодня можно избежать проблем, которые могут возникнуть при разработке и отладке работы сайта на WordPress, просто купив готовый шаблон, созданный профессионалами. Готовые шаблоны разрабатываются с учетом всех норм и особенностей современного сайтостроения. Вам останется только выбрать подходящий дизайн, купить и установить все исходники на хостинг. После чего с легкостью можно начинать наполнять страницы контентом, оптимизировать шаблон и многое другое.
Давайте рассмотрим несколько ярких примеров того, каким может быть дизайн вашего будущего сайта.
http://www.templatemonster.com/ru/wordpress-themes-type/48165.html
Современный адаптивный шаблон для создания сайта-визитки коммуникационной компании. Дизайн выполнен с темной цветовой гамме с использованием элементов, имитирующих дерево. Это придает некий шарм и нетривиальность страницам.
http://www.templatemonster.com/ru/wordpress-themes-type/48164.html
Готовый к установке шаблон на WordPress с оригинальным дизайном в минималистском стиле. На белоснежных страницах нет ничего лишнего, только красочные фотографии и текстовый контент. Шаблон отлично подойдет для создания сайта-визитки мебельного салона или студии дизайна интерьера.
http://www.templatemonster.com/ru/wordpress-themes-type/47539.html
Нетривиальный, стильный, запоминающийся дизайн этого адаптивного шаблона, отлично подойдет для реализации сайта-визитки современной музыкальной группы. Отдельно хочется отметить использованием фиолетовых оттенков при разработке цветовой схемы ресурса, которые будут невероятно популярными в этом году.
http://www.templatemonster.com/ru/wordpress-themes-type/48156.html
Прекрасный пример готового дизайна для сайта-визитки пейнтбольного клуба. Стильное оформление, выполнено в контрастном сочетании черных и красных оттенков, которые отлично подходят к тематике ресурса и позволяют подчеркнуть нетривиальность изображений и фото на страницах.
http://www.templatemonster.com/ru/wordpress-themes-type/47992.html
Несмотря на то, что дизайн этого WordPress шаблона выполнен в нейтральной цветовой схеме, страницы не выглядят скучными. Яркости и красочности им придает использование большого количества графического контента, который смотрится еще более примечательно и актуально.
http://www.templatemonster.com/ru/wordpress-themes-type/47538.html
Необычный, мягкий дизайн этого адаптивного шаблона, отлично подойдет для создания современного сайта-визитки для ветеринарной клиники или частного кабинета. Удачное сочетание пастельных оттенков в цветовой схеме сайта, создает неповторимую атмосферу, настраивающую на доверительный и спокойный лад.
http://www.templatemonster.com/ru/wordpress-themes-type/47925.html
Яркий и запоминающийся дизайн, выполнен оригинально и очень женственно. Можно смело сказать, что этот адаптивный шаблон станет прекрасной основой для создания сайта в формате портфолио для девушки, увлекающейся удивительным искусством фотографии.
Кроме того, в этом магазине вы сможете найти и другие варианты готового адаптивного дизайна для создания веб-ресурсов любого уровня сложности с самой разнообразной тематикой.
