Дизайн сайта. Статика или «резина»? - блог СЕО ПРЕСС
Сен
28

Дизайн сайта. Статика или «резина»?

*Гостевой пост, автор – специалист по созданию сайтов Александр Шихов

Работая над дизайном будущего сайта, веб-дизайнер рано или поздно сталкивается с часто встречающейся проблемой – делать сайт масштабируемым, чтобы он заполнял все пространство монитора пользователя или остановиться на каком-либо статичном размере по горизонтали.

Создание сайта подразумевает его безукоризненную работу на любом мониторе и в любом браузере. Сейчас у пользователей стоят мониторы самых разных размеров и конструкций – так что проблема эта не надуманная: правильное отображение на любом мониторе это одно из условий успешного развития будущего ресурса.

Cтатический дизайн

статический дизайнМаленьких мониторов почти не осталось, поэтому делать страницу шириной в 760 пикселей уже давно не актуально. Наиболее приемлемая ширина для статичного сайта – 960 пикселей. Сайты такого размера отлично выглядят на любом мониторе и отвечают практически любой поставленной задаче. Тем более следует придерживаться «статики», если создание веб-сайтов поставлено на поток. Это удешевляет конечную стоимость ресурса и позволяет привлечь еще больше клиентов.

Плюсы фиксированной ширины:

  • Простота при создании;
  • Легко осуществить вывод картинок, баннеров, видео материалов. При этом можно быть уверенным, что они не «наедут» друг на друга при разном разрешении монитора.

Минусы фиксированной ширины:

  • У посетителей, которые заходят на сайт с мобильных устройств, будет отображаться горизонтальная полоса прокрутки. Это неудобно. Решить эту проблему можно, создав специальную версию сайта для телефонов;
  • На современных широкоформатных мониторах «узкий» сайт будет смотреться несколько «бедно».

«Резиновый» дизайн

резиновый дизайнДелать «резиновую» верстку имеет смысл при работе над чрезвычайно насыщенными информацией проектами. Такие сайты, занимая все пространство монитора, позволяют лучше подать важную информацию. А тенденции таковы, что доля пользователей мониторов с большой диагональю увеличивается с каждым годом.

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

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

Модульная сетка и блоки должны масштабироваться в процентах. При этом лучше не рисковать и все-таки ограничить увеличение размера. Лучше всего работает правило: увеличение в 2 раза от минимального размера. Чтобы сохранить композицию при большем увеличении, потребуются значительные трудозатраты и проект станет неоправданно дорогим.

Плюсы резинового макета:

  • Сайт выглядит красиво практически при любом разрешении монитора;
  • На широкоформатном мониторе отобразится максимальное количество контента. Не надо будет долго крутить скроллером, чтобы дочитать статью до конца.

Минусы резинового макета:

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

Выводы

Каких-либо четких критериев при выборе «статика» или «резина» нет, используя любой из этих способов, можно добиться превосходных результатов. Поэтому руководствоваться стоит лишь одним правилом: если масштабируемость действительно улучшает функционал – то нужно делать резиновую верстку. Если нет – лучше остановиться на фиксированном размере.

****

Да, раз уж Александр предстал перед нами экспертом в создании сайта, коим он зарабатывает на жизнь, то он не отвертелся от пары каверзных вопросов по поводу своей услуги.

Mexboy.RU: Саш, у тебя на блоге написано, что стоимость создания сайта составляет 7500 р. А на каком движке работают твои детища?

Александр: На Вордпрессе…

Mexboy.RU: Понятно, что-то недешево для WordPress. А что за дизайн будет, уникальный или нет?

Александр: Дизайн – качественные платные премиум шаблоны. То есть, можно сказать, дизайн – уникальный.

Mexboy.RU: Круто… Я так понимаю, что основной тип сайтов – это сайты-визитки и блоги.

Александр: Ну в общем да, но фишка еще в том, что сайты получаются уже готовыми к seo продвижению, т.е. хорошими по мнению поисковых систем.

Понравилось? Подпишись на обновление через: Rss E-mail

Оставить комментарий:

Комментарии:

  • Andy говорит:
    19.12.2012 | 17:21

    Я где-то читал, о том, что в результате исследований выяснилось, что взор человека «соскальзывает» со строки если она длинее 980px. Поэтому дана рекомендация при создании сайта не делать его шире 980px.

  • nikolas_sharp говорит:
    10.12.2011 | 06:57

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

    Отсюда есть еще, скажем условно, третий вариант верстки, на котором автор внимание не акцентировал: условно-резиновая, или та, которая тянется в заданных пределах ширины «от» и «до». Например резиновая верстка в пределах 800-1200px. Выравнивание такого лэйаута может быть как по центру экрана, так и у одного из его краев.

    Вообще справедливо заметить, что любая «резина» ПРОСТО ОБЯЗАНА ВСЕГДА фиксироваться на минимум и ОСОБЕННО максимум (мне лично на 1900px мониторе на некоторые сайты, которые верстальщики забыли ограничить по ширине, смотреть отвратительно неудобно). Просто, во-первых, верстальщики, которые работают на мониторах разрешением 1024-1280 часто этот момент упускают, во-вторых, в контексте статьи этот момент совершенно не очевиден.

    Фиксированно-резиновая верстка не слишком сложна в реализации и будет выгодна сайтам с не слишком насыщенной графикой, более информационным, скажем, тем же интернет-магазинам или каталогам товаров, где есть большое количество таблиц в содержимом. Здесь «резиновость» может дать, например, возможность товарам расположенным столбиками «спрыгивать» так, что в зависимости от ширины монитора будет разное их количество в ряд. Или же просто таблички в тексте будут чуть растягиваться-сужаться, подстраиваясь под размер монитора, всегда оставаясь при этом удобно читаемыми.

    В общем, выводы следующие: 1) резиновая верстка всегда должна ограничиваться по мин. и макс. ширине; 2) резина подойдет онлайн-каталогам, интернет-магазинам, ресурсам с преимущественно табличной составляющей контента; 3) для всех остальных сайтов, скажем, для блога, резину делать откровенно глупо и неоправданно, и не предусмотрев некоторых важных моментов можно не только не улучшить чтение такого сайта для пользователя, а и наоборот – затруднить его.

  • wmas говорит:
    27.11.2011 | 16:36

    Наверное правильней все таки говорить «фиксированный дизайн», а то «статичность» понятие относящееся несколько к иной плоскости. Не сочтите за придирку, но в начале просто протупил и не смог понять о чем речь ))

  • Azad Najafov говорит:
    02.10.2011 | 11:01

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

  • Rj.DiNex говорит:
    29.09.2011 | 13:39

    Статья не дает более-менее точного ответа на вопрос, так-что польза от неё маленькая.

    А вот картинки порадовали. :)