Стильный плиточный дизайн

На сайте «Технократия» (http://tecno.topru.org/) внедрен стильный плиточный дизайн с дизайнерской подложкой и симпатичной лентой комментариев. Эта же лента комментариев привинчена и на сайт «Прорубь». Интересующиеся могут сходить поглядеть и покритиковать тут в камментах.

Там сделано так — новый комментарий от корня (начало ветки) идет с широкой отбивкой от предыдущих, а все ответы внутри ветки — с узкими отбивками. Так должно быть удобнее отслеживать логику ответов. Кроме того, аватарка внесена внутрь рамки комментария и текст ее обтекает — так эффективнее используется площадь экрана, и можно уменьшить шаг лесенки комментариев, чтобы больше вместилось уровней «ответ на ответ». Ну и красивая кнопочка «Ответить» в правом верхнем углу — решение спорное, поскольку эргономически ее было бы правильнее иметь снизу, но не хотелось тратить место, лента делалась максимально компактной.

Материал: Proper специально для сайта TOPRU.ORG
Настоящий материал самостоятельно опубликован в нашем сообществе пользователем Proper на основании действующей редакции Пользовательского Соглашения. Если вы считаете, что такая публикация нарушает ваши авторские и/или смежные права, вам необходимо сообщить об этом администрации сайта на EMAIL abuse@newru.org с указанием адреса (URL) страницы, содержащей спорный материал. Нарушение будет в кратчайшие сроки устранено, виновные наказаны.

комментариев 5

  1. Gena:

    Да норм «газетный «дезигн. На «Проруби» понравилось. Просто некоторые уже-ещё не видели газет. Сначала-дико, потом даж в чём -то удобнее.Имхо.

    • Proper:

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

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

      • Gena:

        Согласен. Чаще всего именно изображение привлекает внимание, как раньше «кричащие заголовки с репортажем с места событий». Клиповое мышление зохавывает моск. Но-глупо в мире интернета и моментальной съёмки на видео-фото-гаджеты нет иногда смысла в новости без видеокоментария. Так же нет смысла использовать экран для трёх-четырёх новостей и мыслей, «плашки» тут однозначно «интереснее». Имхо, разумеется.

  2. vvg:

    У меня Прорубь на андроид планшете (Гугл Хром) не читабелен. Текстовка заужается на центральную треть экрана.

    • Proper:

      Мы подумаем над этим. Например, уберем одну из боковых колонок.

      Ну вот, уже подправили. Посмотрите, как будет смотреться теперь.

      Общая схема такова:
      при ширине экрана до 480 пикселов верстается одна колонка, служебное — снизу.
      при ширине до 999 пикселов верстаются две колонки в полную ширину экрана (служебная колонка — справа).
      при ширине от 1000 пикселов и более верстаются две колонки в 90% ширины экрана.
      Свёртка верхнего меню работает независимо.