Так, we’re наконец получение к мясу веб разработки передового опыта. Это - то, о чем обычно думают люди, когда они спрашивают о лучших методах в программировании сети или веб дизайне: фактически строение вебсайта  itself.

Веб дизайн лучшие методы охватывают широкий диапазон needs — everything от визуального вида проекта и использования хорошо подобранного повышения к выполнению дополнительных стилей для мобильных устройств, или печать обнаруживается в этой области. Покрытие это в одной статье - возможно, честолюбивый . К счастью, I’ve написанный на частях этого предмета часто в прошлом так I’ll обеспечить много из  links.

It’s важный для лучших методов к ясно отдельному структура Вашего веб дизайна (внутренняя маркировка и определение элементов страницы) от модулей (появление этих элементов.) В последняя статья в этом ряду , Я обсуждал несколько основных элементов проекта: не с точки зрения цвета, расположения, или книгопечатания, а с точки зрения сообщения  information.

Лучшие методы в конечном счете приводят к созданию универсального или доступного проекта, и эта практика зависит от двух ключевых понятий: семантика сети и разделение Вашей структуры от Вашего  design.

Семантика   HTML

Вы можете спорить в течение многих дней (или годы, если Вы бросаете взгляд на результаты поиска для “ HTML semantics” или “web semantics”) на детальной семантике того, как HTML признаки должен использоваться. I’ve написанный на этом несколько раз, непосредственно, включая статьи, обсуждая ценность пустых элементов , старые дебаты между основанный на столе или CSS расположение , среди многие  others.

Семантика очень важны. Однако, когда Вы действительно пристально смотрите на HTML you’ll неизбежно замечают, что it’s не решительно семантическое language — the язык повышения doesn’t даже приближается к описанию всех возможных применений признаков. Много признаков заканчивают тем неизбежно, что служили многократный  functions.

, Таким образом то, чего действительно требует семантика сети, является интерпретацией . HTML спецификация обеспечивает одну версию этой интерпретации, с предложенным использованием и значениями для элементов. I’ve обеспечил моя собственная интерпретация , также. Есть несомненно различия мнения между теми  documents.

Очевидно, Вы можете утверждать очень убедительно, что любая интерпретация, которая не соглашается явно с HTML 4 спецификации, является неправильно . Не стесняться. Ядро лучших методов в семантике сети должно использовать их и принять решения: it’s о размышлении, не определенном  rigor.

Мы должны дифференцироваться, однако, между семантикой HTML и семантикой сети . Семантика HTML является определенной и определенной: значение в применении к элементам HTML . Это - конечный список пунктов, хотя полное определение значения меньше так. Семантика сети, с другой стороны, описывает заявление значения на сети. Это - более глобальное понятие, и относится ко всем аспектам Вашей веб разработки  process.

Семантика сети включает все, имел обыкновение добавлять значение к Вашему участку, обеспечение лучшего понимания кодекса и содержания. Используя описывают класс и удостоверение личности, называя соглашения, описательные названия функции в сервере или стороне клиента scripting, или обеспечение полезных комментариев в пределах Вашего кодекса можно все считать пунктами семантики сети. Лучшие методы означают обеспечивать участок, который является значащим в обоих передняя и задняя часть  end.

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

Разделение Структуры от  Design

Это - такой старый вопрос к арфе на, но важность отделения организации Вашей страницы от способа, которым это смотрит, никогда не имеет действительно  flagged.

На поверхностном уровне может казаться, что любое повышение, которое Вы используете, имеет эффект на появление Вашего участка. В конце концов, there’s ясное визуальное различие между нестилизованным текстом, отмеченным как заголовок и нестилизованным текстом, отмеченным как blockquote! Однако, это визуальное различие только действительно существует потому что описание “unstyled” действительно a  misnomer.

, Если Вы повреждаете stylesheets на вебсайте, you’ll, см. чрезвычайно простое представление участка. Это не точно “unstyled,” however — the проект был просто уменьшен до стилей по умолчанию, примененных браузером. Вообще, каждый браузер имеет очень подобный defaults — but they’re не точно то же самое. Это - одна из причин что it’s общий, чтобы начать stylesheet с ряда сброс  styles.

Если Вы добросовестно удаляете моделирование браузера по умолчанию, это может сделать Ваше собственное развитие легче: небольшие различия между браузерами могут тогда быть  ignored.

Дело в том, что Вы ничего никогда не должны помещать в свое повышение, которое существует просто, чтобы создать различную видимость . Признаки или признаки, которые определяют лица шрифта, цвета, или стили, очевидны problems — but, использование маленького или сильного может также быть проблемами. It’s не, что Вы никогда не должен использовать маленький : но Ваше использование элемента shouldn’t зависит на тексте, предоставляемом меньшим чем окружение  text.

Это не могло бы случиться, после  all.

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

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

Основные принципы Универсального Проекта для  Web

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

Универсальный проект - то, где мы приносим все выше вместе. Внимание к семантике сети и сильному разделению между структурой и проектом дает Вашему вебсайту по крайней мере шанс борьбы того, чтобы быть универсально годным к употреблению. Очевидно, Вы можете все еще ввернуть вещи  up!

Таким же образом, что после стандартов сети doesn’t означают, что you’ve сделал вебсайт, доступные , после лучших методов для общей веб разработки doesn’t означают, что you’ve сделал участок, который будет большим на переносном устройстве или с экраном  reader.

У различных устройств (как люди) есть различное специальное предложение  needs.

Создание вебсайта, который действительно универсален, требует, чтобы Вы знали о специальных потребностях каждого устройства you’re работающий for — but, несколько основных принципов получат Вас 95 % пути  there.

Принципы Универсального Проекта если Центром Универсального Проекта в Северной Каролине государственный университет хорошая директива для того, чтобы думать об универсальном проекте. Хотя эти принципы действительно разработаны, чтобы быть универсальными, в котором они предназначены, чтобы быть примененными хорошо вне царства веб разработки, основные принципы являются звуковыми в любом  context.

, Если Вы ломаете понятие универсального проекта к единственной основной проблеме, могло бы случиться так, что зависимости ломают доступ . Всякий раз, когда Вы настраиваете ситуацию, в которой должны присутствовать определенное техническое или модуль (зависимость от Javascript, требование, чтобы контроль соответствовал описанию, если, или требование, чтобы пользователь видел данное изображение, например,) тогда Вы создаете потенциал для отказа проекта. Избегите создавать что-нибудь, что зависит что-нибудь из Вашего  control.

Знающий, что и isn’t в Вашем контроле (и, что еще более важно какой кажется как it’s в Вашем контроле, но действительно isn’t) важно по отношению к лучшим методам в веб разработке. Признавание, что, хотя Вы можете выбрать цвет текста, Вы ни не можете гарантировать, что посетитель будет способен к наблюдению того цвета , ни , что текст будет фактически быть тот цвет в пункте, что посетитель видит это, является критическим шагом в понимании универсального  design.

Лучшие Методы в Веб разработке: Часть 5 (изданный в пятницу, 5-ого сентября), покрывает проект взаимодействия, ошибочное управление, и долгосрочный участок  administration.

I’ve замеченный много статей, обсуждая важность HTML и XHTML семантика. I’ve замеченные статьи описать, что это означает для документа быть семантическим. Большинство этих статей, однако, don’t обеспечивает серьезный краткий обзор того, чем HTML элементы фактически можно рассмотреть semantic — and что те семантические элементы фактически  mean.

И, еще более подробно, почему это  matters.

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

семантика HTML структура, тогда, ясно важная часть веб дизайна. Посылка смешанных сигналов пользовательскому агенту или пользователю при использовании blockquote просто для it’s родное углубление является злоупотреблением семантикой: даже визуальное воздействие зависит при условии, что пользовательские агенты последовательно отдадут blockquote в зазубренном  manner.

It’s не точно проблема, что you’ve использовал семантический элемент для представляемых средств, потому что, фактически, you’ve сделанные больше чем который: you’ve представил блок текста, который является не указанный материал как будто это  were.

Семантические элементы HTML несите значение независимо от своего знания того значения. Результат состоит в том, что неправильное употребление элемента создает потенциал, чтобы ввести в заблуждение или перепутать  end-user.

самые очевидные примеры вместе используют, те, которые используют элементы с семантическим значением, которые также предлагают внесенное в браузер представление по умолчанию, чтобы использовать тот представляемый стиль. blockquote пример выше весьма обычен; точно так же использование пустого p элементы, чтобы создать дополнительное белое место или элементы заголовка, используемые как сомнительная техника SEO в замене для нормального  paragraphs.

Другие примеры, которые имеют упоминание, включают использование пустых якорных элементов, чтобы вызвать Javascript events — in этот случай, it’s частично, ограничение идентичности якорного элемента, но пустого якорного элемента нужно всегда считать ошибкой, поскольку это приводит к якорю поведения меньше, если Javascript не  available.

Теперь, Вы можете указать на следующий параграф, от HTML 4.01 спецификации , как ответ на мой  opinion:

Авторы могут также создать элемент, который не определяет якорей, то есть, это doesn’t определяет href, название, или id. Ценности для этих признаков могут быть установлены в более позднее время через  scripts.

факт, что это позволено спецификацией, не делает это передовым опытом. Со всем должно уважением к W3C , этому нельзя разрешить. Для ссылки, HTML 5 спецификаций в настоящее время  reads:

, Если у элемента нет никакого href признак, тогда элемент - placeholder для того, куда связь, возможно, иначе была помещена, если бы это было  relevant.

Кроме того, хотя я won’t указываю все, спецификация заявляет, что у якоря, какой делает , есть href , признак должен определить ТУРОВ как ценность того признака. Это, кажется, по существу заявляет, что у якорного элемента не должно быть никакого семантического значения, если href признак не установлен и не действителен. Но я мог быть  wrong.

лучшие средства избежать неправильного употребления элементов должен иметь ясное понимание , когда и , почему данный элемент должен использоваться в веб разработке., Мы надеемся, подробно остановиться на Вашем знании в этом отношении, I’m пытающийся предоставить семантическому справочнику по HTML элементы для Вашей ссылки и богатый  disagreement.

знать, однако, что семантика - в значительной степени дело вкуса. It’s не вопрос вслепую после руководящих принципов установлен группой; it’s вопрос интерпретации тех руководящих принципов к лучшей из Вашей способности и веры. Этот гид отражает, как я думаю, что HTML элементы должны использоваться; и я приветствую Ваш  opinions.

Другой HTML Семантика  Articles

• Руководящие принципы от WCAG 2.0 на использовании HTML для семантического  structure
• Традиционный HTML Семантика (Первая часть трехчастного ряда на семантике сети Джоном  Alsopp)
• HTML: Фонд Сети  – Niels  Matthijs
• Семантический HTML и Поисковая оптимизация  – From Оперное Сообщество разработчиков, Joost de  Valk
• , Кто прочитает Ваш семантический HTML ?  – Jesse  Skinner
• , Когда семантическое повышение разлагается  – Matthew Пол  Thomas
• Semantics – whySemantics – why беспокойство?  – Mel Pedley в  Accessites
• HTML Семантика от Западной Цивилизации,  Pty.
• Изображают Семантический HTML В ВИДЕ ГРАФИКА Структура Вашей Веб-страницы  – Joe  Dolson

статья Wikipedia по Стандартам в программном обеспечении содержит очень хорошее определение стандартов, особенно поскольку мы, возможно, должны рассмотреть их, говоря о сети  standards:

Стандарты (программное обеспечение)

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

В целом, статья в Wikipedia - хороший пример какой isn’t настолько большой о Wikipedia — poorly письменный, неполный: статья - больше коллекция примечаний в подготовке к , сочиняя статья, чем это - реальный docu ment. Тем не менее, вышеупомянутое определение содержит драгоценный камень восприятия относительно точно, чем случается так, что стандарты фактически делают. Стандарты позволяют программному обеспечению межуправлять . Стандарты увеличивают способность различных программ справиться с тем, что питается к  them.

И, существенно, that’s весь они делают. Стандарты, ни в коем случае не эквивалентны “appropriate” или “good.” стандарты Сети позволяют одной программе понять то, что было записано нотами в другой программе. HTML документ может быть невероятно простой и в основном инертной программой, но это - по существу программное обеспечение  program.

Но они don’t фактически диктуют много о том, как тот кодекс фактически используется, или во что элементы входят  program.

Let’s пробуют сравнение с кулинарией. Если you’re кулинария, you’ll следует за рецептом. Рецепт диктует единицы (чашки, чайные ложки, литры, и т.д.). Рецепт также диктует компоненты, иногда с заменами. Однако, некоторые аспекты рецепта фактически симпатичны imprecise — cooking на “medium heat,” “beat до жестких пиков form” или “use одно большое egg” все примеры определенных указаний, которые не обязательно передают информацию, должен был усовершенствовать a  recipe.

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

Если Вы хотите испечь пирог, Вы действительно должны следовать за рецептом (главным образом). Если Вы замените разрыхлителем муку, то Вы не будете заканчивать с особенно аппетитным cake — but you’ll, также имеют проблемы, если Вы ТОЛЬКО следуете за рецептом, и включаете яйца с их  shells.

Молли Холчлэг недавно упомянул эту идею , и I’ve конечно написанный об этом прежде , но it’s ценный пункт и ценность  reviewing.

Кроме того, я думал об этой аналогии с приготовлением на днях, в то время как я делал обед, и только должен был получить его из моего  system…

В октябре 2006, я издал краткая статья о Марселе Salathé’s интересный Явский Апплет, чтобы произвести графы узла структуры веб-страницы . В той статье, мне  stated:

I’d любят быть в состоянии произвести графы, где я выбрал кодирующий образец цвета для специфических признаков. Я мог заставить все несемантические признаки быть яркой краснотой, легко определять условие участка в этом отношении. Я мог сосредоточить свое внимание на действующий против элементов блока, или я мог дифференцироваться между различными уровнями  headings.

Позже, я получил комментарии, что почта от посетителя, который думал моя идея изменить это, была пользой one — so, в конце концов, I’ve найденный время выполнение  it.

Семантический HTML  Graphs

И here’s пример  output:

граф, изображенный здесь, для Metrolinx , Больший Транзит Торонто Authority — and Джо Clark’s подведенная модернизация года . Это делает для довольно интересного социологического исследования. Я знаю, что продукция является маленькой; но терпите  me.

В этом графе, Вы можете ясно видеть длинные последовательности оранжевых узлов, которые указывают вложенный стол элементы. Вы можете также видеть существенные группы ярких красных узлов, указывая осуждаемые признаки. В целом, участок - лабиринт прежде всего длинных цветов длины волны. Вообще, в системе цветов I’ve настроенные, большие удельные веса длинных цветов длины волны (красный, оранжевый, розовый) показывает зависимость от стола s для расположения и представляемых элементов. Короткий цвет длины волны (синий, зеленый) указывает более семантически значащий  structures.

я производил много маленьких изменений в подлиннике, который я думаю добавленная стоимость. Во-первых, я добавил способность изменить узел корня you’re картография. Я don’t знаю, что это - невероятно ценный, но это действительно обеспечивает интересную дополнительную информацию. Переключение узла ограничено; это только проверит первый узел, определенный того специфического содержания  type.

второе изменение должен обеспечить множество систем цветов. Неплатеж довольно сложен, хотя я разграничивал прежде, чем попытаться обеспечить тонко различный оттенок для каждого отдельного элемента. Я надеюсь, что цвета, обеспеченные по крайней мере, дают Вам общее представление о какой you’re смотрение, как бы то ни было. Дополнительные системы цветов (два, в настоящее время) намного более просты: тот, который просто дифференцируется между позволенными и осуждаемыми элементами и другим, который выдвигает на первый план все действующие элементы ( , dfn , маисовая крупа ,  etc.).

Теперь, I’ve никогда запрограммированный в Яве прежде, и хотя изменения я сделал к Sala’s, исходный текст не является относительно небольшим, it’s очень вероятный, что есть ошибки; и I’ve конечно не управляемый, чтобы удалить любые ошибки из оригинала  code.

последняя вещь я должен упомянуть, касается доступности этого апплета. It’s только не доступный . Фактически, я знаю немного о том, как сделать Яву доступной во-первых; но даже в этом случае, все понятие этого апплета очень зависит от цвета. Не может быть никакого вопроса, что, если Вы являетесь страдающими дальтонизмом или иначе вид ослаблял, это будет проблемой. Дополнительно, нет абсолютно никакого подарка средств ни для какого читателя экрана, чтобы понять вход. Я действительно надеюсь изменить это позднее, и создать основанную на тексте продукцию, которая предоставит отдельному, доступному интерфейсу информацию, но что только hasn’t случился  yet.

Также стоящий взгляд  at:

• Графы Ратификации  – a автономное Явское заявление, также основанное на HTML подлинник графа, на который страницы пауков и проверяют их  validity.
• Web2DNA  – same основная идея, различная  implementation.

оправдание, что вебсайт доступен потому что это “follows standards” содержит серьезную ошибку. Определенно, предположение, что стандарты поддержка  accessibility.

Один корень текущей стандартной практики доступности соответствие к HTML или XHTML нормы, установленные Консорциумом Всемирной Паутины ( W3C ). Это - прекрасная практика, и конечно должно быть поддержано. Используя правильный синтаксис и после стандартизированного метода общающейся информации всегда твердый передовой опыт. Однако, это не должно абсолютно быть взято, чтобы означать, что следование за этими стандартами является тем же самым как применением принципов сети  accessibility.

стандарты Сети только обеспечивают доступность до степени, которую они были разработаны, чтобы сделать so — and, руководящий принцип позади развития стандартов (исключая определенные для доступности стандарты, конечно) не должен был вообще поддержать доступность. Стандарты сети были разработаны просто, чтобы установить набор , исправить метод использования основного code — whether представляемый ( CSS ), структурный ( XHTML ) или поведенческий  (ECMAscript.)

Во многих (большинство) случаи, стандарты сети ни в коем случае не требуют лучше всего practices — they, просто требуют соответствия. Возьмите HTML , например. Стандарты сети разрешили бы использование стола элементы для расположения, потому что они не определяют семантическое использование для стола элемент. Стандарты сети также разрешают, чтобы множество представляемых элементов, таких как шрифт , ударило , или u . Все это зависит от того, к какому стандарту Вы выбрали  follow.

HTML5, последний раз, рассматривает такие противоположные шаги как удаление требования, чтобы высокий звук приписал требоваться для изображений. Это гарантирует существование действительного вебсайта HTML5, который может радикально подвести основные руководящие принципы доступности. С другой стороны, это может уменьшать вероятность что некоторые так называемые “accessible” вебсайты будут замусорены высокий звук = "это - распорная деталь  graphic".

это обязательно означает, что стандарт является неправильным или правильным? Нет, не как таковой. Различные стандарты поддерживают различный needs — it, важно, чтобы держать отличным цель стандарта. Соответствуя HTML только что: Приспосабливание HTML . Это ничего не означает  more.

Тем не менее, как защитник доступности, я чувствую, что it’s важный, чтобы поддержать доступность выходит в пределах развития новых стандартов. Беря высокий звук проблема признака в HTML5, например, нехватка любой воспринятой выгоды для не требование признака предлагает мне, чтобы лучший путь должен был бы продолжить требовать этого. Есть многочисленные примеры важных аспектов доступности в HTML5 которые еще не являются  included.

Кажется, есть сильный элемент показного суждения: элементы, которые не поддержаны текущими пользователями-агентами, как полагают, не необходимы. Это кажется смешным ожиданием: в конце концов, если неподдержанные элементы aren’t необходимый, чем, почему развивают новую спецификацию вообще? То, что we’ve добралось, должно работать только  fine!

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

Никто (или почти никто) не использует q действующий элемент. Это означает, что от элемента isn’t ценный, и нужно отказаться? Нет. Это означает, что Internet Explorer должен добавить соответствующую поддержку этого. То же самое верно для проблем доступности. Стандарты должны поддержать их к своим лучшим способностям: если элемент или признак могли бы гипотетически добавить к доступности участка, то факт, что это немного используется или плохо поддержано, должен быть полностью несоответствующим. Поддержка должна следовать за стандартами; не другой путь  around.

В корне вещей, моя позиция - то, что я не желаю поддержать стандарт, который определенно исключает особенности, которые необходимы в заказе, соответственно обеспечивают доступность передового опыта. HTML5 - все еще длинный путь от того, чтобы быть сделанным; и еще далее от того, чтобы быть осуществленным (если это когда-либо,), но удаление таких признаков как заголовок от стола повышение, включение определенных несемантических элементов, таких как b 1 , и “ режим полного соответствия exemption” на шрифте элемент ударяет меня как решения ужасно в потребности  reconsideration.

1. Фактически, я могу принять включение один действующий несемантический элемент (, охватывают ), и один брусковый уровень несемантический элемент ( отделение ). Я чувствую there’s вполне достаточное оправдание, чтобы позволить элементы, которые определенно не определены на том основании, что не все ситуации могут возможно быть покрыты спецификациями языка. Я не вижу никакое оправдание, однако, для включения дополнительных явно несемантический  elements.

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

хорошо структурированный XML документ имеет абсолютно ясную систему маркировки для данных, встроенных в структуру. Если Вы берете какой-нибудь RSS подача, например, элементы, которые идентифицируют <title> , <link> или <managingEditor> can’t с готовностью быть  mistaken.

хорошо структурированный, семантически заметный XHTML или HTML документ doesn’t предлагают почти ту же самую степень данных particulation — the, высокоуровневые элементы данных могут иногда быть довольно ясными, как имеет место с <address> или <cite> элементы, но другие потенциально ценные элементы заканчивают тем, что обеспечили относительно нейтральную ценность: <h2> или   <div> .

Читающий больше: Мысли о Довольной Маркировке и  Data

Развивающий столы и CSS , модель сетки выполнения расположения - часть CSS уровень 3, работающий проект. спецификации для модуля расположения сетки 5 сентября было выпущено быть обсужденным,  2007.

Этот модуль описывает интеграцию основанного на сетке расположения (подобный сеткам, традиционно используемым в книгах и газетах) с CSS калибровка и расположение. Документ  Abstract

Семантически, система расположения сетки - хорошее development — it, система явно и исключительно разработанный для расположения, у которого есть не требуемый HTML компонент. Превосходный компаньон отделению  element.

Читающий больше: CSS3: На Расположении Сетки и  Layout