В выпуске 324 Tech Times Луис рассказал об адаптивном веб-дизайне, методике, которая позволяет обслуживать различные макеты для различных устройств с использованием медиазапросов CSS3. Техника адаптивного макета привлекла большое внимание веб-разработчиков, потому что она обещает предоставить то, что мы надеялись достичь в течение некоторого времени — создать только одну версию нашего контента и заставить его прекрасно работать на любом устройстве, с которым сталкиваешься. У многих из нас есть клиенты, которым не терпится запрыгнуть в мобильную сеть.
Можем ли мы просто обслужить весь наш веб-сайт новой упаковкой, удобной для мобильных устройств? Конечно можем. Должны ли мы? Ну … есть нечто большее, чем просто да или нет.
Как мобильные пользователи просматривают Интернет?
Как гики, мы хотели бы быть в курсе всех сочных подробностей о различных мобильных и портативных платформах — движках рендеринга браузеров, родном разрешении, поддержке плагинов, о том, позволяет ли это геолокация и так далее. Мобильные устройства становятся все лучше и лучше — вместо маленьких медленных флип-телефонов мы теперь наслаждаемся большими красочными экранами и забавными, интуитивно понятными интерфейсами с сенсорным экраном. IPhone и iPad получают львиную долю прессы и внимания, особенно среди веб-разработчиков, но существует огромное количество мобильных устройств, и все они должны быть рассмотрены.
Тем не менее, есть одна вещь, которую объединяет каждое мобильное устройство. Посмотрите на этих людей и посмотрите, сможете ли вы понять, о чем я думаю:
Это верно — это контекст, в котором он используется. Никто из этих людей не сидит за столом; они все вокруг. Это звучит очевидным (и, конечно, очевидным), но иногда все же теряется в дискуссиях о изящных хитростях CSS3 или о том, справится ли Apple когда-нибудь с анти-Flash.
Люди, просматривающие ваш сайт на настольном компьютере, конечно, могут себе позволить большой экран, настоящую клавиатуру и мышь, но они также выигрывают, уделяя больше времени и внимания. Они часто бывают дома или в хорошем тихом офисе; они обычно имеют стабильное интернет-соединение; они реже отвлекаются на происходящее вокруг.
Для сравнения, люди, использующие мобильное устройство, часто спешат. Они куда-то едут и хотят знать, какая автобусная остановка находится ближе всего; они ждут друга в кафе и хотят быстро проверить заголовки новостей; они в пабе, и они хотят устроить дискуссию, в каком году Дайан Китон выиграла этот Оскар.
Более того, люди, которые находятся в движении, обычно все еще подвержены более медленным интернет-соединениям. Доступность мобильной широкополосной связи постоянно улучшается, но перегрузка сети и уровень сигнала могут по-прежнему влиять на скорость даже в самых хорошо покрытых областях. Популярные общественные сети WiFi могут страдать от тех же проблем. И даже когда эти сети ведут себя наилучшим образом, потребление большего количества мобильных данных, чем позволяет ваш тарифный план, может серьезно наказать ваш модный карман.
Таким образом, хотя адаптивный дизайн может помочь появлению вашего сайта на некоторых мобильных устройствах, это все еще только часть головоломки. В некоторых случаях лучшим способом обслуживания ваших мобильных посетителей может быть создание отдельного сайта, удобного для мобильных устройств, который устраняет ненужные отвлекающие факторы, ставит контент, ориентированный на мобильные устройства, на передний план и избегает значительных расходов на пропускную способность. Для этого вам понадобится больше, чем несколько медиа-запросов.
Как мобильные пользователи просматривают ваш сайт?
Если вы работаете над существующим сайтом, есть вероятность, что мобильные пользователи уже посещают его в массовом порядке, и это число будет только увеличиваться со временем. Используйте ваш любимый пакет статистики, чтобы увидеть, какие страницы и функции вашего сайта пользуются популярностью среди мобильных пользователей. Скорее всего, вы увидите, что проблема контекста отражена в их шаблонах использования — например, если вы работаете на сайте объекта, контактные данные, часы работы и направления будут наиболее популярны среди этой группы.
Посмотрите также на сайты, похожие на ваши — у них есть мобильная версия своего сайта? Какие функции они включают или исключают из своих мобильных сайтов? Эти сайты успешны? Вам легко перемещаться по этим сайтам на мобильном устройстве? Попробуйте представить эти сайты в поезде, на улице или в любимой водопой; еще лучше, посещайте их, в то время как Вы фактически делаете эти действия. Насколько легко или сложно использовать этот сайт в этом контексте?
Подумайте также о своих любимых мобильных сайтах — отойдите назад и критически посмотрите на них. Что об этих сайтах вы считаете наиболее полезными? Как работает навигация на этом сайте? Чем он отличается от настольной версии? Что было исключено или включено? Ты скучаешь по чему-то, что было пропущено? Вероятно, вы обнаружите, что между этими двумя версиями этих сайтов существует большая разница — от количества элементов на главной странице до расположения навигации, использования изображений и стилей. Вы также можете подобрать интересные идеи для мобильной версии своего сайта — обязательно делайте обильные заметки!
Могут ли медиа-запросы сократить горчицу?
Как только у вас появится представление о том, что принадлежит вашему мобильному сайту, снова посмотрите на настольный. Что бы вам нужно было добавить или удалить? Имеет ли смысл предоставлять настольную версию вашего сайта? Есть ли какие-нибудь крутые приемы, которые вы видели в Интернете, и которые вы хотели бы включить в свой сайт? Самое главное — можете ли вы достичь всего этого просто с умным использованием таблиц стилей?
Ответы на эти и многие другие вопросы помогут вам решить, следует ли полагаться только на мобильные стили или сделать шаг вперед. Тем не менее, мы готовы поспорить с вами, что вы станете на стороне создания нового мобильного опыта чаще, чем нет.
Фотографии: фотографии с лицензией Creative Commons от Эд Фиддона, Моргана Эверетта, Адама Тинворта и камшотов от Flickr.