Новый дизайн сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

You may also like...

39 Комментарий
старые
новые
Встроенные Обратные Связи
Все комментарии
Чтобы добавить комментарий, надо залогиниться.