Советы по верстке сайта от специалистов DST Global

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

Не спешите приступать к верстке

Чем полнее представление о будущем шаблоне, тем быстрее и качественнее он будет сверстан. К некоторым элементам шаблона могут быть применены общие стили, а к некоторым индивидуальные, но чтобы грамотно осуществить такое разделение, нужно иметь предварительный макет.

Для его создания необязательно использовать фотошоп, прорисовывая все мелочи, во многих случаях подойдет бумага и карандаш. Основная задача — определить главные контейнеры и блоки (где и как они будут позиционироваться).

Избегайте визуальных редакторов

Есть множество WYSIWYG-редакторов, которые чуть ли не обещают сделать всю работу за вас, предлагая графический интерфейс, позволяющий, без знаний HTML, верстать сайт при помощи мышки. Новичков такие инструменты восхищают, но профессионалы редко ими пользуются, и вот почему:

  • теряется контроль над кодом — разработчик со временем утрачивает понимание структуры HTML-документа;
  • с CSS-кодом — аналогично, к тому же код не оптимизируется при генерации;
  • не все редакторы предоставляют исчерпывающий интерфейс, а значит, эти недоработки приходится компенсировать вручную.

Пишите валидный код

Соблюдайте все стандарты, когда пишете HTML-код: закрывайте парные теги, вкладывайте теги друг в друга согласно общим правилам, не упускайте расстановку обязательных атрибутов. Свою работу можно проверить с помощью online-сервиса валидации.

Ошибки нужно исправлять, даже если браузер «закрывает на них глаза». Во-первых, нет гарантии, что он будет делать это завтра, во-вторых, к корректности кода достаточно строго относятся поисковые системы, что влияет на рейтинг сайта.

Называйте вещи своими именами

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

Двигайтесь от общего к частному

Не детализируйте дочерние элементы раньше родительских. Вначале опишите стили для общего контейнера, а затем — для главных блоков, потом проработайте заголовки и основной текст. Это будет база, и, уже учитывая ее рамки и особенности, приступайте к стилизации более мелких частей.

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

Отделяйте мух от котлет

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

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

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

Советы по верстке сайта от специалистов DST Global
Получить консультацию у специалистов DST
Напишите нам прямо сейчас, наши специалисты расскажут об услугах и ответят на все ваши вопросы.
Комментарии
RSS
Вам может быть интересно
Тема адаптивности сегодня как никогда актуальна, поскольку многие пользователи часто сталкиваются с проблемой невозможности использовать сайты с разных устройств. Если раньше веб-ресурсы создавались д...
JavaScript входит в число самых популярных языков программирования, а фронтенд-р...
Достаточно большое количество задач в верстке сейч...
Что такое адаптивная верстка сайта и зачем она нуж...
Адаптивный дизайн сайта – это динамический дизайн,...
Мобильная версия сайта — это самостоятельная...
Все мы активно пользуемся смартфонами, планшетами ...
Адаптивный дизайн. Почему это важно?До недавнего в...
Семантическая разметка сайта (микроразметка) – это...
Верстка - один из важнейших факторов юзабилити, от...
В наши дни оптимизация сайта под мобильные телефон...

Новые комментарии

Примерно так же “ведет” себя легаси. Поэтому работа программиста, который взялся за задачу модернизировать и “вдохнуть вторую жизнь” в проект, должна ...
В целом схоже с местами где я работал, но везде все ровно по своему делают. Никто не придерживается канона
Проработав долго менеджером-проектов с разработчиками я бы выделила следующие вопросы: Что такое этап разработки и продюсирование? Среды мо...
Сейчас время нишевых маркетплейсов, обще тематические такие как Озон, Мегамаркет и WB заняли свою нишу и конкурировать с ними уже нет никакой возможно...

Заявка на услуги DST

Наш специалист свяжется с вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.

Адрес

Россия, Ижевск, ул.Салютовская,
д.1, офис 17

8 495 1985800
Заказать звонок

Режим работы: Пн-Пт 10:00-19:00

info@dstglobal.ru

Задать вопрос по почте

Укажите ваше имя
Укажите ваше email
Укажите ваше телефон