Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым

    Доброго времени суток!

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


    Fork CMS


    Full view



    Mobile view



    SimpleBits


    Full view



    Mobile view



    White Lotus Aromatics


    Full view



    Mobile view



    1140px CSS Grid


    Full view



    Mobile view



    Atlason


    Full view



    Mobile view



    10K Apart


    Full view



    Mobile view



    Cognition


    Full view



    Mobile view



    Reverse Buro


    Full view



    Mobile view



    Sunday Best


    Full view



    Mobile view



    Dustin Senos


    Full view



    Mobile view



    Clean Air Challenge


    Full view



    Mobile view



    Owltastic


    Full view



    Mobile view



    320 and up


    Full view



    Mobile view



    Yaron Schoen


    Full view



    Mobile view



    Build Guild


    Full view



    Mobile view



    Do Lectures


    Full view



    Mobile view



    Trent Walton


    Full view



    Mobile view



    Food Sense


    Full view



    Mobile view



    Sparkbox


    Full view



    Mobile view



    ribot


    Full view



    Mobile view



    Sweet Hat Club


    Full view



    Mobile view



    A Different Design


    Full view



    Mobile view



    Teixido


    Full view



    Mobile view



    Sasquatch Music Festival


    Full view



    Mobile view



    Electric Pulp


    Full view



    Mobile view



    Stephen Caver


    Full view



    Mobile view



    Social Marketer's Summit


    Full view



    Mobile view



    Sleepstreet


    Full view



    Mobile view



    Porcupine


    Full view



    Mobile view



    Interim


    Full view



    Mobile view



    Tileables


    Full view



    Mobile view



    CalebAcuity


    Full view



    Mobile view



    Simon Collision


    Full view



    Mobile view



    Spigot Design


    Full view



    Mobile view



    Forefathers Group


    Full view



    Mobile view



    Deren Keskin


    Full view



    Mobile view



    Robot… Or Not?


    Full view



    Mobile view



    Arrcamp Conference


    Full view



    Mobile view



    Thirst Studios


    Full view



    Mobile view



    Visua Design


    Full view



    Mobile view



    Made by Splendid


    Full view



    Mobile view



    Five Simple Steps


    Full view



    Mobile view



    Ryan O'Rourke


    Full view



    Mobile view



    dConstruct 2011


    Full view



    Mobile view



    Diablo Media


    Full view



    Mobile view



    Asbury Agile Web Conference


    Full view



    Mobile view



    Также хочу поделиться с вами несколькими ссылочками по данной теме:

    1. Как сделать один сайт для всех устройств (Responsive Web Design) / Хабрахабр
    2. Responsive Web Design Book / A Book Apart
    3. Неплохой русскоязычный блог по Responsive Web Design
    4. Responsive Web Design / A List Apart
    5. Responsive Web Design: What It Is and How To Use It / Smashing Magazine


    До скорых встреч!
    Поделиться публикацией

    Комментарии 71

      +5
      Вот тут mediaqueri.es/ можно найти очень много интересных примеров адаптивного дизайна.
        +1
        Да, вы правы. Вот, собственно, топик автора сего чуда.
          +1
          Хорошее направление. Зачастую, перед автором проекта встает вопрос — использовать адаптивный дизайн/ отдельный шаблон или мобильное приложение. Если не требуется получения доступа к функциям телефона, то плюсы такого подхода будут очевидны.
            0
            Да, вы правы. С одной стороны, если речь идёт о вашем собственном проекте, то лично я бы выбрал именно этот подход. А заказчикам до сих пор нужна совместимость со старыми IE. Ну вы меня поняли…
              0
              Для старых IE существуют JS костыли. Сейчас нету никаких проблем для внедрения резины. Разве что надо пинать дизайнеров что бы они рисовали макеты под разное разрешение, что дороже.
                0
                Я и не спорю. С приходом CSS3 рисовать ручками приходится всё меньше и меньше. За исключением логотипов и прочего… Хотя в последнее время даже их отрисовывают с помощью CSS3. Единичные случаи, но кто знает.
              0
              Не очевидны — зависят от контента и сценариев использования сайта. Для крупных сайтов отдельный шаблон часто может быть более подходящим решением.

              К примеру, мобильный пользователь с большей вероятностью будет заходить на сайт чтобы быстро узнать номер телефона или карту проезда в офис, а не полистать портфолио или почитать объёмные тексты «о компании». Поэтому не всегда правильно, как ниже в комментах отметили, грузить весь контент с красивостями и мегабайтами картинок.
                +1
                Вы приводите какой-то частный пример в данном случае. Например, чем www.bostonglobe.com/ не крупный сайт, или сайт того же Барака, извините, Обамы?
                Что касается плюсов:
                — отображение на всех устройствах (единый стиль, все плюшки)
                — доступен для всех пользователей
                — не надо ничего скачивать
                — удобно с точки зрения SEO
                — легко обновлять
                — не надо возиться со всякими сторами
                — легко выводить рекламный блок в удобном формате
                Минусы:
                — низкая персонализация
                — проблемы при наличии тяжелой графики
                — доступ к функциям телефона
                  +2
                  Я так и сказал. Есть частные примеры, в которых отдельный мобильный сайт предпочтительнее адаптивного (а приложения это вообще другая тема).
              0
              Можно к линкам добавить подборку полезных инструмента для создания адаптивных сайтов
              0
              А вот еще две [1,2] отличные подборки.
              0
              можно конечно воспользоваться гуглом, а можно было и ссылки для каждого примера сразу привести
                +1
                Ссылки есть при нажатии на скрины. А посмотреть работу адаптивного дизайна, можно просто потаскав за угол окно браузера :)
                  –13
                  Потаскайте кота за я#ца называется. Извините, ради бога, не удержался. :)
                    –1
                    О.О Вот тут говорят о качественном дизайне, а сами допускают одну из основных ошибок — при клике на картинку человек переходит на ее полный размер. Я вот тоже пока не прочел Ваш камент не понял что пример идет по клику на картинку, все на заголовки мышку наводил в надежде что она подчеркнется и в палец превратится.
                      0
                      Так можно же было посмотреть куда изображение ведёт, не? :)
                        0
                        Естественно можно, но вот сререотипы не откинуть, если я думаю что картинка при клике ведет на увеличеную версию, а она мне естественно не нужна, то я и не буду даже смотреть куда она ведет.
                    0
                    Извините, не совсем вас понял. Если вы о самих сайтах, то все изображения кликабельны.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      +1
                      Можете почитать вот это — тут прекрасно всё изложено. Если же хотите более подробный материал, то вот.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        +2
                        Собственно, когда будет свободное время, собираюсь написать топик «о внедрении для самых маленьких».
                          +1
                          Буду рад познать истину :)
                            +2
                            Хорошо, постараюсь побыстрее написать… Хотя в ближайшую неделю не обещаю. Работы много + интервью с Джефри провожу. Почитайте материал по ссылочкам пока.
                        +1
                        Еще по теме в Советах у Горбунова.
                          +12
                          Предлагаю все же называть такую верстку «адаптивной», а не «резиновой». Та верстка, что называется резиновой, основана на других приемах и техниках, хотя и свободно комбинируемых. Их следует разделять хотя бы чтобы не путаться и не вводить в заблуждение других.
                            0
                            очень верно подмечено. Тут уже в комментах все спутали.
                            0
                            Есть очень интересные решения, но часть всё же обладает дизайном, который «резиновым» сложно назвать — макетная сетка не на десктопах имеет фиксированную ширину и не адаптируется при её увеличении. Полноценные «резиновые» же решения хороши при масштабировании доступного пространства в обе стороны.
                              +1
                              А знаете что плохого в таких дизайнах? Для мобильной версии грузится тонна ненужного хлама, это хорошо когда сидишь в кафешке с бесплатным вайфаем, но вот что делать если ты зашел вдруг по дороге на работу с очень даже платным 3G или еще более платным GPRS?
                                0
                                Нет предела совершенству… Конечно, гораздо удобнее, когда существует специальная легкая мобильная версия. Но когда выбор стоит между обычным дизайном и адаптирующимся под мобильные устройства, все-таки предпочтение будет отдано второму варианту.
                                  +2
                                  Давайте тогда зайдем с другой стороны, берем 5 первых сайтов:

                                  1) www.fork-cms.com/ (26 559 + 12 423 432 байт)
                                  2) simplebits.com/ (35 646 + 2 683 625 байт)
                                  3) www.whitelotusaromatics.com/ ( 4 342 + 1 196 182 байт)
                                  4) cssgrid.net/ ( 11 129 + 221 212 байт)
                                  5)http://atlason.com/ ( 11 129 + 221 212 байт)

                                  А теперь самое интересное:
                                  Я зашел с телефона на 5 сайт, и как Вы думаете что я там увидел? Слипшиеся и нечитаемые буквы, тоесть мне придется зумить. А если был бы нормальный мобильный шаблон, то не пришлось бы. Зумить я могу и обычный сайт (в обратную сторону)
                                  Piccy.info - Free Image Hosting
                                  Лично мне такие шаблоны не нужны, и как пользователю, и как разработчику. И это все при том, что разработка таких шаблонов скорее всего выйдет медленней чем разработка двух отдельных, для большого брата и маленького.
                                    0
                                    у меня получились цифры поменьше, форк — 700кб, симплебитс — 1,8мб, но всё равно впечатляет…
                                      0
                                      форк — 700кб

                                      На самом деле так и есть. Там CSS и JS передаются упакованными gzip, поэтому они укладываются в 700К. Но несжатые файлы огромны.
                                        0
                                        Я просто из хрома сохранил страницу на диск. он же уже распакованное сохраняет.
                                          +1
                                          Да, Вы правы, я перепутал страницы когда размер смотрел =) Но всеравно для мобильных приложений пусть даже 500 кб на страницу это много. Причем из двух цифр что я приводил, первая сам хтмл (который не кешируется) а остальное все догружаемое (картинки, стили, скрпты, опять же не все кешируется). Именно по этому я против таких ухищрений, с первого взгляда это удобно и красиво, тут спору нет, это очень удобно, но лишь для десктопа и бесплатного вай-фая.
                                0
                                Почему, блин, верстальщики (или менеджеры, выдающие им задание) прнебрегают реальной резиновой версткой? 86,45% сайтов ни фига не тянутся даже на 1600 по горизонтали, не говоря о 1920+. В тоже время при масштабе ~300% на этих же разрешениях появляются горизонтальные скроллинги. Хабр — не исключение.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Я стараюсь не пользоваться такими сайтами, если есть выбор. Но зачастую выбора нет из-за слова «сообщество». Даже если я плачу сайту деньги (тут вконтакте вспоминается — регулярно им плачу, но часто идут против моего мнения, но сообщество, но уникальные продукты и т. п. )
                                    +2
                                    Потому что резиновая верстка далеко не всегда так хороша, как многие думают.

                                    1. Неизбежные потери внешнего вида (открыл сейчас главную amazon`а и ухмыльнулся… даже ozon выглядит лучше), плюс двойной-тройной гемморой для дизайнера/верстальщика.
                                    2. Давно заметил, что воспринимать содержимое шириной ~800-1000px гораздо приятнее, чем бегать глазами от одного до другого края «метрового» монитора.
                                    3. От обилия контента заполняющего все свободное пространство, частенько начинает рябить в глазах. Что в сочетании со вторым пунктом может довольно сильно снижать удобство пользования сайтом.

                                    А вот вариант предложенный в топике, видится мне достаточно интересным.
                                      0
                                      2. Лично мне больше нравится «бегать глазами», чем скроллить. Правда это касается относительно больших объёмов информации, типа нормальных постов на хабре.
                                        0
                                        Ну о вкусах не спорят)) Хотя расстояние проходимое глазами обратно пропорционально расстоянию до монитора. Я может и рад бы немного отодвинуться, но зрение не позволяет.
                                    +3
                                    Что показательно, большинство примеров либо сайты веб-студий и\или художников, либо вообще проекты самих фреймворков\гридов. С контентом не доходящим до 50 страниц и, естественно, тщательно вылизанных.

                                    В теории всё хорошо и правильно, но я с содроганием пытаюсь представить что будет, когда очередной контент-манагер воткнет неформатированный текст из ворда, или воткнет парочку лишних тегов, таблиц с фикс. шириной 568px и прочие прелести.

                                    Жизнеспособность в «реальном вебе» имхо весьма ограниченна и по сути геморройность приближается к ведению второго сайта.
                                      0
                                      Ну по идее для типовых интернет магазинов вполне применимо.
                                        0
                                        Идеи адаптивного дизайна — горячая тема в западных дизан-бложиков. публика еще не очень наслышана и ей требуются примеры. Примеры принято показывать прямо на своих сайтах. Резиновая верстка тоже не сразу начала заказываться.
                                        0
                                        Не вижу ни одного рускоязычного сайта, тренд не дошел до нас?
                                          0
                                          Дошел пока только до веб-студий, которые стали предлагать такую услугу. В остальном, хороших примеров пока не видел. Например, сайт студии webmark.com.ua.
                                            +2
                                            Например, wedeal.ru

                                            У нас на подходе несколько проектов с адаптивным дизайном. На основе одного из них планирую написать how-to статью для Хабры по адаптивному дизайну, начиная от проектирования и заканчивая программированием.
                                              0
                                              Не сочтите за труд, напишите в личку, чтобы не пропустить.
                                                0
                                                Да, без проблем :)
                                                  0
                                                  И мне, если можно. :)
                                            +1
                                            Не плохо. Но таки, все же часть (не самая большая, по предварительному просмотру примерно процентов 25) страдает от другого — он не поддерживаю изменение шрифтов со стороны пользователя.

                                            Я вот люблю чтобы минимальный шрифт был больше определенного размера (ну или 150%+ dpi общий), это удобно — особенно когда вывод идет на проектор.

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

                                            Хотя все равно подборка добротная.
                                              0
                                              В очередной раз сошлюсь на сайт bostonglobe, как один из моих любимых примеров. У них справа вверху есть переключатель размера шрифта реализованный на css. Собственно, все зависит от того, насколько вы сами продумаете шаблон.
                                                0
                                                Не встречал. Можете хоть один пример сайта привести, чтобы не реагировал нормально в Хроме на Ctrl++.
                                                  0
                                                  Ctrl++ меняет маштаб сайта полностью — это то понятно, что все реагируют.
                                                  Я именно о размере шрифтов — Настройки->Дополнительные -> Настроить шрифты -> Минимальный размер шрифта
                                                +7
                                                опять я устал мотать вниз :(
                                                  0
                                                  Извините. Кат предупреждает: «Излишний скроллинг вредит вашему здоровью»… :)
                                                  +1
                                                  Кто-нибудь работал с этой Fork CMS?
                                                    0
                                                    Ну так, просматривал… Если есть вопросы — в личку, или идем демо смотреть… :)
                                                    0
                                                    Как всех пробило то на адаптивный дизайн :))
                                                      0
                                                      И не говорите. Мейнстрим на подходе, видимо.
                                                      +2
                                                      Адаптивный дизайн, это конечно, хорошо. Но мне кажется, перед этим надо решить другие проблемы, а именно: поддержка css2 браузеров и IE6/7 (те, кто говорят про всякие скрипты типа PIE или ie7.js — вы их исходники смотрели? ни один адекватный человек этого монстра на сайт не поставит. Даже начинающему верстальщику понятно, что адаптировать страницы для ИЕ надо не мучая яваскриптом и без того тормозящий браузер, а на стороне сервера). Поддержка отображения с отключенными картинками, CSS и скриптами. Поддержка версии для печати. Поддержка высокого разрешения на айфоне. Поддержка разных шрифтов.

                                                      Когда все это успеть сделать. И покажите мне, какой среднестатистический заказчик согласится оплачивать такую верстку? Сдается мне, мало кто захочет.

                                                      Возьмем обычную кнопку: если верстать на совесть, на годы, она должна тянуться по горизонтали, по вертикали (если пользователь увеличит шрифт), в новых бразуерах работать на градиентах, в старых на 4, 6 или 9 картинках в углах, в Ие еще и на костылях, должна иметь фон и бордер для браузеров с отключенными картинками, должна иметь черно-белую версию для печати. Вы представляете, сколько на это времени уйдет?

                                                      Можно, конечно где-то схитрить, оптимизировать, что-то генерировать скриптами, но все равно, это не быстро.
                                                        0
                                                        Да ну, кнопки как раз запросто делаются на градиентах с подключением PIE ради ИЕ. В результате кнопка тянется во все стороны и идеально выглядит во всех браузерах во всех режимах. Версия для печати верстается от 20 до 40 секунд. С PIE проблемы начинаются только при большой динамичности сайта и при километровых страницах. И я уж лучше пару строк скрипта напишу для перегенерации фона PIE, чем буду убиваться кромсанием 9 картинок и засирать страницу фиктивными элементами.

                                                        Если клиенту нужна клиентская скорость в ИЕ7-8, то пусть платит, тогда покромсаем что угодно. Обычно клиентам на это пофиг, они уже привыкли к тормозам ИЕ.

                                                        А IE7/8/9.js — да, ужас. Совершенно невменяемые тормоза даже на маленьких страницах, плюс вообще никакая поддержка динамически создаваемых и изменяемых элементов. Оно не помогает, оно мешает больше.
                                                          0
                                                          > Обычно клиентам на это пофиг, они уже привыкли к тормозам ИЕ.

                                                          Тормоза там из-за вот такого подхода, принятого в сообществе. Если, к примеру, верстать изначально под ИЕ, а под Хром писать костыли, он будет тормозить не меньше. Это же насколько надо от реальности оторваться и нос задирать, чтобы так относиться к самому распространенному браузеру (хотя в последнее время он не самый распространенный).

                                                          Я недавно верстал страницу (фиксированный фон на всю страницу + скругленные уголки + полупрозрачное скроллящееся окно поверх) — в Хроме прокрутка в разы дерганнее, чем в ИЕ7. Старые добрые картинки лучше работают, чем вся эта новомодная CSS3 хрень. И памяти меньше ИЕ7 ест, и рендерит картинку быстрее.

                                                          Что касается PIE — почему это надо делать на яваскрипте? В чем проблема все эти костыли делать на сервере, не мучая клиента? Авторы просто поленились сделать нормально, 1 строчку в HTML проще вписать, чем нормальный конвертер шаблонов организовать.
                                                            0
                                                            Идиотский вопрос: если всё равно вёрстка изначально под ИЕ на голых картинках, то на кой икс дублировать картинки градиентами? Пусть себе все браузеры картинки отображают. Ну, 10 лишних HTTP-запросов, сервер не сляжет (мы же не про крутые нагруженные сайты говорим?). Зато на клиенте скорость большая, и размер CSS ощутимо уменьшается.

                                                            Хром с ИЕ7 сравнивать в плане памяти — не совсем честно, это разные весовые категории. :) С таким же успехом можно дивиться скорости Windows 98 и говорить: «Вот же писали! Совсем не тормозит!» (Хотя я Хром с его процессом под каждую вкладку не очень-то перевариваю. У меня браузеры падают раз в пару месяцев, а память этот обжора хавает каждый день — не оправдывается «защита от падений». Да, у меня пока 32-битная система.)
                                                        0
                                                        На ум срfзу пришло metro
                                                          0
                                                          Несколько…
                                                            0
                                                            Адаптивный дизайн конечно круто, вот только мне больше нравится идея разных интерфейсов на разных девайсах. Обьясню: даже работая с планшетом 10.1" и субноутбуком 13" у меня разные привычки для серфинга и навигации. Я заметил, на ноутбуке использую вертикальный скролл, а на планшете очень уж нравится горизонтальный скрол, похожий на листание страниц книги или журнала. Тогда удобнее видеть одну сущность за раз (одну статью с блога, один продукт с магазина), когда на ноутбуке удобнее видеть несколько в списоке.
                                                              0
                                                              И так можно сделать.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Для этого ту же Fork CMS можно использовать. Тоже в основе адаптивная вёрстка.
                                                                  0
                                                                  На демо что-то не видно адаптивной верстки.

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

                                                              Самое читаемое