Как обеспечить будущее вашему отзывчивому веб-сайту на основе WordPress

2020-10-20

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

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

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

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

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

Процесс адаптивного дизайна
Заключение

Процесс адаптивного дизайна

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

Ответ таков: «Этого не нужно делать». WordPress – это система управления содержимым сайта или веб-фреймворк, которая связывает базу данных контента с интерфейсом веб-сайта. Разрабатываете ли вы статический веб-сайт или тему WordPress, вы в любом случае должны учитывать опытность пользователя, стиль, дизайн, кроссбраузерность и совместимость устройств, соответствие стандартам и многое другое. Единственная существенная разница в ходе работы связана с дополнительными инструментами и ресурсами, предоставляемыми WordPress для вас.

Независимо от технологии

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

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

Quartz размывает границы между веб-сайтом и приложением, и все это реализовано на WordPress

Важно также отметить, что все ваши любимые фреймворки, инструменты и стратегии будут работать и с WordPress. Это применимо для всего, начиная от Zurb Foundation и заканчивая адаптивными изображениями. Самое важное, что вы должны уяснить – просто не чувствуйте себя ограниченным или помещенным в рамки с WordPress.

Медиа-контент

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

Когда администратор загружает изображение и вставляет его в пост, код HTML выглядит примерно так:

<a href="http://jes.se.com/inspirational/ do-more-of-what-makes-you-awesome"><img src="http://jes.se.com/wp-content/ uploads/2013/03/20130324-220448.jpg" alt="Do more of what makes you awesome" width="500" height="628" class="alignnone size-full wp-image-249" /></a>

Как вы можете увидеть в разметке выше, статические атрибуты ширины и высоты включены в тег <img>. Проблема в том, что значения атрибутов основаны на действительном размере изображения. Поэтому если администратор установит параметр «full size», встроенное изображение может отобразиться шириною в тысячи пикселей.

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

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

Шаг 2. Применяйте CSS класс max-width для всех изображений, встроенных фреймов и других типов медиа-контента в постах.

CSS

.post img { max-width: 100%; }

Вот эта одна строка CSS кода предотвратит изображение или другое медиа-содержимое от выхода за пределы контейнера. Если же вы ищете JavaScript или jQuery решение, то вот оно:

JavaScript

document.getElementById('post-image').
 removeAttribute('width');
 document.getElementById('post-image').
 removeAttribute('height');

jQuery

$(".post img").removeAttr("width").
 removeAttr("height");

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

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

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

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

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

Достаточно просто установить параметр depth для wp_nav_menu(), чтобы предотвратить переизбыток выпадающих меню. К тому же, вы можете работать с пользовательским классом walker, чтобы предпринять дополнительные предупредительные меры.

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

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

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

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

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

Регистрация дополнительного положения меню

function register_my_menus() {
 register_nav_menus(
 array(
 'header-menu' => __( 'Header Menu' ),
 'mobile-featured' => __( 'Featured Mobile  Menu' )
 )
 );
 }
 add_action( 'init', 'reg is ter_my_menus' );

Отображение рекомендуемого меню

$defaults = array(
 'theme_location' => 'mobile-featured',
 'menu' => '',
 'container' => 'div',
 'container_class' => 'featured',
'container_id' => '',
 'menu_class' => 'menu',
 'menu_id' => '',
 'echo' => true,
 'fallback_cb' => 'wp_page_menu',
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'items_wrap' => '<ul id="%1$s"
 class="%2$s">%3$s</ul>',
 'depth' => 0,
 'walker' => ''
 );
 wp_nav_menu( $defaults );

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

Миниатюры изображений

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

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

Возьмем, к примеру, веб-сайт на основе WordPress Bates University. Он превосходно пользуется миниатюрами изображений. Путешествуя по сайту, вы обнаружите одно и то же изображение в разных местах, разного размера. Администратору не нужно было открывать Photoshop, обрезать и изменять размер этих изображений, а потом загружать их.

Главное меню веб-сайта Clarke Insurance Agency

Как это связано с целостностью в совокупности с отзывчивостью? Вы можете легко получить управление обратно. Когда администратор загружает медиа-контент через редактор контента, он может делать с ним все, что вздумается. Когда же загрузка изображения осуществляется через селектор Featured Image, изображение должно подчиняться строго тем правилам, которые вы определили.

<?php
 add_theme_support( 'post-thumbnails' );
 set_post_thumbnail_size( 50, 50, true ); //обычные эскизы сообщения
 add_image_size( 'sidebar-thumb', 260, 170, true );
 add_image_size( 'index-thumb', 300, '', true );
 add_image_size( 'index-thumb-cropped', 300, 225, true);
 add_image_size( 'footer-thumb', 200, 140, true );
 add_image_size( 'archive-thumnb', 300, 300); // используется, чтобы добавлять миниатюры

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

Это более эффективно и рационально, чем захватывать и изменять размеры больших изображений. Позже на боковой панели вы можете установить размер sidebar-thumb, как в примере ниже.

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

<?php the_post_thumbnail( 'sidebar-thumb' ); ?>

Плагин WP mobile detect

Я выступал с этой темой в прошлом году на WordCamp Boston. В своей речи я упомянул о php классе под названием Mobile Detect. С ним вы можете определить устройство пользователя на серверном уровне. Сразу после выступления я конвертировал класс в WordPress плагин, который вы можете скачать бесплатно здесь.

Определение устройства – это не решение всех проблем (и, говоря откровенно, может быть применено неправильно), но мне кажется, что этот плагин имеет важное, позитивное влияние на пользователей WordPress. Плагин WP Mobile Detect – это еще один шаг к действительно динамическому веб-окружению.

Загрузки, инициированные не пользователем

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

Предположим, вы работаете над блогом. На домашней странице вашего сайта вы показываете полную версию вашей последней статьи (без ссылки «Подробнее»). Сегодня вы решили написать статью, демонстрирующую топ 10 инфографик, относящихся к WordPress.

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

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

Загрузки, инициированные не пользователем

MinimalMonkey.com производит уникальное впечатление плавности

Плагин WP Mobile Detect направлен на решение этой проблемы. С помощью простых шорткодов вы можете менять полноразмерную инфографику на маленькие эскизы. Также вы можете оставить ссылку на оригинал, предоставляя пользователю право выбора.

[notdevice]<img src="FULL SIZE INFOGRAPHIC">[/notdevice]
 [phone]<a href="LINK TO FULLSIZE"><img src="SMALL THUMBNAIL OF INFOGRAPHIC"></a>[/phone]

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

Плагин WP Mobile Detect дает возможность администраторам брать под контроль функционирование сайта на мобильных устройствах, блокирование объявлений, контента и файлов (JavaScript и другие), которые не нужно загружать, на серверном уровне посредством шорткодов и функций.

Повеселимся

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

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

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

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

Smashingmagazine.com до сих пор сохраняет свою целостность и отзывчивость

Опыт взаимодействия, отзывчивость и WordPress

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

Возьмем сообщение в блоге, к примеру. Максимизируете страницу как на 27-дюймовом iMac, и вы получите много пустого места. Что если мы стали оставлять комментарии к посту? Мы все знаем, что читатели имеют склонность просматривать веб-контент. Не будет ли здорово помочь пользователям просматривать содержимое и комментарии в одно и то же время? Это оставит более запоминающееся впечатление у пользователя и позволит ему получить больше информации на том же экране.

Инструменты

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

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

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

Заключение

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

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