Верстка web страниц

Адаптивная версия сайта – предназначена для удобного отображения содержимого в мобильных устройствах. Современная адаптивная верстка сайта является важнейшим фактором успешности проекта.

По сути Верстка - это "оживление" дизайн-макета сайта. Оживления производится с помощью языка разметки HTML, каскадных таблиц стилей CSS и сценария написанного на языке JavaScript.

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

Что нужно знать о верстке сайта?

Верстку можно разделить по типу и исполнению.

По типу она может быть:

  • статичная (Rigid fixed);

    Тип верстки, в котором ширина тела сайта задана в пикселях и остается неизменной.

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

    Недостатки:
    -На устройствах с разрешением, меньшим ширины сайта, появиться горизонтальный скроллинг.
    -Неудобный просмотр в мобильных устройствах

  • масштабируемая (Expandable elastic) в народе "Резиновая";

    Тип верстки, в котором ширина задана в процентах от текущего разрешения экрана.

    Преимущества:
    - Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид.
    - Сайт с таким дизайном будет одинаково хорошо смотреться на разных разрешениях

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

  • адаптивная (Adaptable fluid);

    На сегодня - наиболее востребованный и корректный тип верстки. Адаптивный сайт отображается на разных устройствах по разному, при этом сохраняет удобство навигации.

    Преимущества:
    - Сайт максимально удобен для пользователя на любых устройствах.

    Особенности:
    - Требует тщательной проработки нескольких макетов, для различных размеров экранов и мобильных устройств.

По исполнению можно выделить два варианта:

  • табличная;

    Табличная вёрстка ранее была довольно популярным методом вёрстки. В настоящее время не рекомендуется ее использование в качестве основного каркаса сайта. Однако, в ряде случаев таблицы незаменимы для верстки отдельных элементов.

    Недостатки:
    Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока она целиком не будет загружена. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого.

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

  • блочная.

    Вёрстка при помощи блоков (тег div) и описывающих их таблиц стилей (CSS). Реализует концепцию семантичной вёрстки.

    В настоящее время блочная верстка является основным видом разметки страниц. Однако в исполнении она гораздо сложнее табличной.

    Преимущества:
    Блоки по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их загрузки.

Верстка веб страниц
 

Какова бы ни была верстка по типу и исполнению она должна чётко соответствовать всем критериям качества.
В первую очередь верстка должна быть кросс-браузерная. Кросс-браузерность легко определить открыв сверстанную страницу во всех известных браузерах. Что касается Internet Explorer-а, то и во всех его версиях (как это сделать?). Если верстка качественная, то страница отобразится во всех браузерах одинаково.

Далее очень важна валидность верстки. Валидность верстки — это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке страницы — показателей ее качества. Автоматическая проверка вёрстки на ошибки может быть проведена c помощью онлайн сервиса W3C.


Заказывая web проект или верстку отдельных страниц в WDD-lab Вы получаете HTML макеты страниц со следующими характеристиками:
 
  • По исполнению: блочная (!);
  • По типу: любая (статичная, резиновая, адаптивная);
  • Валидация: в соответствии со стандартами W3C;
  • Кросс-браузерность: полная, Internet Explorer начиная с версии 8;
  • Язык разметки: HTML 5;
  • Таблицы стилей: CSS3;
  • Сценарии: JavaScript (библиотека jQuery);

Заказ на разработку

Рейтинг@Mail.ru