Mobile First Дизайн

Разработка отзывчивого дизайна под все устройства сразу

Почти 25% онлайн-траффика сейчас является мобильным. Если вы не разработали сайт с адаптивной версткой, вы уже теряете четверть ваших пользователей. Хорошая новость состоит в том, что благодаря инструментам вроде Sketch, Web Inspector и CSS3, разработка не составит больших трудностей — вам просто нужно знать, с чего начать, и как двигаться к результату.

Недавно я создал интерфейсы «mobile first» для Carshare.hk, Ripplechat.io и Canvaspod.io. В этом посте я покажу весь процесс.

Макеты в Sketch

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

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

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

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

Стандарты сенсорного дизайна

Если у вас есть какой-то опыт в дизайне iOS-приложений, то вы уже знакомы с минимальными размерами для типографики (24px+, оптимально для чтения: 32px), кнопок (44px — 88px) и панели навигации (72px — 98px). Эти стандарты также согласуются со стандартами для Android-устройств.

Размеры и пропорции типографики

В некотором смысле, больше значит лучше. Но что еще важнее, пропорции гармонизируют контент. Если основной текст имеет размер 24px, убедитесь, что он хорошо соотносится с остальной частью сайта. Тут нет каких-то жестких правил, но высота строк должна быть от 1.2х до 1.4х размера шрифта. Задайте размеры, плотность и вариации цветов на основе приоритетов. Тут многое исходит от внутреннего чутья и натренированного глаза.

Длина строки должна быть от 45 до 90 символов. Более детально общие правила типографики описаны в этом руководстве.

Работа с SVG

SVG не зависит от разрешения. Этот формат работает одинаково на любом устройстве при любой плотности пикселей.

Они также невероятно просты в использовании — работают точно, как .

SVG-графика будет работать на IE9+, Firefox, Safari и Chrome. Но, если вам обязательно необходимо поддерживать более старые браузеры, вот возможное решение.

Использование WebKit для анимаций

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

Внизу, когда начинается автомобиль, я использовал webkit-transform вместо animate из jQuery. Быстродействие значительно улучшается при такой реализации. Вдобавок, отлично работает на Mobile Safari и Chrome.

Настройка Viewport

Нужно сделать так, чтобы устройства iOS и Android масштабировали дизайн на 0.5, чтобы все красиво работало на ширине экрана 640px. Для iPad мы смасштабируем до 1.

Смарт-баннер iOS

Если у вас iPhone, можете добавить фрагмент кода, который прилинкует верхушку сайта к вашему приложению.

<meta name="apple-itunes-app" content="app-id=myAppId>

Использование симулятора iOS

Если вы выучили Xcode, в вашем арсенале будет крутой инструмент для тестирования сайта на iPhone и iPad.

Проверка в Safari

Если на вашем iPhone включены Developer Tools, iOS Simulator и Safari, вы можете напрямую тестировать элементы HTML/CSS. Это очень полезно для дебаггинга, тестов работоспособности и применения стилей. Больше деталей доступно здесь.

Проверка в Chrome на Android

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

Заключение

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