SlideShare a Scribd company logo
1 of 25
А ВАШЕ ВЕБ-ПРИЛОЖЕНИЕ
ДРУЖИТ С MOBILE?
ТАТЬЯНА ЛЮЛЮЧЕНКО, ITERA
О себе
• Test Engineer в ITERA, Киев.
• В тестировании - больше 4х лет.
• Опыт работы с веб- и мобильных
приложениях.
• Веду внутренние тренинги по мобильному
тестированию.
09.11.2015 / 2
Заказчик: «Мы должны быть мобильными!»
09.11.2015 / 3
Мобильные конфигурации
Конфигурация
Мой URL остается
такой же?
Мой HTML остается
такой же?
Адаптивный веб
дизайн
Динамический показ
Разные URL
09.11.2015 / 4
Не адаптировать под мобильные устройства
вообще
09.11.2015 / 5
Пример
09.11.2015 / 6
Не рассматривать планшеты как мобильные
устройства. Пример
09.11.2015 / 7
Ошибки переадресации
09.11.2015 / 8
Image: https://developers.google.com/
В том числе и при динамическом показе.
Пример: мобильное меню на десктопе
09.11.2015 / 9
… и десктопное меню на планшете
09.11.2015 / 10
Ошибки 404 на мобильных устройствах
09.11.2015 / 11
Image: https://developers.google.com/
А так же
• Урезанный функционал
• Ошибки в перекрестных ссылках
• Бесконечная переадресация
09.11.2015 / 12
Невоспроизводимый контент: видео, аудио,
фото. Пример
09.11.2015 / 13
Старайтесь не использовать межстраничные
объявления
09.11.2015 / 14
Image: https://developers.google.com/
Примеры
09.11.2015 / 15
Медленная загрузка страниц
09.11.2015 / 16
Ошибки в адаптивном дизайне
• Некоторые элементы частично скрыты или вообще не отображены
• Некоторые элементы перекрывают друг друга
• Некоторые элементы выходят за правую границу экрана
09.11.2015 / 17
Пример: меню до и после изменения
размера окна
09.11.2015 / 18
и после изменения размера окна
Пример: Перекрывающиеся элементы
09.11.2015 / 19
Карты не отображаются (+ проблемы с
геолокацией)
09.11.2015 / 20
Также: Изменение масштаба не работает,
«точки» на карте не отображаются
09.11.2015 / 21
Проблемы пользования
• Текст имеет мелкий шрифт
• Toо much scrolling
• Навигация по сайту
• Навигация по списку
• Заполнение форм
• Нераспознанные символы
• И т.д. и т.п.
09.11.2015 / 22
Блокировка JavaScript, CSS и графических
файлов
09.11.2015 / 23
Советы
• Тестируйте и в портретной, и в альбомной ориентации
• Если нет мобильного устройства – тестируйте на эмуляторах
• Тестируйте в условиях медленной сети (посмотреть, как загружается
страница)
09.11.2015 / 24
СПАСИБО!

More Related Content

Similar to QA Fest 2015. Татьяна Люлюченко. А ваше веб-приложение дружит с mobile?

Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)NetCampus
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебTechnosphere1
 
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishing
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishingV demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishing
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishingVasily Demin
 
радионов Mmconf 2012_маленькие сайты - большие возможности
радионов Mmconf 2012_маленькие сайты - большие возможностирадионов Mmconf 2012_маленькие сайты - большие возможности
радионов Mmconf 2012_маленькие сайты - большие возможностиRoman Radionov
 
Cisco OMNIchannel CC Club 2
Cisco OMNIchannel CC Club 2Cisco OMNIchannel CC Club 2
Cisco OMNIchannel CC Club 2CTI2014
 
Mobile keynote rev2 for publishing
Mobile keynote rev2 for publishingMobile keynote rev2 for publishing
Mobile keynote rev2 for publishingVasily Demin
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Yandex
 

Similar to QA Fest 2015. Татьяна Люлюченко. А ваше веб-приложение дружит с mobile? (8)

Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)
 
Мастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного вебМастер-класс: Особенности создания продукта для мобильного веб
Мастер-класс: Особенности создания продукта для мобильного веб
 
Mobile development
Mobile developmentMobile development
Mobile development
 
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishing
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishingV demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishing
V demin oracle_mobile_platform_mweek_11.12.2014_v1_for publishing
 
радионов Mmconf 2012_маленькие сайты - большие возможности
радионов Mmconf 2012_маленькие сайты - большие возможностирадионов Mmconf 2012_маленькие сайты - большие возможности
радионов Mmconf 2012_маленькие сайты - большие возможности
 
Cisco OMNIchannel CC Club 2
Cisco OMNIchannel CC Club 2Cisco OMNIchannel CC Club 2
Cisco OMNIchannel CC Club 2
 
Mobile keynote rev2 for publishing
Mobile keynote rev2 for publishingMobile keynote rev2 for publishing
Mobile keynote rev2 for publishing
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
 

More from QAFest

QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилинQA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилинQAFest
 
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The FutureQA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The FutureQAFest
 
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...QAFest
 
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...QAFest
 
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать большеQA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать большеQAFest
 
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiledQA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiledQAFest
 
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгораниемQA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгораниемQAFest
 
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...QAFest
 
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...QAFest
 
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium ClusterQA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium ClusterQAFest
 
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...QAFest
 
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...QAFest
 
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automationQA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automationQAFest
 
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...QAFest
 
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...QAFest
 
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях ITQA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях ITQAFest
 
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложенииQA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложенииQAFest
 
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...QAFest
 
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...QAFest
 
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22QAFest
 

More from QAFest (20)

QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилинQA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
QA Fest 2019. Сергій Короленко. Топ веб вразливостей за 40 хвилин
 
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The FutureQA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
QA Fest 2019. Анна Чернышова. Self-healing test automation 2.0. The Future
 
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application pe...
 
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
QA Fest 2019. Катерина Спринсян. Параллельное покрытие автотестами и другие и...
 
QA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать большеQA Fest 2019. Никита Галкин. Как зарабатывать больше
QA Fest 2019. Никита Галкин. Как зарабатывать больше
 
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiledQA Fest 2019. Сергей Пирогов. Why everything is spoiled
QA Fest 2019. Сергей Пирогов. Why everything is spoiled
 
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгораниемQA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
QA Fest 2019. Сергей Новик. Между мотивацией и выгоранием
 
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
QA Fest 2019. Владимир Никонов. Код Шредингера или зачем и как мы тестируем н...
 
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
QA Fest 2019. Владимир Трандафилов. GUI automation of WEB application with SV...
 
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium ClusterQA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
QA Fest 2019. Иван Крутов. Bulletproof Selenium Cluster
 
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
QA Fest 2019. Николай Мижигурский. Миссия /*не*/выполнима: гуманитарий собесе...
 
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
QA Fest 2019. Володимир Стиран. Чим раніше – тим вигідніше, але ніколи не піз...
 
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automationQA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation
 
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
QA Fest 2019. Екатерина Дядечко. Тестирование медицинского софта — вызовы и в...
 
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
QA Fest 2019. Катерина Черникова. Tune your P’s: the pop-art of keeping testa...
 
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях ITQA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
QA Fest 2019. Алиса Бойко. Какнезапутаться в коммуникативных сетях IT
 
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложенииQA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
QA Fest 2019. Святослав Логин. Как найти уязвимости в мобильном приложении
 
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
QA Fest 2019. Катерина Шепелєва та Інна Оснач. Що українцям потрібно знати пр...
 
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
QA Fest 2019. Антон Серпутько. Нагрузочное тестирование распределенных асинхр...
 
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
QA Fest 2019. Петр Тарасенко. QA Hackathon - The Cookbook 22
 

QA Fest 2015. Татьяна Люлюченко. А ваше веб-приложение дружит с mobile?

Editor's Notes

  1. https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config#crawling_requirement
  2. Несмотря на то, что у планшетов размер экрана больше чем у смартфонов, браузеры планшетов имеют те же ограничения, что и браузеры смартфонов.
  3. https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/faulty-redirects Если у вас есть отдельные мобильные версии страниц, необходимо настроить переадресацию для каждой из них. Перенаправление на другие страницы, например на главную, будет считаться ошибкой.
  4. http://www.forbes.com/sites/amitchowdhry/2015/05/27/new-apple-ios-bug-causes-reboots-and-messages-app-crashes/
  5. https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/mobile-only-404s Soft 404 errors - https://support.google.com/webmasters/answer/181708 Если вы видите, что пользователь посещает страницу обычного сайта с мобильного устройства, настройте переадресацию на соответствующую страницу мобильного сайта с другим URL.
  6. https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/irrelevant-cross-links Обычно, если пользователи перенаправляются на отдельный сайт для мобильных устройств, на него добавляют ссылку, по которой можно вернуться на сайт для обычных компьютеров, и наоборот. Одна из распространенных ошибок – ссылка не на ту страницу (например, на главную).
  7. https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/unplayable-content
  8. https://developers.google.com/webmast ers/mobile-sites/mobile-seo/common-mistakes/app-download-interstitials На многих сайтах размещены межстраничные объявления или оверлеи с рекламой приложений, формами подписки и т. д. При просмотре сайтов на мобильных устройствах такие объявления частично или полностью закрывают контент. В некоторых случаях межстраничные объявления созданы таким образом, чтобы пользователю было сложно закрыть их.
  9. https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/blocked-resources.html http://www.googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html Чтобы обеспечить правильное индексирование и отображение страниц, нужно предоставить роботу Googlebot доступ к JavaScript, CSS и графическим файлам на сайте. Робот Googlebot должен видеть ваш сайт как обычный пользователь. Если в файле robots.txt закрыт доступ к этим ресурсам, то Google не удастся правильно проанализировать и проиндексировать содержание. Это может ухудшить позиции вашего сайта в Поиске.