До недавнего времени сайты создавались с фиксированной шириной, например, 960 пикселов с расчетом на то, что это обеспечит единообразие для всех конечных пользователей. Такая ширина не была слишком большой для экранов ноутбуков, а пользователи с мониторами высокого разрешения при просмотре веб-страниц попросту наблюдали много свободного пространства по бокам. Однако сейчас получили распространение смартфоны. iPhone от компании Apple стал первым смартфоном, который обеспечил по-настоящему удобный просмотр веб-страниц, и многие другие последовали его примеру.
К слову, все девайсы рано или поздно выходят из строя. Если с вашим смартфоном возникла проблема — для ее решения потребуется прикупить нужные запчасти айфон.
В отличие от вчерашних устройств с маленькими сенсорными экранами, требовавшими от пользователей при работе с ними проворства чемпиона мира по игре в блошки, современные телефоны позволяют комфортно путешествовать по Интернету. Кроме того, потребители все чаще используют дома устройства с небольшими дисплеями (например, планшетные компьютеры и нетбуки) вместо их полноэкранных собратьев. Бесспорным фактом является то, что количество людей, предпочитающих для путешествия по Интернету устройства с небольшими экранами, растет с постоянно увеличивающейся скоростью. В то же время многие люди по-прежнему пользуются мониторами с диагональю 27 и 30 дюймов. В настоящее время разница между просмотром веб-страниц на устройствах с самыми маленькими и самыми большими экранами велика как никогда.
К счастью, для этой постоянно расширяющейся среды браузеров и устройств появилось решение. Адаптивный веб-дизайн с использованием HTML5 и CSS3 позволит сайтам «просто работать» на множестве разных устройств с отличающейся диагональю экрана. А самое лучшее заключается в том, что реализация всех соответствующих методик не потребует прибегать к решениям на стороне сервера.
В этой главе мы сделаем следующее:
— рассмотрим важность поддержки устройств с небольшими экранами;
— дадим определение дизайну мобильных сайтов;
— дадим определение адаптивному веб-дизайну сайтов;
— взглянем на отличные примеры адаптивного веб-дизайна;
— изучим разницу между размерами областей просмотра и экранов;
— установим браузерные расширения для изменения областей просмотра и воспользуемся ими;
— применим HTML5 для создания более чистой и компактной разметки;
— применим CSS для решения распространенных сложных задач, связанных с дизайном.
Добавить комментарий