Сайт в разных браузерах

Меняя новый шаблон (тему) вашему сайту (блогу), часто мы забываем про один очень важный фактор — кроссбраузерность. Чтобы объяснить, о чём же пойдёт речь в этой статье, я приведу цитату из Википедии:

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

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

А часто ли вы проверяете свой сайт в разных браузерах?

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

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

Сейчас в моде мобильные гаджеты — планшетники и смартфоны. Огромная часть пользователей просматривают ваш сайт именно с таких устройств. А что если они увидят размытую вёрстку или разъехавшиеся блоки? Структура сайта также может искажаться при другом разрешении монитора.

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

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

Это можно сделать различными способами.

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

Способ 1.

Вы можете установить на свой компьютер огромное множество браузеров: Оперу, Хром, Огненного Лиса. IE можно не устанавливать, если у Вас ОС Windows. В ней он установлен по-умолчанию.

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

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

Способ 2.

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

Способ 3.

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

Итак, нужно зайти на сайт browsershots.org, где Вам будет представлен огромный список браузеров. Не обязательно выбирать все.

Достаточно выбрать несколько — самые популярные.

Сервис browsershots.org предлагает для этого удобное меню в нижней части списка:

Кроме нужных браузеров вы можете выбрать следущие параметры:

  • разрешение экрана;
  • количество цветов;
  • версия JavaScript;
  • наличие Java;
  • наличие Flash плеера и его версию.

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

Теперь жмём зелёную кнопку Submit.

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

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

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

За последний месяц статистика использования популярных браузеров примерно такова (в скобках указан примерный процент пользователей Российского интернета, цифры могут несколько отличаться от реальных):

  • Google Chrome (~50%)
  • Mozilla Firefox (~12%)
  • Opera (~11%)
  • Safari (~9%)
  • Internet Explorer (~8%)

Зачем нужна кроссбраузерность?

3 причины, почему вашему сайту необходима кроссбраузерность:

  • Вы будете терять большое количество посетителей, которым не уделили внимание при вёрстке сайта;
  • Потеря посетителей — это потеря вашей прибыли;
  • Корректное отображение сайта во всех популярных браузерах говорит об имидже вашего сайта, об имидже вашей компании.

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

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

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

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

Showcase and share your app across all platforms with no download required.

RunThatApp is a software service tool for app developers to test or promote native builds of their mobile apps as fully playable, sharable, interactive demos which run in any web browser. Your app becomes as easy to play with and share as a YouTube video.

Allow your customers to try your app safely in any browser from any device, or in many other demo related activities.

We currently run Apple iOS and Android Apps (the real apps, the actual apps), with no lines of code changes by the developers, no libraries (SDKs) added to the build, and nothing unsafe used in the browser: no Flash, no Java, no plugins, no downloads, just safe HTML5!

The Actual App-Casting technology supports smooth multiple shared user collaboration, video game speeds, and many other technical features.

There are typically no actual iOS or Android phones at the server, because it employs device emulation. This reduces costs.

Most of our core technology is complete, as demos show, with billing management and GUI remaining

Older semi-solutions use real hardware, or use fake «Web Apps» generated by rewriting an App in a cross platform library which creates a limited Semi-Native App, or a crippled Web App.

We are not running mere generic output web-apps.

Another semi-solution such as Google App Streaming will require a special Android browser, on a recent Android device, displays only certain Android Apps, runs only on WiFi in USA, not on Tablets, and additionally only if Google App 5.4.24 or later is installed on your phone. We have ZERO requirements. Any browsers, Any device, Any App, Anywhere.

All our pricing plans are based on a very inexpensive ‘funded utility’ model. Customers only pay for what gets used.

The apps are real actual apps, capable of accessing all of iOS and Android OS!

Хорошо, когда есть свой сайт. Особенно, если это блог. Можно не просто писать всякую ерунду, но и использовать его как дневник или как записную книжку. К тому же количество закладок в браузере не безгранично. Так не долго и запутаться.
Поэтому сегодня я хочу оставить для себя пару полезных сайтов. Да, может быть, и еще кому пригодится.
Когда делаешь страницы сайта или правишь код, то надо помнить, что посетитель в будущем сможет ведь тоже просматривать эту страницу. Но в каком браузере он это сделает? Internet Explorer, Firefox, Opera, Google Chrome? Поэтому хорошо бы представлять себе, а как моя страница выглядит в разных браузерах?
Думаю, глупо и долго устанавливать себе на компьютер кучу программ.

Поэтому проще воспользоваться некоторыми готовыми решениями.
Netrenderer.com позволяет посмотреть ваш сайт в разных версиях Internet Explorer. Начиная от версии 5.5 и заканчивая актуальной 11. Есть так же фишка, при которой изображение с двух разных версий браузеров накладывается друг на друга для наибольшего удобства при сравнении. Сервис работает быстро и, главное, бесплатно.
Browsershots.org дает нам возможность посмотреть свой сайт в разных операционных системах (Linux, Windows, Mac) и в разных браузерах:
Chrome
Firefox
Internet Explorer
Opera
Safari
SeaMonkey
Скриншоты делает очень долго, но зато бесплатен. Плюсом идет удобный выбор нужных браузеров.

Michael B., Indiana: It’s the best service of its kind and we rely heavily on it — richtom, U.K.: This is great… a must use for any web developer! — Luke R., Canada: Hi, just writing to say I love this tool, and use it extensively. — websitetips.com, U.S.: Does a good job, immediate results, no waiting — TheGoodOmen, U.K.: Thanks for the link to the netrenderer … that is very cool — Ralf, Germany: …wollte ich euch heute mal einen dienst vorstellen, bei dem einen hören und sehen vergeht … ganze 6 sekunden hat das gedauert + er checkt alle ie-versionen. sensationeller dienst wenn man bedenkt, wie lange man bei browsershot.org mitunter warten muss, bevor sie einem angezeigt wird — Paul K., Maryland: Your site is like a lifeline for me — Christian S, Germany: …wer nun aber ein richtiges Betriebssystem (BSD, GNU/Linux, etc.) benutzt, muss mühsam via Wine (oder sonstwie) IE4Linux installieren, eine VM aufsetzen oder gar extra Windows hochfahren — ein Riesenaufwand, den man glücklicherweise umgehen kann, da es den IE NetRenderer gibt … Wenn das nicht genial ist! — Brent L., New York: You’re a great resource for developers! — Michael R., London: I love this service. As a mac user and web designer I find it invaluable — Jason B., Los Angeles: I’d just like you to know how much IE NetRenderer has helped me over the years. Being able to have a quick look at the major IE bugs in various versions has been a lifesaver — Karl L.R., Sweden: Keep up the good work, it’s an awesome service! — Todd S., Michigan: As a Mac user who does graphic design & web design for a living, I rely heavily on NetRenderer. You deserve to be paid for your efforts, and I’d gladly pay a small monthly or annual fee to continue using the service — Axel T., Stockholm: You guys are the best!

Добавить комментарий

Закрыть меню