Ваш веб-сайт предлагает оптимизированный мобильный интерфейс при доступе через смартфон или фаблет? Это не конец света, если это не так, поскольку современные браузеры сделали этот опыт более терпимым благодаря таким инновациям, как масштабирование и автоматическая регулировка размера шрифта. Если у вас нет времени или денег, чтобы сделать ваш сайт мобильным, вот десять простых вещей, которые вы можете сделать сегодня, чтобы сделать ваш сайт более удобным для мобильных пользователей.
1. Установите входные атрибуты формы
Если ваш веб-сайт использует поля ввода для autocapitalize имени или адреса пользователя, отключите autocapitalize и включите autocapitalize .
What's your name: <input type=text size=20 autocorrect=off autocapitalize=words>
Если вы этого не сделаете, телефон изменит свое имя (например, «Эрван») на другое (например, «Ереван»), если оно не найдено в словаре. Установка автоматического ввода заглавных букв в words избавит их от необходимости переключать клавишу capslock для каждого последующего имени (например, «Кен Бернс» становится «Кен Бернс»).
Подумайте обо всех неприятностях, которые спасет ваш пользователь.
Пока вы на нем, если ваш веб-сайт запрашивает электронную почту пользователя, используйте специальное поле ввода email чтобы пользователю отображалась клавиша @ без необходимости переключения на цифровую / символьную клавиатуру.
What's your email: <input type=email size=20>
2. Установите мобильную предпочтительную ширину
Загрузите свой веб-сайт в браузер на рабочем столе и измените размер окна до минимальной ширины, сохраняя при этом доступность для чтения. Это ваш минимальный размер просмотра. Теперь, получите размер этого окна и установите его в качестве предпочтительной ширины области просмотра вашего сайта, добавив этот meta заголовок вашей страницы.
<meta name=viewport content='width=700'>
В следующий раз, когда ваш веб-сайт будет просмотрен на мобильном устройстве, он автоматически покажет ваш веб-сайт такого размера, при этом все лишние места слева и справа от вашего веб-сайта будут удалены, поэтому пользователю не нужно уменьшать или увеличивать в их первый визит.
Этот веб-сайт имеет много свободного места справа.
Этот сайт увеличен в разы.
Если ваш сайт уже построен на основе процентного содержания жидкости и работает со всеми размерами экрана, ваша работа станет еще проще. Просто поэкспериментируйте с шириной, которая делает вид на мобильном устройстве приятным и читабельным, и используйте эту ширину в meta .
3. Установите ширину изображения на 100%
Теперь, когда ваш веб-сайт настроен на предпочтительную ширину, некоторые изображения, естественно, будут слишком широкими. Этого не было раньше, потому что экраны рабочего стола довольно широкие, и большинство изображений помещаются на экран без проблем.
Чтобы исправить это, дайте изображениям максимальную ширину 100%, чтобы они автоматически изменяли размер, если они становятся слишком большими для мобильного устройства. Добавьте это в таблицу стилей CSS вашего сайта.
img { max-width: 100% }
Если ваши изображения установлены как фоновые изображения, а не как теги img , просто установите свойство CSS background-size для включения. Это приведет к изменению размера фонового изображения, когда экран слишком маленький.
.header { background: url(header.png) 50% no-repeat; background-size: contain }
Подождите минуту, не станет ли изображение потерять четкость при уменьшении? Нет, если вы используете современное мобильное устройство. Когда пользователь увеличивает масштаб изображения, браузер возвращает ясность при увеличении. Однако убедитесь, что на вашем сайте не установлено свойство user-scalable=no в meta . Если это так, пользователь не сможет увеличивать и уменьшать масштаб.
<!-- DON'T DO THIS! --> <meta name=viewport content='user-scalable=no'>
4. Установите ширину ввода на 100%
После того, как вы дадите вашим изображениям max-width , выполните аналогичный трюк в полях input . Просто добавьте это в таблицу стилей CSS вашего сайта.
input, textarea { max-width:100% }
Когда ваш веб-сайт просматривается на мобильном устройстве с установленной предпочтительной шириной, поля input не будут выходить за пределы экрана.
5. Будьте внимательны при отключении кнопок отправки
Отключает ли ваш веб-сайт кнопки submit формы после первого щелчка, чтобы предотвратить многократную отправку? Если это так, не делайте этого (если это абсолютно необходимо)!
В отличие от настольных компьютеров, мобильные устройства испытывают частые сбои в работе сети. Если вы отключите кнопку, пользователь не сможет нажать еще раз, чтобы повторно отправить. Я говорю не только о перебоях в сети из-за плохих сигналов или коммутации вышек. Если пользователь получает телефонный звонок при отправке формы, мобильный браузер закрывается, чтобы показать экран вызывающего абонента, и браузер может не иметь возможности восстановиться после этого прерывания при повторном открытии.
Если вам необходимо отключить кнопку submit , отключите ее только на несколько секунд.
6. Используйте word-wrap с длинными строками
Иногда необходимо отобразить длинные строки, такие как ссылочные коды, номера банковских счетов или даже URL-адреса. Если ваш веб-сайт слишком узок, чтобы отображать полное число на мобильном устройстве, он может простираться за край экрана.
Чтобы исправить это, просто оберните любые длинные строки в стиле word-wrap . Теперь текст переходит на следующую строку, когда достигает края, что позволяет пользователю видеть весь текст без необходимости прокручивать его.
Your passcode is: <span style='word-wrap:break-word'>435143a1b5fc8bb70a3aa9b10f6673a8</span>
7. Используйте дополнительные пробелы осторожно
При показе пользователям длинных цепочек цифр распространенным методом является разделение их на 5 буквенных групп с пробелом между ними (например, 43514 3a1b5), чтобы пользователи могли запомнить пять цифр за раз, набирая их в другом приложении. Для умного пользователя они просто копируют и вставляют всю строку, а затем удаляют пробелы.
На настольном компьютере удаление пробелов в тривиальном вопросе. Но на мобильном устройстве это занимает гораздо больше времени. Чтобы исправить это, вместо того, чтобы отображать пробелы между пятибуквенными группами, просто оберните пятибуквенные группы в элемент с некоторым отступом между ними.
<style> .split m { padding: 0em 0.5em } </style> Your passcode is: <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 позиционирования
Если на вашем веб-сайте есть фиксированный заголовок или боковая панель с fixed свойством CSS- position , имейте в виду, что когда пользователь увеличивает ваш веб-сайт, ваш заголовок также будет увеличиваться и потенциально затенять весь экран.
Самым простым решением является отключение фиксированной позиции при просмотре вашего сайта на мобильном устройстве. Вы можете сделать это с помощью метода медиа-запроса из предыдущего совета.
<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 , который динамически добавляется на веб-сайт загрузчиком шрифтов после завершения загрузки шрифта.
Вывод
Десять вещей, описанных в этой статье, предназначены для небольших изменений, которые вы можете внести в свой существующий веб-сайт. Это будет означать, что пользователям не нужно расстраиваться, пытаясь взаимодействовать с вашим сайтом с помощью небольшого экрана и клавиатуры. Я призываю вас реализовать их на своем веб-сайте (ах) сегодня!