Как сделать любой адаптивный сайт WordPress мобильным в первую очередь

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

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

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

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

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

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

Что такое адаптивный веб-дизайн?

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

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

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

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

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

Почему вам нужно сначала сделать любой адаптивный сайт WordPress мобильным?

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

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

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

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

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

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

Как сначала сделать любой адаптивный сайт WordPress мобильным?

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

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

В зависимости от макета вашего сайта стиль макета может быть примерно таким:

заголовок,
.главный,
нижний колонтитул {
  ширина: 96%;
  максимальная ширина: 1000 пикселей;
  поле: 10px авто;
  ясно: оба;
}
.содержание {
  ширина: 60%;
  поле справа: 5%;
  плыть налево;
}
.сайдбар {
  ширина: 35%;
  поплавок: справа;
}

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

Экран @media и ( max-width: 500px ) {

  заголовок,
  .главный,
  нижний колонтитул,
  .содержание,
  .сайдбар {
    ширина: 98%;
  }
  
  .содержание,
  .сайдбар {
    поплавок: нет;
    поле: 0 авто;
  }

}

Как видите, есть два блока: один для десктопа и один для мобильного.
Чтобы заменить его на mobile first, удалите оба и начните с определяющего макета для маленьких экранов:

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

Теперь пришло время создать медиа-запрос, используя минимальную ширину.

Экран @media и ( минимальная ширина: 500 пикселей ) {

  заголовок,
  .главный,
  нижний колонтитул {
    ширина: 96%;
    максимальная ширина: 1000 пикселей;
    поле: 10px авто;
    ясно: оба;
  }
 
  .содержание {
    ширина: 60%;
    поле справа: 5%;
    плыть налево;
  }
  .сайдбар {
    ширина: 35%;
    поплавок: справа;
  }
  
}

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

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

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