Когда я только начал заниматься веб-разработкой, одной из самых сложных вещей, которые я обнаружил, было не обучение новым навыкам или создание проектов, которые я задумал, но это было то, что я должен был делать, когда у меня был сайт, который, как я думал, был готов к публикации. Есть бесконечное количество руководств по созданию этих веб-сайтов, но гораздо меньше шагов, которые вы должны предпринять, когда будете готовы поделиться. Ниже приведено мое руководство от начала до конца о том, как я подхожу к компиляции и публикации моего веб-сайта, полученное за два года обучения программированию и год в качестве студента информатики. Это не подробное руководство, это то, что вы должны попробовать, а затем приспособить к тому, как вы хотите работать.
Корректура
Я не могу подчеркнуть важность корректуры. Публикуете ли вы свое портфолио или сайт электронной коммерции для компании, даже несколько орфографических или грамматических ошибок могут мгновенно отключить работодателя или клиента. Иногда бывает сложно обнаружить орфографические ошибки в среде IDE, хотя некоторые из них, например Jetbrains, включают проверку орфографии, поэтому обязательно прочитайте свой сайт еще раз в браузере, как если бы вы были посетителем, и вы увидите любые ошибки или ошибки, которые они могут увидеть.
Мета-теги и оптимизация области просмотра
Когда контент будет готов и вы будете готовы к публикации, следующим шагом будет настройка тегов <meta> и обеспечение адаптивности CSS. Мета-теги, хранящиеся в заголовке файла HTML, используются для определения основных описаний или параметров веб-сайта, таких как описание и ключевые слова, которые используются поисковыми системами для индексации веб-сайтов и помощи в SEO (поисковой оптимизации).
Примером набора метатегов может быть:
Хотя большинство из этих тегов используется для SEO, один тег имеет решающее значение для адаптивного дизайна - тег <metaname=”viewport”>. Цель этого тега - масштабировать контент вверх или вниз, чтобы соответствовать устройству, на котором он просматривается. Адаптивный дизайн важен как никогда в современном дизайне из-за стремительного роста числа пользователей смартфонов. Я использую подход Mobile First Design, когда дизайн мобильного интерфейса является приоритетным, а затем используются медиа-запросы для изменения размера и перемещения элементов по мере необходимости для новых размеров экрана.
Мой полный список медиа-запросов выглядит так:
Я не рекомендую использовать полный список запросов для большинства проектов, однако это полный список различных часто используемых размеров устройств, которые позволят создать наиболее отзывчивый дизайн.
Оптимизация содержания
При работе на локальном компьютере у вас не будет задержек при загрузке страниц, поскольку они не запрашиваются с сервера. Однако после публикации сайты с большим содержанием контента могут загружаться так долго, что посетители отключаются еще до того, как загрузится ваше первое предложение. В сообщении MachMetrics показано, как растет использование мобильных телефонов; наличие быстрой загрузки веб-страниц необходимо для предоставления доступа пользователям независимо от мощности сигнала. Они цитируют исследование Google, в котором говорится:
«Среднее время, необходимое для полной загрузки целевой мобильной страницы, составляет 22 секунды. Однако исследования также показывают, что 53% людей покидают мобильную страницу, если она загружается дольше 3 секунд ».
Есть несколько шагов, которые вы можете предпринять, чтобы уменьшить общий объем данных, которые должен загрузить сервер:
- Уменьшите размер медиафайла
. Если вы делаете собственные фотографии или загружаете их со стандартного сайта, скорее всего, разрешение изображения намного больше, чем вам нужно. Мое правило для изображений заключается в том, что я изменяю размер изображений так, чтобы наибольший используемый размер соответствовал сайту наибольшего размера, для которого я обычно кодировал, это будет разрешение 4k. У меня также обычно есть отдельное, даже меньшее изображение, специально для мобильного дисплея, поскольку нет необходимости в маленьком 6-дюймовом дисплее телефона загружать изображение с высоким разрешением размером с рабочий стол. Могут быть определенные случаи, когда сохранение качества фотографий важно, например, галерея, и в этом случае у вас будут другие способы управлять этим. - Загрузка сценариев после содержания
Если вы используете<body onload=”Function()”>для запуска сценария на своей странице, лучше всего поместить его в конце тела, а не в начале. Когда это помещается в начало, браузер будет обрабатывать JavaScript перед загрузкой HTML, это вызывает проблему, когда файл JavaScript очень большой или если он включает файлы и мультимедиа, поскольку все это необходимо будет загрузить, прежде чем он попытается загрузить HTML. Однако изменение этого порядка на противоположное означает, что содержимое может загружаться до запуска сценария. Это означает гораздо лучший пользовательский опыт, поскольку лучше иметь небольшую задержку в функции, чем долгую задержку до того, как пользователь увидит какой-либо контент.
Выбор домена и услуги хостинга
После того, как я выполнил все предыдущие шаги, последний шаг - выбрать платформу хостинга для публикации сайта. Есть два основных претендента на роль предпочитаемого мной хостинг-провайдера; Страницы GitHub и Netlify. Обе службы бесплатны и отлично подходят для новичков, поскольку их можно развернуть из репозитория git для более удобного развертывания. Если вы в настоящее время не планируете приобретать домен, я бы порекомендовал начать работу со страниц GitHub, поскольку они предоставят вам запоминающийся домен с использованием вашего имени пользователя GitHub, а не случайно сгенерированную фразу, с которой будет намного лучше продавать себя.
Я использую Netlify для своего хостинга, я выбрал Netlify, поскольку он позволяет создавать неограниченное количество веб-сайтов, что полезно, поскольку у меня есть несколько проектов, опубликованных одновременно, и полнофункциональная CMS (система управления контентом), позволяющая мне также вести мой блог Предлагая единое решение для всех моих текущих потребностей. Однако у этого бесплатного плана есть ограничения, включая пропускную способность и количество минут сервера, используемых для сборки проектов. За те четыре месяца, что я использую это до сих пор, я не достиг даже близко к их пределу, и я сомневаюсь, что это будет проблемой для большинства проектов.
Однако, если вы планируете купить домен, я использовал и рекомендую услугу Google Domains. Я использовал эту услугу, потому что она не только интегрировалась с услугой, которую я уже активно использую, то есть мне не нужно создавать другую учетную запись и управлять ею, но также было очень легко подключиться к моей выбранной платформе хостинга с инструкциями на обоих концах. для соединения двух (находится во всплывающем окне при запуске процесса). У вас также есть возможность настроить G-Suite, бизнес-офис Google и почтовый пакет. Большинству людей это не понадобится, но это может быть полезно, если вы работаете над стартапом или командным проектом, в котором задействовано несколько человек. Если вы решите не использовать G-Suite, в стандартном домене Google есть пересылка электронной почты, позволяющая настроить до 100 адресов электронной почты с использованием вашего домена, которые могут быть перенаправлены на ваш обычный адрес Gmail.
Резюме
Для наилучшего развертывания вашего сайта или проекта важно не упускать из виду эти шаги, чтобы он выглядел как можно более профессионально, а также имел лучший охват и возможность добиться успеха.
TL; DR:
- Вычитайте все содержимое.
- Проверьте, чтобы метатеги в заголовке были как можно более информативными для лучшего SEO.
- Убедитесь, что CSS оптимизирован с адаптивным дизайном для компьютеров, телефонов и планшетов.
- Оптимизируйте контент, максимально уменьшая изображения, по возможности используя разные изображения для мобильных устройств и запуская javascript после загрузки контента.
- Выбор подходящего домена и хостинг-провайдера в соответствии с вашими потребностями.
