Сеть меняется. Причём каждый день.
Выходят новые устройства, с помощью которых мы можем выходить в интернет практически отовсюду.
Если раньше был практически один сценарий пользования интернетом — выйти через медленный модем в Сеть с большого настольного компьютера, то теперь же для нас вполне привычно выходить в интернет не только со смартфона, планшетника, но и простых моделей телефонов. Сейчас уже сложно найти телефон, который бы не имел такой технической возможности (причём это, подчас, преподносится как преимущество).
Мы выходим в Сеть с электронных книжек сидя в кафе, дома с игровой приставки, лёжа на диване. И кто знает, возможно скоро мы будем выходить в интернет и с холодильника, чтобы заказать доставку продуктов.
При всё этом многообразии устройств начинает остро стоять вопрос того, как обеспечить доступ всем этим устройствам к наших сайтам?
Мы можем начать читать статью в интернете сидя за настольным компьютером, продолжить чтение по дороге на работу с планшета, а может и с телефона. И везде нам хочется комфортного сёрфинга.
На помощь нам приходит адаптивный веб-дизайн. Термин достаточно молодой, хотя предпосылки этой технологии, а точнее сказать подходу, создавались уже давно.
Итак, что же это такое?
Сейчас выделяют три составляющие:
- «резиновую» вёрстку,
- «тянущиеся» изображения,
- медиа-запросы.
Резиновые макеты уже давно вошли в нашу практику. Не так давно мы сидели за мониторами с шириной экрана в 1024 пикселя, но потом произошёл быстрый рост размеров экранов, и веб-дизайнеры стали ориентироваться на пользователей с окнами в 1280 пикселей, а потом и больше.
Но после появления планшетников снова стал вопрос о малых разрешениях. В том же айпаде в портретном режиме ширина экрана всего 768 пикселей. А если рассматривать мобильные телефоны — можно ориентироваться уже и на 300 пикселей.
Просто сделать резиновый макет дизайна сайта, опираясь на гибкую модульную сетку, стало недостаточно.
Если мы не позаботимся о картинках на нашем сайте — они или «поломают» наш макет, либо просто будут выглядеть ужасно.
Значит необходимо сделать изображения на нашем сайте «тянущимися». Если говорить о технической стороне — то нам поможет css-свойство max-width: 100%. Нам просто нужно задать это свойство нашим картинкам, и они не вылезут за пределы своего контейнера, и не поломают наш макет. Конечно есть свои сложности, особенно с поддержкой линейки браузеров Internet Explorer, но и для них есть вспомогательные решения, пусть и носящие форму костылей.
Стоит заметить, что сейчас очень перспективным подходом является поддержка svg-изображений. Кому интересно, может поискать в интернете более подробную информацию, либо посмотреть видео от гуру веб-стандартов Вадима Макеева — http://pepelsbey.net/2010/11/web-in-curves/
Если вкратце о технологии, то она позволяет нам «записать» в один файл несколько изображений для разных разрешений. На большом мониторе мы показываем полную версию логотипа компании со слоганом, на меньшем — уже без лишних слов, а в мобильном телефоне — и вовсе оставив иконку (если вам будет некогда смотреть всё видео — сразу промотайте на 38 минуту).
И, конечно, адаптивный дизайн в том виде, в котором сейчас нам доступен, опирается на медиа-запросы.
Объяснение подхода требует рассмотреть некоторые технические моменты.
Но чтобы вы знали о чём идёт речь, подскажу вам: если вы увидите конструкцию в коде сайта подобную этой @media screen and (max-width: 980px) {…}, знайте — это они.
Мы можем с помощью таких запросов задавать различные стилевые описания для контента сайта, и самой сетки, используя в виде условий ширину браузера, ширину всего экрана, и многое другое.
Вам интересно посмотреть на примеры?
http://yiibu.com
http://www.alistapart.com/
Попробуйте изменить ширину окна браузера. Это волшебно, не правда ли? (-:
К слову говоря, мы, хоть и не являемся веб-студией, всё же стараемся внедрять подход адаптивного веб-дизайна в некоторых проектах. Например у одного из наших любимых клиентов — Кофе Хауз.
Для некоторых целевых страниц, на которые приходят очень много пользователей с мобильных устройств, мы частично внедряем тянущиеся изображения, и подстраиваем контент под разные устройства.
Сейчас сложно представить с какого устройства могут зайти клиенты на ваш сайт. Необходимо учитывать этот фактор, строя свой бизнес в интернете.
А готов ли ваш сайт к мобильным пользователям?
