Адаптивный дизайн для сайта художественной галереи. Часть 2.

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

Второй вариант адаптивного дизайна

Сегодня я покажу второй вариант дизайна макета сайта художественной галереи. Конечно же, и данная версия является адаптивной.

Итак, главная страница сайта теперь выглядит вот так:

Главная страница

Главная страница

Что поменялось? Почти всё.

Мы поменяли фон. Теперь он более яркий и насыщенный. В виде бэкграунда была использована картина. В идеале, в окончательной версии сайта, фоном будет служить одна из картин Игоря.

Слайдер. На главной странице данной версии макета мы добавили слайдер, где можно выводить самые красивые картины (или те, которые нужно продать 😉 ).

Что совпадает, но выглядит совершенно по-другому?

Список художников, чьи картины размещены на сайте, выводится в выпадающем меню.

Выпадающее меню

Выпадающее меню

Размещённые на сайте картины выводятся на главной странице в виде миниатюр. При наведении мыши, картина уплывает, покрывается сеткой и появляется её название. Немного похоже на первую версию, но всё-таки отличается. 🙂

Миниатюра картины при наведении мыши

Миниатюра картины при наведении мыши

Страница поста

Страница с размещённой на ней картиной выглядит теперь вот так:

Страница поста

Страница поста

Под картиной я привела примеры шрифтов.

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

Переходим от одной картины к другой

Переходим от одной картины к другой

 

Оформление некоторых служебных страниц сайта

Речь идёт о таких страницах как категории (рубрики); результаты поиска по сайту; страницы тегов, которые стилизованы под тематику ресурса.

Итак, категории на сайте структурированы по авторам картин. На странице каждой рубрики картины художника выводятся в виде миниатюр.

Страница рубрики "Айвазовский"

Страница рубрики “Айвазовский”

А результаты поиска по сайту отображаются тоже в виде картин. Например, результаты поиска по художнику Шишкину:

Результаты поиска по запросу "Шишкин"

Результаты поиска по запросу “Шишкин”

Теги также выводятся в виде картин. Например, вот так выглядит страница с тегом “портрет”:

Страница тега "портрет"

Страница тега “портрет”

Кроссбраузерность соблюдена. Сайт прекрасно отображается во всех популярных браузерах.

А что говорит Google Webmasters?

При проверке сайта в Гугл Вебмастерс на адаптированной показа сайта в мобильных устройствах, был получен следующий результат:

Проверка Google на адаптивность

Проверка Google на адаптивность

Вот так выглядит сайт в разных мобильных устройствах

Сайт в разных типах мобильных устройств

Сайт в разных типах мобильных устройств

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.