Как сверстать сайт в 2017 году

2017-08-23 13:12:00


С каждым годом выходят всё новые инструменты и библиотеки, упрощающие верстку сайта. Я постараюсь рассмотреть основные приёмы, упрощающие процесс верстания сайта, а также рассмотрю самые популярные css фреймворки, которые в разу упрощают процесс создания html шаблона. Надеюсь, эта статья поможет Вам быстро сверстать современный и адаптивный шаблон.

Верстка современного адаптивного шаблона в 2017 году

Выбираем IDE (редактор кода) для вёрстки

Редактор кода или IDE (Интегрированная среда разработки) - основной инструмент верстальщика, от которого зависит скорость его работы. Хороший редактор кода сводит количество ошибок к минимуму и позволяет автоматизировать или упростить некоторые действия верстальщика. Рекомендую то, в чём сам работаю: продукты от JetBrains. Для вёрстки подойдёт JetBrains PHPStrom и JetBrains WebStrom. Первый лучше использовать в случае, если у Вас backend на PHP, второй, если на Node.js. Установив одну из IDE и прочитав документацию, Вы сможете значительно ускорить Вашу работу. Например, сможете использовать инструментарий Emmet, который позволяет делать следующее:

Данные редакторы платные, но если Вы бедный студент, то найдёте способ обойти лицензию.

CSS фреймворк для вёрстки

Быстро сверстать сайт больше всего помогает именно CSS фреймворк. В нём, как правило, практически вся работа сделана за Вас: реализована сетка для разбиение страницы на столбцы, стилизованы формы и другие элементы. Вам лишь остаётся добавить к элементу класс, чтобы применить к нему соответствующие стили. Вам не придётся прорабатывать адаптивность сайта, ведь в CSS фреймворке это сделали за Вас. Кроме того, фреймворки могут содержать ещё и js часть, которая отвечает за рендеринг модалок и всяких красивостей. Самые популярные на сегодняшний день фреймворки для вёрcтки:

  • Bootstrap
  • Skeleton
  • Kube
  • Foundation

У каждого из них есть свои плюсы и минусы. Прочитайте про их возможности и выберите лучший для себя. Помните, не стоит стрелять по музе из базуки и по слону из рогатки.

Используйте все современные возможности

Используйте элементы семантической вёрстки, такие как section, header, aside, footer. Используйте стандарт семантической разметки данных Schema.org. Видели рейтинг статей, программ в выдаче Google в виде звёзд? Так вот, это реализовано с помощью Schema.org. Также рекомендую добавить элементы с разметкой Open Graph, которую используют популярные социальные сети для формирования превью.

Минификация - хороший тон современной вёрстки

После того, как вёрстка закончена, можно уменьшить размер стилей и js скриптов, сделав минификацию. Минификация - это уменьшение размера файлов, за счёт удаления служебных символов, таких как пробелы и переводы строк. Код после данного процесса становится не читаем, но зато быстрей загружается у посетителя, зашедшего на свёрстанный Вами сайт.

Подведём итоги

Итак, чтобы сверстать сайт и не потратить на это пол жизни, нужно:

  • Выбрать самый удобный редактор кода.
  • Выбрать подходящий для Вашей задачи css-фреймворк.
  • Использовать семантические теги html5, Scheme.org, Open Graph
  • После завершения вёрстки использовать минификацию, чтобы уменьшить размер css и js.

И, конечно же, рекомендую использовать W3С валидатор и Google PageSpeed для проверки Вашего творения.