Каковы шаги, чтобы сделать дизайн HTML отзывчивым?

Question

Я только что узнал о отзывчивом дизайне. Мой вопрос в том, какие шаги должен сделать дизайнер HTML, чтобы сделать отзывчивость дизайна?

Оказывается, что адаптивный дизайн все об использовании @media запросов и управления потоком элементов на странице, если он будет изменен путем установки max-width, min-width и манипуляции с плавающими, полями и отступов в зависимости от размера браузера окна.

Есть ли что-нибудь еще, кроме @media запрос, который необходимо выполнить для отзывчивого дизайна?

Answer 1

Отзывчивые образы (разные образы в HTML для разных ситуаций) является важным.

Несколько важных битов:

• Использование srcset атрибут для переключения между различными версиями одного и того же изображения. http://responsiveimages.org - это источник ресурсов на эту тему.

• Использование средств автоматизации для работы с изображениями - Один из моих любимых Grunt и здесь приятно читать о нем: http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

Это действительно делает большой разницы, когда пользователь на мобильном телефоне открывает страницу с изображения, которые для него меньше, меньше данных и более быстрых нагрузок :)

Такие инструменты, как Grunt, могут показаться, что они выполняют некоторую работу по настройке, но как только вы начнете работать с ней так легко и быстро.

Больше материал для чтения:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

http://blog.cloudfour.com/responsive-hero-images/

Answer 2

Абсолютно. В оригинальной книге Этана Маркотта «Отзывчивый веб-дизайн» (abookapart.com/products/responsive-web-design) есть три основных жителя адаптивного веб-дизайна. Это:

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

2 - Гибкие изображения - которые в основном являются изображениями, которые уменьшаются при уменьшении размера браузера. Существует множество проблем вокруг изображений в контексте отзывчивости, поэтому @ Ivan86 настоятельно рекомендовал использовать атрибут srcset в теге изображений, который я также очень рекомендую, но, возможно, подожду, пока вы не будете довольны основами. Поскольку вы только начинаете, давайте упростим с помощью «гибких изображений», которые представляют собой изображения, которые установлены на max-width: 100% с родительским контейнером вокруг них, на основе%. Это позволяет уменьшить изображение, поскольку родительский контейнер (div, figure и т. Д.) Становится меньше. Однако, если вас действительно интересует srcset, я опубликовал две статьи об этом недавно: www.richfinelli.com/srcset-part-1, http://www.richfinelli.com/srcset-part-2/, в которых объясняется, как использовать этот новый атрибут.

3 - Медиа-запросы - Как вы сказали, используются в вашем css для изменения макета на основе доступной ширины браузера.

Как я думаю, вы узнаете, как только вы попадаете в отзывчивый веб-дизайн, вы понимаете, что есть несколько уровней проблем, в которые вы можете столкнуться. Но я рекомендую купить книгу Этана Маркота с сайта abookapart.com, чтобы получить хороший прыжок в теме. Очень короткий и на самом деле смешной.