Fast Site Engine

Высокопроизводительная CMS для сайтов.

Сделать сайт

Карта сайта
Переходим на Линукс
Политика конфиденциальности
Сделать сайт на основе Fast Site Engine

Установка
Документация
Список изменений
Лицензионное соглашение

Скачать
О движкеПроизводительностьБезопасностьТехнические требованияSEOКонтакты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



© Все права защищены 2004 - 2024