Комплексный маркетинг сайта: продвижение сайта, контекстная реклама, соц. сети, аналитика. От 15.000 рублей в месяц.
Главная » Услуги » Создание и продвижение сайтов » Создание сайта » Вёрстка шаблона

Вёрстка шаблона сайта

Верстка сайта является одним из этапов сложного процесса разработки веб-ресурса, суть которого заключается в формировании страниц сайта согласно готовому макету. Инами словами: вёрстка сайта - это нарезка PSD-макета. Профессиональная верстка сайта выполняется с учетом многих тонкостей и особенностей, поэтому рациональнее заказать услугу у специалистов-верстальщиков Mon-key.ru, чем заказывать у фрилансеров. Конечно, если вам требуется простая вёрстка, то с ней справится любой фрилансер-верстальщик. А если сложная (кроссбраузерная + с эффектами + под IE6 + под несколько разрешений экрана + "натягивание" на CMS), то здесь нужен уже целый коллектив специалистов.

Грамотная верстка сайта от Mon-key.ru – это:

  • Соответствие дизайну. Мы сохраняем все элементные и цветовые нюансы.
  • Учет кроссбраузерности. Кроссбраузерная вёрстка стоит дороже, но она обеспечивает одинаковый внешний вид сайта во всех браузерах:Opera, Mozilla Firefox, Safari, Google Chrome, Yandex.Браузер, а также в "камне преткновения" - Internet Explorer 6. То, что IE6 не может отрендерить своими силами, мы программируем с помощью JavaScript, например - тени.
  • Чистый код. То, что можно вынести в классы (.class) мы выносим в классы. То, что желательно вынести в #id, мы заносим в #id. Также, мы стараемся избегать избыточной вложенности элементов.
  • Эффективная блочная верстка плюс использование таблиц только там, где это действительно нужно.
  • Различная вёрстка под различные разрешения экранов. Мобильная версия, версия для планшетов; для стандартных, для HD и Retina дисплеев.

Вёрстка статичная (статическая) и вёрстка резиновая

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

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

В таком случае, чтобы сайт смотрелся однаково хорошо на большинстве мониторов, его ширина выбирается в пределах 800-1024 пикселей. Такой размер позволяет избежать появления горизонтальной неудобной полосы прокрутки внизу страницы

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

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

Кроссбраузерность и вёрстка сайта

Самыми популярными браузерами сегодня являются Mozilla Firefox, Internet Explorer, Google Chrome, Opera. Есть и другие, плюс ко всему у каждого из них существует по несколько версий, поэтому одинаковые страницы могут отображаться по-разному.

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

Компактный код

Код html при разметке страниц должен быть хорошо отформатирован, содержать логические блоки (и местами содержать комментарии). Чтобы «вычистить» код от лишних ненужных тэгов наши специалисты используют каскадные таблицы стилейCSS. В итоге сайт имеет меньший вес в байтах, а значит, быстрее загружается у пользователя и выше ранжируется поисковыми системами.

Приводим пример. Стандартный шаблон для различных CMS (таких как Joomla, Wordpress, DLE, Drupal):

  • index.html — У нас около 2-8кб, у "бесплатных шаблонов" 5-45кб.
  • style.css — У нас около 0.8-2кб для небольших сайтов 20-45кб для порталов, у "бесплатных шаблонов" доходит до 120кб.

Способы верстки сайта. Итог.

Верстка сайта может осуществляться с помощью таблиц (table,th,tr,td) или блоков (слоев, div).

  • Табличная верстка подразумевает использование большого количества вложенных элементов. Таблицы изначально служат для ввода данных и для построения страниц они не предназначены, поэтому данный подход «тормозит» загрузку страниц и может привести к ошибкам в коде.
  • Специалисты Mon-key.ru работают с более правильной и удобной системой – верстают сайт с помощью слоев. В итоге у нас получается компактный код, обеспечивающий быструю загрузку страниц Вашего сайта, а также их корректное отображение.

Профессиональная верстка

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

Звоните +7 (812) 914-41-56, ответим на вопросы на тему работы с MODX Evolution или комплексного маркетинга.

Заказать эту или любую другую услугу вы можете на странице контактов.