Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.
Главная - Дизайн - Как проверить отображение сайта в разных браузерах, да ещё и с разными размерами экранов — онлайн

Как проверить отображение сайта в разных браузерах, да ещё и с разными размерами экранов — онлайн

такие разные браузеры

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

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

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

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

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

brauzer

Давайте посмотрим, что же это за браузеры:

- Opera этим браузером я пользуюсь чаще всего, мне нравится его дизайн, интерфейс и главное мне нравится его простота. Кстати я уже упоминал о нём в своей статье: SEO плагины для браузеров

Скачать Oper’у вы сможете с официального сайта: Ru.opera.com.

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

Скачать Google Chrome вы сможете с официального сайта: Google.ru/chrome.

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

Скачать Mozilla Firefox вы сможете с официального сайта: Mozilla-russia.org.

- Internet Explorer тут я даже ничего говорить не буду.

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

Но есть ещё один важный пункт. И этот пункт – размер экрана.

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

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

Сервис BrowserShots.org поможет вам проверить отображение сайта в разных браузерах, плюс ко всему вы можете выбрать различные размеры экранов.
Но обо всём по порядку.
Попав на главную страницу сайта, вы увидите список операционных систем, а так же список браузеров.
Рекомендую вам, опустится в самый низ сайта и выбрать пункт «Отметить все»:

Выбор

Теперь вы можете выбрать дополнительные характеристики, лично я поставил везде «Неважно», так как пока что мне это было действительно – неважно.

dopolnitelno

После того как вы решите какие настройки вам нужны, необходимо будет ввести URL своего сайта и нажать на кнопку «Отправить»:

url

После этого вы попадёте на страницу следующего содержания:

start

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

Хотя тут есть один очень важный минус, раз в полчаса вам нужно будет нажимать на кнопочку «Продлить», это нужно для того чтобы система могла выкидывать людей которые пытаются поставить всё на конвейер/автомат, и ускорить работу тем людям которые действительно нуждаются в скриншотах.

Хотя я решил эту проблему несколько иначе:
Я скачал программу «Кликер», и сделал, так чтобы каждые 10 минут программа кликала по кнопочке.

После того как создание скриншотов успешно закончилось я получил небольшое сообщение:

отчёт

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

ошибка

Нужно будет в ближайшее время её откорректировать…
Кстати: у вас такого сдвига нет?

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

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

И тогда всё будет идеально, ровно и круто. :lol:
Всегда ваш Мудрый Кот.

А на последок просто мега-офигительное видео «Путешествие на игрушечных джипах»!

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Изменяем цвет выделения текста с помощью небольшого CSS кода
Навигация на блоге, часть вторая – пагинатор
Навигация на блоге, часть первая – список страниц
Информация о статье:
Опубликовано: 21 февраля 2012, в рубрику Дизайн.
Теги: .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Александр Бобрин
    21.02.2012

    Спасибо, Егор! Начал проверку. О результатах сообщу :wink:

    [Ответить]

    Мудрый Кот ответил(а):

    удачи :arrow:

    [Ответить]

  • jonyit
    22.02.2012

    Нус сейчас проверим свой бложик :lol:

    [Ответить]

  • Роман
    23.02.2012

    нужно посмотреть в каком браузери как отражается

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


139 подписчиков

98 фолловеров


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux
telderi.ru, и еще много других