Маленькие экраны на первом месте с 320 и выше
Если вы еще не научились работать с медиазапросами CSS3, я надеюсь, что он находится на вершине вашего списка дел, потому что 2011 год определенно является годом мобильного устройства. Независимо от того, хотите ли вы создать отдельный мобильный сайт или планируете сделать один размер подходящим для всех, вы все равно должны быть в курсе адаптивных методов веб-дизайна.
Одна из распространенных проблем, с которой сталкиваются разработчики в подходе с медиа-запросами, заключается в том, что вам часто приходится проделывать большую работу, чтобы поддерживать маленькие браузеры; Вы обнаружите, что изменяете размеры больших изображений, переключаете сценарии, возможно, даже скрываете большие куски контента. Хотя этот метод выполняет свою работу, это означает, что браузеры с маленьким экраном могут загружать огромные биты контента, который им никогда не понадобится показывать. Для медленных и дорогих мобильных соединений это означает оплату дополнительных пакетов, которых я лично предпочел бы избежать.
Звучит знакомо? Это следует делать, если вы следуете подкасту SitePoint. В эпизоде прошлой недели Луис говорил с Джереми Китом об этой самой проблеме. Вы найдете это обсуждение, начинающееся около отметки 23:45:
Луи:… И я думаю, что одна из самых больших проблем в Адаптивном Веб-дизайне — это проблема пропускной способности, верно, если мне нужно предоставить изображение, которое будет хорошо выглядеть в 1024 или 1280, и оно также должно выглядеть хорошо в 320, До сих пор подход в большинстве адаптивных случаев состоял в том, чтобы использовать действительно большое изображение и масштабировать его в CSS, но это создает проблему пропускной способности. И еще одна проблема, которая возникает, — это лишний контент, поэтому вы немного поговорили о отложенной загрузке в качестве решения этой проблемы. Поэтому я хотел бы узнать ваше мнение о том, куда мы идем в отношении такого рода технических проблем и решения проблем пропускной способности.
Джереми: Когда дело доходит до подачи мультимедийных материалов разного размера, таких как изображения, я думаю, как и в случае с этой идеей, когда речь идет о макетах, а не о масштабировании макета, ориентированного на настольный компьютер, для перетекания на мобильный сайт, что если мы перевернем его с ног на голову? и начните с узкой версии, а затем масштабируйте ее до рабочего стола. Я думаю, что это, вероятно, хороший подход к СМИ; вместо того, чтобы думать о большом изображении как о значении по умолчанию и (спрашивать), как мы уменьшаем его для экрана меньшего размера, переворачивать его на голову и думать о меньшем изображении как о значении по умолчанию, а затем о том, как мы можем обеспечить большее образ для устройств с большими экранами — ноутбуки, десктопы и тд.
Я имею в виду, что отчасти это связано с тем, что устройство с меньшим экраном будет включать в себя целую кучу телефонов, которые не обладают всеми этими возможностями. У нас сейчас есть несколько отличных мобильных браузеров, Mobile Safari и так далее, но есть также много мобильных телефонов, которые имеют более крутые браузеры. Таким образом, безопасное значение по умолчанию — думать о более низкой полосе пропускания, думать о меньших изображениях, думать о линеаризованном дизайне, а затем применять большие изображения, больше контента, многостолбцовые макеты для более функциональных браузеров, которые могут быть на настольный или портативный компьютер.
Или, как выразился Люк Вроблевски в 2009 году: сначала дизайн для мобильных устройств. Ваш базовый дизайн представляет собой простой, простой, без наворотов, опыт, который может использовать даже самый тупой телефон и самый маленький экран. Для более современных телефонов и планшетов с поддержкой медиазапросов мы можем использовать больше стилей и создавать новые макеты в соответствии с их размерами или использовать более прохладные CSS-эффекты. Наконец, для настольных браузеров создавайте макеты и используйте ресурсы, которые максимально эффективно используют экран. Конечно, некоторые настольные браузеры просто должны отличаться; для этих браузеров мы можем использовать полифиллы, чтобы включить эту поддержку, или найти другие обходные пути — или, возможно, просто оставить их для использования простейшего дизайна, если вы чувствуете себя нелюбимым! Это так поразительно просто, что вы удивляетесь, почему мы не все сделали это с самого начала.
Прежде чем перейти к текстовому редактору, подумайте над тем, чтобы выбрать новый шаблон 320 и выше от Энди Кларка. Используя превосходный проект HTML 5 Boilerplate в качестве основы, он добавил множество полизаполнений, помощников и обходных путей, таких как Selectivizr для добавления селекторов CSS3, Respond.js для поддержки медиазапросов в Internet Explorer 6–8. Таблицы стилей уже подготовлены для пяти устройств различной ширины — маленький экран, 480px, 768px, 992px и 1382px — плюс еще один для iPhone 4 и последнего дисплея Retina iPod Touch. Вы можете выбрать между отдельными таблицами стилей для каждого варианта дизайна или одной таблицей стилей, которая содержит все это.
Что тебе остается делать? Конечно, дизайн адаптивного дизайна — это больше, чем просто раздавить или увеличить логотип. Для некоторых интерфейсов может потребоваться, чтобы вы отображали или скрывали некоторый контент определенных размеров, тогда как другие могут содержать целые функции, предназначенные только для некоторых размеров. Меню для телефонов, возможно, должно выглядеть и чувствовать себя совершенно иначе, чем меню, предназначенное для настольного компьютера, особенно учитывая, что все больше из нас используют кончик пальца для навигации. (Да, смартфоны до сих пор не сенсорные.) Возможно, вам придется поработать над изменением размера изображения с учетом контекста. Возможно, вам придется подумать, стоит ли выделять определенную информацию на вашем сайте для мобильных пользователей. Независимо от ваших потребностей, вы должны обнаружить, что шаблоны 320 и Up являются надежной, проверенной и проверенной отправной точкой для того, когда придет время для создания вашего следующего адаптивного проекта макета.