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

Если вкратце – что хотелось получить в результате, по сравнению с текущим дизайном а-ля Русский Топ:

1. Уйти от обрезки изображений в фиксированный размер. Это автоматически означает, что вместо верстки из одинаковых ячеек придется делать “плавающую” вёрстку, где карточки новостей разной высоты будут конкурировать за место в ленте на главной.

2. Обеспечить доступ к простому контенту (такому, например, как видео или галерея изображений) прямо с главной ленты сайта – без раскрытия всей статьи.

3. Увеличить степень использования площади экрана полезной информацией (в идеале заняв лентой новостей до 100% площади экрана) – причем это надо сделать адаптивно, подстраиваясь к экранам разной ширины и разрешения.

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

В результате получилось нечто вот такое (так это выглядит на экране PC со средним разрешением):

Это вариант плиточного дизайна с динамической версткой (количество колонок зависит от ширины экрана) – но с нюансами:

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

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

3. Используя кнопки масштаба в браузере (Ctrl + и Ctrl -), несложно поменять дизайн с двухколоночного на трехколоночный или, наоборот, на одну колонку.

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

Форматы новостей там сейчас такие:

Стандартный
Изображение
Видео
Цитата
Галерея
Аудио

“Стандартный” отличается от “Изображения” только тем, что в ленте на главной под картинкой показывается начало текста новости.

Формат “Видео” запускает плеер прямо на главной – поэтому картинку-миниатюру для него можно вообще не ставить. Причем специального поля для URL видео там в редакторе нет – вы вставляете URL видео прямо в текст новости, а моторчик автоматически ищет в тексте этот URL и показывает на главной видео с первого найденного URL. Естественно, в тексте может быть несколько видео – на главной будет показано первое.

Формат “Галерея” предназначен для показа галереи из нескольких картинок. Причем на главной показывается прямо первая же галерея, найденная в тексте новости.

“Цитата” – это такой стрёмный формат для показа короткого текста (обычно – какого-то изречения очередного твиттерного идиота) прямо на главной. В отличие от других форматов, не предполагает наличие длиннотекста в новсти, и потому показывается в виде карточки. При этом миниатюра используется в качестве сильно затемненной подложки к карточке.

“Аудио” – это формат для аудио. Как видео, только без видео. Не доделан, но функционал очевиден.

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

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