Адаптивный дизайн

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

Согласно теории, адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет. Этот сайт изначально сделан адаптивным — однако сегодня мы в очередной раз осуществили подстройку его адаптивности согласно пожеланиям некоторых пользователей.

В чем суть: адаптивность этого сайта заключается в том, что его центральная (информационная) колонка масштабируется (вместе с частью контента — например, с изображениями) в некоторых пределах, при том, что боковые (служебные) колонки имеют фиксированную ширину. Для тех, кто любит цифры — ширина центральной колонки не может быть меньше 480 пикселов, а общая ширина трех колонок сайта не может быть больше 1380 пикселов (при том, что боковые колонки всегда имеют ширину 280 и 200 пикселов соответственно левая и правая). Но это не всё. Если при складывании сайта оказывается, что на центральную колонку остается меньше 480 пикселов — боковые колонки минимизируются до узкого столбика, сначала правая, а затем, если этого недостаточно — и левая. Их можно в любой момент развернуть кликом на зеленый и синий указатели свертки — но развернутся они уже поверх центральной колонки. Кроме колонок, сворачиваются и вспомогательные элементы дизайна — скажем, горизонтальные меню сворачиваются в вертикальные, а кое-что малополезное и вовсе исчезает.

В результате сайт работает на множестве устройств с разными размерами экрана, а вы можете в широких пределах подстраивать его вид, меняя масштаб изображения на экране (например, клавишами CTRL + плюс и CTRL + минус в браузере).

Так вот, сегодня мы сместили баланс настроек в пользу более крупных шрифтов и большего приоритета центральной колонки. На устройствах с экранами 1280×800 (например, на планшетах) сайт теперь показывается в горизонтальной ориентации со свернутой правой колонкой, а в вертикальной ориентации — со свернутыми обеими боковыми колонками. При этом для большего удобства чтения на планшетах с современными экранами с высокой плотностью точек (всякие «Ретины» и около них) мы рекомендуем ставить в браузерах увеличение 120-150% — текст будет крупнее. В штатном браузере Android 4.4 это делается через меню -> Настройки -> Специальные возможности -> Масштабирование текста.

Надеемся, теперь читать сайт станет удобнее. Если возникнут какие-то проблемы — сообщайте о них прямо тут в комментариях, делайте скриншоты с проблемой и присылайте.

PS. Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом. Хороший дизайнер смотрит на споры о необходимости резины с удивлением. Ясен пень, дизайн должен уметь жить при разных размерах экрана, о чём тут спорить? Сайт — не плакат, а глаза пользователей — не микроскопы.

Люк Вроблевски приводит действительно интересную статистику, «Где люди используют мобильные устройства»:

84% дома
80% в свободное время в течение дня
76% в очередях и в процессе ожидания
69% в процессе шоппинга
64% на работе
62% во время просмотра ТВ-программ (альтернативные исследования дают цифру в 84%)
47% во время подготовки к работе

На наш сайт около 15% посетителей заходят с Андроида, и еще около 7% — c Apple iOS. Мы не забываем об этой мобильной аудитории и хотим сделать сайт более удобным и для них тоже — но, разумеется, не ценой неудобств для пользователей полноразмерных компьютеров. Насколько это получится — зависит и от вас тоже, от вашей обратной связи.

Настоящий материал самостоятельно опубликован в нашем сообществе пользователем Proper на основании действующей редакции Пользовательского Соглашения. Если вы считаете, что такая публикация нарушает ваши авторские и/или смежные права, вам необходимо сообщить об этом администрации сайта на EMAIL abuse@newru.org с указанием адреса (URL) страницы, содержащей спорный материал. Нарушение будет в кратчайшие сроки устранено, виновные наказаны.

комментариев 45

  1. Proper:

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

    Некоторые русские дизайнеры, ссылаясь на западный опыт, зачем-то отказывались от резины. Но нерезиновость западного веба — случайное неприятное следствие его истории, а не осознанный выбор. Отказ же русского дизайнера от резины — очевидный шаг назад, регресс.

  2. Ivan83:

    Samsung s4 mini. Стало хуже, чем было. Центральная колонка теперь не помещается в ширину экрана. Раньше помещалась. Спасибо.

  3. Андрей:

    У мя по ширине 1920 пикселей и масштаб стоит 150%. Раньше страница чётко заполняла экран по ширине, сейчас правая колонка свернулась. Так и было задумано?

    • Proper:

      Да. Если начнете уменьшать масштаб — колонка развернется.

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

  4. FLY_Slim Jr.:

    У меня теперь все ска большое, как в стандарте, мобайл тема отключилась что-ль

  5. Sagamor:

    Смотрю на компе. Удобно. Респект.
    Это всегда! Забит колышек, вокруг него выстраивается изба, вокруг избы деревня.
    Таковы правила развития.

  6. FLY_Slim Jr.:

    Работает только в горизонтальном виде

    • Proper:

      Это как это? Переворачиваете планшет — и нет изображения?

      • FLY_Slim Jr.:

        Нет, с картинками все норм. Но вот на телефоне все работает, нормально, если телефон в горизонтальном положении. В вертикальном, ни шрифт ни масштабирование не помогает
        Не влазит попросту в экран

        • Proper:

          Чортпобери, да какая же у вас ширина экрана-то при вертикальной ориентации? Дайте цифры. Небось, 320 пикселов? А браузер какой?

          • MadMax:

            На Большом Брате появилась скрывающаяся панель справа :) 10 минут назад не было.

            • Proper:

              Дык чтобы появилось — надо CSS перегрузить. По умолчанию браузеры используют старую CSS из кэша.

          • FLY_Slim Jr.:

            Система от ксяоми 720/1280 5″ браузер от ксяоми, андроид 4.2.1, ядро 3.4.5, 320dpi

            • Proper:

              ОК, на смартфоне под Андроидом 4.2 ситуацию удалось воспроизвести. Будем работать над устранением.

              • FLY_Slim Jr.:

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

                • Proper:

                  Я поправил, см.там ниже.

                  • FLY_Slim Jr.:

                    Да, спасибо, теперь масштаб автоматом в любом положени. И все авлазит

  7. McLoud:

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

  8. zu:

    Проклятый ипад4, как обычно все отлично. :-D :-D

  9. Gipsy:

    Huawei P6 экран 4,7″ с Андроидом 4.4.2 на Chrome хорошо читается в горизонтале. Вертикально если ширину колонки подогнать, нужна лупа. Попробую ещё новый старт.

    • Proper:

      Вертикаль порешаем. Вообще, конечно, обеспечение читаемости в вертикальной ориентации на смартфоне — тот еще гемор.

      • FLY_Slim Jr.:

        В горизонтальном не лучше, так как не планшет, не нашёл способа уменьшить поле клавы, она заполняет 2/3 экрана. Не хватает буквально дюйма так сказать

        • MadMax:

          Муха у тебя экран 2 дуйма шоле ? Что за нищебродство ?

          • FLY_Slim Jr.:

            Куда нам в степи до вас эуропэцив

            • MadMax:

              Пиши прямо — до москалей ! Готовь тэнгэ на новый смартфон :)

              • FLY_Slim Jr.:

                А моцкали то причём, они меня нищебродом не называливроде

                • MadMax:

                  А я теперь в москали записался :)

                  • Рич:

                    мы запейсались все в антисемиты —
                    так был решен еврейский наш вопрос©

                    • MadMax:

                      Таки да! Я уже посетил синагогу в Парке Победы.

                  • McLoud:

                    Пздравля. Нас увеличиваетца, мы покажемо провинции

      • Gipsy:

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

      • MadMax:

        5.3 полет нормальный, вертикаль конечно лучше не юзать — мелковато.

        • Proper:

          Вертикаль нужна только чтобы камменты набивать. Но понятно, что лучше на фаблете.

  10. McLoud:

    Да, мой старенький NOK на симбиан — тож все ок!

  11. Gipsy:

    Шефф, усё пропало!©
    Куда делось: «новая статья — предыдущая статья «?
    Жаль, если не будет!
    ——
    Беру обратно, нашёл справа под зелёной кнопкой! Вертикально всё по-старому.

  12. Proper:

    Я перенастроил — вертикальный режим работает. Чтобы перегрузить CSS на стандартном браузере Андроида 4.2, поставьте галочку «Полная версия сайта», посмотрите, а потом можете ее снять.

    У меня нормально показывает на смартфоне с Андроидом 4.2 в вертикальной ориентации при масштабе шрифта 100% в режиме «мелкий» и «обычный». В «крупном», увы, вылазит за пределы экрана — но тут уж ничего не сделать, так браузер работает — чужие сайты резиновые тоже так показываются.

    С масштабом шрифта тоже играйте — там будет зависеть от вашего разрешения экрана и типа браузера.

    • FLY_Slim Jr.:

      Спасибо Глагне, работает. Мой медведь ушёл за водкой, а я пожалуй подкину урана в реактор, а то самогон капать перестал

  13. Woolf:

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

    • Proper:

      Тем не менее именно так БОЛЬШИНСТВО сайтов и сделано — под конкретное разрешение. Любимый некоторым народом BadNews сделан под фиксированную ширину, а Takie.Org — сделан в виде простой резины с изменяющейся шириной средней колонки.

      И даже responsive web design, RWD — на Западе трактуется просто как набор из нескольких фиксированных оформлений под фиксированные разрешения экрана.

      У нас на этом сайте используется комбинированный метод — резина сочетается с брейкпоинтами, в которых сайт меняет layout (сворачивает одну колонку, потом вторую, потом сворачивает меню, потом сбрасывает боковые колонки вниз сайта). Это достаточно замороченная технология, заставить которую работать хорошо везде — не так просто.

  14. Gipsy:

    Спасибо!
    Шрифт на одну ступень увеличил, всё показывает и вмещается, шо вдоль, шо поперёк. Классно! :)