x
 
Людмила Беляева
3 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Расскажите о границах экрана.

1. Когда уместно верстать широко — максимально заполнять пространство информацией, как сделано на сайте Бюро?

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

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

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


Использовать всё пространство стоит всегда, на то это пространство и дано.

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



Но если в газете вы статьи ставите узкой колонкой посередине, то пространство по бокам трудно назвать «использованным»:



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

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

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

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

У себя на сайте я прибил текст к левому краю, потому что люблю узкие поля. Но на больших экранах текст всё-таки отрывается от края. У Максима Ильяхова стандартная тема «Эгеи» с большими полями — её я специально делал нейтральной.

Резиновый дизайн, респонсив и адаптив

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Недавно всплыло

Какие законы для текста, который будет восприниматься только на слух? 1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 1 3