Революция в сфере смартфонов не просто меняет способ использования мобильных устройств людьми. Переход от традиционных «перевернутых» телефонов к полноэкранным смартфонам меняет представление людей о своем любимом веб-контенте. Все чаще пользователи Интернета читают свой контент на ходу, используя мобильные веб-браузеры на экранах гораздо меньшего размера.
Эта бесспорная тенденция к мобильному просмотру имеет широкие последствия для владельцев веб-сайтов и дизайнеров WordPress, поскольку теперь они несут ответственность за создание дизайнов, учитывающих постоянно растущее разнообразие браузеров и ширину экрана. Это может быть сложный процесс, и многих людей пугает необходимость уменьшать их элементы дизайна, чтобы удовлетворить экран, который может буквально уместиться в ладони кого-то.
Сообщество WordPress предоставило некоторую помощь через обширную серию плагинов и эксклюзивных тем для мобильных устройств. Это, пожалуй, самый простой и быстрый способ взять традиционный веб-сайт и превратить его в дружественный для смартфона эквивалент, и для этого требуется очень мало технических знаний. Большинство плагинов поставляются со своими собственными темами XHTML для отображения на мобильных устройствах, в то время как другие предлагают тематические галереи и поощряют разработку мобильных тем для самостоятельной разработки. Ниже приведены лучшие способы создать надежную мобильную сеть без каких-либо технических навыков или больших затрат времени или денег.
Создание мобильных WordPress сайтов за считанные минуты с плагином WP Touch
Плагин WP Touch для WordPress является идеальным решением для администраторов WordPress, которые стремятся удовлетворить потребности пользователей смартфонов. Первоначально он был разработан исключительно для пользователей iPhone, но был обновлен для обслуживания устройств Android и тех, кто использует смартфоны с сенсорным экраном BlackBerry. Программное обеспечение может даже обслуживать новые и развивающиеся рыночные ниши пользователей Windows Phone 7 и Windows Phone 8. Владельцы сайтов WordPress, которые скачают подключаемый модуль WP Touch Pro премиум-класса, получат возможность развернуть специальную тему только для iPad, которая будет отображаться только на этих планшетных устройствах при доступе к сайту.
Как это устроено
WP Touch и WP Touch Pro выполняют эту задачу, создавая собственные темы и таблицы стилей, а затем инструктируя стандартную тему WordPress, идентифицировать агент браузера, назначенный любому пользователю, посещающему веб-сайт. Если WP Touch обнаружит мобильный веб-браузер iPhone, iPod Touch, Android, Windows Phone или BlackBerry, он немедленно заменит текущую тему мобильной темой, предоставляя пользователям одноколоночное отображение контента со списком только названий записей и популярное изображение; администраторы сайта могут настроить этот шаблон для отображения всего, что может отображаться в типичном цикле WordPress, включая полные записи, выдержки и даже комментарии.
Однако WP Touch — это не просто решение для первой страницы. Серия шаблонов в сочетании с этим обширным и чрезвычайно популярным мобильным плагином позволяет администраторам сайтов развертывать весь мобильный веб-сайт, включая страницы категорий и архивов, отдельные записи и страницы комментариев. И (как это принято сейчас практически для каждого дизайна, удобного для мобильных устройств), пользователям предоставляется возможность в любой момент переключиться на обычный шаблон сайта, щелкнув ссылку, отображаемую в нижнем колонтитуле мобильной версии веб-сайта WP Touch.
Пропустить WP Touch and Go для WordPress Mobile Edition
Хотя WP Touch был первым по-настоящему мобильным плагином для дизайна, который был выпущен (и все еще является самым надежным из всех мобильных плагинов, доступных для WordPress), он столкнулся с некоторой жесткой конкуренцией со стороны нового плагина WordPress Mobile Edition, доступного через библиотеку плагинов WordPress. Этот новый плагин фактически позволяет пользователям ориентироваться на конкретные операционные системы и отображать разные мобильные версии веб-сайта для каждого типа операционной системы. Это означает, что пользователи Android потенциально могут увидеть немного другую версию веб-сайта по сравнению с пользователями iPhone и другими платформами.
Возможность обслуживать разные версии сайта для разных мобильных платформ может показаться немного бесполезной или даже чрезмерной с точки зрения функциональности, но на самом деле она весьма полезна. Учтите, что пользователям Android разрешено использовать технологию Adobe Flash на своих мобильных устройствах, в то время как пользователи iPhone могут поддерживать только HTML5 и связанные технологии. Имея это в виду, в этих обстоятельствах может иметь смысл кодировать версию веб-сайта для Android, которая выделяет его Flash-контент, и версию «без флеш-памяти» для браузеров iOS. Пользователи Android получат доступ к мультимедиа, которое их телефоны более чем способны отображать, в то время как пользователям iPhone не будет показан контент (или, скорее, пустое свободное пространство), который они просто не смогут просмотреть на своем устройстве iOS.
Как это устроено
Плагин WP Mobile Edition также поставляется с несколькими готовыми темами для использования администраторами, и эти темы можно назначать для каждого устройства отдельно. По умолчанию тем, кто загружает плагин WordPress Mobile Edition, будет предоставлена одна тема для пользователей Android и другая тема, предназначенная для пользователей устройств Apple iPhone, iPod Touch и iPad. Темы отображают ту же информацию, но тема, ориентированная на iOS, выглядит немного как «Apple», что может добавить привлекательности для пользователей iOS. В конечном счете, настройки могут быть сделаны для обеих тем с использованием стандартных переменных WordPress, кода PHP и XHTML в сочетании со таблицей стилей, как и любой другой шаблон.
Не забывайте о так называемых «особенных телефонах»
До сих пор каждый плагин, упомянутый для мобильных сайтов, был разработан для мобильных операционных систем Android или iOS. Хотя этот блок пользователей составляет подавляющее большинство тех, кто посещает веб-сайты с помощью мобильного устройства, не следует забывать о тех клиентах, которые до сих пор используют так называемые «функциональные телефоны» для просмотра мобильных веб-страниц. Число таких пользователей может быть все более редким, но все же важно создать урезанную версию веб-сайта, которая может отображаться на этих сверхмалых экранах.
Плагин, известный как Wapple Architect Mobile, является экспертом в создании WAP-дружественных мобильных сайтов. Вместо создания сенсорного веб-сайта с большими элементами и большим текстом, этот плагин создает мобильную версию веб-сайта, которая использует цифры и маркированные списки для создания удобных для клавиатуры элементов навигации. Он охватывает использование упрощенного дизайна, включая однотонный фон и основной текст. Это абсолютно важно при обслуживании мобильных пользователей со старыми телефонами, которые не имеют сенсорного экрана.
Помните, что «WAP» — намного более медленный интернет-протокол для мобильных устройств. Это означает, что сенсорные версии веб-сайта будут слишком «тяжелыми» для этих гораздо более простых телефонов. Использование плагина для обслуживания пользователей этих устройств, отличных от смартфонов, — лучший способ расширить мобильную привлекательность веб-сайта. Кроме того, как только пользователь телефона узнает о парной версии WAP веб-сайта, он с большей вероятностью посетит этот веб-сайт на смартфоне, если и когда он решит обновить свое устройство до более продвинутой модели.
Создавайте сайты, ориентируясь на мобильных пользователей — используйте HTML5 и CSS3
Хотя все вышеперечисленные методы включают способы отключения «полной» или «настольной» версии веб-сайта в пользу полностью мобильной, это не всегда должно происходить при проектировании для мобильных пользователей. Действительно, хороший дизайн — это тот, который можно масштабировать до экранов любых размеров. Поэтому, при разработке нового шаблона WordPress, не забудьте сосредоточиться на элементах, которые будут хорошо масштабироваться с точки зрения экранов размером от 3,5 до 5 дюймов по диагонали.
Это означает использование технологий, таких как HTML5 и CSS3, которые продвигают многочисленные богатые элементы дизайна без использования статической графики и больших файлов изображений. Оставить позади графически интенсивные сайты — одна из самых важных тенденций в 2012 году, и все это с целью улучшения мобильного использования. Эти устройства не только замедляют время загрузки мобильных страниц, но и приводят к замедлению работы устройств и значительному «запаздыванию» при рендеринге и масштабировании до гораздо меньших размеров экрана. Во многих случаях изображения вообще не уменьшаются. они просто прячутся за контентом, размещаются перед печатным контентом или появляются где-то за пределами экрана, где пользователь их не видит.
Дизайнеры должны также учитывать разумные элементы навигации, которые легко просматривать на мобильных устройствах. Опять же, это означает, что нужно оставить большие изображения позади и сосредоточиться на текстовой навигации в формате списка, который можно легко масштабировать на небольших портативных экранах. Они являются ключом к успешному веб-сайту, поощряя пользователей исследовать, не заставляя их заблудиться, не зная, как пользоваться навигацией. Это особенно верно для мобильных устройств, где пользователи часто бывают более нетерпеливы и могут перейти на другой веб-сайт, если сайт, который они используют в настоящее время, просто не может понять это с точки зрения кроссплатформенного дизайна.
Наконец, всегда не забывайте создавать надежный и функциональный дизайн, который не использует Flash или JavaScript для правильной работы и выглядит наилучшим образом. Это особенно верно для Flash, который, как упоминалось ранее в этой статье, просто не поддерживается пользователями устройств iOS. Поскольку это включает в себя пользователей каждого iPhone, а также каждого iPad и iPod Touch, использование Flash устранит значительную часть потенциальных читателей и повторных посетителей. В некоторых странах эти устройства iOS, исключающие Flash, фактически являются большинством используемых смартфонов. Это не способ приветствовать новых посетителей и удовлетворить их потребности.
Не менее важно оставить JavaScript позади, так как большинство мобильных устройств просто не полностью поддерживают технологию и не обязаны это делать. JavaScript все чаще используется в виде библиотек AJAX, таких как jQuery, для создания интерактивных элементов и анимации. Они более «дружественные к мышам», чем «дружественные к пальцам», и они создадут реальные проблемы с юзабилити для тех пользователей, которые получают доступ к полному шаблону веб-сайта вместо мобильного аналога.
Возможно, это не самый быстрый и простой способ создания мобильной версии существующего веб-сайта, но представленные здесь рекомендации являются отличным способом создания следующего дизайна веб-сайта с учетом потребностей мобильных пользователей. На самом деле вполне возможно спроектировать полный шаблон веб-сайта таким образом, чтобы он был полностью и надежно отображен на экранах любого размера. Благодаря удобству использования и хорошему семантическому кодированию мобильный доступ может быть включен для любого веб-сайта.
И, если это не вариант, WordPress предлагает большое количество мощных мобильных плагинов для дизайна, которые могут взять любой веб-сайт с рабочего стола и поместить его прямо, удобно в руки пользователей iPhone, Android, BlackBerry и Windows Phone по всему миру. мгновение
Вы наблюдаете, как веб-сайты используют изображения более экономно, чтобы оставаться мобильными? Считаете ли вы Flash плохим выбором для мобильного дизайна? Является ли JavaScript более «удобным для курсора», чем «удобным для пальцев», или его можно элегантно использовать в мобильных устройствах с сенсорным экраном?