Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

Что такое дизайн с мобильным подходом?

« С первых мобильных Является ли веб-дизайн и подход к разработке, разработанный Люком Вроблевским в его книге подвижные первый ». У него две основные цели:

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

Как превратить вашу тему в мобильную тему

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Основные элементы этого положения будут похожи на это:

  • Заголовок (заголовок)
  • nav.main (основная навигация)
  • section.main (Основной раздел)
  • section.content (Content Area)
  • aside.sidebar (боковая панель)
  • сноска (сноска)

Стиль макета для этого, вероятно, будет примерно таким:

верхний колонтитул,. основной, нижний колонтитул {ширина: 96%; максимальная ширина: 1000 пикселей; маржа: 10 пикселей автоматически; ясно: оба; } .content {width: 60%; маржа-право: 5%; плыть налево; } .sidebar {ширина: 35%; float: right; }

Поскольку тема «отзывчива», вам также понадобятся некоторые медиа-запросы для уменьшенной версии экрана. Их может быть несколько, но давайте сосредоточимся на одном для небольших экранов. Это может быть что-то похожее на это:

@media screen и (max-width: 500px) {header, .main, footer, .content, .sidebar {width: 98%; } .content, .sidebar {float: none; маржа: 0 авто; }}

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

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

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

заголовок,. основной, нижний колонтитул {margin: 10px 1%; }

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

Теперь создайте медиазапрос, используя это время на минимальной ширине вместо максимальной:

@media screen и (min-width: 500px) {header, .main, footer {width: 96%; максимальная ширина: 1000 пикселей; маржа: 10 пикселей автоматически; ясно: оба; } .content {width: 60%; маржа-право: 5%; плыть налево; } .sidebar {ширина: 35%; float: right; }}

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Так вот как вы конвертируете свой адаптивный макет в " подвижные первый ». Есть два шага:

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

Добавить в мультимедийный запрос, используя " мин-ширина »Место« макс-ширина И скопируйте стиль по умолчанию вашей отзывчивой темы к этому.

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

Эта статья содержит комментарии 0

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
7 акции
доля2
чирикать2
Регистрация3