Разработка

Media queries для шаблонов Joomla – часть первая

Joomla
Добавление в избранное
Сохранить

Media queries для шаблонов Joomla

Занимаясь разработкой шаблонов для Joomla, мне в последнее время приходится тратить значительную часть времени на проверку масштабируемости верстки сайтов: растягивается ли шаблон на всю ширину окна браузера или дизайн остается статичным?
Наверное я пристрастился к выработанной схеме по проверке масштабируемости дизайн сайта при изменении размеров окна браузера. Поскольку хороший шаблон должен одинаково выигрышно смотреться как в обычных браузерах компьютеров, так и в браузерах мобильных устройств. Для решения задачи можно применять CSS способ под названием media queries.
По правде говоря, я испытываю легкое разочарование, когда вижу солидный дизайн, который не масштабируется при изменении ширины окна браузера.

Что из себя представляет способ media queries и как он применяется в Joomla?

Если  читатель новичок в создании сложной верстки и использовании приема media queries, то в рамках данной стать он познакомится со способом,позволяющим масштабировать шаблон в соответствии с разрешением устройства посетителя, через которое он просматривает сайт.
 
Ниже приведён пример кода, позволяющего элементу #topIcons отображаться на экранах с шириной менее 835 пикселей:

 /* Все мобильные размеры (для браузера и устройств) */ @media only screen and (max-width: 835px) { #topIcons{ position: fixed; top: 0; margin-top: 0; left: 0; margin-right: 0 !important; z-index: 10 } }

Я в большей степени предпочитаю этот способ адаптации шаблона под мобильные устройства, нежели какие-то альтернативные варианты, что позволяет совершенно свежему шаблону или теме отвечать стандартам нового времени и конечный пользователь сайта вне зависимости от того, в каком устройстве он просматривает сайт, видит правильный результат. Как упоминалось выше, не очень приятно, когда мы вынуждены нажимать на ссылку для просмотра полного сайта и при виде ссылки «просмотр полного сайта» возникает ощущение, что мы видим не все возможности сайта. Мне понятно, зачем так сделал верстальщик, однако не следует упоминать какие при этом приходится испытывать чувства и как воспринимается такой сайт...Однако также существуют некоторые сайты с шаблонами, чьи мобильные версии без всякого сомнения достойны восхищения. Безусловно, сайты функциональны и работают на мобильных устройствах, но красив ли дизайн?  К сожалению, не всегда разработчикам сайтов удается добиться баланса. Юзабилити всегда должно выделяться своей эстетикой, но почему бы не достичь хорошего результата как в плане дизайна и удобного интерфейса, так и со стороны технической верстки под мобильные устройства?

Примеры сайтов, использующих прием media queries

Эта статья – первая из серии материалов, посвященных использованию и внедрению CSS приема media queries в шаблоны Joomla. Однако прежде чем мы приступим в углубление этого вопроса с технической стороны, стоит привести примеры сайтов, в шаблонах которых используются media queries в ознакомительных целях. Кто знает, возможно, после просмотра таких сайтов, вы будете поглощены использованием media queries и одержимо начнете менять размеры окна своего браузера чтобы посмотреть как будет отображаться ваш дизайн.

Web Designer Wall

webdesignerwall

 

Kettle

kettle

 

HundertTag

HundertTag

 

Twit Justice

twit justice

 

 

Abstraktion

Abstraktion

 

 

Duet

duet

 

 

Fork CMS

Fork CMS

 

 

Azeem Azeez

Azeem Azeez

 

 

Think Vitamin

Think Vitamin

 

 

Fuzzco

Fuzzco

 

 

New adventures in web design

New Adventures

 

 

Naomi Atkinson

Naomi Atkinson

 

 

Pat Dryburgh

Pat Dryburgh

 

 

Lefft

Lefft

 

 

Food Sense

Food Sense

 

 

Andy Rutledge

Andy Rutledge

 

 

Facts.regu.la

facts

 

Оригинальная статья: Anthony Olsen
Eugene Sivokon
Предприниматель, менеджер проектов, Joomla-энтузиаст. Занимаюсь созданием сайтов с 2002 года. Координатор нескольких Joomla проектов. Обожаю путешествовать, интересуюсь историей и изучаю иностранные языки.

Подпишитесь на рассылку новостей CMScafe