Как писать веб-страницы для мобильных устройств

Скорее всего, вы видели, как iPhone может переворачивать и расширять веб-страницы. Он может показать вам всю веб-страницу с первого взгляда или увеличить масштаб, чтобы сделать текст, который вас интересует, читабельным. В некотором смысле, поскольку iPhone использует Safari, веб-дизайнерам не нужно делать ничего особенного, чтобы создать веб-страницу, которая будет работать на iPhone. Но вы действительно хотите, чтобы ваша страница просто работала – или выделялась и сияла?

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

Общие рекомендации по созданию сайта для мобильных устройств

  • Тестируйте на любом количестве устройств. Первое, что вы должны сделать, это просмотреть свой сайт на iPhone и как можно больше различных мобильных устройств или эмуляторов. Хотя вы можете использовать эмуляторы для всех ваших испытаний, они на самом деле не дают вам того же ощущения, что и попытка навигации по веб-сайту на маленьком маленьком экране. Вы должны тестировать на реальных устройствах как можно больше.
  • Сделайте ваши страницы изящными. Вы можете написать свои страницы для широкоэкранных браузеров с поддержкой Flash, но убедитесь, что критическая информация видна даже на крошечном мониторе, который не может обрабатывать какие-либо специальные функции (такие как файлы cookie, Ajax, Flash, JavaScript и т. д.). .). Все, что выходит за рамки XHTML Basic, выходит за рамки некоторых мобильных телефонов. В то время как большинство смартфонов могут справиться со всеми этими вещами, другие мобильные устройства не могут.
  • Создайте страницу, относящуюся к беспроводной сети, и упростите ее поиск. Если вы собираетесь создать определенную страницу для своего мобильного телефона и беспроводных пользователей – сделайте ее доступной. Отличный способ – поместить ссылку на беспроводную страницу в самый верх вашего документа, а затем скрыть эту ссылку от не карманных устройств, используя тип переносного носителя. В конце концов, большинство людей заходят на вашу домашнюю страницу, даже на мобильные телефоны – и если ссылки на вашу беспроводную страницу нет, они уходят, если страница слишком сложна в использовании.

Макет веб-страницы для смартфонов

Первое, что вы должны помнить при написании страниц для рынка смартфонов, это то, что вам не нужно вносить какие-либо изменения, если вы этого не хотите. Самое замечательное в большинстве доступных смартфонов заключается в том, что они используют браузеры Webkit (Safari на iOS и Chrome на Android) для отображения веб-страниц, поэтому, если ваша страница выглядит хорошо в Safari или Chrome, она будет отлично смотреться на большинстве смартфонов (чуть меньше). ). Но есть вещи, которые вы можете сделать, чтобы сделать просмотр более приятным:

  • Помните, что экран крошечный. Смартфоны сгущают все эти столбцы в крошечное окно, и это может затруднить их чтение без увеличения. Большинство пользователей привыкли к масштабированию, но это может стать утомительным. Один длинный столбец текста легче читать.
  • Разделите страницы на более мелкие фрагменты. Может быть трудно читать длинные сегменты текста на мобильном телефоне, поэтому размещение их на нескольких страницах облегчает их чтение.

Ссылки и навигация на iPhone

  • Чем короче URL-адреса, тем лучше. Если вы когда-нибудь пытались ввести URL-адрес на сотовом телефоне, вы поймете, что это неприятно (за исключением, возможно, подростков, привыкших отправлять сообщения). много текстовых сообщений). Даже на iPhone очень сложно набирать длинные URL-адреса. Держите их короткими.
  • Но длинный текст ссылки легче нажимать. Когда на странице, где несколько отдельных слов связаны с различными статьями, расположенными рядом друг с другом, может быть очень трудно нажать на нужную статью без увеличения. Многие люди просто сдаются и уходят куда-то еще. Ссылки с 3-5 словами в них легче нажимать на телефон, чем ссылки из 1 слова.
  • Не размещайте навигацию в самой верхней части экрана. Нет ничего более раздражающего, чем пролистывание экранов и экранов ссылок для поиска нужной информации. Если вы посмотрели веб-страницы, предназначенные для мобильных телефонов, вы увидите, что в первую очередь отображаются содержимое и заголовок. Затем, ниже, это навигация.
  • Не бойтесь скрывать свою навигацию. Скрывайте навигационные ссылки с помощью CSS или JavaScript и заставляйте их появляться только тогда, когда пользователь спрашивает, как это может сделать страницу проще для пользователей смартфонов.

Советы по изображениям на смартфонах

  • Изображения должны быть маленькими. Да, Android и iPhone могут увеличивать и уменьшать изображения, но чем они меньше по размеру и времени загрузки, тем счастливее будут ваши клиенты. Оптимизация изображений – это всегда хорошая идея, но для страниц мобильных телефонов это очень важно.
  • Изображения должны загружаться быстро. Изображения занимают много места на веб-страницах при просмотре их с мобильного устройства. И хотя они часто бывают очень приятными и заставляют страницы выглядеть лучше при просмотре в полноэкранном веб-браузере, они часто мешают на мобильном устройстве. Кроме того, когда пользователь смартфона находится в сотовой сети, последнее, что он хочет заплатить, – это загрузка огромных изображений или значков навигации.
  • Не размещайте большие изображения в верхней части страницы. Как и в случае с навигацией, может быть очень утомительно ждать изображение, которое занимает от 3 до 4 снимков экрана для загрузки в самом верху страницы. стр. И это очень часто встречается на веб-страницах. Единственное исключение – если читатель знает, что при нажатии он получит изображение, скажем, в фотогалерее.

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

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

  • Flash . Большинство мобильных телефонов не поддерживают Flash, поэтому не рекомендуется размещать его на своих беспроводных страницах.
  • Файлы cookie . Многие мобильные телефоны не поддерживают файлы cookie. У айфонов есть поддержка cookie.
  • Рамки . Даже если браузер их поддерживает, подумайте о размерах экрана. Кадры просто не работают на мобильных устройствах – их очень трудно или невозможно прочитать.
  • Таблицы . Не используйте таблицы для размещения на странице для мобильных устройств. И старайтесь вообще избегать таблиц. Они не поддерживаются на всех мобильных телефонах (хотя iPhone и другие смартфоны их поддерживают), и вы можете получить странные результаты.
  • Вложенные таблицы . Если вам необходимо использовать таблицу, не вставляйте ее в другую таблицу. Это трудно поддерживать для настольных браузеров, и, в лучшем случае, замедляет загрузку страницы.
  • Абсолютные меры . Другими словами, не определяйте размеры объектов в абсолютных размерах (например, в пикселях, миллиметрах или дюймах). Если вы определяете что-то шириной 100 пикселей, на одном мобильном устройстве это может быть половина экрана, а на другом – в два раза больше ширины. Относительные размеры (например, ems и проценты) работают лучше всего.
  • Шрифты . Не думайте, что любые шрифты, к которым вы привыкли иметь доступ, будут доступны на мобильных телефонах.
Оцените статью
Solutics.ru
Добавить комментарий