Вёрстка сайта

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

Существует три вида вёрстки: дивами (вёрстка с помощью слоёв), таблицами (вёрстка с помощью таблиц, устаревшая и неудобная по ряду аспектов включающих адаптивную вёрстку) и HTML5 вёрстка привнёсшая специальные теги помогающие поисковым роботам правильно определять семантику участков кода. Современная вёрстка объединяет в себе эти новые теги и вёрстку слоями.

Адаптивная вёрстка сайта

Самый верный с точки зрения продвижения путь для сайта - это адаптивная вёрстка, раньше делали разделение дизайна на сайт для компьютера и сайт для мобильных устройств и раздельно наполняли их. При адаптивной вёрстке сайт складывается с большого дизайна к маленькому или наоборот раскрывается с маленького к большому, таким образом покрываются все разрешения экрана устройств. Всё постепенно изменяется но всё ещё актуальный минимальный размер 320px (пикселей) это смартфоны, далее планшеты ноутбуки и местами компьютеры 1024px и мониторы побольше 1600px. Дальнейшее увеличение дизайна уже вопрос, поскольку там уже огромные расширения идут и увеличивать графику/изображения приведёт к ухудшению времени отдачи/загрузки страницы или костылям в виде отдельных картинок при наполнении, что неудобно для клиента.

Размеры для адаптивной вёрстки

Это мои заметки по результату проведённого анализа глобальной статистики сайтов (проведённого примерно под конец 2018г). Более свежие размеры и исследования на начало 2021г. смотрите в разделе размеры адаптивной вёрстки для сайта.
У меня пару схем для вёрстки, с фиксированными разрешениями и в виде растягушки(резины) на маленьких расширениях. Можно ещё делать пропорциональную математику увеличения размера всего в зависимости от размерах экрана, но она проблемная - в переходных местах шрифты становятся огромными и это даёт нагрузку на браузер особенно при изменениях размера всей страницы, приходится на определённых размерах экрана менять размеры, плюс попадать в макет, проще фиксированные размеры делать.

• 320 x 534 px - обязательно, отступы не обязательны - тенденция смещения к 360px минимальной ширины экрана идёт, но необходимо ещё обеспечивать совместимость со старыми устройствами, лет 5-10 где-то.
• //640 x 480 px - по желанию
• //768px - не имеет смысла 2% пользователей
• 1024 x 768 px - макет на 1000px - обязательно (минус 24 пикселя на скролл, это мой экспериментальный размер со времён Windows XP в который укладывается при любом оформлении системы..)
• //1366 x 768 px - макет на 1342px - по желанию
• 1600 x 900 px - макет на 1576px - обязательно
• //1920 x 1080 px - макет на 1896 px - по желанию //2048 × 848 (2k)
• //3840 x 2160 px (4k) - макет на 3816px - по желанию, в статистиках его не видно. И на таких больших размерах, на экране обычно браузер на пол окна висит (ширина 1920px).

Такая схема мне больше нравится:

Покрываем большую часть смартфонов и устройств побольше, далее 1024 планшеты / компьютеры и на 1600 все большие экраны.

• Растягивающийся дизайн (резина) с 320px до 600px* ширины экрана (или с 320px до 480px; * примерно, смотрится на то как всё получается/выглядит).
• 1024 x 768 px - макет на 1000px
• 1600 x 900 px - макет на 1576px

Разрушаем или подтверждаем мифы и легенды:

• В интернете до сих пор толпы людей думающих что вёрстка дивами помогает занимать позицию выше по сравнению с табличной вёрсткой - это миф, общался со множеством серьёзных раскрутчиков все придерживаются мнения, что тип вёрстки не влияет на поисковую выдачу и они никогда не замечали падения позиций из-за этого. А вот новшевство в виде HTML5 тегов, уже влияет на семантику!
• Существует мнение, что страницы свёрстанные таблицой строятся дольше за счёт ожидания полной подгрузки контента - давайте будем реалистами скорость построения любой страницы любым браузером меньше секунды, точнее в секунду не менее 10 страниц это если брать суперНеглючныйИНеТормознойБраузерВсехВремёнИНародов Интернет эксплоер, по разному бывает и меньше но не больше чем за секунду, остальные браузеры обычно строят страниц 60 в секунду. Размер передаваемых текстовых данных обычно несколько килобайт, возможно десятков, в то время как возможность передачи информации уже измеряется мегабайтами в секунду и даже модем 56кб/с больше чем необходимо. (к примеру эта страница целиком без графики весит меньше 40кб) Исходя из этого какая разница будет это построение дольше или меньше если человек всё равно этого не заметит?
• При определённых условиях дивы могут "глючить" (схлопываться итп) - это факт, периодически сам встречался с необъяснимым поведением. Конечно всё зависит от квалификации верстальщика.
• Слой можно перемещать, прятать и показывать добавлять эффекты итд итп. Ничего не мешает делать то же самое с таблицами.
• Распорки табличной вёрстки, кто-то не очень квалифицированный очень много лет назад сверстал несколько шаблонов и выложил их в свободное пользование, возможно ещё написал несколько уроков, в которых использовались однопиксельные изображения для того чтоб зафиксировать те или иные части таблицы. Я тоже на заре карьеры с этим встречался в начале 2000 годов, собственно первый же сайт (который перевёрстывал с подобной вёрстки) вызвал диссонанс и за пару часов убрал все распорки, этот сайт до сих пор размещён в интернете и кроссбраузерно/одинаково выглядит (уже нет - в 2020г. смотрел, переделали наконец :).. Так что это тоже миф связанный с незнанием html.

Программист/верстальщик верстает в "блокноте" или специализированном редакторе кода, те кто использует всевозможные графические программы редакторы, вредят сайту - качество генерируемого кода при этом низкое, решения не оптимальные, ещё не встречал адекватного генератора.

Единственное что действительно важно - отсутствие ошибок в коде и само собой валидность кода согласно W3C стандарта. Так же важно чтоб движок сайта правильно отдавал страницы (это технические аспекты).

Хорошая вёрстка это искусство, я до сих пор нахожу какие-то решения улучшающие её качество.

Плохие верстальщики делают несколько макетов для того чтоб сайт выглядел в разных браузерах одинаково, это добавляет кучу кода. (Сошло на нет, давно не втречал, браузеры поумирали типа IE и почти настало счастье для верстальщика.)

Очень плохие верстальщики не проверяют как сайт выглядит в разных браузерах, удивитесь сколько "дорогих" фирм выдают подобные результаты.

Опытные верстальщики делают один шаблон который везде одинаково выглядит, при этом кода минимум.

На сегодняшний день актуальны браузеры: Google Chrome (60% пользователей), Firefox(5%), Opera(3%), Microsoft Edge(9% пришёл на замену Internet Explorer), Safari (12% яблочная продукция) остальные (типа Яндекс браузера) особо не имеет смысла рассматривать, поскольку они на движке Google Chrome.