Знакомство с HTML5, CSS3 и адаптивным веб-дизайном

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

Однако сейчас получили распространение смартфоны. iPhone от компании Apple стал первым смартфоном, который обеспечил по-настоящему удобный просмотр веб-страниц, и многие другие последовали его примеру. В отличие от вчерашних устройств с маленькими сенсорными экранами, требовавшими от пользователей при работе с ними проворства чемпиона мира по игре в блошки, современные телефоны позволяют комфортно путешествовать по Интернету. Кроме того, потребители все чаще используют дома устройства с небольшими дисплеями (например, планшетные компьютеры и нетбуки) вместо их полноэкранных собратьев. Бесспорным фактом является то, что количество людей, предпочитающих для путешествия по Интернету устройства с небольшими экранами, растет с постоянно увеличивающейся скоростью. В то же время многие люди по-прежнему пользуются мониторами с диагональю 27 и 30 дюймов. В настоящее время разница между просмотром веб-страниц на устройствах с самыми маленькими и самыми большими экранами велика как никогда.

К счастью, для этой постоянно расширяющейся среды браузеров и устройств появилось решение. Адаптивный веб-дизайн с использованием HTML5 и CSS3 позволит сайтам «просто работать» на множестве разных устройств с отличающейся диагональю экрана. А самое лучшее заключается в том, что реализация всех соответствующих методик не потребует прибегать к решениям на стороне сервера.

В этой главе мы сделаем следующее:

- рассмотрим важность поддержки устройств с небольшими экранами;

- дадим определение дизайну мобильных сайтов;

- дадим определение адаптивному веб-дизайну сайтов;

- взглянем на отличные примеры адаптивного веб-дизайна;

- изучим разницу между размерами областей просмотра и экранов;

- установим браузерные расширения для изменения областей просмотра и воспользуемся ими;

- применим HTML5 для создания более чистой и компактной разметки;

- применим CSS для решения распространенных сложных задач, связанных с дизайном.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *