Проверить отображение сайта на разных устройствах: Инструменты для анализа отображения сайта на разных устройствах

Статьи по теме:

Локализация дефектов и оформление баг-репортов

В этой статье мы расскажем о том, что делает QA-специалист, когда он находит тот или иной баг. Также рассмотрим, какие бывают дефекты и с чем их «едят».

Основные термины:
Дефект (или баг) — изъян в компоненте или системе, который может привести компонент или систему к невозможности выполнить требуемую функцию. Дефект, обнаруженный во время выполнения, может привести к отказам компонента или системы. Например: невозможно сохранить данные после заполнения анкеты.
Ошибка — действие человека, которое может привести к неправильному результату. Например: ввод букв в поле для ввода даты (должны приниматься только цифры) с последующим сохранением данных.
Отказ (failure) — отклонение компонента или системы от ожидаемого результата, выполнения, эксплуатации. Например: при переходе на следующую страницу анкеты данные предыдущей страницы затираются.  

Классификация багов:  

• Функциональные дефекты — в этом случае приложение функционально работает не так, как задумано. Например:

— не сохраняются изменения данных в профиле; 
— не работает добавление комментария; 
— не работает удаление товара из корзины; 
— не работает поиск. 

• Визуальные дефекты — в этом случае  приложение выглядит не так, как задумано.

— текст вылезает за границы поля; 
— элемент управления сайтом наслаивается на нижестоящий элемент; 
— не отображается картинка. 

• Логические дефекты — в этом случае приложение работает неправильно с точки зрения логики. 

— можно поставить дату рождения «из будущего», а также несуществующие даты — 31 февраля, 32 декабря и т.п.; 
— можно сделать заказ, не указав адрес доставки; 
— логика поиска работает неправильно. 

• Дефекты контента

— орфографические и пунктуационные ошибки; 
— картинка товара не соответствует карточке товара; 
— конвертация валют идет по неправильному курсу (калькулятор считает правильно, но при программировании указан неверный курс). 

• Дефекты удобства использования — в этом случае приложение неудобно в использовании. 

— отсутствие подсветки или уведомления об ошибке при некорректно заполненных полях формы;
— сброс всех данных при ошибке заполнения регистрационной формы; 
— перегруженный интерфейс. 

• Дефекты безопасности — в этом случае могут быть затронуты пользовательские данные, есть риск падения системы и т.п. 

— можно получить логин, пароль в результате использования SQL-инъекций; 
— неограниченное время жизни сессии после авторизации.

Итак, мы рассмотрели типы и виды дефектов. Теперь расскажем о том, как их документировать.  

Документирование ошибок

Отчет об ошибке (Bug Report) — это документ, описывающий ситуацию или последовательность действий, приведшую к некорректной работе объекта тестирования, с указанием причин и ожидаемого результата.

«Следующий этап заключается в документировании ошибок», — могли бы подумать вы, но оказались бы неправы. 

Нельзя просто взять и задокументировать найденный дефект. Прежде всего, важно выполнить локализацию. 

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

Перепроверка дефекта

Нужно проверить себя еще раз: воспроизвести баг снова при тех же условиях. Если ошибка не повторилась при очередном тестировании, то нужно разобраться, точно ли были соблюдены все действия и шаги воспроизведения, приведшие к этому результату. Возможно, дефект появляется только при первоначальной загрузке системы (при первом использовании). Для того, чтобы более точно определить условия воспроизведения ошибки, необходимо эту ошибку локализовать. 

Локализация дефекта

Чтобы локализовать баг, необходимо собрать максимальное количество информации о его воспроизведении:

• Выявить причины возникновения дефекта

Например, не проходит восстановление пароля. Необходимо выявить, откуда приходит запрос на сервер в неверном формате — от backend либо frontend. 

• Проанализировать возможность влияния найденного дефекта на другие области

Например, в одной из форм, которую редко используют, возникает ошибка при нажатии на кнопку «Редактировать». Если в качестве временного варианта решения проблемы скрыть кнопку, это может повлиять на аналогичную форму в другом окне/вкладке, к которой пользователи обращаются чаще. Для качественного анализа необходимо знать, как работает приложение и какие зависимости могут быть между его частями. 

• Отклонение от ожидаемого результата

Нужно проверить, соответствует ли результат тестирования ожидаемому результату. Справиться с этой задачей помогает техническое задание (в частности, требования к продукту), где должна быть задокументирована информация о тестируемом ПО и его функционировании. Пропускать этот шаг при тестировании не следует: если специалист недостаточно опытен, не зная требований, он может ошибаться и неправильно понимать, что относится к багам, а что нет. Внимательное изучение документации позволяет избежать таких ошибок.

• Исследовать окружение

Необходимо воспроизвести баг в разных операционных системах (iOS, Android, Windows и т.д.) и браузерах (Google Chrome, Mozilla, Internet Explorer и др.). При этом нужно проверить требования к продукту, чтобы выяснить, какие системы должны поддерживаться. Некоторые приложения работают только в определенных ОС или браузерах, поэтому проверять другие варианты не нужно. 

• Проверить на разных устройствах

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

• Проверить в разных версиях ПО

Для того, чтобы не запутаться в реализованных задачах, в разработке используют версионность ПО. Иногда тот или иной баг воспроизводится в одной версии продукта, но не воспроизводится в другой. Этот атрибут обязательно необходимо указывать в баг-репорте, чтобы программист понимал, в какой ветке нужно искать проблему.

• Проанализировать ресурсы системы

Возможно, дефект был найден при нехватке внутренней или оперативной памяти устройства. В таком случае баг может воспроизводиться на идентичных устройствах по-разному.
Для того, чтобы оптимизировать сроки тестирования, мы рекомендуем использовать техники тест-дизайна. 

Фиксирование доказательств

Доказательства воспроизведения бага нужно фиксировать при помощи логов, скринов или записи экрана. 

• Логи (лог-файлы или журнал) — это файлы, содержащие системную информацию работы сервера или компьютера, в них хранят информацию об определенных действиях пользователя или программы. Опытному разработчику бывает достаточно посмотреть в логи, чтобы понять, в чем заключается ошибка. Обычно логи прикрепляют к баг-репорту в виде .txt-файла.

Live-логирование – это снятие системных логов в режиме реального времени. Для этого можно использовать следующие программы: Fiddler, Visual Studio для Windows, iTools, Xcode для iOS, Android Debug Monitor, Android Studio для Android и др. 

• Скрин (снимок) экрана. При ошибках  в интерфейсе снимок помогает быстрее разобраться в проблеме. Программ для снятия скриншотов очень много, каждый QA-специалист может использовать те, которые ему наиболее удобны: Jing, ShareX, Lightshot и др. 
• Скринкаст (англ. screen – экран, broadcasting – трансляция) – это запись видеоизображения с экрана компьютера или другого цифрового устройства. Это один из самых эффективных способов поделиться тем, что происходит на экране монитора. Таким способом QA-специалисту легко наглядно показать ошибки в работе любого программного продукта. Сделать запись с экрана помогут незаменимые инструменты любого QA-специалиста: Snagit, Monosnap, Movavi Screen Capture, Jing, Reflector, ADB Shell Screenrecord, AZ Screen Recorder и др. 
• Рекордер действий. Программные средства дают возможность  воспроизвести все записанные движения мышки и действия, производимые на клавиатуре компьютера. Примеры программ – Advanced Key and Mouse Recorder для desktop-платформ.

Оформление баг-репорта

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

Дефект, который не задокументирован – не найден! 

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

Атрибуты баг-репорта:

Баг должен быть описан кратко и ёмко, иметь понятное название. Это поможет разработчику разобраться в сути ошибки и в том, может ли он взять этот случай в работу, если занимается соответствующим разделом системы. Также это позволяет упростить подключение новых специалистов на проект, особенно если разработка ведется много лет подряд, а запоминать баги и отслеживать их в таск-трекере становится все сложнее. Название проекта можно составлять по принципу «Где? Что? Когда?» или «Что? Где? Когда?», в зависимости от внутренних правил команды. 
Например:
Где происходит? — В карточке клиента (в каком разделе системы).
Что именно происходит? —  Не сохраняются данные.
Когда происходит? —  При сохранении изменений.

• Проект (название проекта)
• Компонент приложения

В какой части функциональности тестируемого продукта найден баг.

Версия продукта, ветка разработки, в которой воспроизводится ошибка.

Этот атрибут показывает влияние дефекта на функциональность системы, например:
· Blocker — дефект, блокирующий использование системы.
· Critical — ошибка, которая нарушает основную бизнес-логику работы системы.
· Major —  ошибка, которая нарушает работу определенной функции, но не всей системы.
· Minor — незначительная ошибка, не нарушающая бизнес-логику приложения, например, ошибка пользовательского интерфейса.
· Trivial — малозаметная, неочевидная ошибка. Это может быть опечатка, неправильная иконка и т.п.

Приоритет определяет, насколько срочно нужно исправить ошибку. Обычно выделяют следующие виды приоритетов:

• High — ошибка должна быть исправлена как можно скорее, является критичной для проекта.
• Medium — ошибка должна быть исправлена, но её наличие не является критичным для проекта.
• Low — ошибка должна быть исправлена, но не требует срочного решения.
  

Статус указывает стадию жизненного цикла бага, взят он в работу или уже решен. Примеры: to do, in progress, in testing (on QA), done. В зависимости от особенностей проекта возможны дополнительные статусы (например, аналитика).

• Автор баг-репорта
• На кого назначен

Баг-репорт отправляют тимлиду проекта или разработчику, который будет заниматься исправлением дефекта, в зависимости от принятых в команде договоренностей. 

Где найден баг: операционная система, наименование и версия браузера. 

• Предусловие (если необходимо)
  

Необходимо для описания действий, которые предшествовали воспроизведению бага. Например, клиент авторизован в системе, создана заявка с параметрами ABC и т.д. Баг-репорт может не содержать предусловие, но иногда оно бывает необходимо для того, чтобы проще описать шаги воспроизведения.

• Шаги воспроизведения
  

Один из самых важных атрибутов — описание шагов, которые привели к нахождению бага. Оптимально использовать 5-7 понятных и кратких шагов для описания бага, например:
1. Открыть (…)
2. Кликнуть (…)
3. Ввести в поле А значение N1
4. Ввести в поле B значение N2
5. Кликнуть кнопку «Calculate»

• Фактический результат
  

Что произошло после воспроизведения указанных выше шагов.

• Ожидаемый результат
  

Что должно произойти после воспроизведения шагов тестирования, согласно требованиям.

• Прикрепленный файл
  

Логи, скриншоты, видеозапись экрана — всё, что поможет разработчику понять суть ошибки и исправить ее.
После составления баг-репорта обязательно нужно проверить его, чтобы избежать ошибок или опечаток. 

Локализация и оформление багов — необходимые составляющие работы QA-специалиста с программным продуктом. Приглашаем подробнее ознакомиться с услугами тестирования и обеспечения качества в SimbirSoft.

что это такое, как настроить и как пользоваться

Вебвизор — это бесплатный инструмент Яндекс. Метрики, который помогает анализировать поведение пользователей на страницах сайта. Действия фиксируются сервисом в виде краткого описания и видеофайла, поэтому маркетологи могут наблюдать за активностью посетителей сайта от начала и до конца визита.

Сервис хранит информацию обо всех визитах за последние 14 дней

Основная цель просмотра вебвизора — повышение конверсии страниц. Маркетологи обращаются к сервису, чтобы решить следующие задачи:

• Протестировать элементы дизайна.
• Обнаружить ошибки вёрстки сайта или отдельных страниц.
• Выявить контент страницы, который наиболее интересен аудитории.
• Улучшить юзабилити (удобство пользования сайтом и его элементами).

Возможности вебвизора для маркетолога

Для каждого визита пользователя на сайт Вебвизор записывает несколько персональных характеристик. Все их можно условно разделить на информацию о визите и информацию о поведении пользователя.

Информация о визите каждого посещения состоит из 10 характеристик

Информация о визите. Сервис хранит текстовую информацию о визите всех пользователей за последние 14 дней:

• Дату и время конкретного визита. Помогает проанализировать поведение пользователей в разное время суток.
• Время на сайте. Полезно, чтобы понять, почему продолжительные визиты не приносят конверсий.
• Регион. Например, чтобы выявить различия в поведении пользователей по гео-признаку.
• Операционную систему, браузер и разрешение экрана. Полезно, чтобы обнаружить ошибки отображения контента страниц на разных устройствах.
• Просмотры, или сколько страниц сайта пользователь посетил.
• Страницу входа и страницу выхода. Полезно для многостраничных сайтов.
• Источник трафика или захода. В вебвизоре можно отфильтровать и посмотреть заходы с определенного канала, например по рекламе.
• Метки. Для анализа заходов с рекламных источников при наличии utm-меток.
• Тип устройства. Мобильный телефон, планшет и компьютер (ПК).
• Достигнутые цели. Если в Яндекс.Метрике сайта установлены цели, то Вебвизор покажет, достигнуты ли они в этом визите.

Информация о поведении. Видеозапись посещения показывает действия пользователя на сайте:

• Перемещение курсора мыши. Помогает определить, куда направлен взгляд пользователя на странице, какие элементы сайта он просматривает более тщательно, на что обращает внимание.
• Клики. Вебвизор покажет, если пользователь кликнет в любом месте на сайте.
• Заполнение форм. В сервисе можно увидеть, если пользователь начал заполнять форму, но так и не отправил её. Сервис не записывает пароли и логины посетителей.
• Выделение и копирование текста. Иногда при просмотре сайта пользователь копирует текст или название продукта, вебвизор зафиксирует это действие.
• Перемещение между страницами. Если сайт многостраничный, сервис запишет весь пользовательский путь от страницы входа до закрытия вкладки сайта.

Запись посещения фиксирует поведение и действия пользователя

Как установить вебвизор

Перед установкой вебвизора маркетологу важно запомнить:

• Записи хранятся последние две недели, включая текущий день.
• Данные визитов обновляются с задержкой в 5-10 минут.
• Для корректной работы сервиса сайт должен использовать кодировку UTF-8.

1. Для установки перейдите в Настройки Яндекс. Метрики, вкладка счётчик.

2. Проверьте, чтобы тумблер «Вебвизора, карты скроллинга и аналитики форм» был включен.

3. Теперь перейдите на вкладку «Вебвизор» и установите включенным Вебвизор 2.0. Отличие от версии по умолчанию в том, что в записи фиксируется именно тот контент, который видит пользователь: динамический контент сайта, переключение между вкладками, бездействие на странице, отображение контента на смартфонах.

4. Сохраните изменения и обновите код счётчика на сайте, чтобы изменения вступили в силу.

После того, как все действия завершены, сервис Вебвизор станет доступным. Перейти в него можно из левого меню Яндекс. Метрики.

 

Сервис может отключиться, если не просматривать записи последние 6 месяцев. Для возобновления работы зайдите снова в настройки Метрики и активируйте инструмент.

О технических нюансах установки сервиса, таких как настройка и запрещение записи, читайте в Справке Яндекс. Метрики.

Как пользоваться вебвизором

Анализировать данные визитов эффективнее не по отдельности, а по отфильтрованным сегментам. Например, посетители с мобильных устройств, визиты с контекстной рекламы, группа визитов по количеству просмотров. Все метрики для анализа перечислены в начале статьи.

Сервис «Вебвизор» доступен по ссылке в левом меню Яндекс. Метрики

Чтобы сделать сегментацию по одному или нескольким признакам визита, выберите нужный параметр в таблице записей визитов.

Если необходимого параметра в таблице нет, его можно добавить по кнопке «Настроить столбцы»

Данные можно отфильтровать, нажав на название столбца или выбрав условия показа визитов по кнопке-воронке рядом. Визиты будут отфильтрованы, и можно начинать анализировать и просматривать посещения. Подробнее о просмотре записей визитов читайте в справке.

Разберём несколько задач, которые маркетолог может решить с помощью вебвизора: 

1. Понять, что мешает пользователю совершить целевое действие.

На этапе заполнения форм обратной связи или подписки у пользователя могут возникнуть затруднения: не отображается текст, кнопка не помещается в экран телефона и др. Если обнаружить такие пробелы и исправить их, конверсия сайта увеличится.

Исключаем визиты с достижением целевого действия и выборочно просматриваем посещения

2. Протестировать обновления страницы.

После значимых изменений на сайте, настройте цель на посещение пользователем обновлённой страницы. Фильтрация этой цели в вебвизоре позволит просмотреть визиты и оценить реакцию пользователей на изменения.

3. Выявить проблемы с интерфейсом и контентом.

Если пользователь несколько раз перечитывает текст на странице, чтобы понять суть, или у него возникают трудности при заполнении форм, время его сеанса увеличивается. Поэтому отфильтровав визиты по времени на сайте, можно выявить проблемы в интерфейсе и контент, на котором пользователь задерживается при скролле.

4. Отследить проблемы сайта на разных устройствах, операционных системах и разрешениях.

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

Фильтрацию по устройствам добавьте с помощью кнопки «Настроить столбцы»

Популярные вопросы о вебвизоре

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1) — CSS-LIVE

Перевод статьи Improve Your Debugging Skills with Chrome DevTools с сайта telerik.com для css-live.ru, автор — Питер Милчев

В этой статье мы рассмотрим полезные приёмы и советы по использованию отладчика Chrome, которые помогут легче разобраться с любыми загвоздками в разработке веб-приложений.

Бывали ли у вас неприятности с неверной работой JavaScript? Доводилось ли вам биться с подгонкой стилей элементов на своей странице? Бесит ли вас, когда страницу каждый раз надо тестировать на разных устройствах?

Если ответили «Да» хотя бы на один вопрос, то эта статья для вас. Вот наши полезные приемы и советы, которые помогут вам всё это побороть и повысить вашу продуктивность.

С отладчиком Хроме можно легко на лету менять внешний вид и функциональность AJAX-компонентов Telerik UI для ASP.NET или компонентов других UI-фреймворков вроде виджетов Kendo UI. Большинство советов и приёмов подходят и к другим браузерным отладчикам, и мы рассмотрим их на примере компонента RadGrid из библиотеки Telerik UI для ASP.NET AJAX.

В этой статье:

Обновление: если ищете более продвинутые советы и приёмы, обязательно прочитайте вторую статью из этой серии.

Просмотр сгенерированного HTML-кода элемента

Иногда при использовании готовых элементов и компонентов нужно знать структуру сгенерированного HTML, чтобы разобраться в его устройстве и с помощью минимальной доводки идеально вписать его в свой проект. Это можно сделать, посмотрев HTML в панели «Элементы» в отладчике Chrome.

Посмотреть структура элемента можно несколькими способами:

• Кликнуть правой кнопкой мыши на элемент и выбрать из контекстного меню «Проверить элемент» (Inspect Element). Откроется отладчик Chrome, где будет подсвечен выбранный элемент.
• Кликнуть на кнопку «Проверить элемент» (Ctrl+Shift+C) с иконкой проверки в левом верхнем углу отладчика Chrome и навести мышью на элемент.
• Кликнуть правой кнопкой мыши на элемент, выведенный в консоли, и выбрать «Показать в панели элементов» (Reveal in Elements panel).

Иллюстрация 1. Проверить сгенерированные DOM-элементы

Маленькие хитрости

• Можете на лету редактировать HTML и HTML-атрибуты двойным кликом по атрибуту элемента в панели «Элементы» (Elements) или кликнуть правой кнопкой мыши на элемент, выбрав из контекстного меню пункт «Добавить атрибут» (Add attribute), «Редактировать атрибут» (Edit attribute) или «Редактировать как HTML» (Edit as HTML).
• Можно менять иерархию DOM, выбрав элемент в панели «Элементы», а затем перетащив его в нужное место.

Просмотр примененных стилей

Иногда, чтобы добиться безупречного вида страницы, бывает нужно чуть-чуть подрегулировать CSS-правила вроде отступов или цвета. В панели «Элементы» сбоку есть вкладки «Стили» (Styles) и «Вычислено» (Computed), позволяющие динамически изменять стили, примененные к выбранному элементу в панели «Элементы», и даже находить источник стилевого правила. Это также позволяет легко фильтровать стили, добавлять/удалять классы (вкладка «:cls»), принудительно задавать состояния (вкладка «:hov»), к примеру, наведение, активное состояние и состояние фокуса. Ещё это полезно, если хотите понять, какие стили испортили раскладку, внешний вид элементов и дизайн в целом.

Иллюстрация 2. Смотрите, какие стили применены к DOM-элементам

Маленькие хитрости

• Можете использовать стрелки клавиатуры, чтобы увеличивать/уменьшать числовые значения.
• Можете использовать «пипетку» при установке значения цвета в некоторых свойствах.

Вкладка с вычисленными значениями даёт визуальное представление размера элемента по границам, внешним отступам и внутренним.

Ссылка на элемент управления на стороне клиента

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

Попробуйте сделать вот что:

• Проверьте выводимый HTML-код компонента, опираясь на приобретенный ранее опыт, полученный при проверке сгенерированного HTML компонента RadGrid
• Получите значение атрибута ID элемента, класс которого называется так же, как компонент (то есть)
• Используйте полученное значение ID в качестве параметра для метода $find(). Метод $find() вернёт ссылку на объект компонента на клиенте.

Иллюстрация 3. Ссылка на объект компонента RadGrid

В статье «Ссылка на объект элемента управления на стороне клиента» показаны различные подходы, которые можно использовать прямо в консоли браузера.

Маленькие хитрости

• $telerik.$(".RadGrid")[0].control возвращает ссылку на клиентский объект первого компонента RadGrid на странице. Часть $telerik.$(".RadGrid")[0] возвращает элемент, который мы искали для получения его ID.

Автодополнение IntelliSense для объектов на стороне клиента

Результатом метода $find() будет объект RadGrid, и теперь, получив ссылку на компонент, можно видеть его API с помощью подсказки автодополнения. Чтобы увидеть «IntelliSense», нужно просто присвоить результат переменной.

Маленькие хитрости

• ↑ и ↓ в консоли показывают предыдущую/следующую выполненную команду
• Ctrl+Пробел открывает меню с подсказками
• console.table(objectReference,['index']) в консоли перечисляет все доступные свойства и методы. В Google Chrome можно не писать console., а просто использовать table(objectReference,['index']).

Иллюстрация 4. Показать Api объекта компонента Grid и увидеть подсказки автодополнения

Отладка JavaScript

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

Есть несколько различных подходов для активации отладчика в функции JavaScript:

• Добавить оператор debugger; в объявлении функции. К сожалению, это сложнее со встроенными функциями готовых компонентов, поскольку не всегда есть доступ к исходному коду.
• Вызвать debug(ссылкаНаФункцию) в консоли. Это равносильно добавлению оператора debugger; в первой строке объявления функции.
• Добавить точки останова по номеру строки, которые предлагает отладчик Chrome. Для этого можно перейти к коду в панели «Исходники» (Sources) и кликнуть на номер строки. Левый клик мыши добавит точку останова, а правый позволит установить точку останова по условию (сработает только если данное выражение окажется равно true). Точки останова по условию весьма полезны для отладки циклов.

Иллюстрация 5. Добавление точки останова по номеру строки

Маленькие хитрости

• Ошибки JavaScript записываются в консоль. Отлавливать такие ошибки — всегда хорошее решение, поскольку они могут ухудшить производительность страницы, а то и поломать взаимодействие или функциональность приложения.
• Чтобы увидеть в панели «Исходники» файл с функцией и подсветить строку с её объявлением, можно вывести функцию в консоли и кликнуть по ней левой кнопкой мыши. То же самое получится, если кликнуть правой кнопкой мыши на выведенную функцию и выбрать пункт «Показать определение функции» (Show function definition) из контекстного меню.
• Используйте горячие клавиши F8 (возобновить), F10 (перешагнуть) и F11 (войти) при отладке.
• Кликните правой кнопкой мыши на строчку кода и выберете «Продолжить досюда» (Continue to here) — это всё равно, что вставить точку останова, возобновить отладку и сразу удалить точку останова после её срабатывания
• Кликните правой кнопкой мыши по выражению или выбранному тексту, чтобы вызвать контекстное меню с пунктами «Вычислить в консоли» (Evaluate in console) и «Добавить выбранный текст в отслеживаемые объекты» (Add selected text to watches).
• Нажмите кнопку {}, чтобы отформатировать код в исходном файле.

Эмуляция отображения на мобильном устройстве

Знакомы ли вам мучения с перебором разных устройств ради проверки отображения вашей страницы на мобильном устройстве? Функциональность «Режим устройств» (Device Mode, он же «Мобильный режим») позволяет тестировать отзывчивый дизайн сайта на разных размерах и разрешениях экрана, а также точно имитировать ввод мобильных устройств для событий касания, ориентацию устройств и геолокацию. В придачу он ещё изменяет строку «User-agent», имитируя запрос с мобильного браузера.

Главное здесь то, что всё это легко можно делать в отладчике Chrome, так что применяйте навыки отладки, как к сайту на компьютере. И никаких устройств подключать к компьютеру не понадобится.

Чтобы активировать мобильный режим, можно нажать кнопку «Вкл./выкл. режим устройств». Учтите, что при переключении между режимами может понадобиться обновить страницу.

Иллюстрация 6. Внешний вид браузера в режиме устройств

Маленькие хитрости

• Вы можете выбрать, с какой стороны закрепить инструменты разработчика при эмуляции мобильного устройства в портретном режиме — справа или слева.
• В выпадающем списке над эмулятором есть готовый набор популярных устройств, с помощью которого можно имитировать разные размеры мобильных экранов.

Просмотр сетевых запросов

Иногда нужно проверить параметры запроса к серверу, или посмотреть, что и в каком формате приходит в ответе. Для это используйте панель «Сеть» (Network).

Иллюстрация 7. Просмотр сетевых запросов

Маленькие хитрости

• Включите логирование XHR-запросов в консоли. От этого XHR-запрос в консоли станет заметнее, а с помощью правого клика мыши по результату можно сразу же переключиться на этот запрос на панели «Сеть». Примечание: не ставьте галочку «Скрыть сеть» (Hide network)
• Установите флажок «Отключить кэш» (Disable the cache). Теперь файлы с запросами не будут кэшироваться, что избавит вас от проблем и сэкономит время, если сделанные на сервере изменения не применятся на клиенте. Ещё один способ очистки кэша — обновить страницу с помощью Ctrl+F5 вместо F5.

Можно имитировать медленное соединение, что неплохо эмулирует работу мобильного интернета, выбрав другой пункт в выпадающем списке «Онлайн» (Online) во вкладке «Сеть».

Заключение

Отладчик Chrome — еще один мощный инструмент в арсенале разработчика. В данной статье мы познакомились со множеством полезных приёмов отладки, которые повысят вашу продуктивность и позволят лучше понять поведение ваших веб-приложений и компонентов. Мы научились просматривать, отлаживать их и устранять в них неполадки, а также менять их внешний вид на лету прямо в браузере.

Однако, это лишь малая часть арсенала разработчика. Какие ещё инструменты и приёмы вы используете? Будет здорово, если вы поделитесь секретами из своего собственного репертуара в комментариях ниже.

Читайте нашу следующую статью из этой серии, чтобы узнать еще больше хитростей и приёмов из наших собственных практик разработки.

P.S. Это тоже может быть интересно:

Медиа-запросы | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

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

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

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

Мы запустили службу, которая помогает проверять скорость отклика веб-сайта . — Тест адаптивного веб-сайта. Неважно, используете ли вы WordPress, Joomla, какую-либо другую CMS или даже статический HTML — вы можете проверить, подходит ли ваш сайт для мобильных устройств , чтобы посетители вашего сайта могли легко просматривать ваш сайт на разных мобильных устройствах.

Протестируйте сайт на разных мобильных устройствах

Стоит ли вам тестировать ваш сайт ищет мобильные устройства?

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

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

Что такое задний привод?

RWD — это ярлык из Responsive Web Design . Это набор приемов, которые разработчики используют, чтобы сделать веб-сайт более удобным для мобильных устройств.

Если мы используем смартфон, веб-сайт должен соответствовать его разрешению. То же самое, если мы пользуемся планшетом или другим смартфоном — сайт должен просто хорошо выглядеть.Неважно, доступен ли на рынке новый смартфон с разрешением, которого раньше не было. RWD — это набор общих правил, поэтому нам не о чем беспокоиться. Например, у нас есть правила для устройств с шириной менее 480 пикселей, но не для Samsung Galaxy S8 или iPhone 7.

Как работает мобильный тест?

Мобильный тестовый инструмент — это, конечно, эмулятор, а не реальное устройство. Он имитирует различные разрешения для популярных мобильных устройств .Это может быть очень полезно при веб-разработке.

Взгляните на список эмулируемых устройств:

• Samsung Galaxy Tab 1, 2, 3
• Samsung S6, S7, S7 Edge, LG G3, G4, G5
• iPad 1, 2, 3, 4, mini , Air и Air2
• iPhone 5, 6, 6s и 7
• iPhone 6 Plus и 6s Plus

Под каждым устройством есть ссылки, которые переключают ориентацию с альбомной на книжную и с книжной на альбомную. Таким образом мы можем имитировать ситуацию, когда кто-то просматривает веб-сайт по горизонтали и вертикали.

Адаптивные темы и плагины

Все наши темы и плагины WordPress на 100% готовы для RWD. Подробный список:

• гибкая сетка макета (Bootstrap 3)
• изображения с изменяемым размером
• темы и плагины адаптируются к экрану в зависимости от разрешения
• CSS3 Media Queries
• виджеты могут быть видимыми или скрытыми в зависимости от разрешения устройства
• колодец опора сенсорного экрана

Основные методы RWD

Гибкие изображения

 img {
 максимальная ширина: 100%;
 высота: авто;
}
 

Этот код заставляет изображения на веб-сайте загружаться в полном размере до тех пор, пока разрешение не станет слишком маленьким, а изображения не будут масштабироваться браузером.

Медиа-запросы

Это метод, представленный в CSS3. С помощью медиа-запросов мы можем применять стили только для желаемой ширины или высоты.

 @media screen и (min-width: 767px) {
 .col-1 {
 ширина: 50%;
 плыть налево;
 }
 .col-2 {
 ширина: 50%;
 float: right;
 }
}
 

В приведенном выше примере применяются стили для минимальной ширины 767 пикселей.

 @media screen and (min-width: 767px) and (max-width: 1200px) {
 .col-1 {
 ширина: 50%;
 плыть налево;
 }
 .col-2 {
 ширина: 50%;
 float: right;
 }
}
 

Мы можем изменить min-width на max-width или даже объединить эти значения.

 .desktop {
 дисплей: блок;
}

.mobile {
 дисплей: нет;
}

@media screen и (max-width: 767px) {
 .desktop {
 дисплей: нет;
 }
 .mobile {
 дисплей: блок;
 }
}
 

Также мы можем отображать / скрывать элементы на выбранной ширине экрана.

Вышеупомянутые записи CSS — это всего лишь простые примеры использования RWD. Есть много методов использования CSS и JS, которые помогают создать сайт RWD.

Используйте настройки экрана для создания уникальных впечатлений от просмотра страниц на разных устройствах

Настройки экрана позволяют настроить дизайн для широкоэкранного просмотра, просмотра на рабочем столе, планшете или мобильном устройстве.

По сценарию Карла Джонса
Обновлено больше недели назад

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

Как переключаться между представлениями устройств

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

Где изменить настройки экрана элемента

Функция «Настройки экрана» позволяет применять различные настройки стиля к элементам в зависимости от размеров экрана. После выбора элемента щелкните вкладку Стили на боковой панели редактора. Щелкните значок «Устройства» рядом со стилем, который нужно изменить. Это даст вам возможность применять стили специально для экранов настольных компьютеров, ноутбуков, планшетов или мобильных устройств.

Скрытие и отображение элементов в зависимости от размера экрана

Если вы хотите настроить скрытие элемента на экране определенного размера, можно использовать переключатель Показать в настройке стиля Видимость .Отключение переключателя скроет элемент с выбранным размером экрана.

В приведенном выше примере текст героя был скрыт на мобильном устройстве. Для этого были предприняты следующие шаги:

1. Выберите текстовый элемент

2. Щелкните вкладку Styles на боковой панели

3. Прокрутите вниз до параметра Visibility

4. Щелкните значок Значок Устройства , затем выберите параметр Mobile

5. Отключите значок Показать

6. При предварительном просмотре каждого представления устройства вы теперь увидите, что элемент Текст больше не отображается на мобильных устройствах, но по-прежнему присутствует в других представлениях.

Обзор совместимости экранов | Разработчики Android

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

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

Размеры экрана

Размер экрана — это видимое пространство, отведенное для пользовательского интерфейса вашего приложения. Размер экрана, известный в вашем приложении, не соответствует фактическому размеру устройства. экран — учитывает ориентацию экрана, системные украшения (например, как панель навигации), и изменения конфигурации окна (например, когда пользователь включает многооконный режим).

Гибкие макеты

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

Узнайте больше о гибких макетах.

Альтернативные схемы

Гибкая компоновка очень важна, но вы также должны проектировать разные макеты, которые оптимизируют взаимодействие с пользователем для доступного пространства на разных такие устройства, как телефоны и планшеты.Итак, Android позволяет предоставить альтернативу файлы макета, которые система применяет во время выполнения на основе текущего устройства Размер экрана.

Рисунок 1. Одно и то же приложение использует разную компоновку для разных размеров экрана

Узнайте, как создавать альтернативные макеты.

Растягиваемые изображения

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

Чтобы решить эту проблему, Android поддерживает растровые изображения с девятью патчами, в которых вы указываете небольшие растяжимые области пикселей — остальная часть изображения остается немасштабированной.

Узнайте больше о растровых изображениях с девятью патчами.

Плотность пикселей

Плотность пикселей — это количество пикселей в физической области экрана и обозначается как dpi (точек на дюйм). Это другое от разрешения, которое представляет собой общее количество пикселей на экране.

Рисунок 2. Преувеличение двух устройств одинакового размера, но разная плотность пикселей

Независимость плотности

Ваше приложение достигает «независимости от плотности», когда сохраняет физический размер. (с точки зрения пользователя) вашего дизайна пользовательского интерфейса при отображении на экранах с разная плотность пикселей (как показано на рисунке 2). Сохранение плотности независимость важна, потому что без нее элемент пользовательского интерфейса (например, кнопка) может казаться больше на экране с низкой плотностью и меньше на экране с высокой плотностью (потому что, когда пиксели больше, как показано на рисунке 2, несколько пикселей могут долгий путь).

Система Android помогает достичь независимости плотности, обеспечивая пикселей, не зависящих от плотности (dp или dip) как единица измерения, которая вы должны использовать вместо пикселей (px).

Подробнее о пикселях, не зависящих от плотности.

Альтернативные растровые изображения

Чтобы ваши изображения отображались наилучшим образом на всех экранах, вы должны предоставить альтернативные растровые изображения для соответствия каждой плотности экрана. Например, если ваше приложение предоставляет растровые изображения только для экранов средней плотности (mdpi), Android масштабирует их, когда на экране высокой плотности, чтобы изображение занимало то же самое физическое пространство на экране.Это может вызвать видимые артефакты масштабирования в растровые изображения. Поэтому ваше приложение должно включать альтернативные растровые изображения с более высоким разрешением.

Узнайте, как предоставить альтернативные растровые изображения.

Векторная графика

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

Подробнее об использовании векторной графики.

Wear OS, TV, Auto и Chrome OS

Приведенные выше рекомендации применимы ко всем форм-факторам Android, но если вы хотите чтобы создать приложение для Wear OS, Android TV, Android Auto или Chrome OS устройств, вам нужно проделать немного больше работы.

У каждого из этих устройств есть своя собственная модель взаимодействия с пользователем, которая должна соответствовать вашему приложению. приспособиться. В некоторых случаях, например, для Wear OS, вам следует переосмыслить пользовательского опыта вашего приложения и создайте приложение, специализированное для этого устройства.А для поддержки устройств Chrome OS (например, Google Pixelbook) вам может потребоваться только незначительные изменения в существующем приложении для поддержки клавиатуры / мыши взаимодействие и гораздо больший экран.

Информацию о поддержке этих устройств см. В следующих руководствах разработчика:

Складные

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

Рисунок 3. Складывание и раскладывание

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

Подробнее о создании приложений для складных устройств

Несовместимость экрана

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

10 инструментов и приложений для тестирования адаптивного дизайна

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

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

1. Тест Google для мобильных устройств

Google Mobile-Friendly Test — один из тех популярных инструментов, о котором почему-то забывают. Вам необходимо, чтобы дизайн вашего веб-сайта соответствовал стандартам Google, чтобы сделать его более заметным в поисковой сети. это так просто.

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

Стоимость: Бесплатно

2. Ответчик

Responsiator позволяет вам увидеть дизайн вашего веб-сайта в различных средах устройств. (Это отличный способ реплицировать устройства, не кладя где-нибудь стопку телефонов в ящик.)

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

Стоимость: Бесплатно, но с рекламой (убрать рекламу за пожертвование)

3. Проверка адаптивного дизайна

Responsive Design Checker помещает ваш веб-сайт в окно, где вы можете вручную настраивать размеры — отлично подходит для проверки точек останова — и видеть различные ориентации устройства.

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

Что приятно, так это то, что вы можете видеть разные размеры, не меняя размер вашего браузера. Еще одно отличное применение этого инструмента? Используйте его, чтобы делать скриншоты для мокапов.

Стоимость: Бесплатно

4. XRespond

XRespond позволяет одновременно сравнивать несколько версий вашего сайта на разных устройствах. Прелесть этого инструмента заключается в том, что вы можете понять, насколько согласован пользовательский интерфейс, который вы обеспечиваете с одного устройства на другое.(Пользователи ожидают, что веб-сайты будут одинаковыми везде, где они к ним обращаются.)

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

Стоимость: Бесплатно

5. Screenfly

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

позволяют вращать, прокручивать и многое другое с помощью простых кнопок вверху, и все работает прямо в браузере.

Стоимость: Бесплатно

6. LambdaTest

LambdaTest — один из самых надежных инструментов в этом списке. Он включает возможность тестирования более чем в 2000 реальных браузерах и операционных системах.

Этот инструмент — больше, чем просто просмотр того, как будет выглядеть ваш веб-сайт, он проверяет совместимость, удобство использования, качество пикселей и многое другое в реальной среде. Он тестируется на нескольких устройствах, браузерах и версиях браузеров, поэтому вы точно знаете, как работает ваш сайт.

Вы можете получить скриншоты того, как все это выглядит, и даже сотрудничать с инструментом (и командой) в Интернете. Плюс к этому бонусом такого премиального инструмента является то, что он включает функции отладки, которые помогут вам решать проблемы проектирования по мере их возникновения.

Стоимость: Версия Lite бесплатна; платные планы начинаются с 15 долларов в месяц

7. Иллюстрированный отзывчивый дизайн

Responsive Design Illustrated — это больше инструмент планирования, чем инструмент тестирования. Считайте этот вариант для начинающих чем-то, что вы можете использовать для визуализации соотношений сторон и того, как планировать элементы дизайна для разных устройств и размеров экрана.

Вы все делаете прямо в браузере, так что вы можете визуально изучить, как думать о дизайне в разных размерах.

Стоимость: Бесплатно

8. Инструмент для тестирования адаптивного веб-дизайна

Инструмент тестирования адаптивного веб-дизайна — это простая программа просмотра на основе URL-адресов, которая позволяет сравнивать устройства по размеру или типу.

Что хорошего в этом инструменте, так это возможность переключения, позволяющего видеть различные ориентации, длину или виды одним щелчком мыши. Если вы хотите разместить этот инструмент для тестирования в своей собственной среде, это тоже вариант. (Итак, вы можете протестировать сайт до того, как он заработает.)

Разработчик этого инструмента Мэтт Керсли сделал его доступным на Github.

Стоимость: Бесплатно

9. Адаптивный тест Designmodo

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

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

Стоимость: Бесплатно

10.CrossBrowserTesting

CrossBrowserTesting — это инструмент премиум-класса, который предлагает ручное и автоматическое тестирование. Пользователи могут запускать ручные, визуальные и Selenium-тесты в облаке в более чем 1500 реальных настольных и мобильных браузерах.

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

Стоимость: Планы начинаются от 29 долларов в месяц

Заключение

У вас есть любимый инструмент, которого нет в этом списке? Поделитесь с нами. Нам нравится видеть инструменты, о которых мы не знали.

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

13 инструментов для адаптивного веб-дизайна

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

Вот список инструментов адаптивного дизайна. Существуют инструменты для создания адаптивных элементов веб-страниц и инструменты для тестирования вашего дизайна на самых разных устройствах и экранах разных размеров.Есть премиум и бесплатные инструменты.

Инструменты для адаптивного дизайна

Адаптивный дизайн, с адаптивными иллюстрациями . Созданный Джеймсом Меллерсом из Adobe, этот простой инструмент позволяет пользователям поиграть с наглядным примером адаптивного дизайна. Измените размер окна браузера, чтобы увидеть, какие типы ограничений размера вы будете использовать. Цена: Бесплатно.

Адаптивный дизайн, с адаптивными иллюстрациями

Загрузочный . Создавайте в Интернете адаптивные проекты, ориентированные на мобильные устройства, с помощью одной из самых популярных библиотек интерфейсных компонентов. Bootstrap — это фреймворк с открытым исходным кодом для разработки с использованием HTML, CSS и JS. Быстро прототипируйте свои идеи или создавайте все свое приложение с помощью адаптивной сеточной системы Bootstrap, готовых компонентов и плагинов, построенных на jQuery. Цена: Бесплатно.

Google Mobile-Friendly Test. Проверьте, насколько легко посетитель может использовать вашу страницу на мобильном устройстве, с помощью бесплатного теста Google для мобильных устройств.Оптимизация веб-сайтов для мобильных устройств гарантирует, что ваши страницы будут работать на всех устройствах. Цена: Бесплатно.

Justinmind. Justinmind — это универсальный инструмент для создания прототипов веб-приложений и мобильных приложений. Определяйте веб-сайты и приложения для Интернета, iOS и Android с помощью интерфейса перетаскивания без программирования. Настройте и настройте свой каркас с помощью динамического макета, чтобы он соответствовал всем размерам экрана на всех устройствах с помощью гибких событий и действий Justinmind. Justinmind позволит вам мгновенно просматривать и тестировать прототипы веб-приложений и мобильных приложений из любого браузера, с собственным веб-дисплеем и различными скинами устройств. Цена: планы начинаются с 19 долларов в месяц.

Justinmind

Gridset. Gridset позволяет дизайнерам создавать креативные сетки макетов для Интернета, не беспокоясь о расчетах. Gridset позволяет вам настраивать определенные сетки по заданным вами точкам останова для эффективного адаптивного дизайна, гарантируя, что ваш контент хорошо выглядит на любом экране. Цена: планы начинаются от 9 долларов в месяц.

Адаптивные изображения. Adaptive Images определяет размер экрана вашего посетителя и автоматически создает, кэширует и доставляет адаптированные для устройства масштабированные версии встроенных HTML-изображений вашей веб-страницы.Он предназначен для использования с адаптивным дизайном в сочетании с техникой плавного изображения. Никаких изменений разметки не требуется. Цена: Бесплатно.

FitText. Плагин jQuery для расширения веб-шрифтов, FitText делает размеры шрифтов гибкими. Используйте этот плагин в своем гибком или адаптивном макете для создания масштабируемых заголовков, заполняющих ширину родительского элемента. FitText предназначен только для отображения огромного текста. Цена: Бесплатно.

FitText

Ghostlab. С Ghostlab вы можете тестировать любой веб-сайт одновременно в разных браузерах и мобильных устройствах.Просто перетащите URL-адрес в Ghostlab и нажмите кнопку «Играть». Начните тестирование в одном из подключенных браузеров или устройств. Все остальные браузеры и устройства будут отражать ваши действия — нажатие кнопок, переход по ссылкам, прокрутка страницы, заполнение форм и наведение курсора мыши на специальные элементы. Сделайте снимок экрана прямо из Ghostlab, добавьте к нему аннотацию во встроенном редакторе изображений и перетащите его в любое средство отслеживания ошибок, которое вы используете. Цена: 49 долларов.

Отвечаю ли я? Am I Responsive — это инструмент для быстрого создания снимков экрана с точками останова адаптивного дизайна.Просто введите свой URL. Переупорядочивайте и переупорядочивайте устройства, щелкая и перетаскивая устройство. Используйте букмарклет Am I RWD, чтобы проверить скорость отклика на любом сайте одним щелчком мыши в вашем собственном браузере. Цена: Бесплатно.

Ответчик. Responsinator помогает разработчикам веб-сайтов быстро получить представление о том, как их адаптивный сайт будет выглядеть на самых популярных устройствах. Тем не менее, это не совсем точная копия того, как это будет выглядеть. Для точного тестирования всегда проверяйте на реальных устройствах. Цена: Бесплатно.

Ответчик

Google Chrome DevTools Device Mode. Google Chrome DevTools — это набор инструментов для разработки, отладки и профилирования, встроенный в Google Chrome. Используйте адаптивный режим во время активной разработки своего сайта и приложения и часто меняйте размер области просмотра, чтобы создать свободно отзывчивый дизайн, который адаптируется даже к неизвестным и будущим типам устройств. Проверьте скорость отклика своего сайта с помощью эмулятора экрана Device Mode. Элементы управления вьюпортом позволяют вам тестировать ваш сайт на различных устройствах, а также быстро реагировать. Цена: Бесплатно.

Стек браузера. Browser Stack — это платформа для тестирования веб-браузеров в реальном времени. Для получения наиболее точных результатов протестируйте на различных физических мобильных устройствах и планшетах Android и iOS. Протестируйте 1100 настольных браузеров на реальных машинах, с потоковой передачей мультимедиа, инструментами разработчика, сочетаниями клавиш и многим другим. Создавайте снимки экрана с фактическим размером устройства на iOS, Android, OS X и Windows. Цена: 29 долларов в месяц.

CrossBrowserTesting. CrossBrowserTesting дает вам доступ к браузерам и устройствам, которые используют ваши посетители. Выполняйте интерактивное ручное и исследовательское тестирование на 1500 настольных и мобильных браузерах. Автоматически делайте снимки экрана в нескольких браузерах одновременно, сравнивая адаптивные макеты на всю страницу. Проводите визуальные тесты с каждым новым изменением и сравнивайте их с историческими версиями, чтобы упростить регрессионное тестирование. Цена: 29 долларов в месяц.

CrossBrowserTesting

Адаптивность и макет — Визуальный дизайн — iOS — Руководство по человеческому интерфейсу

Адаптивность и макет

Люди обычно хотят иметь возможность использовать свои любимые приложения на всех своих устройствах и в любом контексте.В приложении для iOS вы можете настроить элементы интерфейса и макеты для автоматического изменения формы и размера на разных устройствах, во время многозадачности на iPad, в режиме разделения экрана, при повороте экрана и т. Д. Важно разработать адаптируемый интерфейс, обеспечивающий удобство работы в любой среде.

Размеры и ориентация экрана устройства

iOS имеют различные размеры экрана и могут использоваться как в портретной, так и в альбомной ориентации. В устройствах с диагональю от края до края, таких как iPhone X и iPad Pro, дисплей имеет закругленные углы, которые точно соответствуют его габаритным размерам.Другие устройства, такие как iPhone SE и iPad Air, имеют прямоугольный дисплей.

Если ваше приложение работает на определенном устройстве, убедитесь, что оно работает на экране любого размера для этого устройства. Другими словами, приложение только для iPhone должно работать на экране iPhone любого размера, а приложение только для iPad должно работать на экране iPad любого размера.

ПРИМЕЧАНИЕ Все масштабные коэффициенты в таблице выше являются масштабными коэффициентами UIKit, которые могут отличаться от собственных масштабных коэффициентов. Рекомендации для разработчиков см. В разделах scale и nativeScale.

Чтобы узнать, как разрешение экрана влияет на оформление вашего приложения, см. Размер и разрешение изображения.

Автоматическая компоновка

Auto Layout — это инструмент разработки для создания адаптивных интерфейсов. Используя автоматический макет, вы можете определить правила (известные как ограничения , ), которые управляют содержимым вашего приложения. Например, вы можете ограничить кнопку так, чтобы она всегда располагалась по центру по горизонтали и располагалась в восьми точках под изображением, независимо от доступного пространства на экране.

Auto Layout автоматически корректирует макеты в соответствии с указанными ограничениями при обнаружении определенных изменений окружающей среды (известных как черт ).Вы можете настроить свое приложение на динамическую адаптацию к широкому спектру характеристик, в том числе:

Руководство разработчика см. В Auto Layout Guide и UITraitCollection.

Руководства по компоновке и безопасная зона

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

Соблюдайте безопасную область и поля макета, определенные UIKit. Эти руководства по макету обеспечивают правильную вставку в зависимости от устройства и контекста. Безопасная область также не позволяет содержимому перекрывать строку состояния, панель навигации, панель инструментов и панель вкладок. Стандартные виды, предоставляемые системой, автоматически принимают руководство по компоновке безопасной зоны.

Для руководства разработчика см. UILayoutGuide, layoutMarginsGuide, readableContentGuide и safeAreaLayoutGuide.

Классы размеров

Классы размера — это характеристики, которые автоматически назначаются областям содержимого в зависимости от их размера. Система определяет два класса размеров: обычный (обозначает расширенное пространство) и компактное (обозначает ограниченное пространство), которые описывают высоту и ширину вида.

Вид может иметь любую комбинацию классов размеров:

• Стандартная ширина, стандартная высота
• Компактная ширина, компактная высота
• Стандартная ширина, компактная высота
• Компактная ширина, стандартная высота

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

Классы размеров устройства

Различные комбинации классов размера применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.

Классы размеров для многозадачности

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

Вид с разделением на 2/3

Вид на 1/2 части

1/3 разделения

Общие сведения о компоновке

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

Поддерживайте единый внешний вид всего приложения. В целом элементы с похожими функциями должны выглядеть одинаково.

Используйте визуальный вес и баланс, чтобы подчеркнуть важность. Крупные предметы привлекают внимание и кажутся важнее мелких. Также легче нажимать на более крупные предметы, что особенно важно, когда приложение используется в отвлекающих условиях, например на кухне или в тренажерном зале.Как правило, размещайте основные элементы в верхней половине экрана и — в контексте чтения слева направо — в левой части экрана.

Используйте выравнивание, чтобы упростить сканирование и сообщить об организации и иерархии. Alignment делает приложение аккуратным и организованным, помогает людям сосредоточиться при прокрутке и упрощает поиск информации. Отступы и выравнивание также могут указывать на то, как связаны группы контента.

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

Будьте готовы к изменению размера текста. Люди ожидают, что большинство приложений ответят, когда они выберут другой размер текста в настройках. Чтобы учесть некоторые изменения размера текста, вам может потребоваться настроить макет. Дополнительные сведения об использовании текста в вашем приложении см. В разделе Типографика.

Обеспечивает достаточное количество сенсорных мишеней для интерактивных элементов. Старайтесь поддерживать минимальную область касания 44 x 44 пункта для всех элементов управления.

4,7 «iPhone

5,8-дюймовый iPhone

Предварительный просмотр вашего приложения на нескольких устройствах. Хотя обычно лучше всего предварительно просматривать такие функции, как широкие цветные изображения, на реальных устройствах, вы можете использовать Simulator (включенный в Xcode) для проверки обрезки и других проблем с компоновкой. Например, если ваше приложение поддерживает альбомный режим, вы можете использовать Simulator, чтобы ваши макеты выглядели великолепно, независимо от того, вращается ли устройство влево или вправо.

ПРИМЕЧАНИЕ По умолчанию контроллеры представлений поддерживают все ориентации на iPad и все ориентации, кроме перевернутой книжной ориентации на iPhone (руководство разработчика см. В разделе supportedInterfaceOrientations). Некоторые устройства, например iPhone X, не поддерживают перевернутый портретный режим независимо от того, поддерживает ли его ваше приложение.

Применяйте поля для удобочитаемости при отображении текста на больших устройствах. Эти поля делают текстовые строки достаточно короткими, чтобы обеспечить удобство чтения.

Адаптация к изменениям контекста

Сохранять фокус на текущем содержании во время изменения контекста. Контент — ваш наивысший приоритет. Смена фокуса при изменении окружающей среды может дезориентировать и расстраивать людей, а также может заставить людей почувствовать, что они потеряли контроль над приложением.

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

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

Настройте реакцию вашего приложения на ротацию в соответствии с контекстом. Игра, которая позволяет людям перемещать персонажа, например, вращая устройство, вероятно, не должна менять ориентацию во время игры. Однако он может отображать меню и вступительные последовательности в зависимости от текущей ориентации.

Стремитесь поддерживать как iPad, так и iPhone. Люди ценят гибкость для запуска вашего приложения на любом типе устройства iOS. Если для определенных функций вашего приложения требуется оборудование для iPhone, например телефония, рассмотрите возможность скрытия или отключения этих функций на iPad и предоставления людям возможности использовать другие функции вашего приложения.

Полноэкранное изображение устройства 4,7 дюйма

Обрезка на 5,8-дюймовом устройстве

Леттербоксинг на 5,8-дюймовом аппарате

Полноэкранное изображение устройства 5,8 дюйма

Обрезка на 4,7-дюймовом устройстве

Пилларбоксинг на устройстве 4,7 дюйма

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

Создание полноэкранного режима

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

Избегайте явного размещения интерактивных элементов управления в самом низу экрана и в углах. Люди используют жесты смахивания у нижнего края дисплея для доступа к таким функциям, как главный экран и переключатель приложений, и эти жесты могут отменять пользовательские жесты, которые вы применяете в этой области.Дальние углы экрана могут быть труднодоступными для людей.

Вставьте основное содержимое, чтобы предотвратить обрезку. Как правило, контент должен быть расположен по центру и симметрично вставлен, чтобы он отлично смотрелся в любой ориентации, не был обрезан закругленными углами, не был скрыт корпусом датчика и не перекрывался индикатором доступа к главному экрану. Для достижения наилучших результатов используйте стандартные, предоставляемые системой элементы интерфейса и автоматический макет, чтобы создать свой интерфейс и придерживаться руководств по макету и безопасной области, определенных UIKit.Когда устройство находится в альбомной ориентации, для некоторых приложений (например, игр) может быть целесообразно разместить элементы управления в нижней части экрана (простираясь ниже безопасной области), чтобы оставить больше места для контента. Используйте совпадающие вставки при размещении элементов управления вверху и внизу экрана и оставляйте достаточно места вокруг индикатора главного экрана, чтобы люди случайно не нацелились на него при попытке взаимодействия с элементом управления. Поскольку индикатор главного экрана остается в центре экрана, его расположение относительно интерфейса вашего приложения может измениться.

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

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

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

Если вы сейчас скрываете строку состояния, пересмотрите это решение, когда ваше приложение будет работать на полноэкранном iPhone. Полноэкранные модели iPhone имеют больше вертикального пространства для контента, чем другие модели, а строка состояния занимает область экрана, которую ваше приложение, вероятно, не будет использовать полностью. В строке состояния также отображается информация, которую люди считают полезной.Его следует скрывать только в обмен на добавленную стоимость.

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

Дополнительные рекомендации по компоновке

Убедитесь, что ваш веб-сайт отлично смотрится на безрамочном просмотре. См. Раздел «Разработка веб-сайтов для iPhone X» на веб-сайте webkit.org.

Как ваш адаптивный веб-сайт выглядит на разных устройствах?

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

Также прочтите: Отзывчивый веб-дизайн — Руководство для чайников

Как тестировать веб-сайты с адаптивным дизайном

Самое лучшее в адаптивных веб-сайтах — это то, что вы тестируете дизайн в своем настольном браузере, не требуя никаких мобильных эмуляторов. Например, iPhone имеет размер 480×320 пикселей в альбомном режиме, и если вы измените размер веб-браузера до этого точного размера, вы получите хорошее представление о том, как ваш веб-сайт выглядит на реальном устройстве.

Кроме того, доступны инструменты, которые помогут вам протестировать адаптивный дизайн на всех популярных разрешениях экрана (или всех устройствах) из одного места.

• mattkersley.com/responsive — вы можете использовать этот инструмент, чтобы быстро протестировать макет вашего сайта по сравнению со стандартной шириной экрана (или точками останова). Исходный код доступен на Github, поэтому вы можете расширить его в соответствии с вашими требованиями.
• quirktools.com/screenfly — Это мой любимый инструмент по двум причинам: он поддерживает гораздо большее количество разрешений экрана (включая телевизоры) и, во-вторых, Screenfly отправляет правильные строки пользовательского агента при запросе веб-страниц для различных устройств.Таким образом, вы получаете лучшее из обоих миров (см.