x
 
Екатерина
26 марта 2012

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



Екатерина!

Для меня число 1000 пикселей ничего не значит. Экраны устройств имеют самые разные пропорции и размеры — экран шириной в 1000 не самый маленький, не самый большой и не «средний». С появлением «Ретины» и экранов высокого разрешения это число-анахронизм окончательно теряет смысл — браузеры айпадов и айфонов автоматически «растягивают» сайт на экран.

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

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

  1. «Наклейка»

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


  2. «Уголок»

    Уголок получится отогнуть только в одном месте, поэтому приём не универсальный. Зато он почти не мешает существующей сетке и привлекает к себе внимание:


  3. «Язычок»

    Язычок даёт в любой момент «вытянуть» нужную допинформацию независимо от длины страницы. Язычок на Айпаде:


    В интерфейсе «Системы Кадры», спроектированном в бюро, язычок вытягивает оглавление.


  4. «Строка имени Воронежского»

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

    Прямоугольному объявлению о курсах и вакансиях найти место в Советах было бы сложно, но не строке:


    Любопытно, что во время работы над главной страницей Орион-арта мы попробовали «уголок» и «наклейку», прежде чем стало ясно, что однострочные новости почти не отъедают место у фоновой фотографии:


  5. «Масштабирование внаглую»

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

    Сложно представить, как жить без этого приёма на «Дизайн-собаке» с огромными картами, схемами и иллюстрациями.


    Расхожее всплывание блоков по клику мы здесь даже не рассматриваем.


Предлагаю уважаемым советчикам поделиться собственными хитрыми способами «впихнуть невпихуемое».

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

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

Комментарии

Женя Бакст
26 марта 2012

Тот вариант, который Екатерине предложили дизайнеры, можно назвать «уши». А чтоб не появлялась горизонтальная прокрутка или пустота, уши можно растянуть по вертикали. Они тогда превратятся в «столбик Воронежского».

Стасис Чепулис
26 марта 2012

+2

Александр Дебкалюк
27 марта 2012

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


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

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

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

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

3 Как собрать страницу из модулей: без иллюстраций 2 Как собрать страницу из модулей: зачем нужна сетка? 1 Якорные объекты 4




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

Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Практика: формулировка полезного действия 8 Как вы проверяете соответствие вёрстки макету 2 Как попросить клиента помочь с дебагом? 1