Устройствонезависимость

Трент Уолтон, автор:

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

Сначала CSS-брикпоинты в @media казались единственным решением для создания добротного сайта. В самом деле — постепенное изменение элементов, как и их взаиморасположение, при переходе от экрана одного размера к другому — это уже шикарно само по себе. Но со временем оказалось, что к окончательному решению надо бы двигаться чуть менее резво. Устройствонезависимость, как подход к проектированию и вёрстке, учитывает не рамки разрешений экранов «от и до», а их бесконечные комбинации. А кроме них — методы ввода, возможности браузеров и скорость интернета.

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

  • 1. Непослушные браузеры.
  • 2. Крошечные экраны.
  • 3. Медленный коннект.
  • 4. Сенсорный ввод.

Посмотрим — что получится.

Непослушные браузеры

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

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

Такова природа вэба, требующая от нас постоянства в вопросе адаптации к ней. Приходишь к выводу о первостепенности доставки контента любому браузеру — всё тем же комбинированием HTML и CSS, но уже стартуя на принципе «mobile-first», с постепенным расширением дизайна до десктопов.

Крошечные экраны

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

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

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

Карен Макгрейн, для «A List Apart»:

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

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

Медленный коннект

Тормозные страницы = досвидания посетители. Разработка сайтов в офисе, оснащённом каналом в 30–100 мбит/с, способна сильно исказить для разработчиков картину реального мира за окном. Джон Мэда трансформировал эту мысль в свой Закон Простоты:

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

С 2010, вэб-страницы потолстели почти вдвое. Остаётся согласиться с Полом Айришем, отмечающим нынешнюю слабость требований к стандартам, одновременно с актуальностью зависимости производительности и скорости от каждой из частей содержимого и дизайна.

Тим Кадлек:

С добавлением чего бы то ни было на страницу, стоит спросить себя — «что ценного принесёт добавка» — и удостовериться в том, что цена не превратилась в мучение.

Похоже на то, что «мучение» Тима сродни «разочарованию от ожидания» Джона.

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

Сенсорный ввод

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

Мы давно живём в мире считывания и тыкания, мы буквально протискиваемся между экранами. Банкоматы, платёжные автоматы, терминалы аэропортов и вокзалов, телевизоры, десктопы под Виндоус-8...

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

Спустя несколько дней после анонсирования Стивом Джобсом Айпада, в примечаниях от Эппл, можно было увидеть пророчество, сегодня ставшее реальностью: «Подготовка дизайна под Айпад обращает внимание на всю значительность появления мультитача для интерактивности. Всё то, что имело отношение к ответным действиям сайта на наведение курсора мыши на элементы с „hover state“, отныне имеет неопределённое будущее и способно стать проблемой для пользователя».


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

Резонный вопрос: так ли существенна разница?

Итан Маркотт по-своему определяет — что лучше и в чём разница:

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

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

Пользуясь термином «device-agnostic» для выделения того или иного сайта с добротным дизайном, на самом деле мы не имеем шансов сказать чего-то нового. Ещё в 2004, Джеф Вин сказал:

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

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

Перевод публикуется с согласия автора.

Поделиться
Логоперс