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

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

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

Макеты в Sketch

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

2 артборда друг возле друга, один для iPhone, а другой для iPad
В Sketch я настроил 2 артборда друг возле друга, один для iPhone, а другой для iPad, которые также хорошо подойдут и для более высоких разрешений.

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

1-84Bg7BLSSHuoZ6CxM3Pg5g

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

1-UsRvGlh7eERhKhXb5cOnnw

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

респонсив
В большинстве случаев ваш контент смотрится одинаково везде. Никаких изменений не требуется!

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

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

720 пикселей
При ресайзе до 720 пикселей и меньше, заголовок переходит в более крупный размер с комфортными кнопками 60px.
адаптируются под ширину устройства
Размеры, выравнивание, количество пунктов меню и кнопки адаптируются под ширину устройства.
золотая середина пропорций
Если вы знаете свои пропорции, можете найти золотую середину, когда размеры подходят и под мобильные устройства, и под десктоп. Например, заголовки разделов.

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

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

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

1-FIkPWAlCXQeW4_86a4eUwQ

Работа с SVG

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

В Sketch, вы можете экспортировать в SVG.
В Sketch, вы можете экспортировать ваши исходники в SVG. Это очень выручает.

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

1-RFQTD-W8YAQKQgFZwkiqqA

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

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

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

1-lQSnHvmxoDMxKsSgelN8og

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

1-2F0-Ner8nhJxrmxLimoX8w

CSS top position
Для параллакса я задал разную скорость для 3 разных элементов. Я использовал webkit-transform вместо CSS top position. Из-за этого скролл стал гораздо плавнее.

Настройка Viewport

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

1-Xaad_X-dfsSUQlCZl1ewmg

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

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

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

iPhone или iPad
Когда люди заходят на сайт через свой iPhone или iPad, они видят красивый баннер, который перебрасывает их на App Store.

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

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

1-9mp3uhM7_-p3UOyvIVUYlw

Проверка в Safari

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

Тут я могу проверять в браузере Safari на iPhone.
Тут я могу проверять в браузере Safari на iPhone.

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

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

Tools > Inspect Devices
Мне понадобилось время, чтобы освоить опцию в гамбургер меню Tools > Inspect Devices

Заключение

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