Прокомментировать

Отзывчивый веб-дизайн

Недавно я закончил работу по проекту для компании «Scosche». Особенность проекта состояла в том, что сайт верстали при помощи так называемого «отзывчивого веб-дизайна» («Responsive Web Design», или, как его нередко называют сокращенно — «RWD»). Это был первый проект нашей компании, в котором использовалась подобная верстка, и я пионерил, чтобы подобный проект все-таки появился.

Если не вдаваться в технические тонкости и объяснять это простым языком, то особенность отзывчивого веб-дизайна состоит в том, что сайт верстается один раз, но после этого он выглядит одинаково приятно на любых разрешениях экрана. В наше время, когда на рынке неограниченное множество различных смартфонов, масса планшетов с разными размерами экранов, нетбуки, ноутбуки, настольные мониторы, проекторы, и даже телевизоры, с которых можно выходить в интернет, — верстать сайт только для настольных компьютеров, как это было принято всего несколько лет назад, уже не просто не модно, но и ошибочно. Верстать отдельные версии сайта для различных устройств, как это было принято всего пару лет назад, тоже неправильно, так как все остальные девайсы, на которые верстка не ориентирована, не получат токого-же удобного интерфейса. Так как угадать то, какими девайсами и с каким разрешением экрана люди будут пользоваться в будущем практически невозможно, то самый верный выход — верстать сайты при помощи отзывчивого веб-дизайна.

Чтобы понять, что это такое, достаточно открыть сайт www.anderssonwise.com, который является одним из моих любимых примеров того, на что способен отзывчивый веб-дизайн. Открыть рекомендуется одновременно при помощи компьютера, смартфона, планшета, и любого другого устройства. Самый же наглядный способ — это открыть его в браузере компьютера, а затем вручную уменьшать ширину браузера: таким образом можно увидеть, как сайт динамично подстраивается под ширину экрана, используя всю его рабочую область. Третий способ, для тех кто в теме, это поиграть с размерами экрана при помощи сервиса «Responsivepx».

Еще одним замечательным примером является интерфейс «Пикасы». Достаточно открыть любую фотографию, например эту, и также поиграть с размерами браузера. Видно, что при любом разрешении экрана фотография занимает всю его полезную площадь (то, чего пока не хватает моему сайту, но это обязательно когда-нибудь появится).

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

16 января 2013 года

Комментарии

Артем: >>то, чего пока не хватает моему сайту

Мне дизайн сайта gerasimov.org, по-прежнему, нравится, как один из лучших. Если экран мобильного устройства такой маленький, что на него что-то не помещается, то и не надо на нем в инете лазить. :)
16 января 2013 года в 22:28
Андрей Герасимов: Спасибо. Дизайн в каком-либо обозримом будущем я менять и не планирую. Сделать навигацию удобней — да, но внешний вид останется таким же.

Под тем, чего не хватает этому сайту, я имел в виду то, чтобы фотографии занимали всю площадь экрана на высоких разрешениях (выше 1600 пикселей по ширине, например), и не выглядели такими маленькими, как сейчас.

А вообще, подход «если экран мобильного устройства такой маленький, что на него что-то не помещается, то и не надо на нем в инете лазить» считаю неправильным. Конкретно этот сайт может много и не потеряет, если те пользователи, которым было бы удобней его читать на мобильных устройствах, просто забудут про сайт вообще. Но какие-либо онлайн-магазины, например, не могут себе позволить терять клиентов из-за такого подхода — потенциальные клиенты просто уйдут к более заботливому конкуренту.
17 января 2013 года в 22:14

Rugda: Интересная штука :-)
Молодцы что сделали! А относительно смартфонов — поддерживаю Артёма.
17 января 2013 года в 5:19
Андрей Герасимов: Спасибо.
17 января 2013 года в 22:14

Slava: Это пошло в твой зачет с точки "Project Manager"?
Если да, то поздравляю! Отличный проект, чтобы закатать в резюме
17 января 2013 года в 6:04
Андрей Герасимов: Да, я был (и пока все еще являюсь) менеджером проекта.
17 января 2013 года в 22:19

umniks: Кстати да, нормальные телефоны/планшеты сами масштабируют страницы под свой размер. Гораздо важнее, чтобы элементы управления нормально функционировали на тач-скрине — никаких там mouse_over и мелких кнопочек.
17 января 2013 года в 6:15
Андрей Герасимов: Но и про «ненормальные» телефоны (и не только телефоны) тоже не стоит забывать.
17 января 2013 года в 22:21

SlavaKE: использую сейчас в проекте SASS (SCSS) для конвертации в CSS, результат помоему тот же. Хотя могу ошибаться, только учусь :)
17 января 2013 года в 7:20

Артем: Кстати, да, присоединяюсь к высказанным выше мнениям. Для резюме будет неплохо, да и так вообще — новый опыт.

Но это всё касается зарабатывания денег на планете Земля. А лично мне нравится дизайн такого плана как www.ya.ru и www.lib.ru. :)
17 января 2013 года в 11:28

greg: Это делается чистым HTML5/CSS, или там Javascript меняет страницу в зависимости от размера экрана?
17 января 2013 года в 15:07

Ян Фихтер: У нас это называется «Адаптивный веб-дизайн» или «Реагирующий веб-дизайн». Я уже больше года занимаюсь разработкой таких сайтов (к примеру http://858585.ru) и целиком и полностью поддерживаю каждое сказанное тобой слово. Сегодня важно, чтобы сайт одинаково правильно открывался в любом устройстве пригодном для интернет-серфинга.

По поводу тех сайтов, на которые ты ссылаешься. Дизайн у обоих актуальный и лаконичный. Добротные современные проекты, которые не стыдно показывать людям.

Расскажи какую работу проделал ты для этих сайтов? Делал ли ты верстку/дизайн или только занимался менеджментом?
17 января 2013 года в 16:44
Андрей Герасимов: На самом деле, называть это можно по разному («Responsive» («Отзывчивый») или «Adaptive» («Адаптивный»)). И если вдаваться в теорию, то они немного отличаются друг от друга, но если не придираться к словам — то по сути мы говорим об одном и том же.

Я руководил разработкой сайта scosche.com. К сайту anderssonwise.com не имею никакого отношения — использовал его выше просто как пример по теме, который мне очень нравится.
17 января 2013 года в 22:47

MMY: @greg, смотри media queries. Это все в CSS, JS тут не нужен
17 января 2013 года в 21:38

Йцукен: Меня до сих пор удивляют американские сайты. Страна развитая, а сайты отсталые. Что интернет-магазины, что госсайты — прошлое десятилетие. Даже в РФ стараются адаптировать сайты под все экраны. Ничего же сложного в этом нет. А ещё лучше параллельно с сайтом делать мобильное приложение.
20 января 2013 года в 7:04
Андрей Герасимов: Это очень субъективное мнение.

Во-первых, интернет в Америке стал общедоступным гораздо раньше, чем в России. В то время, когда в Штатах уже смеялись над «дизайном девяностых», в России массового интернета практически не было вообще.

Во-вторых, как сообщает «Pingdom», 43% из миллиона самых популярных сайтов хостятся именно в Штатах. Для сравнения, в России их только 3%. С этой статистикой можно поспорить, так как она лишь показывает количество сайтов, которые хостятся внутри страны, и вовсе не отражает общее количество сайтов в интернете. Но она очень хорошо показывает, что американских сайтов в целом гораздо больше, чем российских. Поэтому в Америке «плохих» сайтов действительно больше, чем в России.
4 февраля 2013 года в 21:52

Артем: Йцукен, что любопытно, Андрей, наоборот, сильно критиковал российские сайты, когда пытался купить страховку для родителей и еще что-то. Типа — неудобные, непонятные.

Наверное, хорошие и плохие сайты есть и там, и там.
21 января 2013 года в 8:13
Андрей Герасимов: Критиковал в свое время (несколько лет назад). В последнее время российскими сайтами практически не пользуюсь, поэтому не могу объективно судить о том, стали ли они лучше.
4 февраля 2013 года в 22:26

Артем: >>Под тем, чего не хватает этому сайту, я имел в виду то, чтобы фотографии занимали всю площадь экрана

А вот скромнее с мониторами быть надо! :)) Шутка.

Но на самом деле, я со своим 19" монитором чувствую себя очень комфортно, при этом фотографии выглядят нормально (ну можно чуть побольше), за исключением старых альбомов. А вот последние фотки во Всячине просто не влезают целиком на экран. Не влезают самую малость.

Если же фотки масштабировать браузером, то будет теряться их качество (причем, заметно на глаз). Фотошоп это делает, всё-таки в разы лучше.

Так что, не всё так однозначно с подстраиванием под абсолютно любые экраны.

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

Под маленькие экранчики, наверное, стоит делать отдельную wap-версию (мнение дилетанта и консерватора, но вот мне так кажется).

Я, как старый еще из ДОС-а вышедший программист, люблю однозначные четко прописанные показатели. Если окно 800x600, то оно 800x600 везде. :) А не так, что вот тут оно вот так растянуто, а вот тут — вот этак. И в итоге люди смотрят как бы на разные сайты. На твоем примере видно, что на мобильном устройстве сайт не похож на другие версии, хотя он вроде как тот же самый.
21 января 2013 года в 8:22
Андрей Герасимов: Фотографии масштабируются браузером на базе медиа-запросов (Media Queries). Каждая фотография может быть сохранена в разных разрешениях, а медиа-запрос будет определять, какую из фотографий показывать определенному браузеру. Другими словами, вовсе не обязательно доверять браузеру фотографию огромного разрешения и надеяться на то, что он также качественно ее уменьшит для мобильных устройств.

WAP-интерфейс умер с десяток лет назад. Все-таки скорость и доступность интернета в развитых и развивающихся странах уже позволяет обходиться без этого убожества.
4 февраля 2013 года в 22:38

Артем: >>А вообще, подход «если экран мобильного устройства такой маленький, что на него что-то не помещается, то и не надо на нем в инете лазить» считаю неправильным.

Так то оно так. Это уже философский вопрос. Пусть лучше мир прогнется под нас, или мы прогнемся под мир. :)

Естественно, если много клиентов с маленькими экранчиками, то на них плевать негоже. Но обычно под них делают отдельную верстку — на wap-версии сайта.
21 января 2013 года в 8:25

Артем: >>Другими словами, вовсе не обязательно доверять браузеру фотографию огромного разрешения и надеяться на то, что он также качественно ее уменьшит для мобильных устройств.

Ну так тогда придется закачивать несколько одинаковых фотографий разного разрешения? И все их хранить?
4 февраля 2013 года в 22:43
Андрей Герасимов: Можно либо закачивать фотографии разного размера (что несложно, так как современные программы можно настроить так, чтобы они создавали сразу несколько размеров, так что вручную делать не придется), либо пользоваться каким-нибудь сервисом вроде «Scene 7». Преимущества и в том, и в другом случаях, очевидны.
10 февраля 2013 года в 22:09

Артем: Понятно, что менять разрешение можно автоматизированно. Я в Photoshop делал типа скриптов.

Но закачивание занимает время (а если фоток 200шт и они большие…). И сами фотки занимают место на хостинге. А эти ресурсы уже могут быть ограниченными.
10 февраля 2013 года в 22:11
Андрей Герасимов: Опять же, Артем, смотря какие цели у сайта. Если мы говорим о каком-то мелком проекте, вроде этого сайта, то задумываться об ограничениях сервера теоретически, конечно, можно. Если же речь идет о каком-то бизнес-сайте или, в особенности, интернет-магазине, то место на сервере — это последнее, о чем ты будешь задумываться. В особенности, если это сопоставить с тем, что большему количеству людей сайт будет удобней.
12 февраля 2013 года в 23:17
Прокомментировать