- Роль Придумал / Нарисовал / Разработал / Написал контент
- Период С 2015 (был запущен в 2017)
- Сайт vedroid.com
О проекте
Так как раньше я занимался сайтом каталогом всех телефонов Nokia, мои друзья часто меня просили порекомендовать какую-то модель для покупки. После того, как смартфонов Nokia не стало на рынке, а их место заняли Android-смартфоны, я решил создать сайт Vedroid.com. Это каталог Android-устройств от смартфонов и планшетов до смарт часов и VR-шлемов.
Основная идея сайта — это дать моим друзьям (посетителям сайта) рекомендации и обоснованный ответ на вопрос «Артем, а какой Android лучше сейчас купить? И почему?».
А еще я видел, как в магазинах на витринах продаются устаревшие модели смартфонов. И что еще более удивительно, люди их покупали, не понимая одного важного факта — производители android-смартфонов не часто выпускают обновлений ПО для своих устройств.
Например, очень популярная бюджетная (цена около $110) модель Samsung Galaxy J1 2016 выпущена в январе 2016 года на Android 5.1, которую Google представил в ноябре 2014 года (разница полтора года). Этот смартфон получил обновление лишь до версии 5.1.1. А в октябре 2016 года уже был представлен Android 7.0 Nougat, но Galaxy J1 2016 его так и не получил.
На мой взгляд, это несправедливо, и покупателям при выборе нового android-смартфона нужно делать акцент не только на характеристиках, но и на версии ПО. Поэтому мой сайт должен помочь пользователю найти хорошую модель на актуальной версии Android. Но как он может в этом помочь?
Я думал об этом почти полгода. И в итоге решил, что нужно визуально выделять устройства в каталоге, которые имеют новую версию операционной системы и адекватный набор характеристик. Такие модели я назвал Дроидами, а остальные модели — Вёдрами. Отсюда и название Ведроид, и слоган проекта «Твой новый дроид — не ведро!».
Кроме этого на сайте реализован «умный» поиск. Он может помочь тем пользователям, которые не знают на какую новую модель заменить их текущую старую модель смартфона/планшета/часов. В поле поиска можно ввести название своего старого смартфона и увидеть рекомендации новых моделей, которые сейчас считаются Дроидами. Именно из-за этого функционала мне пришлось для запуска проекта сразу добавить в базу товаров около 1 000 смартфонов, чтобы рекомендации работали правильно.
Кроме такого поиска я решил сделать акцент в каталоге и на страницах товаров на год выпуска модели. В каталоге пользователи могут очень легко отсортировать модели по году выпуска, цене и статусу продажи.
Таким образом, я постарался сделать максимально полезным сайт с каталогом Android-устройств, чтобы пользователи могли быстро и просто найти хорошую новую модель на замену своей старой модели.
Работа над проектом
Этот проект я начал разрабатывать в 2015 году, а публичный запуск состоялся в декабре 2017 года.
Возможно, вам покажется, что делать проект два года — это слишком долго, но нужно учесть, что, во-первых, я занимался им не в режиме full time, и во-вторых, на момент запуска в каталоге уже находилось 1 500 товаров с фотографиями и текстовыми описаниями. Наполнение сайта контентом — это очень большой объем работы, который растянулся почти на год.
Но самое интересное в работе над Vedroid.com — это техническая реализация и новый подход, который я придумал по ходу разработки сайта. Более подробно об этом я планирую написать статьи на Medium.
Основные требования к разработке сайта:
- Отсутствие базы данных на сервере.
- Использование статического генератора сайтов Jekyll.
- Использование NodeJS и Gulp/NPM модулей для полной сборки сайта.
- Адаптивный дизайн (mobile/tablet/desktop).
- HTML-верстка:
- Концепция Mobile first.
- Семантическа HTML 5.
- SEO требования: Rich Snippet и Open Graph.
- Sass и препроцессор PostCSS.
- Pure JavaScript.
- Концепция Non-Render Blocking Assets (100% Web Performance):
- Минификация HTML, CSS, JS файлов.
- SVG-спрайты.
- Critical CSS.
- Lazy Load CSS/Images/JS.
- Image Optimisation.
- Поддержка мультиязычности (en/ru/ua).
- Выбор валюты в ценах на товары.
- Мультисортировка товаров на каталожных страницах по трем критериям (реализация на JS).
- Поиск по каталогу с рекомендациями новых товаров.
Результаты
Таким образом, за два года разработки я не поступился ни одним из этих критериев качественного и быстрого сайта в 2018 году. Выполнив все эти требования, я создал сайт, который получил в Google PageSpeed Insights оценку 99 баллов из 100. И одного балла не хватает до 100, потому что Google ругается на отсутствие кеширования на своем собственном сервере, где расположен счетчик Google Analytics 😄
Согласно данным из отчета Chrome User Experience сайт имеет медиану загрузки FCP — 0.9 секунды и DCL — 1 секунду.
Работа над проектом все еще продолжается, я пишу новости, статьи и добавляю в каталог каждое новое устройство на Android.
Итого
Инструментарий
- Sketch.
- Редактор Sublime Text.
- Console.
- Генератор статических файлов Jekyll
- NodeJS и Gulp/NPM модули
Навыки, примененные в этом проекте
- Опыт работы в Sketch.
- Понимание принципов human-centered mobile design.
- Разработка адаптивного дизайна Ecommerce-проекта по принципу Mobile-first.
- Создание информационной архитектуры проекта.
- Опыт работы с технологиями (Семантический HTML 5 с SEO-требованиями, CSS/SASS, Pure JavaScript).
- Soft skills: самостоятельный и самоорганизованный, выполняю задачи тщательно и с особым вниманием к деталям.
