Скорее всего, вы видели, как 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, поэтому не рекомендуется включать его на свои беспроводные страницы.
- Печенье: Многие сотовые телефоны не поддерживают файлы cookie. айфоны действительно есть поддержка файлов cookie.
- Рамки: Даже если браузер их поддерживает, подумайте о размерах экрана. Фреймы просто не работают на мобильных устройствах - их очень трудно или невозможно прочитать.
- Таблицы: Не используйте таблицы для макета на мобильной странице. И старайтесь избегать таблиц вообще. Они поддерживаются не на всех мобильных телефонах (хотя iPhone и другие смартфоны их поддерживают), и вы можете получить странные результаты.
- Вложенные таблицы: Если вам необходимо использовать таблицу, убедитесь, что она не вложена в другую таблицу. Браузерам настольных компьютеров их сложно поддерживать, и в лучшем случае они замедляют загрузку страницы.
- Абсолютные меры: Другими словами, не указывайте размеры объектов в абсолютных размерах (например, в пикселях, миллиметрах или дюймах). Если вы определяете что-то как ширину 100 пикселей, на одном мобильном устройстве это может быть половина экрана, а на другом - в два раза больше. Относительные размеры (например, em и проценты) работают лучше всего.
- Шрифты: Не думайте, что шрифты вы привыкли иметь доступ к будет доступен на сотовых телефонах.