Хотя количество веб-сайтов без мобильной оптимизации сокращается, остаются некоторые, предназначенные только для настольных компьютеров. К сожалению, предыдущая веб-служба Google "мобилизатор" больше не поддерживается. Духовным преемником сервиса стал Google Weblight, разработанный для оптимизации медленных подключений, а не для просмотра сайтов с мобильных устройств. Помимо услуг Google, существует ряд методов и инструментов, которые следует учитывать при разработке сайта для мобильных устройств.
Шаги
Часть 1 из 2: эксперименты с Google Weblight
Шаг 1. Проанализируйте, как работает Weblight
Weblight - это алгоритм, созданный Google, чтобы обеспечить пользователям более быструю и легкую загрузку страниц в плохих условиях сети. Это означает, что Weblight не имеет пользовательского интерфейса и работает на сервере. Страницы лишены более сложных элементов, обеспечивая упрощенный и легкий интерфейс, а не явно оптимизированный для мобильной платформы.
Шаг 2. Протестируйте изменения сайта с помощью Weblight
На мобильном устройстве просто добавьте полный URL своего сайта в конец адреса веб-сайта (например, если ваш веб-сайт - «mywebsite.com», введите https://googleweblight.com/?lite_url=https://mywebsite.com). Страница загрузит упрощенную, но функциональную версию самой себя. С удаленными элементами некоторые сайты могут намного лучше отображаться на экранах мобильных устройств.
Шаг 3. Осознайте ограничения
Имейте в виду, что это не явный инструмент конвертера, предназначенный для взаимодействия с пользователем. Хотя ручной ввод веб-сайта может быть использован в крайнем случае, Weblight разработан для скорости, а не для удобства использования.
Часть 2 из 2: разработка для мобильной совместимости
Шаг 1. Помните об ограничениях мобильных устройств
Мобильные устройства имеют несколько общих черт, которые отличают их от настольных. Эти основные функции должны быть основными при создании сайта для мобильного использования.
- Маленькие экраны и вертикальность: хотя разрешение экранов на мобильных устройствах постоянно улучшается, размер и форм-фактор остаются проблемой для дизайна сайта. Дизайн сайта в виде одной колонки лучше всего подходит для телефонов (планшеты часто могут без особых проблем использовать сайты для настольных компьютеров).
- Сенсорные интерфейсы: элементы страницы следует размещать с учетом размера пальца. Элементы, использующие наведение мыши, должны быть минимизированы или переработаны для сенсорного управления (например, раскрывающиеся меню).
- Скорость передачи данных: одним из больших преимуществ мобильных устройств является использование вне диапазона Wi-Fi, но соединения для передачи данных обычно медленнее и менее надежны. Пользовательские интерфейсы (UI) должны оставаться простыми, а контент должен быть видимым и доступным. Слишком много беспорядка замедлит загрузку и затруднит навигацию.
Шаг 2. Воспользуйтесь сервисом системы управления контентом (CMS)
Для тех, кто разрабатывает с меньшими ресурсами, использование службы CMS, такой как Wordpress или Squarespace, является отличным вариантом для недорогого и удобного мобильного дизайна. Темы, использующие адаптивный веб-дизайн, станут самым простым шаблоном для мобильного сайта.
Адаптивный веб-дизайн - это теория веб-дизайна, которая способствует использованию гибких элементов дизайна, чтобы обеспечить плавный переход дизайна и удобства использования между платформами
Шаг 3. Протестируйте экраны мобильных устройств с помощью программного обеспечения для настольных ПК
Существует ряд бесплатных веб-приложений, которые позволяют имитировать мобильные устройства для проверки эстетики и функциональности веб-сайтов. Использовать эти инструменты так же просто, как выбрать желаемое тестовое устройство, а затем перейти на целевой веб-сайт для предварительного просмотра. Большинство из них будет включать инструменты для переменных, таких как ориентация экрана, плотность пикселей или даже выбор браузера. Вот несколько популярных примеров:
- Эмулятор режима устройства Chrome
- mobilephoneemulator.com
- screenfly (подмножество quirktools)
- mobiletest.me (платное членство)
