Кроссбраузерная верстка в современных условиях — общее понимание необходимого принципа

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

Преимущества устойчивой композиции

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

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

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

В чём принципиальное отличие компоновки от верстки?

Композиционная подготовка и верстка газеты - два взаимосвязанных процесса со схожими алгоритмами действий. Однако задачи, которые стоят перед дизайнерами и верстальщиками, нельзя назвать однотипными - отличия лежат в плоскости предметного освоения (оптимизации) уже отредактированных материалов. Приоритетным направлением компоновки является детальная проработка структуры контента: очерёдность полос, конфигурация публикаций, «встраиваемость» изображений и тому подобное. Цель же грамотной верстки - сделать так, чтобы расположение материала на страницах не только не доставляло трудностей читателю, но и самым естественным образом акцентировало его внимание на наиболее значимых информационных посылах.

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

Верстка газеты: нормы и закономерности

Главный ориентир для выбора типовой структуры верстки - содержание номера. Все приёмы и опции технического оформления в той или иной степени диктуются контентом. Термин «материал для первой полосы» как нельзя лучше отображает суть вышеизложенного: им оперируют тогда, когда хотят подчеркнуть значимость статьи (то есть именно информационная нагрузка такой заметки играет роль «трафарета» для всего номера).

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

И самое важное: специфика верстки во многом предопределяется историей периодики, этапами её развития, традициями рабочего коллектива, национальными предпочтениями и прочими факторами, которые не имеют прямого отношения к

Формат А3: компьютерное макетирование

Верстальщик - специалист, оперирующий готовым текстом и уже подобранной графикой. В его профессиональные обязанности входит размещение материала на основе утверждённых шаблонов. На заре «типографической эволюции» труд профильного работника был сложен, а временные затраты на выполнение поставленных задач - колоссальны. Современное компьютерное макетирование - совсем другое дело…

Используемые сегодня типографические форматы - это производные эталона DIN A0. Наиболее востребованными в печатном деле являются А5, А4 и А3.

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

Краткий обзор программного обеспечения: PageMaker и QuarkXPress

Допечатная подготовка номера на ПК подразумевает инсталляцию некоего программного продукта. Изначально предложений, достойных внимания профессиональных верстальщиков, было немного. По сути, таковых существовало только два - PageMaker от всемирно известной компании Adobe (реинкарнация одноимённой сборки от Aldus) и функциональный аналог под названием QuarkXPress от скромной организации Quark Ink.

Долгий отрезок времени разработчики обеих программ шли, что называется, нога в ногу, поэтому компьютерная верстка газет - имеется в виду её итоговый результат - практически не зависела от реализуемого пакетного сценария. Выход обновлений нарушил установившееся равновесие, но не определил лидера. Так, QuarkXPress продемонстрировал феноменальную архитектуру вспомогательных модулей (расширений), но не сумел избавиться от неуклюжести в сфере табличного редактирования. А PageMaker сделал ставку на универсализацию, но потерял несколько позиций в рейтинге функциональности (особенно пострадал арсенал спецэффектов).

В помощь верстальщикам: знакомство с Adobe InDesign

Проигрывать в сфере создания продуктов для программной верстки компания Adobe не собиралась. Появление принципиально нового пакета было лишь вопросом времени…

Приложение InDesign - куда более серьёзный конкурент для QuarkXPress, нежели отживший своё PageMaker. Точнее, вопрос соперничества больше не стоит - всё сводится к тому, скольких пользователей утилита «украдёт» у Quark.

Итак, чем же верстка газеты в InDesign отличается от ранее описанных сценариев?

Интригует полностью переработанный который «заточен» под рядового пользователя. Тут, дабы насолить конкурентам, присутствует даже опция активации горячих клавиш, используемых по умолчанию в аналогичных программах - верстальщикам, трудившимся на Quark, не придётся перестраиваться! Поражает и функциональность. В этом плане InDesign - жизнеспособный гибрид, позволяющий решать сложные задачи предпечатного характера простым нажатием 5 - 6 комбинаций клавиш. И, наконец, верстка в InDesign оправдана с точки зрения естественного развития печатных изданий: выпускаемые обновления к пакету максимально упрощают процесс компоновки материала, уменьшают время подготовки публикаций, предлагают варианты готовых шаблонов и макетов в зависимости от стилистической привязки номера…

Грамотная верстка газет: три правила первостепенной важности

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

Итак, как же выглядит классическая верстка газеты?

Пример правильного алгоритма действий следующий:

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

Верстка журналов: некоторые нюансы

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

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

Виды верстки: основы классификации

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

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

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

Тип верстки и целевая аудитория. Существует ли связь?

В профессиональных кругах хорошо известен тот факт, что верстка газет - это не просто поиск оптимальных форм для содержания. Итоговые композиции в первую очередь обязаны отвечать запросам целевых аудиторий. Если взглянуть на печатные издания, ориентированные на молодёжь, то можно обнаружить примеры живого и яркого оформления, реализованные за счёт использования «ломаной» верстки. Брусковая же схема доминирует в газетах, читатели которых - преимущественно люди зрелого возраста. А вот сугубо информационные издания отличаются оригинальной (как правило, усложнённой) формой подачи материала: множество колонок разной геометрии, плюс «динамический» шрифт.

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

1. Вёрстка сайтов и Windows 8

“Никто не в курсе, что за беда с Ютюбом? Почему он забился в левый угол? Нафига столько свободного места на главной?"

После некого мозгового штурма, мне пришло в голову, что скорее всего на это как-то повлиял новый интерфейс новой версии операционной системы Windows. Думаю, что все таки я прав, т.к. самая функциональная панель Windows 8 всплывает с правой стороны и сразу съедает 378 px от области просмотра окна, соответственно, чтобы на экране было максимальное количество полезной информации, компания Google стала смещать полезную верстку влево. Это хорошо видно при разрешение экрана от 1388px по длинной стороне

Как можно увидеть, при смещении верстки влево, функциональной панелью не перекрывается главное содержимое (видео в стандартном представлении.

2. Теги HTML5

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

Например у на есть такой код:

LoremIpsum

Во всех современных браузерах (IE9/10, Chrome, Firefox, Opera, Safari5) данный код отображается корректно:

Но в нашем «любимом» Internet Explorer с кодом уже возникаю проблемы, и стили перестают срабатывать.

После разных способов задать стили в у меня получилось только привычным способом - это элемент div, которому задается класс. Поэтому я предлагаю взять за некоторое правило (возможно уже кто-то взял, но для себя я только недавно обнаружил этот момент), что в случае необходимости верстки для IE8 и младше, стоит в брать div и назначать ему имя класса, в соответствии с тегом в спецификации HTML5:

LoremIpsum

Боковая панель.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Suspendisse potenti. Aenean odio quam, egestas rhoncus posuere at, imperdiet vel sem. Curabitur in nisl neque, ac porttitor arcu. Sed sed est lectus, in egestas nisi. Morbi turpis urna, feugiat fermentum condimentum quis, congue non quam. Vivamus auctor ultricies tincidunt. Pellentesque eget nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante justo. Sed ornare diam sit amet risus convallis mattis. Fusce a augue sit amet felis vehicula iaculis. Nunc lectus lectus, pretium id pulvinar sit amet, pulvinar a metus. Nam ultrices lobortis erat, et mollis odio tristique vel. Suspendisse nec massa dui, nec tempus sapien.

Donec congue lorem id orci congue vel interdum orci pellentesque. Vivamus nec orci vitae diam scelerisque faucibus id dictum felis. Vivamus dictum rhoncus ipsum, vel tempor sapien aliquet vel. Vestibulum lobortis sodales leo, ut lobortis ligula tristique nec. Mauris vitae dolor leo, vehicula semper ligula. Nam sed orci leo. Sed auctor iaculis mauris non pretium. Vestibulum eros tortor, consectetur id varius et, porta in magna.

Fusce vel turpis turpis. Cras dapibus neque et quam cursus euismod. Donec justo felis, scelerisque quis ornare nec, aliquam ut mi. In est augue, vestibulum ac volutpat id, laoreet vitae diam. Proin non libero ac libero ultrices tristique ac in neque. Nam nec lacus id erat volutpat iaculis. Nam dapibus fringilla adipiscing.

Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus interdum lorem a sem rutrum vulputate. In est felis, consequat ut malesuada sed, volutpat quis purus. Sed non urna eget metus ornare condimentum ac quis diam. Quisque eleifend dapibus ligula, at mollis justo tristique tempus. Morbi viverra vehicula nisi, vel aliquam lacus malesuada eu. Sed pulvinar eros et quam sodales ullamcorper. Donec volutpat magna vel massa lobortis scelerisque.

Nulla mattis pharetra elit, eu dapibus orci fringilla tempus. Donec vel sodales elit. Ut non justo at purus facilisis interdum. Fusce porttitor feugiat lacinia. Aliquam a tortor metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc malesuada auctor nisl non vehicula. Nulla nec eros eget leo vestibulum rhoncus. Praesent rhoncus sapien eget turpis mollis et scelerisque urna consectetur. Fusce ullamcorper tempus vehicula. Integer mauris mauris, eleifend quis ultrices nec, hendrerit vel urna. Suspendisse malesuada magna non lacus imperdiet egestas. Integer condimentum libero at diam tincidunt luctus. Duis eget erat in sem dictum tempus quis eget nisl. Donec nisl lacus, lobortis non facilisis a, ultricies in quam.

Копирайт@12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Вывод:

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

P.S. Прошу сильно не бить, первая статья на хабре.

Теги: Верстка, HTML, веб-дизайн

Создание современных сайтов подразумевает использование последних IT разработок при верстке интернет ресурса. Для этого применяются самые современные технологии в области HTML и CSS верстки. Главное – это соблюдать кроссбраузерность и следить за корректным отображением в старых браузерах.

Аббревиатура CSS (Cascading Style Sheets) переводиться как - каскадные таблицы стилей.

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

С помощью CSS создается внешний вид документа, в то время как HTML – описывает содержимое.
По мере развития CSS3, значительно увеличиваются и возможности верстки, а это значит, что с каждым днем на «чистом» CSS можно создавать больше функционала.

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

Верстка макета сайта: почему CSS предпочтительнее чем JavaScript?

При создании верстки макета с помощью CSS можно решить большое количество задач, вот лишь малая их часть:

• интерактивные галереи;
• несколько уровневые выскакивающие меню;
• создание трёхмерных диаграмм;
• анимация диаграмм.

Но для чего же необходимо использовать CSS при создании верстки макета, если JS сможет сделать тоже самое, причем при наличии множества уже созданных наработок?

Вот несколько аргументов в пользу CSS:

• СSS эффекты почти всегда работают быстрее, так как за их работу отвечают только лишь движки браузеров. Это в большей степени видно на мобильных устройствах.
• Ненужно знать языка JS и никаких других языков программирования. Работать с СSS сможет обычный рядовой пользователь.
• Сделать критические ошибки в CSS намного сложнее, чем в JS.
• Не зная языков программирования и не имея специализированных библиотек, уже сегодня в CSS 3.0 можно осуществлять непростые и интересные задачи.
• Созданный таким образом сайт будет иметь адаптивную разметку. А ее наличие все чаще необходимо заказчикам.

Если вы еще не решили где заказать сайт, познакомьтесь со следующими статьями:

• Правила верстки: адаптивная, блочная, css верстка
• Качественная верстка сайта – гарантии от веб студии «АВАНЗЕТ»
• Разработка сайтов – особенности дизайна и принципы верстки
• Создание бизнес сайтов - принципы и особенности дизайна и верстки
• Создание эффективного сайта. Удобная навигация – важная часть юзабилити

Верстка страниц с использованием CSS фреймворков

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

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

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

Часто возникает вопрос, что такое верстка? Простым языком, верстка - это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:

• Книжная
• Газетно-журнальная
• Верстка веб-документов

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

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки

При верстке веб-страниц можно выделить два основных метода:

• Табличная верстка
• Блочная верстка

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

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

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов