Адаптивный дизайн +пример по изображениям +пример по навигации

132 72
16:25 4 июня 2013 — Угниченко Дмитрий
Как девушка выглядит, когда нравится? Как минимум, адекватно. Например, Диана
Велосипедная прогулка — с друзьями — бассейн (кликабельно)

Со всей силой нас носит по волнам инноваций. Пост-ПК эра нас обогатила: айфонами, galaxy, htc one, фаблетами, планшетами, Google Glass. У Наиля Байкова Интернет в телевизоре. Технология называется Smart TV, через нее доступны приложения которые из себя представляют html-сайты. В iWatch реализуются новые идеи. Интернет будет в часах. 2013 год я называю годом Адаптивного дизайна.

Необходимо соответствовать месту где находишься. Скоро Интернет будет открываться и здесь (кликабельно):

а еще здесь:

Адаптивный дизайн — способ компоновки контента, обеспечивающий отличное восприятие на различных устройствах. Например, мы имеем компанию по изготовлению фасадов. Цель сайта — "продать" портфолио. Если зайти на такой сайт с айфона, как минимум пользователю будет не комфортно переходить по стрелочной навигации. В этом случае решением из адаптивного дизайна будет использование жестов: смахивание вправо и смахивание влево. Кроме жестов, можно использовать геолокацию для определения местоположения пользователя, что даст возможность показать потенциальному клиенту в первую очередь те работы из портфолио, которые находится рядом с ним и он сможет их увидеть и что называется пощупать.

Важно, не путайте адаптивный дизайн и мобильные версии. Мобильные версии — это сайты под устройство. Под одно конкретное. 2013: устройства бывают разных форм-факторов, размеров и разрешений, с различными типами ввода информации: кнопки и жесты. Создавать мобильные версии под устройства всех типов дорого и моветон. Я отображаю это так:
или так:

Что важно знать до начала работ по созданию responsive-сайта. Начинать надо с меньшей версии сайта. Запомните: Mobile First. Или по-русски: от малого к большему. Залезть на дерево легко, сложнее с него слазить.

Наглядно (кликабельно):



Необходимо знать, что практически весь современный дизайн строится через CSS3. Конкретно через MediaQueries. Именно они помогают моделировать страницы основываясь на размерах дисплея – ширине, высоте, ориентации и разрешении. Пример:
@media screen and (min-width:300px) and (max-width:555px) { ... }
стили которые пропишутся в фигурных скобках будут работать на устройствах с шириной 300px-555px.
Мастхевные фичи: изменение элементов навигации, разные изображения, текст в %, гибкие таблицы и таблицы в виде списка, замещение таблиц диаграммами.

Если материал заинтересует, поделюсь наиболее яркими и необходимыми фичами из практики. И исходниками

Интересные факты:
  • Впервые понятие Адаптивный дизайн/Responsive design было озвучено 2011 году дизайнером итальянского происхождения
  • Скорость развития мобильного веба опережает десктопный в 8 раз
  • На 2012 в Японии более 90% Интернет-трафика приходится на гаджеты
  • В 2012 Google впервые дает совет создавать сайты с адаптивным дизайном, замечая что это положительно скажется на поисковой выдаче
  • В 2013 Google объявил о переходе всех своих сервисов на адаптивный дизайн
  • Наиболее успешное решение до 2013:

    bostonglobe.com
Апдейты. Ребята, дождались примеров!

UPDATE 1: Responsive.Images
В комментариях обсуждались недостатки, якобы у страницы большой вес. Привожу пример.
В данном примере подгрузка изображения осуществляется в зависимости от разрешения/устройства (кликабельно):

В результате:
  • вес минимальный
  • красиво, пропорционально
Никаких дополнительных проблем с наполнением не возникает. Поддается автоматизации.
Выглядит так:


UPDATE 2: Responsive.Nav
Как создается навигация. Привожу пример.
Экономия места и минимализм.
Выглядит так:

22 комментария

+ Добавить комментарий
  • epexa
  • |
  • 18:19 4 июня 2013
И ещё верстальщикам советую http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Ставлю дизлайк только за то, что в посте продукция от стива джобса.
это совсем не в какие рамки не лезит
ты болен)
чем те Стив Джобс не по нраву-то?
bostonglobe.com - с смартфона (Opera Mobile) очень коряво и громоздко выглядит.
Лично я считаю что адаптивный дизайн можно использовать для планшетных пк, нетбуков и т.д. Но для телефонов, смартфонов нужно делать облегченные версии, и с нормальным юзабилити.
Сущий брел. Разберитесь в дизайне. Вы вообще не прнимаете о чем говорите. Адаптивный дизайн и есть облегченный. Что за ALTWeb Group позор на Интернет!
Ок, я не буду расказывать в чем отличие адаптивной верстки от мобильной версии.
Сейчас я просто покажу отличие.
Возмем Ваш пример (лучший) с адаптивной версткой и другой новостной сайт с отдельной мобильной версией.
bostonglobe.com - http://screencast.com/t/Qb6zJck9ivFJ (особенно на 15 секунде)
m.lenta.ru - http://screencast.com/t/2c9ZPp3D4uBl
Но как разработчик я хочу сказать что в плане разработки отдельный сайт для мобильных устройств это не удобно. Лучше использовать RESS подход.
И не нужно забывать что страницы по 1 МБ для телефона это уж слишком!
Андрей, по ходу вам статья на Хабре затмила видение. Но, тем не менее, спасибо что хоть ответ есть
А теперь смотрите. Не софтинка. iPhone 5. Делаю скрин:
http://kremen.ua/lenta
Как на картинке — так в реальности. Теперь представьте себе Galaxy Note 3 или iPad 4. Заголовок новости будет в одну строку
http://kremen.ua/ipad
Место используется не рационально. Больше предложенный сайт обсуждать и ничем. Потому что там нет ничего кроме заголовков и меню.
Про bostonglobe. Во-первых, пример из моей статьи не мой личный выбор, я скромный :-P
Это пример дизайнера и автора книги, который начал первым создавать responsive — Ethan Marcotte. Этот пример нравится многим дизайнерам как не идеальный, но один из лучших доселе
открыл
http://kremen.ua/about
кстати, здесь функционала, заметьте, больше.
http://kremen.ua/reklama
белое место — это недостаток сайта. но никак не адаптивного дизайна. это пробоина вполне залатывается на ура. проблема кодинга.
http://kremen.ua/twitter
twitter работает и пролистывается пальцем.
надеюсь я не зря потратил время и вы чуть-чуть больше поняли, что адаптивный дизайн — это не одна резина и что мобильных сайтов надо создать туеву кучу чтобы они корректно отображалась на устройствах, скажем так, их количество равно количеству моделей мобильных телефонов и всех планшетов мира.
Nikiforova Elle, спасибо за оценку.
Уверен, на следующей версии и apple.com обновится к адаптивному дизайну :-)
Димка, привет!
Что в этой статье нашли люди? Вот статья про адаптивный дизайн - http://www.seowit.ru/responsive . Там все раскрыто! А это ... Извини, но минус
А что по ссылке такого? Автор аматор, который не может понять что резина - это часть адаптива. Он сравнивает резину с адаптивом)) Это спам?
Как пиар в пользу АД статья хороша, но уверен кому надо и без этого понимают что лучше выбрать. Для первого ознакомления норм.
Интересно, есть ли какой-то топ responsive-студий?
Классно. Часы - это про iWatch?
Мелисон?
Диана Мелисон
Разница в ценах?
И здесь Зидан:-D
Долго. Дорого. Ох#енно)))

Только зарегистрированные пользователи могут добавлять комментарии.