Как отображается сайт в разных браузерах


Быстрый способ протестировать сайт в разных десктопных браузерах / Хабр

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

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

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

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.

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

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

Многоцелевой www.thumbalizr.com и его IE7

Этот сервис вообще-то создан для создания «превьюшек» сайтов и даже снабжён соответствующим API, но если отправить его делать скриншот такой хитрой страницы, как inet.ya.ru, то становится ясно, что в качестве движка для рендеринга скриншотов на сервисе трудится IE7. И он пригодится любому, кто обновил IE до восьмого, либо не пользуется Windows совсем.
Оптимальный ipinfo.info/netrenderer

Сервис умеет делать скриншоты в IE 5.5 (для некрофилов), IE 6, 7 и 8. То есть отлично подходит для тестирования. Также имеется режим, где на одном скриншоте показываются различия в вёрстке между IE6 и IE7. Удобно, но, надеюсь, в будущем можно будет сравнивать и с восьмым IE сразу.
Удобный browserling.com с возможностью поскроллить и покликать

Про сервис рассказали в комментариях. Он хорош, потому что единственный из перечисленных позволяет покликать, поскроллить, потестировать JS (вы получаете что-то вроде VNC-доступа к удалённому окошку с нужным браузером). Недостаток для такого шикарного сервиса предсказуем — очередь желающих. Хотя визуализирована она на славу:

Browserling предоставляет в ваше распоряжение любой IE от 5.5 до 9, а также последние версии Opera, Chrome, Safari и Firefox. Очередь при этом общая, вне зависимости от того, на какой браузер вы записывались. Из-за этого лично мне откровенно хочется отшлёпать тех, кто занимает очередь с целью погонять доступный на всех платформах Firefox.

После того, как вы своей очереди дождётесь — в вашем распоряжении будет пять минут, потом вас дропнут и если вы чего-то проверить не успели, то придётся снова занимать за «крайним» (в момент тестирования сервиса встречал очереди и по 10 персон, но отмечу, что многие впереди «стоящие» — очередь бросали либо мучали сервис меньше доступных пяти минут). Справедливости ради надо сказать, что есть и платный вариант без очередей.

Ваша версия

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

Почему мой сайт выглядит по-разному в разных браузерах?

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

  • Как браузер интерпретирует страницу

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

http://browsershots.org

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

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

  • ОС посетителя (операционная система)

Если на вашем веб-сайте используются кнопки отправки, переключатели, флажки и поля редактирования, все они будут визуализированы в зависимости от ОС посетителя и ее стиля.Шрифты браузера также имеют тенденцию немного отличаться при визуализации на ПК, Mac или компьютере с Linux.

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

Код обычной кнопки отправки выглядит так:

    

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

    
  • Разрешение экрана посетителя

Разрешение экрана сильно влияет на отображение веб-сайта.Например, если вы создаете свои страницы с разрешением 1024 × 768, они не поместятся на экране посетителя с разрешением экрана 800 × 600.

Чтобы исправить это, вы не должны использовать статические размеры для своего веб-сайта, т.е. вместо установки width = 1024px вы можете использовать width = 100%. Это не решит всех проблем, но, по крайней мере, поместит страницу в размер экрана.

.

Как легко протестировать веб-сайт в разных браузерах (2 метода)

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

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

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

Почему так важно тестировать веб-сайт в разных браузерах

У вас, вероятно, есть любимый браузер (как и у большинства людей), и, скорее всего, вы обычно ничего не используете для работы на своем веб-сайте.Наиболее вероятным кандидатом является Chrome, у которого на сегодняшний день самая большая доля рынка, но альтернативы, такие как Firefox, Safari и Internet Explorer, по-прежнему популярны.

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

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

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

Как протестировать ваш сайт WordPress в нескольких браузерах (2 простых инструмента)

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

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

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

1. Browsershots

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

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

Здесь есть масса вариантов, охватывающих большинство основных браузеров и их более свежие версии (хотя вы можете заметить, что Internet Explorer отсутствует ).Просто установите все флажки, которые хотите, а затем нажмите кнопку Submit .

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

На этом этапе вы захотите внимательно просмотреть каждый снимок экрана:

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

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

2. CrossBrowserTesting

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

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

Учитывая все это, вы, вероятно, не удивитесь, узнав, что этот инструмент не является бесплатным. Самый дешевый план стоит 29 долларов в месяц и включает неограниченное тестирование для одного пользователя. Однако есть также 7-дневная бесплатная пробная версия , предлагающая 100 минут тестирования. Этого достаточно, чтобы опробовать все функции и посмотреть, нравятся ли они вам, и даже протестировать небольшой сайт.

После регистрации учетной записи вы получите доступ к полной панели инструментов:

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

После запуска теста вы получите доступ к полной симуляции вашего сайта:

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

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

Заключение

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

К счастью, существует множество инструментов, которые могут помочь вам протестировать веб-сайт в разных браузерах. Два из наших фаворитов включают:

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

У вас есть вопросы о том, как протестировать сайт в разных браузерах? Дайте нам знать в комментариях ниже!

Бесплатное руководство

5 основных советов по ускорению
Ваш сайт WordPress

Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
.Стиль кодирования

- Как сделать так, чтобы веб-страница отображалась по-разному в разных браузерах?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как протестировать сайт WordPress в разных браузерах (простой способ)

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

Что такое кроссбраузерное тестирование?

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

Зачем тестировать сайт WordPress в разных браузерах?

Google Chrome - самый популярный веб-браузер в мире, занимающий 65% рынка настольных компьютеров и 57% мобильных устройств. Однако другие браузеры, такие как Firefox, Microsoft Edge, Safari и Opera, по-прежнему широко используются сотнями миллионов пользователей по всему миру.

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

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

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

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

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

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

Как узнать, какие браузеры используют посетители вашего веб-сайта?

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

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

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

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

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

Если вы только начинаете вести блог или у вас нет Google Analytics, мы рекомендуем вам немедленно установить MonsterInsights, чтобы правильно настроить Google Analytics. После установки вы можете либо подождать несколько недель для сбора данных, либо продолжить тестирование своего веб-сайта во всех браузерах.

Лучшие инструменты для кроссбраузерного тестирования WordPress

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

Ниже приведен список лучших инструментов кроссбраузерного тестирования для сайтов WordPress:

1. Browsershots

Browsershots - это инструмент с открытым исходным кодом, который позволяет вам тестировать свой веб-сайт в нескольких браузерах в разных операционных системах. Лучшее в этом инструменте - то, что он бесплатный. Обратной стороной является то, что он не включает Microsoft Edge или Internet Explorer.Он также не включает поддержку мобильных устройств.

Чтобы использовать Browsershots, просто введите URL-адрес своего веб-сайта и затем выберите браузеры, которые вы хотите протестировать. Браузеры перечислены в трех столбцах для Linux, Windows и Mac OS.

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

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

2. Кроссбраузерное тестирование

CrossBrowserTesting - это простой в использовании и очень мощный инструмент кроссбраузерного тестирования с функциями тестирования в реальном времени и создания снимков экрана. Это инструмент, который мы используем здесь, в Awesome Motive, для тестирования наших веб-сайтов, таких как WPBeginner, и наших премиальных плагинов WordPress.

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

После создания пробной учетной записи перейдите на вкладку «Live Test», где вы можете выбрать операционную систему и браузер. Он загрузит URL-адрес вашего веб-сайта в фактическом браузере, который будет отображаться на вашем экране.

Если вы хотите быстро получить сразу несколько снимков экрана, щелкните вкладку «Скриншоты» и запустите новый тест снимков экрана. Инструмент CrossBrowserTesting автоматически извлекает скриншоты на мобильных телефонах Mac, Windows, iPad и Nexus 6P с веб-браузерами Chrome, Firefox, Safari, Microsoft Edge.

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

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

Цена: От 29 долларов в месяц при ежегодной оплате.

3. BrowserStack

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

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

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

Цена: От 29 долларов в месяц при ежегодной оплате.

Как анализировать скриншоты кроссбраузерного теста?

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

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

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

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

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

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий