Адаптивные веб-макеты для мобильных экранов. Введение, советы и примеры.
У дизайнеров сейчас сложнее, чем раньше. Мы должны разрабатывать не только стационарные устройства, но и мобильные устройства, такие как планшет и смартфоны, и, поскольку мы говорим о большом количестве экранов и разрешений разных размеров, это огромная задача. В свете этого, адаптивный веб-дизайн может быть лучшим решением. Он предлагает больше, чем просто мобильный шаблон; вместо этого весь ваш макет сайта разработан достаточно гибким, чтобы соответствовать любому возможному разрешению экрана.
С такой гибкой схемой проектирования есть очевидные преимущества и недостатки. Ниже приведены мои примеры того, как адаптивный веб-дизайн может сделать переход на мобильные устройства более плавным..
Как работает адаптивный дизайн
Когда я использую слово “отзывчивый” с точки зрения веб-дизайна, я имею в виду, что весь макет отвечает на основе разрешения экрана пользователя. Представьте себе такой сценарий: вы читаете веб-сайт на одном планшете, а затем по той или иной причине переключаетесь на другое устройство. Окно браузера теперь изменено. Адаптивный макет веб-дизайна будет включать в себя схемы и макет, который изящно ломается и перестраивается. С точки зрения удобства использования это блестящая техника.
Адаптивный дизайн - это создание однородного интерфейса независимо от размера экрана браузера или устройства. Я нашел прекрасный пример из «A List Apart», чтобы проиллюстрировать мою точку зрения, которая также включает в себя динамические изображения. Ширина задается в CSS с использованием процентов в основном для всех внутренних элементов контейнера. Большие веб-сайты также хорошо реагируют на удаление динамического контента, такого как JavaScript, когда он не поддерживается.
Почему дизайн для мобильных?
Стало очевидным, что все больше пользователей становятся мобильными, и не только для просмотра веб-страниц на ходу. Планшетные ПК начали меняться в контексте, когда пользователи онлайн в классе. Дизайн для мобильных устройств, безусловно, является обязательным требованием в современных веб-стандартах. Единственная проблема заключается в выборе метода развития и нацеливании на вашу аудиторию..
Когда вы начинаете кодировать для определенных разрешений экрана, вы получаете слишком много таблиц стилей для работы. Медиа-запросы в CSS3 могут использоваться для создания макетов для iPhone как в книжной, так и в альбомной ориентации. Поскольку вы можете заранее определить плотность пикселей, легко переделать любой HTML-шаблон для мобильных устройств..
(Источник изображения: bradfrostweb)
Но когда вы кодируете макет для адаптивного дизайна, мобильные аспекты по умолчанию учитываются. Как настольным, так и мобильным пользователям будет предложен аналогичный опыт, и вам не нужно будет беспокоиться о внешних свойствах CSS. Единственное исследование, которое вам нужно выполнить, - это планирование наименьшего возможного экрана дисплея. Данные трафика Google Analytics могут быть очень полезны для этого.
Скорее всего, ваш сайт не будет работать на 100% на каждом устройстве, на котором работает каждый браузер. Но вы можете ориентироваться на большинство на основе средней ширины экрана. Старые модели iPhone используют разрешение экрана 320 × 480, что не так уж невероятно. Я бы снимал для минимальной ширины 240 пикселей или даже меньше, если вы можете это уместить.
Удаление стандартного увеличения
Если вы потратили какое-то время на просмотр веб-страниц на смартфоне, вы заметите, как веб-сайты масштабируются для полного отображения на экране. Это для удобства пользователя, так как большинство веб-сайтов не имеют мобильного аналога, поэтому наиболее подходящим вариантом является полная раскладка.
Но когда вы приступаете к созданию адаптивного мобильного дизайна, автоматическое увеличение может действительно испортить элементы вашего макета. В частности, изображения и навигационный контент могут выглядеть маленькими или слишком большими в вашем макете. Существует специальный метатег, который можно добавить в заголовок документа, который сбрасывает его в большинстве устройств Android и iPhone..
Это известно как метатег окна просмотра который устанавливает некоторые пользовательские переменные в контенте. У Apple есть страница документации, касающаяся нескольких других метатегов, на которые вы должны обратить внимание, хотя они специально предназначены для веб-сайтов на iOS. Первоначальный масштаб значение важно, так как это по умолчанию ваш веб-сайт с полным 100% зумом.
Последнее значение для Пользователь масштабируемый удалит эту функцию масштабирования в целом, поэтому пользователь не сможет изменить размер макета. Это позволит заблокировать дизайн в один размер на основе полной ширины устройства. Обратите внимание, что даже если вы отключите функцию масштабирования, хороший адаптивный дизайн все равно будет адаптироваться при переходе с портретного на альбомное на любом устройстве! Но имеет смысл заблокировать адаптивный дизайн и удалить общие параметры масштабирования..
Динамическое масштабирование изображения
Изображения являются еще одним важным аспектом практически каждого веб-сайта. Мобильные пользователи могут не смотреть потоковое видео, но фотографии - это совсем другая история. Это также самые большие виновники, когда дело доходит до макетов, выходящих из коробки модели.
img max-width: 100%;
Стандартное правило для CSS - применять свойство max-width ко всем изображениям. Поскольку они всегда будут установлены на 100%, вы никогда не заметите искажения. Когда пользователь изменяет размеры своего окна браузера меньше, чем может обработать ваше изображение, он автоматически перенастраивается на 100% ширину, уменьшенную. Проблема в том, что Internet Explorer не может понять это свойство, поэтому вам нужно будет собрать специфичную для IE таблицу стилей, используя ширина: 100%;.
Гибкие изображения также возможны, если вы используете плагины JavaScript или jQuery. Есть некоторые действительно умные разработчики, которые потратили время на создание невероятно отзывчивого графического контента. Этот поток является одним из многих в Stack Overflow, который предлагает необычный, но удобный подход к решению ошибок IE6 / 7..
Я лично рекомендовал бы придерживаться естественного изменения размера изображения CSS. Если ваш сайт работает в мобильном браузере с включенным JavaScript, он, скорее всего, также может поддерживать CSS. Если вы действительно хотите копать глубже, ознакомьтесь с этой 24-й статьей «Изображения для адаптивного дизайна ...»
Трогательный дизайн
Веб-разработчики могут забыть, что мобильные пользователи больше не пользуются телефонами с клавиатурой, такими как BlackBerrys. Большинство современных смартфонов используют сенсорные интерфейсы, которые отображают сценарий, отличный от настроек мыши и клавиатуры..
Таким образом, вам нужно будет рассмотреть альтернативные решения в мобильных элементах. Выпадающие меню могут работать лучше, когда отображаются в виде единого меню с правой стороны. Большинство пользователей могут нажимать ссылки с правой стороны легче, чем слева, но любой столбец работает, чтобы уменьшить пространство. Используя отступы полей, легко идентифицировать иерархию ссылок, не требуя никакого кода jQuery..
Также рекомендуется увеличивать размер этих навигационных ссылок. Мобильные пользователи не могут себе позволить такие большие экраны, как на настольных компьютерах или даже ноутбуках. Вы должны держать текст большим, открытым, доступным для чтения и читаемым любой ценой. Вы можете даже захотеть изменить размер, если пользователь переключается между книжной и альбомной ориентацией - довольно распространенное явление при просмотре мобильного Интернета.
Пользовательские макеты CSS
В общем, лучше адаптировать свой макет и учесть естественную деградацию вашего контента. Если у вас есть боковая панель и область содержимого, вы должны установить ширину в процентах или ems, что будет изменено в размере в окне браузера. Если вы подаете заявление мин-ширина это в конечном итоге разорвет часть макета; так что теперь содержимое вашей боковой панели отображается над содержимым страницы.
(Источник изображения: Pepperson)
Если учесть, как это влияет на общий дизайн, гораздо проще разработать внешние таблицы стилей. Однако вы можете столкнуться с разрешением экрана, которое слишком мало для вашего макета. Это идеальный сценарий для добавления пользовательских свойств CSS для удаления частей страницы или полного переформатирования содержимого..
Включить / выключить дополнительный контент
Примеры больших блоков контента включают веб-формы, динамические меню, слайдеры изображений и другие подобные идеи. Вместо того, чтобы полностью удалять эти элементы, так как макет становится меньше, почему бы просто не скрыть их в “свести к минимуму” содержание div? Вы можете использовать либо CSS, либо JavaScript для выполнения редактирования, но в конечном итоге вам, вероятно, понадобится код JS для создания кнопки переключения..
Эта альтернатива идеально подходит для поддержания вашей домашней страницы динамичной и насыщенной мультимедийной информацией. Вместо того, чтобы полностью удалять раскрывающуюся навигацию или переупорядочивать структуру страницы, вы можете скрыть ее в элементе содержимого. Если пользователь хочет отобразить ваши ссылки, он нажимает кнопку переключения, чтобы открыть / закрыть меню.
Это простое, интуитивно понятное форматирование, с которым легко работать на устройствах с сенсорным экраном. Внутри div вы можете поместить каждое из выпадающих меню рядом в формате столбца. Так как размеры окна изменяются еще меньше, они естественным образом падают ниже друг друга и увеличивают высоту страницы. Тем не менее, возможность свернуть все меню легко достижима и всего лишь одним касанием. Этот переключатель также идеально подходит для слайдеров изображений в сочетании с динамическим изменением размеров фотографий..
Использование медиазапросов
Если экран мобильного устройства нарушит ваш макет из 2 или 3 столбцов, вы получите все области содержимого, расположенные друг над другом. Весь сайт, казалось бы, истекает кровью и может выйти очень запутанным без различимых областей блока. Лучше добавить нижнюю границу в каждый столбец, только для мобильных устройств, используя внешнюю таблицу стилей, например mobile.css.
С этими новыми стилями ваш контент разбит на делимые разделы. Приведенный выше атрибут media специально разработан для ориентации на старые устройства iPhone в альбомной ориентации. Но это также относится к устройствам с экранами меньше 480 пикселей. Используйте это в ваших интересах, чтобы вы могли определить, в какой момент макет “распадается”.
Есть еще несколько опций, которые вы можете использовать для определения ориентации устройства. Это фантастическое руководство по CSS медиа может дать вам несколько идей. Кроме того, новый мобильный проект 320 и выше предлагает шаблон для мобильного CSS @средства массовой информации стили. Они могут быть включены непосредственно в один и тот же файл mobile.css и применять правила для разных устройств..
/ * Смартфоны (книжная и альбомная ориентация) ----------- * / @media только экран и (min-device-width: 320px) и (max-device-width: 480px) / * Styles * / / * Смартфоны (альбомная ориентация) ----------- * / @media только экран и (минимальная ширина: 321px) / * Стили * / / * Смартфоны (портретная) ---- ------- * / @media только экран и (max-width: 320px) / * Стили * / / * iPad (книжная и альбомная) ----------- * / @ экран только для мультимедиа и (min-device-width: 768px) и (max-device-width: 1024px) / * Styles * /
(Источник: Hardboiled CSS3 Media Queries)
Полезные инструменты
- Skeleton - красивая модель для отзывчивого мобильного дизайна
- Переход от адаптивного к полностью адаптивному
Витрина: Красивые Адаптивные Дизайны
Я надеюсь, что эти советы и методы дизайна помогут вам перейти к созданию захватывающих адаптивных макетов не только для мобильных экранов, но и для любого распространенного устройства с просмотром веб-страниц. Чтобы поддержать творческий потенциал соков, я собрал небольшую витрину адаптивных мобильных веб-дизайнов. Обязательно ознакомьтесь с некоторыми из более уникальных функций и поделитесь своими мыслями по поводу дизайна или темы в области обсуждения..
повесить луну
Макдональд гостиницы
CSS-Tricks
Happy Cog
Teixido
CSS Wizardry
Информационные Архитекторы
АРТ = РАБОТА
Веб-дизайн вкрутую
Sony USA
Будущее дружественное
Мы не можем перестать думать
Аутентичные вакансии
Colbow Design
320 и выше
Форк CMS
Счастливый бит
Электрическая пульпа
Фостер Реквизит
Plexical
Прити Торты
Больше опасностей
Информационный центр стоматологии
рибот - дизайн интерфейса
Привет фишер
Саммит социального маркетолога
Уильям Чете
Шерстяной робот
Meltmedia
Оставайтесь в курсе!
В завтрашнем посте мы будем демонстрировать некоторые бесплатные адаптивные темы WordPress Вы можете скачать для использования. Не забудьте настроиться на это.
