Блог студии 77

Верстка сайта

27 ноября 2011

Создание и разработка качественного сайта – это сложный и многоэтапный процесс. Одним из неотъемлемых его этапов является верстка. Верстальщик (технолог) получает техническое задание и графическое изображение дизайн-макета будущего сайта. Используя html-код, а затем стилизуя его с помощью каскадных таблиц стилей (CSS) и при необходимости добавляя JavaScript, он превращает листы дизайн-макета в веб-страницы, которые в дальнейшем будут отображаться в различных интернет-браузерах.

Сверстанные страницы должны будут идентично отображаться в различных версиях браузеров различных производителей, должны открываться на разных типах устройств и хорошо смотреться при разном разрешении экранов. Ошибки и несогласованность обработки html-кода различными браузерами – это постоянная головная боль для разработчиков. Если, например, в Safari сайт отображается правильно, вполне вероятно, что в других браузерах могут обнаружиться проблемы:

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

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

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

Принципы нашей работы при верстке сайтов:

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

Особенности верстки в нашей веб-студии:

  • блочная (div-ная) верстка. Мы давно отказались от использования таблиц для стилизации сайта при верстке, тем самым отделив стили от структуры сайта (что есть правильно), не смешивая все в одном коде.
  • используемые стандарты: XHTML 1.1, CSS 2.1, JavaScript (Jquery). CSS3 – при необходимости;
  • кроссбраузерность. Сайт должен хорошо отображаться во всех современных браузерах. Internet Explorer 6, которому уже исполнилось 10 лет, в нашем понимании не является современным браузером;
  • семантическая (смысловая) разметка, т.е. соответствие типа элементов их назначению. Параграфы, заголовки, списки и цитаты используются, не противореча своему назначению в спецификациях (X)HTML. Это позволяет вашим страницам лучше индексироваться поисковыми системами, а также позволяет увидеть логичную созданную разметку даже при отключении CSS.
  • добавление дополнительных тегов только тогда, когда в этом есть необходимость. Если без нового тега и блока можно обойтись, то лучше так и сделать. Это позволяет держать код чистым, понятным и не перегруженным. Наши технологи отлично понимают, что с созданным ими кодом придется работать программистам, и в меру возможностей стараются облегчить им задачу;
  • оптимизация графики. При подготовке для сайта графических элементов используются наиболее подходящие форматы и степени их сжатия. Также применяется дополнительная оптимизация размера картинок для уменьшения нагрузки на сервер, что приводит к увеличению скорости доступа к сайту.
Верстка сайта

Другие статьи автора: