Многие начинающие фотографы рано или поздно задумываются о собственном сайте, где их услуги были бы представлены в виде портфолио с удобным прейскурантом и контактами для обратной связи. Но, далеко не все могут позволить себе оплатить специалистов по веб-разработке. В данной статье мы рассмотрим общий пошаговый подход при оперативном создании сайта-портфолио своими руками с примерами уже созданных сайтов от фотографа из Екатеринбурга Глеба Клементьева и Цитадели Контента GMPH. Итак, что нужно делать...
1. Придумать и приобрести оригинальное доменное имя, отражающее тебя как автора, желательно простое в запоминании и указании, например, как у Глеба - ihatethis.work или GMPH – gmph.ru. Для этого необходимо выбрать удобный сервис, располагающий доменами в нужной области (com, net, org, gov, work, ru и прочие). Доменные сервисы обычно сразу же предлагают комплекс инструментов, включая проверку имени домена и оплату. В случае Глеба был выбран американский сервис Namecheap. Если у тебя возникнут трудности на данном этапе, ты всегда можешь обратиться в службу поддержки сервиса или следовать инструкциям на сайте сервиса.
2. Выбрать импортёра хостинга, который будет хранить данные твоего сайта и с которым ты будешь решать все технические вопросы по различным протоколам, командам и переадресациям. В случае GMPH была выбрана компания Net Angels, которая базируется в Екатеринбурге. По уточнениям также рекомендуется обращаться в службу поддержки клиентов импортёра, так как часто имеется ряд индивидуальных особенностей при работе с личным кабинетом.
3. Выбрать движок для сайта, желательно тот, что сразу же адаптирует создаваемый сайт под мобильные устройства. Сегодня очень много движков, освоить которые может каждый, даже не имеющий опыта в программировании и вёрстке. Движки сразу предлагают набор шаблонов и оптимизацию, которая заранее настроена разработчиками. Всё, что от тебя требуется - просто наполнить предложенные шаблоны своим контентом. Ты можешь взять за ориентир сайт фотографа, который тебе понравился, и просто использовать такой же движок (его часто можно уточнить внизу странички или же спросить напрямую у автора). В случае фотографа Глеба Клементьева был выбран движок Adobe Portfolio. Он на понятном русском, у него отличная интеграция и простой интуитивный интерфейс, с которым справится даже ребёнок. С различными движками и их особенностями можно ознакомиться в другой нашей статье "ТОП 10: движки сайта-портфолио".
4. Назначить новому сайту купленный домен, упомянутый в пункте 1 (обычно это делается через админку движка). Не оставляй предложенные движком доменные имена, они длинные, выглядят неоригинально и больше рекламируют не тебя, а движок. Чтобы вникнуть в особенности этой настройки обратись к faq соответствующего раздела админки.
5. Создать визуальную карту сайта — своеобразный макет, где будут продуманы навигация, разделы, подразделы и галереи. Также на этом этапе необходимо назначить кнопки и формы обратной связи. Продумать имена URL и пути, чтобы потом было легче наполнять сайт контентом. Пример визуальной карты сайта gmph.ru в иллюстрации к данной статье.
6. Подготовить контент для сайта (тексты, изображения и видео) после того, как скелет сайта с предусмотренными страницами будет наконец-то собран. Тексты предварительно проверить на оригинальность и наличие ошибок, исключить повторения и нецензурные выражения. Изображения и видео уменьшить в пользу скорости загрузки страниц (это необходимо для базового SEO), оптимальный размер изображений не менее 1000 px и не более 2000 px по длинной стороне. Также изображениям нужно придать веб-параметры: 8 bit, 72 dpi, sRGB (это необходимо для корректного отображения на выводящих устройствах).
7. Наполнить сайт контентом, придерживаясь правил веб-дизайна, норм возрастного ограничения и правил использования генеративного контента. Будь уверен(а), что на этом этапе продолжится вёрстка, так как некоторые элементы нужно будет ровнять, сдвигать, форматировать и так далее. Также, как правило, на этом этапе возникает потребность в производстве дополнительного веб-контента: фоны, плашки, кнопки, иконки навигации и прочее. Обрати внимание, что у многих движков есть возможность задать вёрстку шаблона, которая распространится на все страницы сайта, что очень упростит весь процесс.
8. Оптимизировать сайт после добавления контента. Для начала проверь его на максимально возможном количестве выводящих устройств (ПК, ноутбуки, планшеты и смартфоны), для этого можно подключить друзей и подписчиков как альфа-тестировщиков. Готовься к тому, что выявится множество огрехов вёрстки и непрактичных решений. По техническим ошибкам смело общайся со службой поддержки движка. Все эти ошибки необходимо будет устранить. Обязательно проверь формы обратной связи.
9. Выполнить базовую оптимизацию SEO, это поднимет твой сайт в поисковой выдаче. Ещё раз проверь свой контент на уникальность, в него не должны попасть произведения других авторов. Снабди каждую страницу ключевыми словами (обычно для таковых есть отдельный раздел админки), и следи, чтобы ключевые комбинации не повторялись (даже одним словом). Снабди каждое изображение тегами и проследи, чтобы не было расхождения с содержимым изображения, поисковые механизмы этого не любят. Обязательно наполни сайт гиперссылками и оформи раздел контактов иконками своих социальных сетей. По возможности подключи метрические счётчики, чтобы в будущем отслеживать посещаемость.
10. Опубликовать сайт и собрать обратную связь (метрика и аналитика). На оставшиеся нюансы и ускользнувшие недоработки тебе укажет общественное мнение, прислушивайся к фидбэку, чтобы сделать сайт ещё лучше. Дай анонс своего нового сайта в личных социальных сетях. Удачи!