В предыдущем посте я познакомила вас с кейсом создания макета сайта художественной галереи с адаптивным дизайном. Там же упомянула о том, что данный макет – только первая версия дизайна, который был предложен заказчику.
Второй вариант адаптивного дизайна
Сегодня я покажу второй вариант дизайна макета сайта художественной галереи. Конечно же, и данная версия является адаптивной.
Итак, главная страница сайта теперь выглядит вот так:
Что поменялось? Почти всё.
Мы поменяли фон. Теперь он более яркий и насыщенный. В виде бэкграунда была использована картина. В идеале, в окончательной версии сайта, фоном будет служить одна из картин Игоря.
Слайдер. На главной странице данной версии макета мы добавили слайдер, где можно выводить самые красивые картины (или те, которые нужно продать 😉 ).
Что совпадает, но выглядит совершенно по-другому?
Список художников, чьи картины размещены на сайте, выводится в выпадающем меню.
Размещённые на сайте картины выводятся на главной странице в виде миниатюр. При наведении мыши, картина уплывает, покрывается сеткой и появляется её название. Немного похоже на первую версию, но всё-таки отличается. 🙂
Страница поста
Страница с размещённой на ней картиной выглядит теперь вот так:
Под картиной я привела примеры шрифтов.
Если в какой-либо рубрике размещено много картин, переходить от одной к другой можно по миниатюре внизу страницы. Это наглядно и удобно.
Оформление некоторых служебных страниц сайта
Речь идёт о таких страницах как категории (рубрики); результаты поиска по сайту; страницы тегов, которые стилизованы под тематику ресурса.
Итак, категории на сайте структурированы по авторам картин. На странице каждой рубрики картины художника выводятся в виде миниатюр.
А результаты поиска по сайту отображаются тоже в виде картин. Например, результаты поиска по художнику Шишкину:
Теги также выводятся в виде картин. Например, вот так выглядит страница с тегом “портрет”:
Кроссбраузерность соблюдена. Сайт прекрасно отображается во всех популярных браузерах.
А что говорит Google Webmasters?
При проверке сайта в Гугл Вебмастерс на адаптированной показа сайта в мобильных устройствах, был получен следующий результат:
Вот так выглядит сайт в разных мобильных устройствах
