Мы нарисовали и сверстали шаблон сайта интернет-магазина. Теперь следует проверить его кроссбраузерность. То есть на то, как сайт смотрится в разных браузерах. Включаем денвер и открываем сайт в разных браузерах. Для проверки кроссбраузерности вам следует установить на свой компьютер, как минимум четыре самых популярных браузера.
Это Opera, Chrome, Mozilla Firefox Internet Explorer. Во время верстки мы использовали один из браузеров, в котором тестировали тот или иной элемент. Я для верстки использую Chrome, но при этом всегда просматриваю страницы сайта в Опере и Мозилле, таким образом я могу устранить большинство проблем отображения еще на стадии вёрстки.
Если сайт нормально смотрится во всех четырех самых популярных браузерах, значить с ним не произойдет ничего страшного и в более редких системах. Это не всегда верно, но тем не менее приходится мириться.
На каких версиях проверять кроссбаузерность сайта. Скачивайте последние версии и смело в бой. Пользователи в России довольно часто переустанавливают операционные системы, по той причине, что 70% компьютеров в нашей стране работает на не лицензионных копиях ОС. Поэтому на большинстве компьютеров стоят относительно новые версии браузеров. К тому же сами браузеры постоянно предлагают обновиться, так что закоренелых пользователей старых версий браузеров становится все меньше.
Чем старше ваша возрастная аудитория, тем реже они переустанавливают браузеры и тем чаще используют устаревшие версии браузеров. То есть, если аудитория вашего интернет-магазина – старшая возрастная группа, то вам обязательно нужно готовить сайт под все версии Internet Explorer, начиная с 4.
Если у вас аудитория более и менее молодая, то тогда вам не следует ломать голову по поводу версий браузера, есть и другие более важные вещи, которые нужно сделать. Например подумать об отображении в мобильных устройствах и мобильной версии сайта.
На всякий случай, всё таки стоит проверить сайт на внешний вид в самых разных браузерах. При этом установить старые версии браузеров на ПК без соответствующего программного обеспечения будет трудно. Поэтому на локальном сервере на проверить на кроссбраузерность старых версий трудно. Да и это не обязательно.
Когда вы выложите сайт на хостинг, то для проверки кросбраузерности лучше всего обратится к вот этому ресурсу browsershots.org. Принцип работы с ним прост. Вставляете в большое окошко адрес вашего сайта и жмете на кнопку Submit.
Совет! Для того чтобы время ожидания не затянулось, выбирайте только проверку для пользователей Windows и Mac. При этом удалите лишние галочки оставим только версии самых популярных браузеров и их старых версий с шагом - 5 (пять предыдущих поколений). Пользователи Linux практически не покупают в нашей стране в интернет-магазинах.
Именно с этим браузером по моему опыту должны возникнуть главные проблемы. Иногда на него хочется плюнуть в сердцах, но делать этого не стоит. С этого не самого популярного браузера делается довольно много покупок, особенно в магазинах женской тематики.
Ошибка! Стандартные случай для Internet Explorer. Все три популярных браузера конкурента показывают сайт нормально, а Explorer, то не подгружает фоновую картинку css стилей, то некорректно расплылся один из элементов, то не меняет цвет.
Проблема в синтаксисе. Internet Explorer очень чувствителен к пробелам в CSS коде ваших стилей. То есть если не подгружается фоновая картинка, то даю 90%, что у вас стиле подгрузки изображения, где-то есть лишний пробел. Или перед url, пробел, или при ориентировании фона. Нужно проверить синтаксис и удалить все лишние пробелы в написанных вами свойствах.
Также Explorer не прощает отсутствие размеров. Например вы указали просто 1000 без размера. Остальные браузеры отображают ширину сайта нормально, так как они считали в начале кода вашего стиля размер по умолчанию. А вот Explorer этого не сделал. Нужно добавить пиксели или другие единицы измерения.
Алгоритм выяснения ошибки при проверке сайта на кроссбарузерность. Видите ошибку, затем в Гугле или Опере наводите на место ошибки курсор, нажимаете правую клавишу («Проинспектировать элемент» для Оперы, «Просмотр кода элемента» для Хрома), внизу появляется окно с кодом, разделенное на две части, где в правой части показаны стили, примененные к этому участку сайта. Там написана строка в файле CSS стилей.
Теперь открывает фаил стилей в Notepad++, ищете нужную строку и проверяет её на пробелы и прочие ошибки.
Если ошибку так и не нашли, можно создать соответствующий стиль только для Explorer. Пишете свойство, которое хотите применить.
Например:
background:url(../../images/red_footer.jpg) top repeat; и ставите перед стилем два слеша.
// background:url(../../images/red_footer.jpg) top repeat; - теперь этот стиль будет применен только для Explorer. Делать так стоит только в крайних случаях, когда нет другого выхода.
Просмотрите как можно больше страниц в каждом из популярных браузеров. Обязательно положите товар в корзину, посмотрите как происходит заказ, пролистывайте страницу до конца, одновременно проверяйте корректность ссылок.
План курса и окончание первого раздела.В разделе: Новости интернета, сео, интернет технологии мира.
Первый раздел курса по созданию интернет-магазина выложен полностью, но не завершен. Уже сейчас видно, что в нем кое чего не достает. Все главы раздела будут постоянно дополняться и автор надеетс...
|
 Анализа сайта онлайн PR-CYВ разделе: Анализ сайта
Сервис по комплексному анализу сайтов PR-CY – разработан специально для веб-разработчиков, SEO-оптимизаторов и копирайтеров. Система анализа сайтов и доменов позволяет быстро полу...
|
 YCCY — пакетная проверка параметров сайтовВ разделе: SEO сервисы и софт
YCCY - является бесплатной программой по проверки уровня индексации веб-сайта, ссылок и веб-страниц в таких поисковых системах как Яндекс, Google, Рамблер и Yahoo.
...
|
 SeoBudget - проверка и контроль позиций сайтаВ разделе: Проверка позиций сайта
Сервис проверки и контроля позиции сайта SEOBudget –является инструментом для веб-разработчика и SEO-оптимизатора, с помощью которого вы сможете определить позиции вашего веб-ресурса, ...
|
Нет комментариев. Ваш будет первым!
