От автора: на днях мне пришло сообщение от Брендана Фостера, разработчика из агентства The Competition в Австралии. Он помогал Margaret River Beverages работать с одним сайтом, и ему удалось вытянуть ресурсы с макета этого сайта. Мне понравился весь сайт, и я решил записать все свои мысли.
Как создать такую шероховатую текстуру из футера? Смотрится очень четко.
SVG файл, отлично. Они могли стилизовать футер на лету, особенно если они удалили встроенный атрибут fill. На сайте много монотонных фонов, это может пригодиться.
Карусель?
Не самая любимая вещь для веб-дизайнера. Это как если бы на какой-то встрече все здоровались и ели лук. Карусель не самый бесполезный элемент на домашней странице, мешающий просмотру. Есть и плюсы:
В карусели есть анимация, которая работает только с прозрачностью, из-за чего переходы довольно плавные.
Внутри карусели используются адаптивные изображения, особенно в теге picture. Сайт находится под управлением WordPress. Эта функция стала встроенной. Интересно, они используют старый плагин для адаптивных изображений или нет.
И что тоже очень важно, на сайте…
Очень хорошие фотографии
Весь сайт в этих фотографиях. Для сайтов, где продаются настоящие товары, фотографии очень важный инструмент. Премиум бренд, где товар больше указывает на стиль жизни.
Хорошие фотографии могут спасти сайт. Это почти мошенничество. Еще лучше, когда изображения адаптивные. С этим сайтом еще можно поработать. Если прогнать домашнюю страницу через WebPagetest, тест покажет, что на странице много изображений, которые можно было бы сжать еще сильнее:
4,460.7 KB total in images, target size = 1,012.8 KB — potential savings = 3,447.9 KB. 3.5 Мб сэкономленного трафика — это очень много. Тест также показывает, что:
Gzipping отключен;
не заданы заголовки устаревания или expires headers.
Эти два фактора окажут огромное влияние на производительность, но, к счастью, их можно быстро исправить. Загрузка первого байта за 2 секунды – не самый лучший показательно. Однако его можно улучшить, установив заголовки устаревания, тем самым, сняв часть нагрузки с сервера.
Сам магазин
Я бывал на парочке сайтов-магазинов, но там нельзя было точно определить магазин это или нет, пока не перейдешь на страницу товара, где будет кнопка «Добавить в корзину». Вездесущие ссылки «Просмотр корзины» и «Оформить заказ» намного удобнее, они сразу показывают нам, что это магазин.
Система SVG иконок
Если говорить о кнопке «Оформить заказ». Похоже, там используется иконка. Какой же формат они используют?
Опять SVG, отлично. В случае с кнопкой корзины не нужны никакие фолбэки или атрибуты/теги доступности. Доступность может помочь в нескольких местах, например, в иконках открытого и закрытого меню. В таких местах необходимо будет добавить тег Серые карты смотрятся довольно неплохо, но меня пугает то, что карта развернута на весь экран. Я боюсь, что попаду в ловушку с бесконечной прокруткой карты. На десктопном компьютере с этим особых проблем не возникнет. Прокрутка не увеличивает карту, как в Google Maps, страница просто опускается ниже. На мобильных же устройствах полноэкранная карта загоняет вас в ловушку: Проблема несерьезная, так как высота карты фиксированная, и она не перекрывает высоту экранов мобильных устройств (большинства). Если вы попали в такую ловушку, всегда можно передвинуть палец на область вне карты. Возможно, тут лучше подойдет Adaptive Map. Этот CSS код я взял из исходного кода, т.е. он не сжат. Не самая важная проблема, так как gzipping намного важнее, но он пока что не работает. Отлично работает на любой ширине окна: Обратите внимание на то, что отдельный контент растянут на всю ширину экрана, а какой-то нет. Например, фото, которое всегда прижато к правому краю и текст слева от изображения, не прижимающийся к левому краю. Самая странная страница. На этой странице информация чисто про «безалкогольные напитки премиум типа». Зачем делать для них отдельную страницу? Это что-то типа домашней страницы? Я предполагаю, что именно этот тип напитков имеет какую-то ценность с точки зрения бизнеса, из-за чего для него потребовалась отдельная страница с четким описанием товара. Возможно, это нужно для SEO оптимизации. Вторая ссылка на второй странице поисковой выдачи. Скорее всего, так и есть. Не всегда можно вытянуть шрифт. Возможно команды дизайнеров товаров и веб-дизайнеров работают в одной компании, и это было требованием недавнего ребрендинга. Я сделал скриншот, чтобы вы увидели шрифт: Который, если поискать, является бесплатный, и его можно найти на сервисах типа Google Fonts. Я же воспользовался сервисом WhatTheFont, загрузил туда пример и нашел: <html lang=»en-AU»> — Я не обращал внимания на эту строку, пока не понял, что это австралийский язык! class=»no-js» – Этот класс, скорее всего, был добавлен в html тег каким-то шаблонным кодом, но JS, который обычно удаляет такие вещи не сработал. Скорее всего, этот класс нигде не используется. Говоря о JS, можно заметить тег noscript, который указывает на то, что сайт лучше всего работает с включенным JS. Скорее всего, так и есть, но есть вероятность, что сайт будет работать нормально и без JS. Слайдеры превратятся в блок изображений. Работает даже добавление товаров в корзину и оформление заказа. В блоке @font-face пропустили файл формата «.woff2». Потенциальный выигрыш в производительности. Фиксированное меню иногда глючит, и оно налезает на шапку страницы. Разработчики знают об этой проблеме и пытаются ее решить. У основного текста страницы есть небольшие отступы между букв. Думаю, это было сделано против вредителей. На что вы, как дизайнер/разработчик, смотрите, когда заходите на сайт в первый раз? О чем вы думаете? Автор: Chris Coyier Источник: //css-tricks.com/ Редакция: Команда webformyself.Полноэкранная карта типа Google Maps
Хорошая сетка
Немного SEO в главном меню
Шрифт товара совпадает с основным!
Мелочи, которые я сразу замечаю
