Создание каркаса сайта

О рекламе на сайте

Достоинством для клиента и услугой для читателя будет контекстно-зависимая реклама на сайте. Другими словами, если контент сайта посвящен цветам, то реклама для этого сайта может включать услуги ландшафтного дизайна, выездное обслуживание (в дополнение к цветочным аранжировкам), и т.д. Поэтому для сайта, который предоставляет программные материалы с открытым кодом, можно поискать рекламу, которая соответствует программному обеспечению с открытым кодом. Google Adsense (https://www.google.com/adsense/), как один из источников, может помочь в этом отношении, так как реклама является связанной с контентом. Использование такого типа рекламы является хорошей идеей, пока трафик не вырастет в достаточной степени, чтобы привлечь на сайт других рекламодателей. Однако всегда думайте о последствиях для SEO, прежде чем принимать рекламные объявления, так как некоторая реклама может отрицательно влиять на позицию клиента на страницах поиска. Некоторыми хорошими ресурсами по SEO являются следующие:

• Интеллектуальная структура сайта для лучшего SEO! (http://dev.opera.com/articles/view/intelligent-site-structure-for-better-se/), Джуст де Валк.
• Семантический HTML и оптимизация поисковых систем (http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/), Джуст де Валк.
• Как присоединенные программы могут влиять на ранжирование поиска (http://www.clickz.com/showPage.html?page=3497826), Фредрик Маркини.
• Новый отчет исследует, как ранг PPC влияет на трафик (http://www.searchengineguide.com/jennifer-laycock/new-report-explores-how-ppc-rank-affects-traffic.php), Дженифер Лейкок.

Проверка компоновки с помощью валидаторов и с клиентом

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

Следующий шаг состоит в кодировании компоновки и последующей валидации кода. Для подтверждения того, что использованный для компоновки код HTML и CSS не содержит ошибок, я применяю службы W3C Markup Validation Service (http://validator.w3.org/) и W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/). В эти службы валидации можно загрузить файлы прямо со своего компьютера, поэтому нет необходимости загружать их на сайт клиента для тестирования. Этот тест позволяет дизайнеру и/или программисту найти все ошибки во внешнем интерфейсе, которые можно разрешить, прежде чем сайт станет наполняться кодом от изображений, рекламы, и других объектов, добавляемых на страницу.

Доступность является еще одной большой проблемой — проверка, что сайт могут использовать люди с физическими недостатками, такими как слепота или моторная недостаточность. Это не такой простой процесс проверки, как в случае валидации CSS и HTML. Существуют средства проверки, такие как TAWDIS (http://www.tawdis.net/taw3/cms/en), но в идеале это нужно тестировать с реальными пользователями, и выполнить качественный анализ своих сайтов на доступность — механизированное средство проверки не может окончательно сказать, будет ли сайт доступен или нет, хотя оно может дать некоторые указания, что правильно, а что неправильно. Иногда могут также возникать ошибочные решения. В дальнейшем в курсе будет представлена более полная информация о доступности.

Необходимо также протестировать компоновку на различных доступных браузерах, чтобы знать, что Web-сайт сможет просматривать максимально возможное число пользователей Web. Это можно сделать, имея доступными системы Mac, Windows, Linux и Mobile, все с различными установленными браузерами, или использовать эмуляторы, такие как VMWare Fusion (http://en.wikipedia.org/wiki/VMware_Fusion) для моделирования различных систем на одном компьютере, но это достаточно кропотливо и длительно. Другая возможность состоит в использовании специальных служб, таких как BrowserCam (http://www.browsercam.com/Default2.aspx), которые позволяют увидеть, как будет выглядеть страница на различных браузерах и системах (включая большинство старых браузеров). Они предлагают 24-часовой бесплатный пробный период, чтобы можно было убедиться, что эта служба вам подходит. Плата за использование после пробного периода себя оправдывает, особенно, если вы проектируете большое число сайтов и тестируете на большом числе различных браузеров.

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

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

Заключение

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

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

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

Дополнительное чтение

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

• Памятка начинающего дизайнера (http://www.diveindesigns.com/home/dd1/page_17)
• Памятка по юзабилити Web от Net Mechanic (http://www.netmechanic.com/news/vol7/design_no4.htm)
• Памятка дизайнера Max Design (http://maxdesign.com.au/presentation/checklist.htm)
• Памятка по юзабилити Usability First (http://www.usabilityfirst.com/websites/index.txl)
• Памятка David Skyrme and Associates (http://www.skyrme.com/tools/webplan.htm)
• Памятка SCORE по дизайну Web-сайта (http://www.score.org/eb_42.html)

Контрольные вопросы

• Что необходимо иметь под рукой, прежде чем начинать разрабатывать дизайн Web-страницы?
• Почему необходимо создать список всех объектов, которые планируется использовать на странице Web?
• Почему важно тщательно выбирать провайдера Web-хостинга?
• Дизайнер может выполнять многие функции, но что нужно сделать, если клиент просит создать логотип, а вы не имеете никакого представления о том, что надо делать?
• Назовите две важные причины для исследования Web-сайтов конкурентов компании.
• Что такое CMYK, и что означают эти буквы?
• Назовите, по крайней мере, два способа преобразования CMYK в соответствующие цвета RGB.
• Назовите одну из причин, почему дизайнер должен использовать текст для навигации, по крайней мере, в одной области компоновки Web-страницы?
• Почему дизайнер должен придерживаться согласованной компоновки сайта Web на всех страницах сайта?
• Назовите одну из причин, почему код сайта должен пройти валидацию на ранних этапах дизайна.

Об авторе

Линда Гоин получила степень бакалавра (BFA) в области визуальной коммуникации со специализацией в бизнесе и маркетинге, и степень MA по Американской истории со специализацией по Реформации. Хотя последняя степень кажется не соответствующей первому полученному образованию, Линда использует свой 25-летний опыт дизайна на сайтах, посвященных археологическим раскопкам и изучению материальной культуры.

Похвальные отзывы о ее работе включают пятнадцать первых премий Colorado Press Association, многочисленные премии по изящным искусствам и графическому дизайну, и интервью о разработке контента в The Wall St. Journal, Chicago Tribune, Psychology Today, и L.A. Times. Линда является автором нескольких е-книг по Web- дизайну, доступности и — как побочная линия — пишет также персональные финансовые статьи и пишет для некоторых SEO pros.

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.