Как спланировать размещение контента для адаптивного дизайна

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

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

Перегруппировать сетки в списки

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

Пример 1: Городской совет Веллингтона

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

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

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

Пример 2: Mooyah Бургеры

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

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

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

Пример 3: Тематический рынок

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

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

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

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

Скрыть или удалить столбцы

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

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

1. Оставьте их под основным содержанием
2. Скрыть их в целом

Пример 1: Стоп Пресс

Взгляните на сайт Stop Press. Она имеет четыре вертикальные колонны на моем настольном мониторе.

Левый столбец - это вертикальное навигационное меню, следующий столбец - это столбец основного контента с последними статьями. Тогда у нас есть две разные колонки боковой панели, переполненные дополнительными “в сторону” содержание.

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

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

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

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

Пример 2: Блог Wishpond

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

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

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

Пример 3: мадам Готье

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

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

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

Отрегулируйте и сожмите поля

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

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

Пример 1: Один Мир

Нижний колонтитул в One World является отличным примером. Она имеет плавали ссылки на нижний колонтитул прямо с форма регистрации по электронной почте налево.

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

После определенного момента, это просто имеет смысл опустите ссылки под формой регистрации, и дать нижний колонтитул много места, чтобы дышать.

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

Пример 2: Золотые острова

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

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

Вертикальный поток на экранах меньшего размера

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

Пример 1: BodyBuilding.com Отдельная запись

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

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

Ваш отзывчивый CSS должен учитывать эти мелкие детали для каждой страницы сайта..

Пример 2: Ярмарка тщеславия

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

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

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

Заключительные мысли

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

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