Несколько советов, как легко сделать ваш сайт мобильным.
Одна из первых вакансий фрилансера заключалась в том, чтобы сделать существующий веб-сайт более удобным для мобильных устройств. Я не собираюсь лгать, создание дружественного веб-сайта - это просто игра с CSS и точками останова. Это непросто, и иногда мне хотелось выбросить компьютер из окна.
Как проверить свою мобильную отзывчивость?
Первое, что следует учитывать при улучшении отзывчивости своего веб-сайта, - это знать, что вам нужно делать. Для этого можно воспользоваться мобильным тестом, разработанным Google.
Я просмотрел несколько сайтов, которые не реагировали на запросы. Это даст вам несколько интересных комментариев, таких как:
- Интерактивные элементы расположены слишком близко друг к другу
- Текст слишком мелкий для чтения
И список продолжается. Даже если Google считает ваш веб-сайт адаптивным, это не означает, что он адаптивен и удобен для пользователя. Я видел ужасные веб-сайты на телефоне, прошедшем проверку Google. Чтобы проверить это, у вас не будет выбора, кроме как просматривать свой веб-сайт на устройствах разного размера.
Если вы не разработчик, вам все равно следует проверить, как ваша страница выглядит на мобильном телефоне. Для этого вы можете использовать этот инструмент. Раньше я работал с предпринимательницей, которая не понимала, почему она теряет клиентов. Выверните одну из ее страниц, которая не отвечала на запросы, чтобы нельзя было закрыть всплывающее окно. Клиент застрял на этой странице. На какой странице? первый!
Если вы разработчик и вам нужно проверить много страниц, вы можете использовать Sizzy, чтобы проверить их все сразу! В нем уже настроено несколько устройств, но вы можете добавить столько, сколько захотите. В Sizzy мне нравятся две вещи:
- Вы можете перемещать весь экран одновременно
- Вы можете сделать снимок экрана одним щелчком мыши.
Попробуйте, программа говорит сама за себя.
Я не ограничиваю Sizzy аудитом отзывчивости, я также использую его как инструмент разработки, пока пишу код. Теперь, когда вы знаете, в чем проблемы вашего приложения, давайте разберемся с ними.
Как можно улучшить отзывчивость мобильных устройств?
От общего к деталям
Чтобы сделать ваш сайт отзывчивым, вам придется использовать медиа-запросы, и они полагаются на точки останова.
Точки останова CSS - это точки, в которых контент веб-сайта реагирует в соответствии с шириной устройства, что позволяет вам показать пользователю наилучший макет. ("источник")
Есть много способов использовать точки останова, и вы можете создать столько точек останова. Это не идеально, но вот моя таблица медиа-запросов:
Тогда вам просто нужно импортировать «устройство» в любые файлы, и вы сможете использовать таможенные правила.
Улучшая свою отзывчивость, вы собираетесь много использовать CSS. CSS означает каскадные таблицы стилей, поэтому вы должны работать с той же логикой. Переходит от более общих к наиболее частным деталям. Справедливой отправной точкой для начала является ваш макет. Все ваши страницы должны быть включены в макет. Как только этот макет станет адаптивным, ваша жизнь станет проще. Затем вы должны попытаться сделать все компоненты, которые находятся на нескольких страницах, адаптивными. Например, ваш верхний или нижний колонтитулы.
Еще одним быстрым выигрышем могут стать ваши шрифты. Размер шрифта должен быть установлен глобально во всем приложении, чтобы все абзацы имели одинаковый размер. В таком случае можно быстро изменить их по размеру экрана. Следует помнить, что ваш основной шрифт не должен быть меньше 16 пикселей, иначе он будет слишком мелким.
Переходите от большого к маленькому. Делая сайт адаптивным, я всегда продвигаюсь вверх. То есть я начинаю с небольших устройств, и как только одно полностью готово. Проверяю, как это выглядит на экране побольше. Иногда это может сэкономить ваше время и проблемы.
Теперь нужно сделать 80% работы. Но, как и в случае с принципом Парето, оставшиеся 20% займут 80% вашего времени. Это будут такие мелкие детали, как этот один компонент, который не совсем вписывается в этот другой. Или это крошечное белое пространство. Ну держись!
Сложность для меня всегда - это iPhone 5 и SE. Они меньше, чем все остальные телефоны (320 * 568 точек). Вместе с ними у них по-прежнему значительная доля рынка iPhone. Так что мне всегда приходилось настраивать CSS для этого размера.
Если у вас есть возможность, проверьте свой веб-сайт на реальном устройстве. Да, у меня все еще есть старый iPhone 5 только для этой цели. Ощущения на экране и на устройстве могут отличаться. В конечном итоге вы можете обнаружить небольшую деталь, которую не видели на экране. Например, кнопка недостаточно большая для нажатия.
А как насчет адаптивного дизайна?
Теперь ваш сайт должен хорошо выглядеть на мобильном телефоне или планшете. Но означает ли это, что он удобен для мобильных устройств? Не совсем. Думаю, нужно понять, сколько информации должно быть в каждой версии? Исследование Nielsen Norman Group показало, что гораздо сложнее понять информацию при чтении с экрана мобильного телефона. Итак, да, верно, не все данные, которые есть на вашей компьютерной версии, должны быть на вашей мобильной версии.
Итак, на последнем этапе попробуйте посмотреть, чего может быть слишком много на вашем веб-сайте? Как бы вы могли сделать это проще? Установка цели для каждой страницы должна быть включена и исключена из этой страницы. Это скорее адаптивный дизайн, чем адаптивный. Но небольшая уборка никому не повредит.
