Хотите знать как пошив модного пиджака портит сайт?

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

Представили…, а теперь представьте, как вы выглядите в этом пиджаке…

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

К чему я веду. Сайт, блог или другой веб-ресурс, как и человека встречают по одежке и провожают по уму. Одежкой для сайта является — дизайн. Качеством пошива — верстка. И довольно часто много внимания уделяется дизайну, и совершенно не уделяется внимание корректной верстке. А ведь покупая одежду, Вы проверяете каждый шов и обработку срезов одежды, не так ли?

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

Такое «разлезание» сайта встречается довольно часто, даже на хорошо известных ресурсах. Например, Amazon.com после быстрой реакции на критику , которая похоже вызвала очередной редизайн — Смотрим как это выглядит:

браузер opera

разлазится в разных разрешениях экрана в IE 6
(расшифровываю для тех, кто не знает — браузер Internet Exploer 6 версии)

браузер opera

В Опере 9

Начиная с разрешения 832 х 624 и ниже Amazon «разлазится». Шапка сайта смотрится – хорошо. Контент вылазит вправо. Разрешение 800 х 600. Шапка сайта не помещается на экран и урезается справа. Контент вылазит еще дальше за шапку вправо. Разрешение 1024 х 768 и больше – это разрешения, при которых Амазон смотрится хорошо.

maulnet Маул

Браузер все тот же IE 6. Разрешении экрана можно брать любое: верх с баннером вылазит вправо на пару пикселей. Маул, если ты это видишь — подправь.

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

maulnet.ru


Как проверить сайт, даже если вы ничего не понимаете в верстке и дизайне?

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

Вот с проверкой разными браузерами вам придется посложнее. Для начала их надо установить, а потом уже проверять сайт в разных разрешениях. Например, Саша — верстальщик, который объяснял и обучал меня основам верстки, проверяет сайты в 3 — 11 браузерах, включая IE 5.5, которым по статистике пользуется все меньше и меньше народа.

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

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

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

P.S. «Разлезание сайта» в разные стороны — это, пожалуй, один из самых частых явлений на коммерческих сайтах, и, особенно, сайтах сделанных новичками в веб дизайне и верстке.

P.S. S. По статистике, читатели моего блога используют:

Браузеры IE — 45%
Браузером Opera — 39,4%
Браузером Firefox — 10,6%
Другие браузеры — 5%

Полезные сервисы для тестирования на кроссбраузерность, сервисы и утилиты

Описание нескольких бесплатных и платных сервисов для тестирования сайта на кроссбраузерность
Описание BrowserShots.org — проверьте отображение вашего сайта в разных браузерах

7 Responses to Хотите знать как пошив модного пиджака портит сайт?


  1. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php:64 Stack trace: #0 /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php(19): the_commenter_link() #1 /home/svetlana/public_html/wp-includes/class-walker-comment.php(180): custom_comment(Object(WP_Comment), Array, 1) #2 /home/svetlana/public_html/wp-includes/class-wp-walker.php(146): Walker_Comment->start_el('', Object(WP_Comment), 1, Array) #3 /home/svetlana/public_html/wp-includes/class-walker-comment.php(140): Walker->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #4 /home/svetlana/public_html/wp-includes/class-wp-walker.php(371): Walker_Comment->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #5 /home/svetlana/public_html/wp-includes/comment-template.php(2091): Walker->paged_walk(Array, '5', 0, 0, Array) #6 /home/svetlana/public_html/wp-content/themes/canvas/comments.php(43): wp_list_comments(Array) #7 /home/svetlana/pub in /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php on line 64