Веб-студия «Бенгаль»

Previous Entry Share Next Entry
Реагирующий дизайн
бенгальский кот
bengalirk
Если вы когда-либо занимались созданием сайтов, то наверняка вам приходилось в процессе отладки ресурса тестировать его на кроссбраузерность. Уверен, что вы грамотный веб-мастер и в вашем арсенале полный комплект всех основных браузеров и хаков, которыми вы частенько пользуетесь. Возможно для кого-то из вас это будет неожиданностью, но сегодня такой «тяжелой артеллерии» уже зачастую бывает недостаточно.

В наш век стремительно развивающихся технологий, повсеместной гаджетизации и наличия чуть ли не у каждого школьника смартфона с доступом в Интернет, необходимо помнить также и об интересах пользователей мобильных устройств. Сегодня пару слов хотелось бы сказать о таком относительно новом, но явно надолго вошедшем в обиход, понятии как «реагирующий дизайн». Название говорит само за себя — в зависимости от ширины экрана пользовательского устройства, сайт реагирует, принимая форму, наиболее удобную для просмотра информации.

Сегодня таких устройств можно выделить три основных группы:
  1. Персональные компьютеры и ноутбуки (ширину экрана в данном случае принято расчитывать из минимального параметра в 960 px и практически до бесконечности)
  2. Планшеты (за пример можно взять iPad вертикальной ориентации с шириной окна браузера 768 px)
  3. Смартфоны (к примеру iPhone с учетом как вертикальной, так и горизонтальной ориентации — 320 и 480 px соответственно).
Для наглядности хочу, чтобы вы взглянули на недавно появившийся в сети сайт нашей веб-студии — www.858585.ru
Попробуйте постепенно уменьшать ширину вашего браузера до минимально возможного предела. Видите как изменяется внешний вид сайта? Блоки меняются местами, исчезают по мере необходимости, становятся крупнее шрифты и т.д.

Для тех, кому лень идти по ссылке, привожу скриншоты.


Обратите внимание, что в последнем варианте вся информацяе приведена в один столбец, что существенно повлияло на длину мобильной страницы. Также в последнем и предпоследнем варианте иначе выглядит главное меню, из горизонтального оно превратилось в вертикальное.

Каким образом это реализовано? Все очень просто. В помощь нам — передовые технологии CSS, а именно правило @media, которое нужно для корректировки документа в зависимости от предназначенного для просмотра устройства.

Рассмотрим пример кода, предназначенного для iPad:
@media only screen and (min-width: 768px) and (max-width: 959px) { здесь прописываются изменяемые для данного устройства стили }

Если необходимо убрать какой-то блок, достаточно просто использовать параметр display: none;

Как видим, ничего особенно сложного в этой методике нет, зато ее эффективность бесспорна.

Один нюанс: думаю не стоит объяснять почему владелец смартфона не сильно обрадуется размещенному на вашем сайте изображению размером к примеру 1280×800 пикселей. Несложно представить как долго эта картинка будет загружаться. Точно также, владельцы широкоформатных мониторов не будут особо рады миниатюрным изображениям. Как же быть? Необходимо оптимизировать изображения по объему и размеру в зависимости от устройства пользователя. Для этого рекомендую сервис Adaptive Images. Система встраивается в сайт довольно просто, необходим один php-файл, .htaccess и небольшой javaScript. Система сама определяет тип устройства пользователя и в зависимости от полученных данных уменьшает изображение до необходимого масштаба, встраивая его потом в структуру сайта.

Другие примеры «реагирующего дизайна» вы можете посмотреть здесь: http://naikom.ru/blog/archives/4992.

Конечно далеко ни у каждого сайта есть острая необходимость правильно отображаться в мобильном телефоне, но ведь к этому нужно стремиться! Многие разработчики решают эту проблему созданием сайтов-клонов с упрощенным дизайном. Однако если сопоставить трудозатраты связанные с разработкой мобильной версии сайта и написанием нескольких строк специального кода в css файле, преимущество безусловно будет за вторым вариантом. Это и быстрее и эффективнее.

Я убежден, что данный метод в будущем будет использоваться повсеместно, и веб-разработчикам, помимо проверки сайта на кроссбраузерность и правильность отображения в зависимости от ширины экрана, придется в обязательном порядке делать дизайн «реагирующим». Интересно узнать ваше мнение.

P.S. Спецификация Media Queries поддерживается всеми актуальными браузерами, кроме Internet Explorer 7 и 8. В борьбе с IE нам поможет скрипт Respond.js (3 КБ) — это универсальное решение, способное добавить поддержку min-width и max-width.


  • 1
Мне кажется, если сайт напрямую предлагает какие-то _сервисы_ для мобильных пользователей - тогда имеет смысл сделать приложения.. или детектить юзер-агент и показывать вообще другую, полностью заточенную под мобилы версию сайта.
Те кто с айпада - как правило и так всё нормально видят.
А так для корпоративных сайтов этим всем озадачиваться - только трата ресурсов. Ну зайдет три калеки в месяц со смартфона, телефоны повыше разместить да и нормально :)

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

вобще как по мне то respond.js не ахти в работе особенно если много скриптов

лучше пользоваться css3mediaqueries с гугловского api)
и вам надо чуток подкорректировть Ваш сайт потому что при CTRL+колесико мыши вверх горизонтальной прокрути не должно появлятся

to -> vasok
так при этих делах и так будет версия полностью заточена под мобильные устройства (главное до конца доделать) а три калеки со смартфонов заходят в день регулярно это если посетителей 30-40, а если пару тысяч то огогого:)

Re: responsive design

>>> лучше пользоваться css3mediaqueries с гугловского api)

Спасибо за наводку! При возможности обязательно потестирую.

>>> и вам надо чуток подкорректировть Ваш сайт потому что при CTRL+колесико мыши вверх горизонтальной прокрути не должно появлятся

Да, действительно… Спасибо, пофиксю!

  • 1
?

Log in

No account? Create an account