Skip to content

 

Узнайте, как другие видят ваш сайт с помощью Browser Size

browser sizeДорогие друзья, с вами на связи Ольга Абрамова, и сегодня я хочу поделиться с вами информацией, которая поможет вам узнать, как другие видят ваш сайт с помощью Browser Size, сколько людей видят самую важную информацию на вашем сайте при первом посещении.

Сразу покаюсь, что у меня большой косяк в этом деле. Что я имею в виду? Ещё почти два года назад я изучала книгу по SEO-оптимизации сайтов, хотя много тогда не понимала. Но блоги у меня уже были и я потихоньку разбиралась, как привлечь больше посетителей на них.

В книге, в частности, говорилось, что верхняя часть блога, так называемая шапка, хедер (англ. header) важное место на сайте и должно иметь содержание, которое могут прочитать поисковики. А они могут прочитать только текст. Картинки они не видят и не понимают, если в них нет ссылок и тега alt.

Я это благополучно забыла и забабахала, как вы сами видите, огромный баннер, который вроде как содержит информацию о сайте и его авторе, но поисковым системам это ничего не говорит, так как заголовок сайта не активный.

А в последнее время, задумываясь, почему же до сих пор не могу получить ТИЦ, вспомнила эту информацию и теперь надо создать новый баннер и чтобы заголовок был активный и красиво смотрелся. Так что работы много. Но недавно я нашла один сервис от Google.com, который ещё раз подтвердил мне, что мне надо срочно проводить реконструкцию в шапке.

Итак, Browser Size позволяет увидеть, как смотрится ваш сайт в браузере Chrome с различными размерами.

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

Browser Size действует по аналогичному принципу и помогает выявить оптимальный размер видимой части сайта для большинства пользователей, не используя прокрутку. Специальной программой собираются данные о ширине и высоте окна браузера некоторой группы пользователей. Если 90% могут видеть важную информацию сайта при первом посещении, то это очень хорошо. К сведению, не все пользуются полосой прокрутки или колёсиком на мышке. А кое-кто даже не знает, как это делать 🙂

Вот как это выглядит на моём скриншоте.

Browser Size

Как видно из скриншота 99% людей видят очень маленькую зону. 90% видят немного больше. Сравните эти размеры с размерами рабочей зоны своего браузера. Если вы видите всё, то кто-то ничего. Ничего важного и цепляющего. Наша задача разместить в зоне 99% самую важную информацию. В 90% важную.

Определите свои зоны видимости в Google с помощью сервиса http://browsersize.googlelabs.com/, введите URL своего сайта и нажмите Go. Как вы видите, в зону просмотра не входят панель управления, поисковая строка и пр. То есть чистая клиентская зона. Используйте её по максимуму 🙂

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

Если вы веб-дизайнер, вы можете использовать Browser Size для перестройки вашей страницы, чтобы минимизировать прокрутки и убедиться, что важные части страницы всегда видные вашей аудитории.

Извиняюсь, если объяснила непонятно. Можете здесь http://googlecode.blogspot.com/2009/12/introducing-google-browser-size.html почитать оригинал.

Часто бывает, сам понимаешь, а высказать не можешь. А то и вообще, одни эмоции, как у этих любимчиков. Чтоб вас всех так встречали 🙂

 

57 комментариев

  1. Арина:

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

    • Ольга Абрамова:

      Арина, большое спасибо, приятно читать 🙂 Я старюсь, чтобы было интересно и понятно. А к Вам не смогла зайти, сайт недоступен почему-то.

  2. Анастасия:

    Спасибо за ценную информацию!

  3. Ангелина:

    очень интересная статья, спасибо за информацию, учту.

  4. Валентин:

    Оля! Спасибо за интересную информацию. Уже проверил свой сайт. Вроде ничего, но поработать еще есть над чем.

    • Ольга Абрамова:

      Валентин, пожалуйста. Быстро Вы воплощаете идеи 🙂

    • Валентин:

      Лучше сделать сразу, потом можно и забыть или не будет времени.

  5. Игорь:

    Важная информация, думаю вы не одиноки в недоработках своего сайта, уверен и мне есть над чем еще работать

    • Ольга Абрамова:

      Игорь, спасибо. Создание сайта это нескончаемый процесс. Всё время приходится что-то добавлять и обновлять.

  6. Виктор:

    Благодарю за ценную информацию. Всем интересно взглянуть как
    их сайт смотрится у других.

    • Ольга Абрамова:

      Виктор, пожалуйста.

  7. Лидия:

    Оля, как говорится, не в бровь, а в глаз. Меня тоже на моем сайте раздражает невнятная хедер. Какой веб дизайнер поставил еле заметный шрифт в заголовке? А я боюсь поменять, чтобы еще хуже не стало. Хотелось бы, чтобы в заголовок можно было прикрутить какую-то флешку с линком. Я давно пользовалась WYSWG, с одной стороны было много работы мелкой, но с другой — больше возможностей. Может у кого есть опыт как на вордпрессе поменять шрифт заголовка и делать его «работающим»?
    Спасибо. Сорри за длинный комент. Спасибо за советы!!!!

    • Ольга Абрамова:

      Лидия, шрифты можно поменять в шаблонах стилей. Панель управления-Дизайн-Редактор-стили. Почитайте здесь http://abramo8a.ru/manual/kak-izmenit-shablon

  8. Виктория:

    Спасибо. Очень полезная информация и опыт. Как совсем начинающий блоггер я открыла для себя новые варианты посмотреть на себя со стороны

    • Ольга Абрамова:

      Виктория, пожалуйста. Осваивайте новые горизонты в сайтостроении.

  9. Владимир:

    Интересная информация, а откуда она если не секрет?

    • Ольга Абрамова:

      Владимир, смотрите внизу поста ссылку на блог Гугл.

  10. Olga:

    Спасибо, очень интересно!

  11. Светлана.:

    Спасибо!Информативная статья, особенно для новичков в этом деле, таких как я.

    • Ольга Абрамова:

      Светлана, пожалуйста.

  12. Елена:

    Олечка, спасибо за информацию. Не все мне еще, конечно, понятно. Т.е. увидеть — увидела, а выводы какие надо сделать — не знаю. Если Вы измените шапку сайта, подскажете потом, как это сделать можно? Я знаю, что можно с помощью дизайнеров, конечно. Но еще хочется и самой научиться.

    • Ольга Абрамова:

      Елена, мне тоже хочется самой сделать. С марта у меня начинается интересное обучение, думаю, мне это поможет в плане веб-дизайна 🙂 Тогда со всеми поделюсь.

  13. Олег:

    Вот интересно, если видимая часть слева, почему на большинстве блогов сайдбары справа?

    • Ольга Абрамова:

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

  14. Ирина beginway:

    Спасибо, Оля за полезный материал. У меня та же проблема с хедером. Буду решать.

    • Ольга Абрамова:

      Ирина, пожалуйста. Вы обязательно это решите 🙂

    • Ирина beginway:

      Оля, может Вам мой вариант решения понравится. Надо зайти на «Панель инструментов» и во вкладке «Общие» написать заголовок и краткое описание. В файле style.css, изменить код «color» на цвет вашего хедера( баннера), и размер шрифта сделать меньше. Теперь заголовок стал активным. Поисковым системам все видно, и менять кардинально ничего не надо.

    • Ольга Абрамова:

      Ирина, большое спасибо за совет. Но у меня дело в самом логотипе. Заголовок некрасиво смотрится, не то расположение. Надо картинку менять.

  15. Юлия:

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

    • Ольга Абрамова:

      Я вот тоже задумалась, может их оба справа разместить?

    • Юлия:

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

  16. Ирина gialit:

    Ольга! Получается, чем меньше шапка — тем лучше? Т.е. информацию нужно максимально в левый угол поставить? Или туплю? Ещё раз нужно прочитать мне.

    • Ольга Абрамова:

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

    • Ирина gialit:

      Ольга! По просьбе приятельницы помогла ей с установкой шаблона. Искала,искала — в итоге из множества скачанных и проверенных -ВСЕ(!!!) с минимум тремя вирусами и кучей ссылок. Зато шапки и дизайн пестренький и веселенький. Так я взяла и поставила самый простой.который вначале устанавливается по умолчанию в вордпрессе. Была удивлена -ни вирусов, нм ссылок!) Так приятно. Теперь просто его модернизировала. Довольно мило получилось.
      Ну, а теперь вопрос по теме.В этом шаблоне в шапке довольно большая фотография, мы её заменили на свою, и в левом углу ссылка этого сайта написана нами. Правильно ли я поняла, что робот эту ссылку тоже не увидит? Или всё-таки она будет информативной? Заранее спасибо. С уважением, Ирина.

    • Ольга Абрамова:

      Ирина, часто бывает, навороты только усложняют жизнь 🙂
      На Вашем блоге ссылка в шапке активная, а значит видимая для ПС.

  17. Анна:

    Очень интересная информация. Впервые слышу о таком сервисе. Спасибо, Ольга!

    • Ольга Абрамова:

      Анна, пожалуйста. Успеха Вашему блогу 🙂

  18. Ольга:

    Спасибо за статью. Но у меня сам шаблон не широкий, и что же? люди видят, получается совсем мало?

    • Ольга Абрамова:

      Ольга, все всё видят, только в разном объёме. 99% означает, что 99% посетителей точно увидят эту зону 🙂 Но это не значит, что все они не пользуются прокруткой. Возможно, стоит изменить шаблон или его настройки, если это надо.

  19. Елена langvia:

    Как я пропустила эту статью? Очень важная информация. Но у меня пока всё более-менее. Но в будущем хочу с шапкой поработать. Бывает, захожу на сайты, а там шапка на полстраницы. И грузится долго.

    • Ольга Абрамова:

      Вот и мне надо поработать. И что-то придумать новое.

  20. Александр Василенко:

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

  21. Марина:

    Спасибо за очень полезную информацию

    • Ольга Абрамова:

      Марина, пожалуйста 🙂 Заходите ещё.

  22. Наталья Нуждаева:

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

    • Ольга Абрамова:

      Я тоже думаю, особенно над шапкой.

  23. СЕРГЕЙ:

    Спасибо за хорошую информацию.Скажите, если заголовок сайта на английском SVOIMI-RUKAMI, а краткое описание на русском (делаем все сами), нормально для поисковиков?

    • Ольга Абрамова:

      Сергей, что люди будут искать через ПС, то ПС и выдадут. Поэтому не вижу разницы, как будет написано. Даже если «своими руками» будет написано по русски, они могут выдать Ваш сайт, т.к. читают латиницу.

  24. sergei:

    Спасибо,значит менять пока не буду.У меня фото не загружается в шаблон помогите.Я загружаю фото в компьютер затем в галерею .В галереи фото можно посмотреть.Нажимаю вставить в текст, вставляется жму посмотреть как будет выглядеть фото вместе с текстом в шаблоне.Текст появляется и рамка в ней(изображение031)-это изображение моего фото.Жму на него оно грузится но не загружается,менял шаблоны.В чем дело?СЕРГЕЙ

    • Ольга Абрамова:

      Сергей, я не знаю, в чём у Вас дело. Я картинки в текст загружаю в текстовом редакторе. Почитайте, как работать с текстовым редактором, может найдёте свои ошибки http://abramo8a.ru/manual/kak-rabotat-s-tekstovy-m-redaktorom-wordpress-2

  25. sergei:

    Ольга спасибо буду смотреть.Я хотел узнать фото на локальном сервере должно загружаться в шаблон чтобы изображение было видно?Мне некоторые пишут что когда поставишь сайт на хостинг тогда изображение появиться другие пишут что надо прописать 777 а где я так и не понял.СЕРГЕЙ

    • Ольга Абрамова:

      Сожалею, Сергей, но я не пользуюсь локальным сервером.

  26. sergei:

    Спасибо понял.СЕРГЕЙ

  27. sergei:

    Скажите а Вы на каком хостинге? Сколько общая оплата включая все услуги, в месяц или за год? Мне предлагают Джино другие Настенко,что Вы посоветуете.Сергей

    • Ольга Абрамова:

      У меня хостинг TimeWeb (в левой колонке внизу баннер). Тариф на год 1600 руб. и 2000МБ пространства. Но мне этого даже много оказалось. До сих пор ни разу не было причин быть недовольной работой хостера. Так что рекомендую.

  28. sergei:

    Здравствуйте спасибо за информацию.1600 руб.это хостинг ,домен и все услуги больше платить не за что не надо.СЕРГЕЙ.

    • Ольга Абрамова:

      Не надо.