Добро пожаловать на семнадцатый день журнала сборки useaffiliates.com! В этой серии рассказывается о моем путешествии по созданию публичного бизнеса с нуля. Если вы пропустили шестнадцатый день, вы можете проверить это здесь. Я также загрузил сегодняшний Twitch стрим на YouTube, если хотите посмотреть повтор.
Почему у меня нет трафика!? 😭
Работая вчера над блогом ежедневных обновлений, я был расстроен тем, что за последние семь дней у меня не было посетителей на useaffiliates.com. Но уже через пару секунд это ощущение сменилось о дерьмо💡.
Я столкнулся с этим однажды с пакетом fathom-client. Если ваш домен перенаправляет на www. версии и у вас ее нет внутри массива includedDomains
, данные в Fathom отправляться не будут.
После обновления массива трафик начал появляться! Я до сих пор расстроен тем, что у меня нет всех данных из этой серии, но, по крайней мере, аналитика будет работать в день запуска.
Улучшения UX ✅
Мой план на сегодня состоял в том, чтобы тщательно протестировать приложение и критически относиться ко всему. Конечно, я могу столкнуться с некоторыми вещами, которые невозможно реализовать до запуска, но, по крайней мере, мы можем добавить их в наш следующий план или в бэклог.
Ход загрузки.
При обновлении фильтров или привязке через один из тегов категорий вам иногда приходится ждать 1 или 2 секунды, прежде чем страницы переходят. Это не сумасшествие, поскольку нам нужно получить данные из нашей базы данных, отобразить страницу, а затем перейти к этой странице.
Я даже думал, что страница не отвечала пару раз, пока вскоре после этого она не перенаправила меня на нужную страницу.
Чтобы противостоять этому, вчера я уже внедрил лучшие стратегии кэширования. Тем не менее, я также хотел добавить индикатор загрузки, чтобы, если страница еще не кэшировалась, люди все равно получали хорошую обратную связь о том, что что-то загружается/происходит.
Я использовал библиотеку под названием nprogress, и реализовать ее было очень просто. Вы можете проверить изменения через коммит здесь. Теперь каждый раз, когда происходит событие изменения маршрута, пользователь получает визуальную обратную связь о том, что мы загружаем изменения.
Обновление кнопки фильтра.
Вчера попросил всех протестировать живую 💩 вне сайта. Повторяющаяся часть обратной связи, которую я получил, была;
"Когда я тестировал ваш сайт, я некоторое время не знал, как убрать фильтры. Затем я наконец нашел значок отмены ближе к концу».
Это было то, что я должен был исправить перед запуском. Я хочу, чтобы мои пользователи без проблем просматривали партнерские программы и находили свою идеальную партнерскую программу. И если вы не знаете, как очистить фильтр, ну… пользователь расстроится и может не вернуться.
Я переделал иконку с моим чатом (зрители на Twitch), чтобы она стала кнопкой. Таким образом, он более заметен, и теперь он также показывает текст «очистить фильтры». Я также позаботился о том, чтобы кнопка теперь отображалась только тогда, когда у пользователя включен хотя бы один фильтр.
Чтобы пользовательский интерфейс оставался согласованным, я также изменил кнопку «очистить фильтры» в сообщении «результаты не найдены», чтобы она оставалась прежней.
И, как кто-то сказал в чате: «Теперь он готов к производству!» 🚀
Улучшения пользовательского интерфейса ✏
Во время тестирования веб-сайта я снова обнаружил пару вещей, которые, как мне хотелось, выглядели немного иначе. Поэтому я добавил их в список «отзывов о бета-версии» и поработал над ними сегодня!
Обновлены теги категорий.
Я собираюсь быть честным, никакой обратной связи или науки здесь. Меня просто не зацепил серый цвет фильтров. Он просто не вписался в строки программы.
Немного поиграв с цветовой палитрой, я решил сделать ее более светлым оттенком нашего основного оранжевого цвета. Я действительно думаю, но могу быть предвзятым, что это уделяет немного меньше внимания категориям и больше информации о партнерских программах, а не серому цвету.
Ближе к концу дня я также заметил, что шрифт тегов категорий был довольно жирным в Safari и Firefox. Когда я проверил свой код, я заметил, что я использовал вес шрифта medium
, что слишком много для мелкого текста. Я обновил толщину шрифта до normal
, и теперь все снова выглядит четко!
Уменьшена высота контейнера программы отправки на мобильных устройствах.
Что хорошо в Typeform, так это то, что как только вы нажмете «Пуск» на мобильном телефоне, форма перейдет в полноэкранный режим, что упрощает заполнение формы.
При тестировании страницы «опубликуйте свою программу» я заметил, что на мобильных устройствах форма была выше фактического окна просмотра, нажимая кнопку «Пуск» далеко вниз по странице и добавляя много бесполезного пустого пространства на страницу.
После настройки высоты контейнера мы избавились от бесполезных пробелов, а кнопку «Пуск» теперь найти намного проще.
Я добавил юридические страницы! 📜
Одна вещь, блокирующая запуск, заключалась в том, что я еще не настроил условия и страницы конфиденциальности. Я знаю, что они скучны, но они должны быть у вас, когда вы продаете свои услуги в Интернете.
При добавлении контента для страниц мне нужно было внести пару изменений в стиль.
Первое изменение стиля заключалось в том, что я хотел, чтобы заголовки страницы были короче, поскольку заголовки страниц состояли только из одной строки (положения и условия и политика конфиденциальности). Я обновил компонент defaultLayout
, чтобы использовать реквизит isSmall
(отличное название! 😬). Таким образом, для некоторых макетов я теперь могу сделать заголовок короче, чтобы он не выглядел странным.
Другое изменение стиля связано с содержимым страницы. Поскольку я использую TailwindCSS, мой текст не имеет стилей по умолчанию. Что я обычно делаю для таких типов сгенерированного текста, так это добавляю класс .WYSIWYG
в мой CSS, который я применяю к родителю текста.
При этом я по привычке вложил CSS. Конечно, компилятор пожаловался, но не в плохом смысле. На этот раз он сказал мне: «Смотри; вы можете сделать это; Я знаю, что вы этого хотите, но вам нужно установить плагин». После быстрого просмотра предоставленной ссылки на документацию я был рад обнаружить, что все, что вам нужно сделать, это обновить файл tailwindconfig.js
и включить файл tailwind/nesting plugin
, который поставляется в комплекте с Tailwind.
И бум! 💥 Поддержка вложенных CSS и две красивые юридические страницы.
Готов к запуску! 🚀
Как вы могли заметить в моем Твиттере, я удалил тег бета, и теперь у нас есть версия 1 useaffiliates.com. 🥳
Я все еще работаю над планом запуска, но, судя по календарю, мы, вероятно, запустим его на следующей неделе! А пока не стесняйтесь делиться проектами со своими друзьями-создателями и сообществами, и, надеюсь, кто-то заработает немного денег, найдя партнерскую программу, которая соответствует их контенту.
Теперь я буду работать над созданием всего необходимого контента и медиа для «официального» запуска.
Еще раз спасибо за чтение этого журнала сборки, и я надеюсь увидеть вас в день запуска!
Если вы хотите оставаться в курсе тем временем, подпишитесь на меня в Твиттере.
С любовью,
Тванкруи