Привет и добро пожаловать в наш Дзен!
Сейчас в сети много конструкторов, которые позволяют создать свой супер-крутой сайт без навыков программирования скачать бесплатно без регистрации и смс, и есть даже такие, которые реально позволяют сделать это красиво.
Но есть одно но: это всё шаблоны.
Конструктор ограничен своим набором блоков, и даже если со временем количество новых фич и красивых элементов этого конструктора увеличивается, на твоём сайте они появятся не раньше, чем их добавят разработчики конструктора. А поскольку в наше время все стремятся быть быстрее всех и быть индивидуальными, то привлекают команду из маркетологов, дизайнеров и веб-разработчиков, чтобы им сделали красивый, функциональный и не похожий на любой другой сайт. Своего рода hand-made в мире конвейеров. И такой подход приносит куда лучший результат, но при условии, что этот hand-made сделан хорошо.
Много воды, погнали к сути. Ниже я расскажу, чего следует придерживаться, чтобы сайт любили как посетители, так и другие веб-разработчики.
Программист или веб-разработчик?
Веб-разработчик. Но выговаривать это каждый раз непросто, поэтому когда нас называют программистами - обижаются только программисты, которые пишут серьезный софт или смотрят наш тик-ток*. Есть много мнений по этому поводу, поэтому предлагаю воспользоваться основным инструментом программиста - загуглить.
Думай наперёд
Всегда и почаще. Как бы это банально не звучало - это работает. Хорошо продумать архитектуру на старте, правильно выбрать CMS, инструменты, проанализировать скорость выполнения запросов до написания всего модуля, занести белый цвет в переменную, чтобы, когда тебя попросят сделать его чуть-чуть светлее, тебе не пришлось менять его в 1000 и одном месте - это может значительно сократить количество проблем и головной боли, сделать жизнь проще и сроки завершения проекта ближе.
Подумай, что ядро CMS будет обновляться и, возможно, стоит писать свой код только в файлах своего шаблона. Тогда можно быть уверенным, что никто и ничто не сотрет часы твоей работы. Или, делая верстку, представить, что по завершению проекта тебя попросят оптимизировать сайт по PageSpeed. Тогда стоит заранее ознакомиться с типичными ошибками в коде сайта и оптимизировать код на ранних этапах разработки.
Подумай наперёд и сделай красиво сразу.
Пиши, кстати, тоже красиво
Стандарты написания кода придумали не просто так. Код, написанный по стандарту, или хотя-бы придерживаясь его, читается легче и экономит время. Названия переменных, которые ясно отражают суть того, что в них хранится, понятны мгновенно и тоже экономят время и нервы. А если ещё и без орфографических ошибок написано - вдвойне приятно. Всем разработчикам нравится читать аккуратный код. И компуктеру в дата-центре тоже.
Оптимизируй на ранних этапах
Ты выделяешь на странице место под картинку, скажем, 500х500px. Затем даёшь возможность в эту область загружать картинку из админки.
И если ты думаешь, что туда будут загружать картинку такого же размера...
Туда в первую же очередь полетит исходник с зеркалки в разрешении 5380x3620px. И, да, на странице это будет по прежнему небольшая картинка, вот только весить будет в 20 раз больше.
Оптимизировать все равно придется, так почему бы не сделать это заранее? Сделай функционал, который будет на лету сжимать и кэшировать изображение, чей размер больше контейнера, и тогда страница всегда будет открываться быстро.
Отдавай нужное и по требованию
Хорошей практикой будет не паковать все скрипты и стили в единый файл (точнее, в единые 2 файла), а разделить на общее, которое нужно на всех страницах, и частное, которое нужно только в одном месте. И тогда пользователь не будет скачивать "весь гиговый архив, ради одного документа, весом в 10 килобайт". Образно, конечно, но это вполне реальная ситуация.
Ещё можно загружать многоуровневые меню через AJAX (по-русски: по клику на меню, а не при загрузке страницы). Тогда время ожидания страницы не будет увеличено по причине "бэкенд строит меню, которое пользователь может даже не открыть". Это не только к меню относится, к другим модулям тоже применимо.
Посмотри как это делают другие
Нажми F12 и изучи как сделана эта крутая анимация. И в следующий раз, когда будешь верстать страницу, у тебя будет вариант, как сделать лучше. Интересных решений много, и перерабатывая их ты накапливаешь опыт. В дальнейшем начинаешь развивать и вносить своё. И вот ты уже не просто исполнитель, а генератор идей и востребованный специалист. Как бы пафосно это не звучало.
Сделать хороший сайт можно.
Сделать лучший сайт можно в Digital Around.
*отсылка к "верстальщик не программист" из комментариев к ролику в нашем TikTok. К сожалению, сейчас этот ролик заблокирован по непонятной причине ¯\_(ツ)_/¯.