• Роль Придумал / Нарисовал / Разработал / Написал контент
  • Период С 2015 (был запущен в 2017)
  • Сайт vedroid.com
Vedroid - ScreenShot #1

О проекте

Так как раньше я занимался сайтом каталогом всех телефонов 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-устройств, чтобы пользователи могли быстро и просто найти хорошую новую модель на замену своей старой модели.

Работа над проектом

Mobile First дизайн
Vedroid - ScreenShot #3

Этот проект я начал разрабатывать в 2015 году, а публичный запуск состоялся в декабре 2017 года.

Возможно, вам покажется, что делать проект два года — это слишком долго, но нужно учесть, что, во-первых, я занимался им не в режиме full time, и во-вторых, на момент запуска в каталоге уже находилось 1 500 товаров с фотографиями и текстовыми описаниями. Наполнение сайта контентом — это очень большой объем работы, который растянулся почти на год.

Но самое интересное в работе над Vedroid.com — это техническая реализация и новый подход, который я придумал по ходу разработки сайта. Более подробно об этом я планирую написать статьи на Medium.

Основные требования к разработке сайта:

  1. Отсутствие базы данных на сервере.
  2. Использование статического генератора сайтов Jekyll.
  3. Использование NodeJS и Gulp/NPM модулей для полной сборки сайта.
  4. Адаптивный дизайн (mobile/tablet/desktop).
  5. HTML-верстка:
    • Концепция Mobile first.
    • Семантическа HTML 5.
    • SEO требования: Rich Snippet и Open Graph.
    • Sass и препроцессор PostCSS.
  6. Pure JavaScript.
  7. Концепция Non-Render Blocking Assets (100% Web Performance):
    • Минификация HTML, CSS, JS файлов.
    • SVG-спрайты.
    • Critical CSS.
    • Lazy Load CSS/Images/JS.
    • Image Optimisation.
  8. Поддержка мультиязычности (en/ru/ua).
  9. Выбор валюты в ценах на товары.
  10. Мультисортировка товаров на каталожных страницах по трем критериям (реализация на JS).
  11. Поиск по каталогу с рекомендациями новых товаров.
Vedroid - ScreenShot #4
Vedroid - ScreenShot #5
Vedroid - ScreenShot #6

Результаты

Иконки для Vedroid и другая всячина
Icons for Vedroid and other stuff
 

Таким образом, за два года разработки я не поступился ни одним из этих критериев качественного и быстрого сайта в 2018 году. Выполнив все эти требования, я создал сайт, который получил в Google PageSpeed Insights оценку 99 баллов из 100. И одного балла не хватает до 100, потому что Google ругается на отсутствие кеширования на своем собственном сервере, где расположен счетчик Google Analytics 😄

Согласно данным из отчета Chrome User Experience сайт имеет медиану загрузки FCP — 0.9 секунды и DCL — 1 секунду.

Работа над проектом все еще продолжается, я пишу новости, статьи и добавляю в каталог каждое новое устройство на Android.

Vedroid - ScreenShot #9
Vedroid - ScreenShot #10
Vedroid - ScreenShot #11
Vedroid - ScreenShot #12

Итого

Инструментарий

  • 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: самостоятельный и самоорганизованный, выполняю задачи тщательно и с особым вниманием к деталям.
Vedroid - ScreenShot #14
Vedroid - ScreenShot #15
Vedroid - ScreenShot #16
Vedroid - ScreenShot #17
Vedroid
Vedroid Pattern 1 Vedroid Pattern 2 Vedroid Pattern 3 Vedroid Pattern 4 Vedroid Pattern 5