Я каждый день просматриваю отчет статистики посещений моего блога пользователями. Хочу сказать, что на данный момент гугл с удовольствием показывает блог на 1-2 месте по «нестандартным» низкочастотным запросам. Один из таких был «правильная верстка сайта примеры«. Мне понравился этот запрос, потому что когда я начала изучать верстку сайтов, я тоже пыталась найти такие примеры, пока не поняла, что примером может стать любой сайт, поэтому я решила написать пост на эту тему.Самое важное заключается в том, что примером правильного сайта является любой сайт, при верстке которого соблюдались определенные правила. И в этой статье я просто хочу объяснить, что если вы хотите в примерах увидеть правильную верстку, то вы должны знать эти правила и уметь ими пользоваться, а в помощь для этого есть специальные инструменты, про которые я напишу в конце.
Итак, правильная верстка сайта — это верстка по стандартам . Я не люблю терминологию, ее всегда можно посмотреть в той же Википедии, напишу своими словами. Этот стандарт служит, как бы, мостиком между производителями браузеров и веб-мастерами, которые делают сайты. Этот стандарт разрабатывает организация, которая добивается, чтобы все производители браузеров поддерживали одинаковый уровень технологий. И объясняет, как верстать сайт, чтобы во всех браузерах он выглядел одинаково. Для проверки соответствия этим стандартам существуют инструменты — валидаторы, . Они очень удобны тем, что когда я захожу на сайт, на абсолютно любой, если в коде HTML или CSS есть ошибки, то специальные индикаторы загораются красным цветом, а при просмотре исходного кода подсвечивают строки с ошибками, и сказать, что сайт на 100% правильный — нельзя, а если индикаторы зелёные, то сайт соответствует стандартам. Но если вам это не нужно для работы, то лучше этого не знать, т.к. 90% сайтов в интернете, к большому сожалению, не соответствует стандартам на 100%, но это и не мешает пользователям просматривать сайты. Большая часть ошибок в верстке допускается в мелочах, которые не влияют на отображение сайта в браузере. В общем-то на этом можно было бы и закончить про правильную верстку сайтов, если бы не развитие поискового продвижения. Моё личное мнение, и думаю многих профессионалов тоже, сегодня правильная верстка заключается не только в чистом коде, который соответствует стандартам W3c, но и в оптимизированном коде. [ads1]Здесь я уже писала об основах оптимизации. Это и оформление метатегов, и другая внутренняя оптимизация кода, и перелинковка страниц.
Чуть не забыла, правильный сайт, это ещё тот, который удобен и нравится пользователю, и на котором нравится бывать поисковому роботу:).
P.S. После этой статьи не проверяйте мой блог на валидность, это один из шаблонов blogger, хоть я его чуть-чуть и приукрасила.
А вот здесь на сайты, которые соответствуют стандартам W3c. Смотрите и наслаждайтесь. И почитайте про Зена Гардена ().
Да вот как ошибки шаблона исправить?
Это же надо языки знать?!
И на нашей платформе помимо в самом шаблоне есть ошибки которые сделаны разработчиками например в френдконнект, рсс лента тоже выдёт ошибки…
Статья всё-таки рассчитана не на шаблонные сайты, а на самописные, к сожалению, даже если разбираться в коде, то все ошибки шаблона не исправить. Это должны делать разработчики.
А язык выучить не сложно, вопрос в другом — нужно ли это?:)
В шаблоне можно исправить ошибки CSS, они доступны. Все ошибки можно увидеть через тулбар Web Developer.
Пока писала комментарий, увидела ошибку в статье. Сейчас буду исправлять.
Я имею в виду что ошибки исправить сложно и на нашем блогспот они есть изначально!
Тем более исправлять html css новичкам, я боюсь в это лезть думаю не потяну, или надо время на изучение… Я смотрел в валидаторе свой блог ошибки вижу но как исправить не известно….
Я поняла вашу мысль, если вы новичок, не знаете верстки, то не заморачивайтесь этим:)
Пользователям они тоже не мешают, современные браузеры умеют сами исправлять недочёты в коде.
Я хоть и разбираюсь в HTML и CSS, но не лезу исправлять шаблон. И вам это не нужно.
А то что, разработчики блоггера не позаботились о валидной верстке — это очень плохо, но не смертельно.
..Если не ошибаюсь это учитываться при ранжировании, или по крайне мере планируется!
Да и наверняка на время загрузки сайта влияет….
При ранжировании скорее всего только планируется:), т.к. посмотреть сайты в первых позициях выдачи — нет ни одного без ошибок, даже среди web-студий. Но это не означает, что валидность можно игнорировать. Наличие ошибок не может гарантировать, что один и тот же сайт будет в разных браузерах отображаться одинаково, а соответствие стандартам более менее это гарантирует. В общем это основное, почему от ошибок нужно избавляться.
На загрузку страницы влияют не мелкие ошибки, а в целом подход к верстке — табличная+стили в HTML замедляют загрузку и это устаревший подход и не соответствует стандарту, блочная+стили отдельным файлом — ускоряют.
Спасибо, понятно! 🙂
FUSESOUND, мне приятно, что смогла что-то для вас объяснить. Хочу ещё добавить, что страницы могут долго загружаться из-за больших изображений, из-за видеороликов, которые находятся внутри кода HTML. В блоггере этот момент не очень удачно продуман, т.к. загрузка всего контента идет в порядке общей очереди, т.е. пока не загрузится первое — не загрузится второе. В нешаблонном сайте это осуществляется с помощью отдельного файла стилей в котором находятся изображения, открытие роликов в новом окне.
Ну у меня блог бывает грузится очень быстро.
Подтормаживает загрузку шапка-изображение тяжёлое, френдконнект-кривой скрипт, да и горизонтальное меню кривоватое, и бывает как уже сам хост работает…
Быстрая загрузка за счёт закрытия ссылок скриптов на главной тегами (nofollow) (noindex)…
Вес к сожалению 107 кб, убавить пока не получается….
Кстати в самом шаблоне удалил не понятные урлы, что снизило вес на 20кб!!!
FUSESOUND, а писали — новичок!:)
Я была на вашем блоге, он быстро у вас грузится. Вес 107кб — это вес кода HTML без изображений и скриптов.
А общий вес вашего блога
Документы (8 файлы) — 182 кб (287 кб без сжатия)
Изображения (56 файлы) — 576 кб
Объекты (2 файлы) — 2 кб
Скрипты (18 файлы) — 222 кб (739 кб без сжатия)
Стили (6 файлы) — 18 кб (78 кб без сжатия)
Всего — 1001 кб (1682 кб без сжатия)
Это по данным тулбара Web Developer
А самый оптимальный вес страницы «считается» 150кб, и этот вес подразумевается с учетом всех изображений и скриптов, но таких сайтов уже почти нет, в основном все намного тяжелее. Я думаю эти 150кб — давно устаревшие данные.
…Так все пишут не больше 100 кб должен быть сайт?!
Не могу Вас понять, так у меня что то не то если 1682 кб без сжатия?!
Вообще цифры взяты не случайно, считается, что поисковые роботы не индексируют глубже значения 150кб, (если не ошибаюсь), но на деле индексация проходит нормально. В плане загрузки страницы в браузере — она по-любому загрузится, вопрос — за какое время? Это уже зависит от провайдера пользователя — скорости инета, производительности компьютера. Соответственно, подстроиться под всех посетителей блога невозможно.
Моё личное мнение — с точки зрения внешнего вида сайта у вас все отлично!
Не стоит забывать, что на бесплатных блогохостингах мы ограничены в своих действиях, и надо довольствоваться тем, что мы имеем:).
Но если бы у вас был блог на платном хостинге с уникальным дизайном — то такой вес все-таки большой.
Забыл сразу написать-дело в том недавно попробовал установить виджет linkwithin и вес вырос на 15 кб! Виджет не понравился, я его удалил но вес остался! Вообще интересно что блогспот их как то запоминает!
Я как то на демо блоге удалил все скрипты ставлю чистый шаблон и эти скрипты появляются внов!
Вот в принципе есть повод разобратся в html.
Ну у меня конечно же вес дают и большое количество ссылок, они в каждом посту и количество постов на главной…
P.S.
Подписался на Ваш блог понравился, хорошо пишите!
FUSESOUND, от скриптов, которые находятся в блоггере, я думаю, не избавиться, т.к. именно они поддерживают функционал блога. Подгружаются автоматически с сервера блоггера. Почему от виджета вес остался, сказать не могу, наверно, правда блоггер его запоминает.
А изучение одного только HTML не поможет. У них шаблон XML написан.
А по-поводу веса ссылок — это вы что-то путаете, они физический вес страницы не увеличивают. Может увеличиться время загрузки страницы из-за того, что что-то подгружается с другого сайта, тот же ролик, фотография.
P.S. Спасибо:)
Стандарты по весу невсегда надо принимать как дефакто, некоторые сайты содержат так много информации , что просто нереально их сделать маленькими по объёму. Оптимизировать к минимому надо всегда и есть много методик. Про валидацию , она полезна ещё и тем что браузеру остаётся только показать сайт , а не занимать пересчётов неправильных тегов и анализом ощибок. Другое что порой валидаторы не принимают некоторых спец тегов. Например noindex от Яндекса им непонятен и могут ругаться.
Andrei, правильно говорите! Спасибо за комментарий:)
Да вот как ошибки шаблона исправить?
Это же надо языки знать?!
И на нашей платформе помимо в самом шаблоне есть ошибки которые сделаны разработчиками например в френдконнект, рсс лента тоже выдёт ошибки…
8 апреля 2010 г. 3:24
Статья всё-таки рассчитана не на шаблонные сайты, а на самописные, к сожалению, даже если разбираться в коде, то все ошибки шаблона не исправить. Это должны делать разработчики.
А язык выучить не сложно, вопрос в другом — нужно ли это?:)
В шаблоне можно исправить ошибки CSS, они доступны. Все ошибки можно увидеть через тулбар Web Developer.
Пока писала комментарий, увидела ошибку в статье. Сейчас буду исправлять.
8 апреля 2010 г. 4:31
Я имею в виду что ошибки исправить сложно и на нашем блогспот они есть изначально!
Тем более исправлять html css новичкам, я боюсь в это лезть думаю не потяну, или надо время на изучение… Я смотрел в валидаторе свой блог ошибки вижу но как исправить не известно….
8 апреля 2010 г. 4:43
Я поняла вашу мысль, если вы новичок, не знаете верстки, то не заморачивайтесь этим:)
Пользователям они тоже не мешают, современные браузеры умеют сами исправлять недочёты в коде.
Я хоть и разбираюсь в HTML и CSS, но не лезу исправлять шаблон. И вам это не нужно.
А то что, разработчики блоггера не позаботились о валидной верстке — это очень плохо, но не смертельно.
8 апреля 2010 г. 5:09
..Если не ошибаюсь это учитываться при ранжировании, или по крайне мере планируется!
Да и наверняка на время загрузки сайта влияет….
8 апреля 2010 г. 5:41
При ранжировании скорее всего только планируется:), т.к. посмотреть сайты в первых позициях выдачи — нет ни одного без ошибок, даже среди web-студий. Но это не означает, что валидность можно игнорировать. Наличие ошибок не может гарантировать, что один и тот же сайт будет в разных браузерах отображаться одинаково, а соответствие стандартам более менее это гарантирует. В общем это основное, почему от ошибок нужно избавляться.
На загрузку страницы влияют не мелкие ошибки, а в целом подход к верстке — табличная+стили в HTML замедляют загрузку и это устаревший подход и не соответствует стандарту, блочная+стили отдельным файлом — ускоряют.
8 апреля 2010 г. 5:56
Спасибо, понятно! 🙂
8 апреля 2010 г. 6:00
FUSESOUND, мне приятно, что смогла что-то для вас объяснить. Хочу ещё добавить, что страницы могут долго загружаться из-за больших изображений, из-за видеороликов, которые находятся внутри кода HTML. В блоггере этот момент не очень удачно продуман, т.к. загрузка всего контента идет в порядке общей очереди, т.е. пока не загрузится первое — не загрузится второе. В нешаблонном сайте это осуществляется с помощью отдельного файла стилей в котором находятся изображения, открытие роликов в новом окне.
8 апреля 2010 г. 6:16
Ну у меня блог бывает грузится очень быстро.
Подтормаживает загрузку шапка-изображение тяжёлое, френдконнект-кривой скрипт, да и горизонтальное меню кривоватое, и бывает как уже сам хост работает…
Быстрая загрузка за счёт закрытия ссылок скриптов на главной тегами (nofollow) (noindex)…
Вес к сожалению 107 кб, убавить пока не получается….
Кстати в самом шаблоне удалил не понятные урлы, что снизило вес на 20кб!!!
8 апреля 2010 г. 6:40
FUSESOUND, а писали — новичок!:)
Я была на вашем блоге, он быстро у вас грузится. Вес 107кб — это вес кода HTML без изображений и скриптов.
А общий вес вашего блога
Документы (8 файлы) — 182 кб (287 кб без сжатия)
Изображения (56 файлы) — 576 кб
Объекты (2 файлы) — 2 кб
Скрипты (18 файлы) — 222 кб (739 кб без сжатия)
Стили (6 файлы) — 18 кб (78 кб без сжатия)
Всего — 1001 кб (1682 кб без сжатия)
Это по данным тулбара Web Developer
А самый оптимальный вес страницы «считается» 150кб, и этот вес подразумевается с учетом всех изображений и скриптов, но таких сайтов уже почти нет, в основном все намного тяжелее. Я думаю эти 150кб — давно устаревшие данные.
8 апреля 2010 г. 7:07
…Так все пишут не больше 100 кб должен быть сайт?!
Не могу Вас понять, так у меня что то не то если 1682 кб без сжатия?!
8 апреля 2010 г. 7:23
Вообще цифры взяты не случайно, считается, что поисковые роботы не индексируют глубже значения 150кб, (если не ошибаюсь), но на деле индексация проходит нормально. В плане загрузки страницы в браузере — она по-любому загрузится, вопрос — за какое время? Это уже зависит от провайдера пользователя — скорости инета, производительности компьютера. Соответственно, подстроиться под всех посетителей блога невозможно.
Моё личное мнение — с точки зрения внешнего вида сайта у вас все отлично!
Не стоит забывать, что на бесплатных блогохостингах мы ограничены в своих действиях, и надо довольствоваться тем, что мы имеем:).
Но если бы у вас был блог на платном хостинге с уникальным дизайном — то такой вес все-таки большой.
8 апреля 2010 г. 8:11
Забыл сразу написать-дело в том недавно попробовал установить виджет linkwithin и вес вырос на 15 кб! Виджет не понравился, я его удалил но вес остался! Вообще интересно что блогспот их как то запоминает!
Я как то на демо блоге удалил все скрипты ставлю чистый шаблон и эти скрипты появляются внов!
Вот в принципе есть повод разобратся в html.
Ну у меня конечно же вес дают и большое количество ссылок, они в каждом посту и количество постов на главной…
P.S.
Подписался на Ваш блог понравился, хорошо пишите!
8 апреля 2010 г. 18:56
FUSESOUND, от скриптов, которые находятся в блоггере, я думаю, не избавиться, т.к. именно они поддерживают функционал блога. Подгружаются автоматически с сервера блоггера. Почему от виджета вес остался, сказать не могу, наверно, правда блоггер его запоминает.
А изучение одного только HTML не поможет. У них шаблон XML написан.
А по-поводу веса ссылок — это вы что-то путаете, они физический вес страницы не увеличивают. Может увеличиться время загрузки страницы из-за того, что что-то подгружается с другого сайта, тот же ролик, фотография.
P.S. Спасибо:)
9 апреля 2010 г. 0:06
Стандарты по весу невсегда надо принимать как дефакто, некоторые сайты содержат так много информации , что просто нереально их сделать маленькими по объёму. Оптимизировать к минимому надо всегда и есть много методик. Про валидацию , она полезна ещё и тем что браузеру остаётся только показать сайт , а не занимать пересчётов неправильных тегов и анализом ощибок. Другое что порой валидаторы не принимают некоторых спец тегов. Например noindex от Яндекса им непонятен и могут ругаться.
10 апреля 2010 г. 4:19
Andrei, правильно говорите! Спасибо за комментарий:)
10 апреля 2010 г. 5:09
дох… очень много узнал))