Мы весьма любопытно, особенно когда дело доходит до дизайна и веб-разработки мы хотим знать, просто все.

Поэтому, следуя нашему веб-дизайна формы survey, мы решили поближе взглянуть на блоге конструкций, проанализировать их и выяснить, какие проектные решения являются общими и какие решения не используются в all.

Так как мы хотели, чтобы сделать обследование как можно более объективными, мы использовали Technorati Top Blogs и проанализировал 50 самых популярных блогов, которые появляются там.Это doesn’ T действительно имеет значение, если список Technorati правильно или нет — мы хотели выяснить, какие дизайнерские решения крупных игроков (ака самые популярные блоги) предпочитают.Популярные блоги часто рассматриваются как примеры эффективного и функционального дизайна (который не обязательно так)

Блог Design Survey

Мы определили 30 задач проектирования и рассматриваются решения для каждой проблемы в отдельности.Мы поставили 30 вопросов, которые мы хотели бы ответить с нашего блога обследования.Ниже мы приводим Результаты нашего опроса популярного блога designs — Результаты анализа 50 популярных блогов в соответствии с Technorati’ S Top 100.

Учитывая Technorati’ топ-50, мы отфильтровываются социальных сетей и блогов, которые искусственно стал популярным — например,через обратные ссылки в выпущенном темы WordPress.Приз за самую суматоху CSS-код идет на Smashing Magazine — Тем не менее, мы собираемся что-то делать в течение следующих weeks.

Обратите внимание: результаты представлены ниже не должны рассматриваться как guidelines для эффективного дизайна блога.Они должны дать вам интуиция которого решение может быть лучше, чем другой.Тем не менее, необходимо учитывать контекст вы работаете как внутри, так — Следующие наши выводы слепо won’ т обязательно улучшить свой дизайн.Тем не менее, полезно знать, что крупные игроки делают и, что более важно, то, что они don’ T do.

1.Layout

Начнем с анализа макетов использовались на самых популярных блогов в блогосфере.Существуют ли более 2-колонки-макетов, чем 3-колонки-макетов?Готовы макеты центру?Являются ли они фиксированными, жидкости или эластичные?Приведены таблицы, до сих пор используется?В этом разделе мы ответим на все эти questions.

1.1.Сколько колонок

Вопрос о том, следует использовать 2 колонки 3 колонки или в дизайн-макет почти философский.К сожалению, мы weren’ T смог найти каких-либо результатов юзабилити исследований, которые предпочли бы одно решение за другим.Как обычно, он depends от контекста и от целевой группы вы имеете дело с.В некоторых случаях это просто невозможно, чтобы найти правильный баланс между первичным и вторичным содержания с 2 колонками.Втаких ситуациях вам может потребоваться разделить втором столбце (боковая панель) на две части: — на самом деле это решение используется довольно often.

В обоих случаях необходимо, чтобы сделать структуру прозрачной и понятной как это возможно.Макет с 4 и более колонн часто не очень хорошая idea.

По нашим данным,

• 58% использование трех и более столбцов в layouts
  (TalkingPointsMemo, Copyblogger, Mashable, Lifehacker),
• 42% используют 2-колонки layouts
  . (Zen Привычки, GigaOM, Google Blog, Сет Годин, Boing Boing)

TPM используется несколькими колонками.58% топ-блоги использовать тот же дизайн approach.

По-видимому, 50 блогов достаточно, чтобы найти необычные решения макета. Drudgereport использует то, что мы предпочитаем называть “ анти-layout”.И TPM использует иногда 2, иногда 3, а иногда и 4 колонки.В последнем случае мы просто don’ T понимаю, почему названия статей не clickable.

1.2.По центру или по левому краю макета

На самом деле, можно было наблюдать тенденцию к центру макеты дизайна несколько лет назад — всего это была попытка найти оптимальное решение для читателей с больших и малых разрешениях экрана.Поскольку все больше и больше пользователей, как правило, чтобы перейти к более высоким разрешением, один пытается сбалансировать количество пространства вокруг макета, обеспечивая такое же количество пробелов слева и справа от макета и, таким образом фокусировки reader’ S внимание наСодержание, поместив его в середине браузер window.

ReadWriteWeb с центрированного макета.По данным нашего опроса, 94% топ-блоги центре layout.

И, видимо, эта тенденция сумела стать стандартным подходом в течение последних лет.В самом деле, по данным нашего опроса, 94% блогов имеют центру layout.Среди них Copyblogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, TechCrunch и Huffingtonpost.

1.3.Исправлено, эластичный или жидкости

Чтобы быть честными, мы haven’ T ожидал такой сильной тенденцией к фиксированной раскладки (PX-макетов).Это действительно замечательно, что среди 50 лучших блогов ни одного использована упругая макета (ширина макета растет с ростом размера шрифта), и лишь малая часть используется жидкость элементы (раскладка меняется в зависимости от размера окна браузера).Вот точные выводы:

• 92% топ-блоги использовались фиксированные layout,
• 8% используют жидкостьмакета или гибридной схемы с жидкостью макет elements
  . (Engadget, Smashing Magazine, Gigazine, Coorks и Liars)

Жидкости макеты может лучше adapt в user’ предпочтений в то время как фиксированные макеты сделать его проще для дизайнера, чтобы убедиться, что определенное дизайнерское решение выполнено не зависит от размера шрифта и окна браузера size.

Главный недостаток жидкости макеты их роста в ширину при работе с широким разрешение экрана: длина линии становится большой (здесь в пример Engadget с 150 символов влиния).Один может противостоять его с помощью max-width-attribute.

1.4.Ширина фиксированная структура

Как мы видели сильную тенденцию к фиксированной, на основе пикселей макеты дизайна, мы решили поближе взглянуть на эти планировки и попытаться обнаружить общие признаки таких макетов.В частности, мы рассмотрели ширина фиксированная структура, которая обычно соответствует ширине #container или #wrapper.Видимо,

• 9% использовали ≤ 800px
  (PostSecret, Сет Годин, Google Blog, BeppeGrillo.it),
• 15% использовали 801 – 900px
  (Neatorama, Kottke, DailyKos, PerezHilton, TUAW, Yanko Design, Scobleizer),
• 20% использовали 901 – 950px
  (Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),
• 56% использовали 951 – 1000px
  . (Ars Technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, ТМЗ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, потребительское, Slashfilm)

Заключение: можно выявить четкую тенденцию к широкому фиксированной раскладки шириной 951 – 1000px.

1.5.Доли между площадью содержание и формат?(При фиксированной раскладки)

Как you’ видели выше, каждая схема требует по крайней мере одну боковую панель, которая содержит вторичного содержание и предоставляет возможности навигации для пользователей.Однако то, что является лучшим способом для предоставления пользователям удобного чтения в то время как четко представлять все возможные варианты навигации?Или, иначе говоря,какой пропорции следует ли выбирать между основной области содержимого и общий макет сайта?Чем меньше пространства области основного содержания занимает, тем более доминирующим становится боковой панели, и наоборот.Где баланс лежат

макет шириной BoingBoing 870px в ширину, основной областью содержания 550px в ширину.В результате соотношение 0.63.

По данным нашего опроса,

• 96% использования нане менее половины всего макета для отображения главного content
  (исключения: Copyblogger (0,48), Slashfilm (0,48),
• 54% использовали 50 – 60% от макета для основной content
  (Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)
• 46% использовали 60 – 70% для основных content
  (Ars Technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN политических Код, CrunchGear)
• В среднем, 58% от общей компоновки сайт используется для отображения основной content.

1.6.CSS-макет или табличный макет

Это почти очевидно, что популярные блоги, которые обновляются несколько раз в день, следует отдавать предпочтение CSS-решений, поскольку они позволяют лучше и проще обслуживание и сократить время загрузки.Поэтому неудивительно, that

• 90% из топ-50 блогов использовал CSS на основе layouts,
• 10% используемых таблиц или комбинации таблиц с CSS
  . (PerezHilton, Neatorama, CNN политических Ticker, Беппе Грилло, TreeHugger)

Кроме того, TreeHugger использ …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров