Рейтинг@Mail.ru
загрузкаидет загрузка

Вебмастер, включи мозг!

Обычно люди, держащие ресурс в первую очередь для себя, а потом уже для всех остальных, редко задумываются о том, как сайт отображается у других пользователей. В принципе до этого момента я относился к ним. Конечно я смотрел, что из себя представляет блог под другими браузерами, такими как Firefox и IE, но на этом все и закончилось. Где-то с год как я проапгрейдил комп и месяцем позже бык куплен 20ти дюймовый широкоформатный моник Samsung T200 c разрешением 1680×1050. В дальнейшем размеры картинок и общая структура постов подбирались так, чтобы они хорошо отображались на МОЕМ мониторе.

Внутренний голос подсказывал, что надо бы посмотреть как оно по другую сторону баррикад с меньшими диагоналями, но только подсказывал. Никаких действий не предпринималось, и так оно бы и дальше шло по накатанной, если бы не одно событие: неделю назад сайт обзавелся зимне-новогодним логотипом 900×127 Повесил его, полюбовался и все.

Тут мне стучит в асю Rpg и кидает скрин WTF??

Вебмастер, включи мозг! (479.84 Kb)


Во мля.. Не влазит в 1280×800 Сидел подрезал пол часа до 600×127 Потом открыл Browsershots, скормил ему парочку страниц для разрешения 1024×768 и мне стало неудобно перед людьми, которые сидят за пятнашками и читали хотя бы одну страницу блога.


А дело вот в чем. Стремясь разбавить текст картинками я размещал их по такой схеме: справа текст, слева рисунок.

На каком-то сайте было подсмотрено такое решение через таблицы

<table>
<tr><td>
<img src="http://digitalplace.ru/images/hard/xfx_radeon_hd_5870.jpg" width="300" height="236" alt="XFX Radeon HD 5870.jpg" />
</td>
<td style="text-align: justify; padding-right: 7px; padding-left: 40px;">
ТЕКСТ БЛА БЛА БЛА
</td></tr>
</table>

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

Вот живой пример (1024×768), причем не самый плачевный. Текст узенькой полоской сбивается справа и чем его больше тем длиннее она оказывается :

Вебмастер, включи мозг! (123.29 Kb)

У меня же на 1680×1050 все чинно и гладко, никаких поводов для беспокойств:

Вебмастер, включи мозг! (128.81 Kb)

А решение оказалось ну очень простым: задать для картинки выравнивание по левому краю и отступы от текста:

<img src="http://digitalplace.ru/images/hard/xfx_radeon_hd_5870.jpg" 
style="float: left; margin: 0px 15px 15px 0px" border="0" width="300" height="236" align="left" alt="XFX Radeon HD 5870" />ТЕКСТ БЛА БЛА БЛА

Выравнивание align можно даже убрать. Теперь все шоколадно и на 1024×768:

Вебмастер, включи мозг! (119.28 Kb)

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

Вебмастер, не игнорь заявки юзеров, иногда дело говорят.

P.S. судя по статистике LiveInternet 1024×768 адски доминирует в рунете, так что сделать блог подобающим для него стоит:

Вебмастер, включи мозг! (21.53 Kb)

Комментарии:
  • Rpg
  • 29.12.2009 - 00:43 / Rpg
  • Эрпоге помог тебе

  • Wolverine
  • 29.12.2009 - 11:36 / Wolverine
  • Мужик =) На самом деле и на мобилках все получше стало, тоже тихий ужас был

  • 1.01.2010 - 23:26 / MagicMan
  • Wolverine, у меня рабочий ноут 1024х768. Периодически читаю сайт, стало лучше!

  • Wolverine
  • 4.01.2010 - 00:33 / Wolverine
  • MagicMan это здорово, что заморочился не просто так


Ooooops

Looks like Twitter's feed isn't working at the moment.