В веб-дизайне, как и в жизни, самые простые идеи часто оказываются самыми революционными. И ярким примером этого является «сначала мобильные». Придуманный и популяризированный дизайнером продуктов, предпринимателем, писателем и спикером Люком Вроблевски, этот подход за последние несколько лет радикально изменил то, как профессионалы подходят к дизайну веб-сайтов.
Основная идея элегантно проста. Вместо традиционного подхода, заключающегося в том, чтобы начать с «настольной версии» веб-сайта, а затем упростить ее для мобильных устройств, Вроблевски предлагает начать с создания сайтов, которые хорошо работают на портативных устройствах с небольшим экраном, а затем наращивать их.
Мобильный рост
Вроблевски, работавший в Yahoo и eBay и запустивший ряд стартапов, в том числе Bagcheck, выделяет три основные причины, по которым в 2012 году в веб-дизайне важен подход, ориентированный прежде всего на мобильные устройства. попадают в руки людей», — объясняет он. «Каждый день продается около 1,3 миллиона устройств Android и iOS. Когда вы сравните это, скажем, с тем, сколько детей рождается в день (около 371 000), вы понимаете, что это действительно меняет правила игры.
«Дело не только в том, что таких устройств много, — продолжает он. «Дело в том, что люди начинают использовать их для доступа к сети больше, чем их компьютеры. И если вы не думаете об этом, однажды вы проснетесь и останетесь позади.
«До недавнего времени, если мы делали что-то для мобильных устройств, это было задним числом, портом, чем-то вроде отдельной вещи. Но огромное количество пользователей смартфонов означает, что это все больше становится обратным способом работы».
Во-вторых, утверждает Вроблевски, проектирование в первую очередь для мобильных устройств на самом деле приводит к лучшему дизайну «полного сайта». «Мобильный телефон из-за того, что он должен быть портативным, имеет множество ограничений», — объясняет он. «Размер экрана очень маленький. Сетевая активность может исчезнуть в любой момент. Пользователи, как правило, находятся в местах, где у них нет возможности сосредоточиться. В результате нам действительно приходится упрощать, расставлять приоритеты, выбирать действительно важные вещи — и это хорошо для веб-дизайна и для бизнеса в целом».
ТОП-3 ЛУЧШИХ КРЕДИТНЫХ КАРТ ДО 1 МЛН РУБЛЕЙ ДО 365 ДНЕЙ БЕЗ ПРОЦЕНТОВ!
Кредитная карта №1
- Беспроцентный период: 365 дней без процентов
- Кредитный лимит до 500 000 рублей
- Доставка и облуживание карты БЕСПЛАТНО!ПОДРОБНЕЕ >>>
Кредитная карта №2
- Беспроцентный период: до 365 дней без процентов
- Кредитный лимит до 1 000 000 рублей
- Доставка и облуживание карты БЕСПЛАТНО!ПОДРОБНЕЕ >>>
Кредитная карта №3
- Беспроцентный период: до 200 дней без % на всё: покупки, переводы, снятие наличных.
- Кредитный лимит до 1 000 000 рублей
- Доставка и обслуживание карты БЕСПЛАТНО!ПОДРОБНЕЕ>>>
Мобильность в первую очередь заставляет вас разобраться в самой сути того, что заставляет ваш контент работать. «Вы не думаете: «О, давайте добавим еще что-то» — потому что вы просто не можете. Что с самого начала сохраняет все в чистоте и сфокусированности».
И последняя причина для того, чтобы сосредоточиться на мобильных устройствах, заключается в том, что мобильные устройства имеют целый ряд новых возможностей, которых нет на персональных компьютерах. «Смартфоны могут определить вас на расстоянии до 10 м с помощью GPS и до 50 м с помощью Wi-Fi», — говорит Вроблевски. «Они знают, в каком направлении вы смотрите, в каком направлении вы движетесь, как быстро движется ваше устройство, в каком положении оно находится — этот список можно продолжить. И если вы начнете думать о мобильных устройствах, вы сможете в полной мере воспользоваться этими возможностями».
Но если это преимущества mobile first, есть ли недостатки? «Больше всего я слышу, что это действительно большие изменения в процессах и мышлении людей», — отвечает Вроблевски. «Это требует большого переосмысления того, как вы делаете вещи. И требует работы. Так что это было проблемой для многих людей, чтобы поставить себя в такое мышление. Но я также слышал, что когда люди это делают, в их головах загорается лампочка, и они понимают: «Ага, это фантастический способ работы».
Различные устройства
Конечно, термин «мобильный» охватывает огромное количество устройств с доступом в Интернет. Поэтому важно отметить, что под «сначала мобильные» Вроблевски имеет в виду в основном смартфоны, хотя дизайнеры все больше думают и о функциональных телефонах. «Многие мобильные телефоны теперь получают довольно приличные браузеры, — объясняет он. «Поэтому многие люди начинают с простого базового дизайна CSS, HTML и предполагают очень мало возможностей устройства, а затем постепенно улучшают его для устройств, которые могут делать больше. Если вы построите таким образом, вы сможете получить доступ ко многим устройствам, включая старые телефоны с функциональными возможностями».
А как насчет iPad — куда он вписывается? «Планшеты и смартфоны, как правило, объединяются под ярлыком «мобильные», — отвечает Вроблевски. «Но если вы на самом деле посмотрите на исследования, большинство людей используют планшеты по утрам и вечерам, и они обычно используют их на диване, перед телевизором или в спальне. Так что это не очень портативные устройства в смысле мобильности. Они мобильны по дому. Вот почему только шесть процентов подключений планшетов не связаны с мобильной сетью. Остальное все работает через Wi-Fi.
«Итак, что касается «мобильного прежде всего», то телефон — это устройство первого порядка, просто потому, что он всегда с вами, он всегда доступен. Где бы я ни был, я могу что-то сделать на своем телефоне. Это не обязательно верно для моего ноутбука или планшета».
Адаптивный веб-дизайн
Самой большой тенденцией дизайна за последние несколько лет стал адаптивный веб-дизайн, и принцип «сначала мобильные» стал неотъемлемой частью этой методологии. Но с самого начала было не так, вспоминает Вроблевски. «Изначально адаптивный веб-дизайн создавался так: вы начинали с настольной версии, кодировали все, чтобы она выглядела великолепно, а затем адаптировали ее для мобильных устройств», — говорит он. «Но потом люди заметили, что это ничего не делает для оптимизации с точки зрения мобильных устройств. На самом деле это только усугубляло ситуацию, потому что вы отправляли эти гигантские изображения и так далее.
«Поэтому одним из первоначальных ответов на это была идея мобильного подхода к адаптивному веб-дизайну, который, как правило, является методологией, которую люди используют сейчас. Вы начинаете с базовых стилей, а затем наращиваете их. Таким образом, вы даете людям приятный опыт как на мобильных устройствах, так и на устройствах большего размера».
Выход в мейнстрим
На всякий случай, если вы не уверены, мы говорим здесь не только об экспериментальных, передовых разработчиках: философия mobile first определенно стала мейнстримом.
«Этим занимается AOL, — отмечает Вроблевски. «Yahoo сделала это. Google сделал это. Фейсбук сделал это. Почти все крупные интернет-компании на данный момент поставили мобильную связь на первое место в своей стратегической дорожной карте, обычно в пределах 1, 2 или 3 слота «Что мы делаем со всей нашей компанией?».
Стартапы одинаково заинтересованы. «У комбинатора стартапов Y-Combinator недавно был демонстрационный день, и большинство компаний там были первыми мобильными компаниями», — добавляет он. «Итак, вы действительно начинаете видеть, как люди принимают это».
Одной из причин его популярности является то, что результаты настолько очевидны. «Я знаю многих руководителей, которые увидели преимущества мобильных устройств и сказали: нам нужно сделать сайт для ПК более похожим на сайт для мобильных устройств», — говорит Вроблевски.
«Возьмите, к примеру, Kayak (www.kayak.com), один из крупнейших в мире сайтов о путешествиях; недавно технический директор публично заявил, что он нашел опыт бронирования рейсов в их приложении для iPhone намного лучше, поэтому они собираются внести изменения в сайт для настольных компьютеров. И я слышу это снова и снова.
Людям все больше надоедает огромное количество дерьма, с которым им приходится иметь дело на веб-страницах. Люди хотят, чтобы десктопный сайт был таким же простым, как и мобильный. И поэтому они ищут мобильный сайт, потому что считают его более удобным и целенаправленным.
«Когда настольные сайты бросают вам все сразу, это не принимает во внимание то, как люди постепенно начинают учиться», — продолжает Вроблевски. «Мы не ожидали, что зайдем на урок математики, увидим весь учебник по математике на стене и услышим: «Иди разберись». Очень немногие вещи в мире работают так».
Вместо этого урок математики — очень размеренный процесс, и использование веб-сайта должно быть таким же. «Вы начинаете с самого начала, учитесь делать простые вещи, расширяетесь, растете. В конце концов вы становитесь очень искусным. Это святой Грааль простого интерфейса: он должен быть мощным, но он должен позволять вам работать в своем собственном темпе».
Эта статья впервые появилась в номере 229 журнала .net. – самый продаваемый в мире журнал для веб-дизайнеров и разработчиков.