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

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

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

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


Необходимо знать, что практически весь современный дизайн строится через CSS3. Конкретно через MediaQueries. Именно они помогают моделировать страницы основываясь на размерах дисплея – ширине, высоте, ориентации и разрешении. Пример:
Мастхевные фичи: изменение элементов навигации, разные изображения, текст в %, гибкие таблицы и таблицы в виде списка, замещение таблиц диаграммами.
Если материал заинтересует, поделюсь наиболее яркими и необходимыми фичами из практики. И исходниками
Интересные факты:
UPDATE 1: Responsive.Images
В комментариях обсуждались недостатки, якобы у страницы большой вес. Привожу пример.
В данном примере подгрузка изображения осуществляется в зависимости от разрешения/устройства (кликабельно):

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

Со всей силой нас носит по волнам инноваций. Пост-ПК эра нас обогатила: айфонами, 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
Как создается навигация. Привожу пример.
Экономия места и минимализм.
Выглядит так:

Понравился пост?Да НетПонравилось 132, не понравилось 72 |
Расскажите о нас... |
22 комментария
+ Добавить комментарийЛично я считаю что адаптивный дизайн можно использовать для планшетных пк, нетбуков и т.д. Но для телефонов, смартфонов нужно делать облегченные версии, и с нормальным юзабилити.
Сейчас я просто покажу отличие.
Возмем Ваш пример (лучший) с адаптивной версткой и другой новостной сайт с отдельной мобильной версией.
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 работает и пролистывается пальцем.
надеюсь я не зря потратил время и вы чуть-чуть больше поняли, что адаптивный дизайн — это не одна резина и что мобильных сайтов надо создать туеву кучу чтобы они корректно отображалась на устройствах, скажем так, их количество равно количеству моделей мобильных телефонов и всех планшетов мира.
Уверен, на следующей версии и apple.com обновится к адаптивному дизайну :-)