Компания
45,81
рейтинг
13 июня 2013 в 15:05

Дизайн → Общие заблуждения об адаптивном дизайне перевод

Я каждый день просматриваю информацию в Интернете, причем делаю это с разных устройств – это и Macbook Pro, и iMac, и PC, iPad, iPhone и даже мой телевизор. Поэтому меня серьезно раздражают веб-сайты, не оптимизированные под большие экраны или страницы, долго открывающиеся на мобильном устройстве.

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

Адаптивный дизайн нужен только на мобильных устройствах


Да, рынок мобильного Интернета бурно растет, и да, именно он является движущей силой адаптивного дизайна, но в данном вопросе мобильные устройства – это еще не все. С появлением дисплеев retina и браузеров для видеоигр пользователи могут просматривать веб-сайты на экранах с очень высоким разрешением и в совершенно различных условиях.

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

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

Адаптивный дизайн не всегда применим


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

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

Адаптивный дизайн необходим только при смене устройства


Я заметил, что в настоящее время возникает тренд, согласно которому дизайнеры и разработчики создают адаптивные веб-сайты, спроектированные под разрешение экрана конкретных устройств – так до определенного момента поступал и я. Три наиболее часто встречающихся типа устройств, под которые создаются веб-сайты: ноутбуки/ПК, iPad, iPhone (или другие мобильные устройства). Однако нам, как дизайнерам, необходимо понимать, что адаптивный дизайн относится к сохранению целостного вида ресурса при изменении параметров страницы и необходим для того, чтобы контент ресурса был доступен каждому пользователю, а не только пользователю отдельно взятых устройств.

Это значит, что если вы разрабатываете веб-сайты на специальном ПО, важно, чтобы оно предусматривало использование некоторой методики работы с вопросами изменения элементов веб-ресурса. Я бы предложил разработать свою собственную методику. Оптимизируйте визуальные элементы веб-сайта в соответствии с контентом. Лучший способ выяснить, какие изменения будут работать наиболее успешно – нарисовать несколько первоначальных схем веб-страницы, чтобы потом начать работать над внешним видом визуальных объектов в выбранном ПО. Убедитесь, что работаете в рамках единой сетки, как при разработке первоначальной схемы, так и при последующем проектировании.

Лично я проектирую каркас веб-страницы и создаю рабочий прототип. Это здорово облегчает мне процесс работы над адаптивным дизайном, потому что так я могу создать гибкий мокап и добавлять к имеющемуся дизайну элементы, изменяющиеся в при смене параметров веб-страницы, вместо того, чтобы пририсовывать дополнительные пиксели в Photoshop.

Адаптивный дизайн плохо сказывается на типографике


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

Один из приемов, который я люблю применять для поддержания читабельности контента при проектировании адаптивного дизайна – использование относительных элементов, таких как задание размера шрифта в em, подгонка текста, поля и разметка страницы. Адаптивный дизайн строится на отношениях между элементами страницы и, на мой взгляд, ems идеально подходят для этой задачи.

Em– относительная единица размера шрифта, которая масштабируется до размеров шрифта родительских элементов и может сберечь вам много времени и сил, помогая сохранить структуру всей страницы при изменении ее параметров. Вы спросите, что это значит? Это означает, что как только увеличивается или уменьшается базовый размер шрифта, автоматически корректируется и вся разметка страницы.

Например, предположим, что мы нашли два состояния, под которые наш дизайн плохо адаптируется: в первом случае это большой монитор ПК с очень высоким разрешением, во втором – маленький планшет. Предположим также, что наш базовый размер шрифта – 16px, что составляет примерно 1.0em, и в первом случае мы увеличиваем базовый шрифт до 22px под разрешение 3840х2160px (супервысокое разрешение экрана), а во втором – уменьшаем его до 14px под разрешение 800х600px (разрешение для небольших ноутбуков/планшетов). Мы только что серьезно изменили размер шрифта и разметку веб-страницы для двух состояний, при высоком и низком разрешении. Заголовок размером 1.4em при базовом размере шрифта 22px для высокого разрешения означает, что 1.4em равно 30.8px, а в случае, когда базовый шрифт равен 14px, 1.4em для заголовка означает размер шрифта в 19.6px.

Несмотря на то, что для высокого разрешения наш размер шрифта кардинально увеличился, нам не нужно волноваться по поводу сбоев разметки страницы, поскольку она также адаптировалась к новым размерам. Предположим, что элемент, содержащий текст, был шириной 50em. Для разрешения 800x600px это составит 700px, а для разрешения 3840x2160px это составит уже 1100px. Подгонка текста и поля также выровнялись. Для высокого разрешения выставление размера шрифта и разметки страницы в em позволяет вашему дизайну масштабироваться с сохранением пропорций, что делает ваш контент более доступным и читабельным.

Адаптивный дизайн означает сокрытие части контента


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

Несмотря на это, я все еще нахожу несколько случаев, в которых команда display: none оказывается полезной. Большинство случаев ее использования относятся к определенным типам навигации, и я использую display: none для навигационных элементов, которые меняют свою форму на различных устройствах. Решение ограничить или скрыть контент для различных типов устройств нельзя назвать хорошей идеей, поскольку такой выбор, как правило, основывается только на предположениях, и впечатления некоторых пользователей от такого шага могут быть крайне негативными.

Адаптивный дизайн ухудшает производительность


Существует масса современных веб-сайтов, демонстрирующих отсутствие сострадания к пользователям, работающим с низкой скоростью загрузки. Большинство этих сайтов имеют ряд общих черт: крупные изображения, большие библиотеки JavaScript, и многие из таких сайтов можно было бы оптимизировать, если бы они разрабатывались по подходу «mobile first» (принцип «разработка мобильной версии сайта первична»).

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

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

Заключение


Сеть переполнена информацией, и с появлением мобильных телефонов и смартфонов, мы можем получить доступ к ней вне зависимости от места и времени. Важно убедиться, что любой пользователь может получить доступ к вашей странице и найти нужную информацию там, где и когда это нужно. Адаптивный дизайн – техника новая и, на мой взгляд, идеально подходящая для унификации контента в сети.
Автор: @dmitrykabanov Daniel Kling
UIDG
рейтинг 45,81
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (43)

  • –14
    Адаптивный дизайн — зло.
    Как автомобиль-амфибия — и стоит дохрена, и едет плохо, и плавает не лучше.

    Слишком разные задачи стоят перед мобильными и десктопными версиями сайтов, чтобы их можно было хорошо решить одним инструментом.
    • +20
      Как автомобиль-амфибия — и стоит дохрена, и едет плохо, и плавает не лучше.

      То-то рынок смартфонов с камерами не взлетел. Все предпочитают носить зеркалку и бюджетную звонилку.
      • +4
        Не совсем верное сравнение. Правильнее было бы сравнить, например, с телефоном-элекроотверткой.
        • +6
          Телефоном-бритвой тогда уж



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

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

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

          И совсем криминал — это отрезание функционала при адаптации дизайна.
          • +2
            Я, честно говоря, не вижу диких проблем каких-то. Сегодня мобильные браузеры весьма адекватно отображают любой сайт и сами его по ширине подгоняют прекрасно. То есть фиксированный шаблон или нет — плевать. А как зум запретить, я даже не знаю, если честно. Такое вообще можно разве?
            • 0
              Через метатеги.
              <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
              • +4
                И на кой это делать? :-)
                • 0
                  Адаптивный дизайн предполагает, что у пользователя нет нужды зумить страницу.
                  • 0
                    оО
                    Адаптивный дизайн — умеет адаптироваться. Изменение размера страницы — повод адаптироваться. Разве нет?
                    • 0
                      Абсолютно верно, но на это часто забивают и отключают зум. С ним действительно есть некие сложности.
            • 0
              Сегодня мобильные браузеры весьма адекватно отображают любой сайт и сами его по ширине подгоняют прекрасно.
              Подгоняют, только пальцами пользоваться не удобно. Приходится постоянно увеличивать, чтобы нажать на кнопку входа, чекбокс или попасть по полю ввода, уменьшать чтобы прочитать текст с картинками расставленными с обтеканием, дизайн рушится из-за подгонки шрифта.

              А как зум запретить, я даже не знаю, если честно. Такое вообще можно разве?
              <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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

                Да, я, наверное, отвык от таких сайтов, давно не попадались. И для своих я использую готовые движки вроде Joomla — они прекрасно адаптированы иначально, редко приходится что-то зумить.
          • 0
            Ни в коем случае нельзя запрещать системный зум в адаптивном дизайне, чем грешат многие разработчики

            Почему? Если например запрещать зум только на мобильных устройствах, то это как по мне нормальная практика, часто применяемая в браузерках.
            P.S.: У самого зрение 0.2, на телефоне просто выставлен масштаб 150, верстка не ломается.
            • +1
              Потому что это очень раздражает, когда ты лишаешься возможности на своём кучаdpi экране уместить большую статью с картинками.
              У меня отличное зрение, я люблю мелкий текст. Почему меня лишают возможности ресайзить контент щипками до необходимого масштаба в адаптивной версии при условии, что полной версией я могу вертеть как душе угодно?

              Единственное где такая практика допустима — это приложения на webview. И то только в том случае, если они не имеют большого количества текста и таблиц данных.
              • +1
                Теперь я вас понял.
                Единственное где такая практика допустима — это приложения на webview. И то только в том случае, если они не имеют большого количества текста и таблиц данных.

                Примерно это я и имел ввиду:)
    • +2
      Советую посмотреть на тот же твиттер бутрастрап. Думаю ваше мнение изменится.
      • +5
        В разработку твиттеровского бутстрапа вложено куча труда и времени. Попробуйте сделать с нуля полностью адаптивным любой более-менее серьезный сайт. Вы обязательно столкнетесь с существенным повышением стоимости разработки. Я полностью согласен с мнением Людвига Быстроновского, что гораздо проще сделать резиновую верстку.
        • 0
          Так нечего велосипеды изобретать!
        • +7
          По моему мнению, в студии Лебедева работают прекрасные иллюстраторы, графические дизайнеры и шрифтовики. Но в плане веб-дизайна они по-прежнему в уютном 2009 году.
          Повторюсь, это субъективное мнение.
        • +1
          Резиновая верстка — это костыль. Ее поведение непредсказуемо. Если хотите объясню почему.
          • +1
            Объясните, пожалуйста, почему. Использовал и использую в своих проектах. Правда, приходится ставить ограничение для минимального разрешения, чтобы не получать 3 сжатых столбца на небольшом экране смартфона, например, но все же для остальных разрешений именно резина.
            • +2
              Вы сами ответили, почти. Вот несколько вопросов для адепта резины:
              1. Вы представляете внешний вид элементов сайта при произвольном разрешении? На телевизоре, например.
              2. Как вы боретесь с макаронными абзацами текста при больших разрешениях?
              3. Как вы боретесь с белыми тунелями, которые возникают при применении max-width для решения проблемы из пункта 2.
              4. Чисто эстетически, ваш сайт одинаково хорошо выглядит при full hd и на 1024х600? А на 600х1024?
              5. Как резиновая верстка помогает вам адаптировать десктопные контролы для мобильного устройства?
              7. А что с ретиной?
              8. (бонусный вопрос). Насколько получившийся в итоге html/css свободен от костылей и читаем?
              • +2
                1. Можно использовать svg-изображения или использовать специальные шрифты.
                2. Очень легко — для текста задается максимальный размер контейнера, равный, например 800 пикселям (пример). Ведь резиновая верстка не означает, что весь текст должен заполнить все 2500 пикселей большого монитора.
                3. А зачем с ними бороться? :) Наоборот не отвлекает ничего от чтения.
                4. Наверно, не одинаково хорошо. Но при этом сайтом можно продолжать пользоваться, причем всего лишь с небольшой потерей удобства.
                5. Очень помогает использование подписей к большинству контролов, чтобы они не были слишком маленькими. Безусловно, нельзя сравнить сайт, сделанный изначально под сенсорные устройства с сайтом для классических элементов управления. Однако, нельзя и сравнивать трудозатраты на создание двух версий сайта.
                7. См. пункт 2.
                8. Не знаю, причем тут резина :)
                • +2
                  1. Можно использовать svg-изображения или использовать специальные шрифты.

                  Вы не поняли вопрос. Я имел в виду, делает ли дизайнер эскизы «резинового» дизайна для всего множества возможных разрешений.

                  3. А зачем с ними бороться? :) Наоборот не отвлекает ничего от чтения.

                  Вот первый попавшийся фейл от студии Повелителя Резины.
                  Ужаснуться

                  Оригинальная идея такова — www.artlebedev.ru/everything/stoloto/site/
                  Что мы видим в реале? Конские расстояние и уродливо растянутые плашки слева. Красиво, да.


                  5. Очень помогает использование подписей к большинству контролов,

                  Не всегда и не везде.

                  Не убедили вы меня.
          • 0
            Хочу.
            • +2
              см. коммент выше
          • 0
            А можно немного критики на вот этом, конкретном, примере www.tour52.ru/?
            Спасибо!
      • 0
        А с чего вы взяли, что я его не смотрел?
        • 0
          Ну видать давно смотрели однако. Или не внимательно.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Особенно беда, когда видишь запись вида font-size: 11.5px :) Но с автором статьи не совсем согласен. Пихать адаптивные дизайны во все сайты — очень глупая затея. Есть такие, где просто напросто нет такого количества информации, которую можно «растянуть» на ширину экрана. Поэтому каждый проект нужно воспринимать как проект, «удобный» для пользователя. А уже адаптивный он или нет — это должно решаться в процессе продумывания удобства использования, а не «так надо и всё». Мозги иметь надо. А Адаптив — не более чем тренд.
        • 0
          Адаптивность это не растягивание контента на всю ширину экрана, а нормальное отображение на разных экранах. Нечего показывать на большом мониторе — не растягивайте за определенные пределы или увеличте элементы (смотря что за дизайн).

          Резиновый лебедевский дизайн это имхо частный случай адаптивности для мониторов 1024*768 и 1280*1024 и все, что между. Избавление от лишних колонок на маленьких дисплеях или даже просто нормально выглядящий (без зума) сайт на разных девайсах — вот признак адаптивности. И это нужно делать всегда в современном мире.
      • +4
        А я вот не пойму почему это плохо? Можете разъяснить?
        • 0
          А это есть такой культ современности — всё в относительных (EM) величинах указывать. То есть — задаём базовое значение шрифта body {font-size:14px}, а все прочие величины указываем относительными — больше или меньше, в зависимости от ситуации. Тогда, если потребуется сделать увеличенный шрифт по всему сайту целиком, то достаточно будет увеличить значение размера для body и всё.

          Только вот опять же — не более, чем тренд. Хотя в случае использования screen media для переопределения стилей под мобильные устройства — да, это удобно. Меняем одно значение и всё выглядит аккуратно и красиво. Но с другой стороны — хотите нормальную мобильную версию — делайте отдельный поддомен для мобильной версии.

          Потому что с тем же бутстрепом — подгружается страница целиком, подгружаются большие файлы стилей, а потом ещё и «костыли» для переопределения стилей. В итоге — дофига тяжелая страница, которая прилично грузится с мобильника. Проще сделать отдельно мобильную тему и вывести только то, что там реально нужно.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Ну тогда бы хоть поясняли, что имеется ввиду :) А то «пиксели — зло» :) Как приговор :)
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                С масштабированием все эти «дюймы и сантиметры» точно также потеряли смысл.
                • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Последнее время часто заглядываю в исходники сайтов, которые мне попадаются на глаза и чем-то нравятся. Так вот ооочень часто я там вижу px вместо пресловутого em. А почему? Думаю, что все дело в том, что правильные браузеры уже давно научились адекватно изменять масштаб страницы и никто не лезет в настройки изменять размер шрифта.
  • 0
    Простите-извините, но вот как-то так, на самом деле-то: frontender.info/adaptive-vs-responsive-terminology/
  • 0
    Поясните несведущему… чем адаптивный от респонсив отличается?
    • НЛО прилетело и опубликовало эту надпись здесь

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

Самое читаемое Дизайн