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

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

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

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

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

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

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

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

Еще одно замечание, прежде чем мы начнем: вариант работы ориентированный прежде всего на контент, не означает, что дизайнер или программист, приступая к своей работе, должен иметь в наличии весь контент. Да, это огромная помощь, но в реальной жизни это не всегда возможно. Мы не всегда можем иметь в наличии весь точный контент в самом начале каждого проекта, мы работаем с тем, что есть к тому моменту, когда у нас начинается проект, но мы всегда знаем тип этого контента, и мы можем догадаться, какое место занимает тот или иной элемент контента на странице разрабатываемого сайта.

TOP-DOWN подход

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

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

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

CSS-Tricks отлично перестраивает контент для разных размеров окна. Большой вариант.

Когда, где и почему

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

Мы можем добиться этого изменяя размер столбцов, используя  media queries через таблицу стилей.

Мы на сайте компании используем нечто подобное:

.column { float:left; display:inline; }
.one-third.column {
	width: 33.333333333% /* 320px / 960px */;
}

@media only screen and (max-width: 767px) {
	.one-third.column {
		width: 100%;
	}
}

Дополнение: “only” ключевое слово после @media является обязательным, и так как старые браузеры, которые не поддерживаю Media Query, игнорируют их.

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

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

.column { float:left; display:inline; }
.one-third.column {
	width: 33.333333333% /* 320px / 960px */;
}

@media only screen and (max-width: 500px) {
    .one-third.column {
    	width: 50%;
    }
    .one-third.column.more-important {
    	width:100%;
    }
}

@media only screen and (max-width: 300px) {
    .one-third.column {
    	width: 100%;
    }
}

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

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

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров