Я каждый день просматриваю информацию в Интернете, причем делаю это с разных устройств – это и 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
