10 способов адаптации вашего сайта под мобильные устройства

Ваш веб-сайт уже оптимизирован под мобильные устройства? Если еще нет - это не конец света. Современные браузеры содержат такие нововведения, как пинч-зум и автоматическая регулировка размера шрифта.

Если у вас нет времени или денег, чтобы оптимизировать ваш сайт под мобильную среду - вот десять простых вещей, которые вы можете сделать прямо сейчас, чтобы у «мобильных» посетителей сайт выглядел прилично.

1. Установите правильные атрибуты полей форм

Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize:

Ваше имя: <input type=text size=20 autocorrect=off autocapitalize=words>

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “Erwan”, на что-то вроде “Erevan”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “Ken burns” станет “Ken Burns”):

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

И не уходя далеко от темы. Если ваш сайт запрашивает email у пользователя - используйте поле email, чтобы посетителю не приходилось вводить символ @ с клавиатуры мобильного устройства:

Ваш email: <input type=email size=20>

2. Задайте подходящую для мобильных устройств ширину

Откройте ваш сайт в браузере вашего компьютера и уменьшайте ширину окна программы до тех пор, пока не сможете что-либо прочитать в нем.

Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head:

<meta name=viewport content="width=700">

В следующий раз, когда ваш сайт будет открыт на мобильном устройстве, будет автоматически установлена указанная вами ширина. Посетителю сайта не придется пользоваться зумом:

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

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

3. Установите ширину картинок в 100%

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

Чтобы этого избежать, установите значение максимальной ширины ваших изображений в 100%. Таким образом, изображения будут автоматически менять размер в случаях, когда они окажутся слишком велики для экрана мобильного устройства. Добавьте код, приведенный ниже, в CSS-стили вашего сайта:

img {   max-width: 100% }

Если вы используете изображения в качестве фона не с помощью тега img, просто установите CSS свойство background-size в значение contain. Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:

.header {   background: url(header.png) 50% no-repeat;   background-size: contain }

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

Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta. Если это не так - пользователь не сможет пользоваться зумом:

<!-- ТАК ДЕЛАТЬ НЕ СТОИТ! --> <meta name=viewport content="user-scalable=no">

4. Установите ширину полей ввода в 100%

После того, как ширина изображений установлена через свойство max-width, сделайте похожий трюк с полями input. Просто добавьте в файл CSS – файл вашего сайта:

input, textarea {   max-width:100% }

При просмотре сайта с мобильного устройства этот параметр не даст полям input выйти за пределы экрана.

5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм

Чтобы избежать многочисленных нажатий на кнопку подтверждения отправки формы, стоит делать submit неактивным после первого клика по ней.

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

Во время входящего звонка браузер мобильного устройства закроется. И далее ситуация с заблокированной кнопкой подтверждения повторится. Пользователь не сможет отправить уже заполненную форму.

И если вы все-таки решили деактивировать кнопку submit - делайте это на несколько секунд.

6. В длинных строках используйте word-wrap

Иногда бывает необходимо отобразить длинные строки, такие как примеры кода, ссылки, номера банковских счетов. Если ваш сайт окажется узким для того, чтобы целиком показать строку, она может «уехать» за пределы экрана мобильного устройства:

Избегайте этой ситуации с помощью свойства word-wrap. Так будет выполнен перенос, когда строка достигнет края экрана. Пользователь увидит все необходимое без использования прокрутки:

Ваш пароль: <span style="word-wrap:break-word">435143a1b5fc8bb70a3aa9b10f6673a8</span>

7. Будьте осторожны, используя пробелы

Обычной практикой при отображении длинных строк является использование пробелов через каждые пять знаков. Так пользователю будет удобнее запоминать их для ввода в другое приложение.

Однако умный пользователь не будет делать этого вручную. Он воспользуется буфером обмена. Однако в случае с пробелами ему придется их удалить. Насколько удобно и быстро удалять пробелы на мобильном устройстве?

Дабы избежать подобных ситуаций, вместо пробелов между группами символов используйте отступы:

<style> .split m {   padding: 0em 0.5em } </style>  Ваш код: <span class="split"><m>43514</m><m>3a1b5</m><m>fc8bb</m></span>

Как видите, «пробелы» между символами остаются, но с тем отличием, что при копировании-вставке нет нужды что-то удалять. Как минимум, это удобно и экономит время!

8. Преимущества медиа-запросов

Вы можете создать пользовательские стили, которые будут работать только при просмотре сайта с мобильных устройств (или же отображаться в маленьком окне браузера), а на настольном компьютере сработает обычный вариант веб-страницы. Используйте для этого целевые стили внутри медиа-запросов как в примере ниже:

<style> /* regular css */ .tabs {   padding: 10px 2em }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   .tabs {     padding: 3px 1em   } } </style>

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

9. Избегайте fixed позиционирования

Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed. Будьте внимательны.

Когда вы делаете разметку подобным образом, ваш заголовок будет увеличиваться вместе со страницей и, возможно, займет все пространство экрана:

Самое простое решение - не использовать фиксированные позиции элементов для отображения на мобильных устройствах.

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

<style> /* regular css */ #header {   position: fixed }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   #header {     position: static   } } </style>

10. Используйте стандартные шрифты

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

Как правило, объем подобных файлов достаточно велик. На мобильном устройстве этот процесс может занять большое количество времени. В это время на экране мы видим незаполненное пространство вместо текста:

В случае использования Google Font Loader для загрузки шрифтов вы сможете отобразить текст с помощью стандартного шрифта, пока грузится пользовательский. Затем вы генерируете страницу заново, и отображается нужный вам шрифт.

Для этого нужно написать два варианта CSS-правил. Один вариант для использования шрифта по умолчанию, а другой - для применения скачанного шрифта.

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

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script> WebFont.load({   google: {     families: ["Open Sans"]   } }); </script> <style type="text/css"> .header {   font-family: Arial } .wf-opensans-n4-active .header {   font-family: "Open Sans" } </style>

Обратите внимание, что селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader'ом, но только после того, как шрифт загружен.

Заключение

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

Сергей Бензенкоавтор-переводчик статьи «10 Ways to Make Your Website More Mobile Friendly»