#вёрстка #адаптивная_верстка #кроссбраузерность #фронтенд
Немного занимаюсь в свободное время frontend-ом (по фану) – CSS3, JavaScript, HTML5,
адаптив (чтобы сайт "как игрушка" выглядел, перестраивался динамически под размеры
и повороты экрана).
Первым шагом я тестирую полученное на различных разрешениях в эмуляторе Google Chrome
с помощью "Device Toolbar".
Когда всё готово, долго и муторно проверяю результат по следующему списку:
Mac OS X:
Google Chrome
Safari 11
TorBrowser
Windows 7, запущенная на VirtualBox под Mac OS X:
Google Chrome
Mozilla Firefox
Opera 45
IE 11
Android 4:
Google Chrome
Android Browser
SimulatorApp 9, запущенный на Mac OS X:
iPhone 4|5|6
iPad 2|Pro|Retina
Интересует опыт профессиональных фронтендщиков:
Насколько оправдан мой список устройств и браузеров для проверки результатов? Вы
бы что-нибудь добавили? Что-нибудь выкинули?
Какой workflow у вас? Как проверяете свои наработки? Ведь это целое адище – протестировать
свой код в разных браузерах и ОС, отнимает много времени.
Ответы
Ответ 1
Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО, подкреплённое набитыми шишками. Шаг первый, подготовительный. Определите аудиторию сайта, её технические возможности, цель и место посещения. Это позволит примерно понять, в каких условиях люди заходят на сайт и что они от него ждут. Немного примеров навскидку: Места: из дома, на работе, в транспорте, на детской площадке, в туалете, свисая с моста на страховке, под дождём на автобусной остановке, в зале ожидания в больнице Устройства вывода: десктоп, ноутбук, планшет, телефон, старый телефон, консоль / телевизор, проектор, слуховой или тактильный аппарат Устройства ввода: мышь, тачпад, сенсорный экран, мини-пульт, клавиатура, голос Софт и настройки: навороченный браузер, упрощённый браузер, боковая панелька (Opera <= 12.x, Vivaldi), фрейм в игре (EVE, например) Обстоятельства: отдых (лениво почитывая или играя), работа (справка, переводчик), активность (про мост и страховку - это не шутка), экстренные случаи, нарушения зрения или координации Поянтно, что одним сайтом покрыть все варианты невозможно и не нужно; многое зависит от тематики и соотвутствующей целевой аудитории. Исходя из этого можно оценить, какие фичи нужны, а чем можно пренебречь, чтобы облегчить разработку. Шаг второй, аналитический. Всё программирование - это поиск золотой середины между усилиями и результатом. Чем-то в любом случае придётся жертвовать (в 2008-м я положил на алтарь свежие плюшки типа jQuery ради нормальной работы в Opera Mini), и в связи с этим по возможности не надо делать лишнего. Собственно, любая новая фича будет требовать поддержки на разных уровнях: изображения, стили, разметка, скрипты, браузерные тесты. Отсюда два вопроса: Что требуется от дизайна? Что от дизайна не требуется? Постарайтесь максимально формализовать требования к сайту, чтобы их смог понять даже компьютер. Таким требованием может быть "размер гамбургера от 20 до 40 пикселей" или "всплывающее окошко не должно заслонять название элемента", а то и "расстояние от этой ссылки до той кнопки должно уложиться в один свайп по тачпаду". Всё, что такими требованиями не оговорено, будет считаться допустимой погрешностью - и с этим придётся смириться. Шаг третий, кибернетический. Автоматизируйте всё. это целое адище – протестировать свой код в разных браузерах и ОС Есть сервисы, которые позволяют проверять свои сайты на разных платформах, BrowserStack, например. Все дополнительные фишки платные, но порой хватает и скриншота. Если подходить более серьёзно - Selenium, есть и обвязки, позволяющие его встроить в юнит-тесты для веб-приложения. Требования с прошлого этапа вполне реально перенести на скрипт и регулярно его запускать. Более того, если есть возможность выделить отдельную машину, Selenium может работать и удалённо, создавая пакеты "логов" на каждый чих. При наличии автоматизации вопрос проверки в лишнем браузере теряет свою остроту. Сравнение скриноштов позволит увидеть разницу; история изменений - changelog, а видимые косяки перейдут в раздел требований и новых тестов.Ответ 2
Я бы выкинул: Tor browser Этот браузер тоже самое что и firefox. Проверять хром на Windows 7 Не вижу смысла, так как от маковского хрома он ничем не отличается, тогда уж лучше проверять на xp так как там старая версия хрома - 49. Я бы добавил UC browser Им еще пользуются все-таки лучше проверить Opera mini браузер с плохой поддержкой, если проект серьезный то лучше перенаправлять на так называемую страницу badbrowser FireFox для мобилы Различий вроде не должно быть, но лучше проверить. Edge Новый браузер от microsoft есть небольшие (или большие) отличия от IE. работает только под windows 8.1 и более Поддержку некоторых вещей можно посмотреть здесь: https://caniuse.com
Комментариев нет:
Отправить комментарий