Создание сайта — вёрстка, подсказки

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

При этом: для символов английского языка используется 1 байт на 1 символ, для символов других кодировок – обычно 2 — 4 байта. Согласно Wikipedia, в версии 6.0 (стандарт 2010 года) в UTF-8 используется сто десять тысяч кодовых позиций (109 242 графических и 273 прочих символов).

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

• Apache: в .htaccess указание кодировки web сервера для скриптов по умолчанию и кодировки страницы выглядит так:
  • Adddefaultcharset utf-8 – кодировка страницы
  • php_value default_charset utf-8 – кодировка страниц по умолчанию

  Примечание: если сервер разрешает устанавливать переменные через php_value, php_admin_value (работает как mod_php) , при возникновении ошибки 500 советую удалить последнюю директиву и попробовать в начале исполнения скрипта установить переменную через: ini_set (для php)

• Для сервера под управлением nginx: Charset, source_charset в секции location:Пример: charset utf-8; source_charset utf-8;Примечание: в некоторых тегах (например, javascript) есть дополнительное указание через атрибут charset.Ещё один довод в пользу utf-8 связан с кодировками баз данных. Например, mysql имеет несколько видов кодировок, начиная с версии 4.0. И большинство database mysql серверов по умолчанию настроены именно на кодировки в utf8_general_ci. Тем самым Вы сокращаете работу программистов, и избегаете вопросов с перекодировкой от базы данных к сайту «на лету». О кодировках в mysql мы поговорим чуть позже и в другой статье.

• Наряду с validator ом проверяйте, как выглядит Ваш сайт в различных браузерах. Ведь обозреватели интернета довольно фривольно относятся к требованиям кросс браузерности и имеют ряд своих собственных фишек. Минимальный набор для теста:
  1. Internet Explorer 7.0 – 8.0 – 9.0,
  2. Mozilla Firefox 3.6 +,
  3. Opera 9 – 10 – 11,
  4. Google Chrome,
  5. Safari.

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

  Например:browsershots

• Каждому важному блоку присваивайте id, общие же свойства блоков выносите в классы. Связано это с тем, что обращение через id элемента в javascript будет гораздо быстрее и создавать меньшую нагрузку на стороне клиента.
• Ставим заплатку с просьбой обновиться на IE 6.0, всё-таки этим браузером, как показывает статистика, всё ещё пользуется от 2.5 до 10 процентов посетителей. Не смотря на его глючность и десятилетнюю историю. Или же верстайте полноценный вид сайта под IE 6.0 (это дольше, но более предпочтительный способ)
• Используйте сброс стилей. Чтобы добиться большей кросс браузерностиПодробнее вы можете почитать о сбросе стилей на английском (множество примеров): здесь или на русском здесьПримечание: Не используйте в сбросах стилей:

        :focus {
        	outline: 0;
        }
  

  Вызывает очень неожиданные глюки в опере 10.

• Для блоков, в которых будет располагаться основная информация, применяйте css overflow: hidden. Чтобы в случае использовании неразрывной строки или же большого изображения не нарушать дизайн сайта.
• Тестируйте макет сайта на маленьких разрешениях экрана. Помните, большой процент пользователей смотрит Ваш сайт в разрешении в 1024 пикселя.Примечание: при этом эффективная длина макета — 990 пикселей.По крайней мере, если Ваш сайт рассчитан на подачу основной информации на больших разрешениях, находите компромисс в виде представления сайта в разрешении 990 пикселей в длину.
• Комментируйте названия блоков. Где начинается, где кончается логический блок. Вы облегчаете работу себе и программистам.
• Верстайте с отступами на каждый уровень (например: 1 таб отступ), это поможет Вам легко проследить открывающиеся/закрывающиеся теги.А как правильно написать Title мы напишим вам в следующей статье.