+7 (916) 252 40 72

Меню
Адаптивная вёрстка сайта
Seo design site » Создание сайтов » Вёрстка сайта

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

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

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

Адаптивная вёрстка — это необходимое условие при разработке современного web сайта. Преимущество адаптивной вёрстки перед мобильной версией сайта (используемой до сих пор) в том, что Responsive Website корректно отображается на всех устройствах без исключения и он один! Адаптивный web сайт корректно отображается, как на мобильных устройствах, так и на больших экранах.

Отзывчивый веб-дизайн использует блочную вёрстку сайта, где блоки идут друг за другом свеху вниз. Визуальное свободное расположение блоков достигается с помощью стилей (css). На маленьких экранах от 320 рх блочная вёрстка сайта так и идёт по порядку, а на больших экранах от 1380 рх та же вёрстка располагается в несколько колонок. Таким образом, Responsive Website очень удобен для восприятия информации

Вёрстка текста

Грамотная вёрстка текста на странице имеет немаловажное значение. Текст должно быть комфортно читать.

  • Шрифт и его размер. Лучше всего на экране монитора читается шрифт без засечек, как например, тот, что читаете вы сейчас. Это шрифт «Arimo», размер 1 em — не большой, но и не маленький, не узкий — не широкий. Этот шрифт и его размер — очень комфортны для чтения. Более мелкий и более крупный размер шрифта одинаково неудобно читать с экрана. В основном, на сайтах используют системные шрифты: Arial, Helvetica, Verdana, Tahoma — не утяжеляют код и есть во всех операционных системах.

  • Параграфы и абзацы. Текст необходимо разбить на абзацы, ориентировочно, по 4–6 строк. Большие массивы текста на экране монитора читаются очень плохо. Внимание рассеивается и всё время теряются начала строк. Короткие абзацы нужно объединять в смысловые блоки — параграфы. Это делается для удобства чтения представленных материалов посетителями сайта.

  • Заголовки и подзаголовки. Текст надо начать с заголовка, выражающую общую мысль всей статьи. Основной заголовок помещается в тег <h1>...</h1>. Далее в статье следует использовать подзаголовки, которые заключаются в теги от <h2>...</h2> до <h6>...</h6> в зависимости от значимости. Заголовок использутся один раз для названия статьи, а подзаголовки могут быть разбросаны по тексту в зависимости от важности. Необходимо в заголовках и позаголовках использовать поисковые запросы.

  • Выделение текста. В оптимизированном тексте присутствуют ключевые слова и фразы, имеющие нужный смысловой оттенок. Некоторые из них можно выделить жирным шрифтом (тег <strong>...</strong>), некоторые курсивом (<em>...</em>). Они могут гиперссылками на другие документы. Поисковые системы обращают на такие ссылки больше внимания.

Вёрстка картинок

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

Далее, готовые изображения ввёрстываются на веб страницу.

  • Вверху или внизу относительно текста. В этом случае, картинка располагается над или под текстовым параграфом, никаких специальных тегов писать не надо.
  • Справа или слева, т.е. текст обтекает изображение, картинка, как бы ввёрстывается в текст. В этом случае, используется тег <float> с выравниванием влево (left) или вправо (right).

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