Какие шаги нужно сделать, чтобы дизайн HTML стал адаптивным?
Я только что узнал об адаптивном дизайне. Мой вопрос: какие шаги должен сделать HTML-дизайнер, чтобы адаптировать дизайн?
Похоже, что адаптивный дизайн это все об использовании @media запросы и управление потоком элементов на странице, если он изменяется с помощью установки max-width, min-width и манипулирование плавающим, полями и отступами в зависимости от размера окна браузера.
Есть ли что-нибудь еще, кроме @media запрос, который нужно сделать для адаптивного дизайна?
2 ответа
Адаптивные изображения (разные изображения в HTML для разных ситуаций) очень важны.
Несколько важных битов:
Использование
srcsetатрибут для переключения между разными версиями одного и того же изображения. http://responsiveimages.org/ - это множество ресурсов на эту тему.Использование средств автоматизации для работы с изображениями. Один из моих любимых приложений - Grunt, и о нем можно прочитать здесь: http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/
Это действительно имеет большое значение, когда пользователь на мобильном телефоне открывает страницу с изображениями, которые соответствуют его размеру, меньше данных и намного быстрее загружает:)
Такие инструменты, как Grunt, могут показаться, что для их настройки требуется определенная работа, но как только вы начнете работать с ним, это будет легко и быстро.
Больше материала для чтения:
Абсолютно. Есть три основных клиента адаптивного веб-дизайна из оригинальной книги Итана Маркотта "Адаптивный веб-дизайн" (abookapart.com/products/responsive-web-design). Они есть:
1 - Fluid Grids - ширина в процентах вместо пикселей для вашего макета / сетки. Возможно, это даже более важно, чем медиа-запрос, поскольку он позволяет веб-сайтам быть текучими и не фиксированными. Таким образом, смартфоны и планшеты имеют слишком много размеров, чтобы их можно было сосчитать, поэтому плавная компоновка гарантирует, что ваш дизайн будет отлично вписываться в устройства различной ширины.
2 - Гибкие изображения - это в основном изображения, которые уменьшаются, когда браузер становится меньше. Существует множество проблем, связанных с изображениями в контексте адаптивного подхода, поэтому @Ivan86 настоятельно рекомендует использовать srcset атрибут на теге изображения, который я также очень рекомендую, но, возможно, подождите, пока вы не освоитесь с основами. Поскольку вы только начинаете, давайте будем проще с "гибкими изображениями", которые являются изображениями, для которых установлено max-width: 100% с родительским контейнером вокруг них, который основан на%. Это позволяет уменьшать изображение по мере уменьшения родительского контейнера (div, figure и т. Д.). Однако, если вам случится заинтересоваться srcset Недавно я опубликовал две статьи на эту тему: http://www.richfinelli.com/srcset-part-1, http://www.richfinelli.com/srcset-part-2/ которых объясняется, как использовать этот новый атрибут.
3 - Медиа-запросы - как вы сказали, используются в вашем CSS для изменения макета на основе доступной ширины браузера.
Как я думаю, вы узнаете, как только вы приступите к адаптивному веб-дизайну, вы поймете, что вы можете столкнуться с несколькими уровнями проблем. Но я рекомендую купить книгу Этана Маркотта на abookapart.com, чтобы получить хороший скачок. Очень коротко и на самом деле смешно.