Просмотров: 63355

Как сделать сайт резиновым html css

Закрыть ... [X]

Фиксированные, резиновые, эластичные макеты: какой выбрать для вашего сайта

Фиксированный. Резиновый. Эластичный. Какой макет верстки можно считать наилучшим? Будет ли один из них более удобен для пользователя, чем другие? Насколько просто и удобно будет им пользоваться? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо совершенно непригодный?

Эти вопросы волнуют как дизайнеров и разработчиков, так и заказчиков.

Каждый вариант имеет свои преимущества и недостатки. Но от итогового решения очень существенно зависит юзабилити. Так существует ли вообще правильное решение?

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

  • разрешение экрана;
  • браузер пользователя;
  • развернут ли браузер на весь экран;
  • дополнительные инструменты браузера (закладки, история и т.д);
  • операционную систему и оборудование пользователя.

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

1. Статистика

Сегодня большинство дизайнеров отталкиваются от того, что большинство интернет-пользователей имеют разрешение экрана 1024768 или выше. Разрешение 800600 как минимальное уже ушло в прошлое. Согласно данным, опубликованном W3School:

Следующая таблица с сайта SohTanaka.com, который вел статистику сравнивая, как некоторые большие веб-сайты адаптируются к разрешению с февраля 2006 по февраль 2008.

Screen Resolution Accommodations of some top websites.

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

Из вышесказанного следует, что большинство дизайнеров выбирают минимальную ширину 960px или 1000рх (ориентируясь на минимальную ширину экрана 1024рх) или 760px (ориентируясь на минимальную ширину экрана 800рх). Последнее встречается все реже.

2. Разница между «фиксированными» и «резиновыми» макетами

Фиксированный макет

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

Фиксированный макет

Блоки внутри фиксированы по ширине на 520, 200 и 200рх, А 960 (или 1000)-пиксельный контейнер стал стандартом для пользователей интернет, которые предположительно имеют разрешение 1024768 или выше.

Резиновый макет

В резиновых макетах большинство внутренних элементов имеют ширину, заданную в процентах для того, чтобы приспособиться к разрешению пользователя

Резиновый макет

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

3. Макет с фиксированной шириной

Многие разработчики предпочитают фиксированные макеты резиновым, так как их легче реализовать, и они обеспечивают большую уверенность в том, что разработчик видит то же, что и пользователь.

Преимущества макетов с фиксированной шириной

  • Фиксированные макеты легче использовать;
  • Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;
  • Нет необходимости задавать минимальную (min-width) или максимальную (max-width) ширину, которые, кроме того, до сих пор поддерживаются не всеми браузерами;
  • Даже если макет ориентирован на минимальное разрешение 800600рх, контент будет все равно достаточно широким, чтобы быть читабельным;
  • В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных JavaScript эффектов или дизайнерских решений. Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
  • Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах.

Недостатки макетов с фиксированной шириной

  • Фиксированный макет будет оставлять много пустого пространство у пользователей с большим разрешением экрана;
  • При разрешениях, меньших чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка;
  • Для пользователей с большим разрешением экрана может понадобиться бесшовный повторяющийся фон;
  • Фиксированный макет несколько уступает по юзабилити остальным.

Примеры фиксированных макетов страниц

Далее следуют 5 примеров сайтов с фиксированной шириной.

повторяющийся серый фон по бокам страницы

Повторяющийся клетчатый фон по бокам страницы дает впечатление ее целостности даже на большом разрешении

без изображения на фоне

На этом сайте повторяющаяся картинка для фона не потребовалась

узкое фоновое изображение

Здесь фоновое изображение слишком узкое, поэтому при большом разрешение картинку портят «оборванные» линии

Разработчику при работе с фиксированным макетом всегда следует его центрировать, в противном случаи у пользователей с большим разрешением он будет прибит к краю браузера, что на больших разрешениях оставляет много пустого места:

0

4. Резиновый макет

Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100%, будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

Преимущества резиновых макетов

  • Резиновые макеты более дружественны, так как они подстраиваются под пользователя;
  • Количество свободного места подобно для всех браузеров и разрешений экрана, что визуально более привлекательно;
  • Хорошо спроектированные резиновые макеты могут исключать появление горизонтальной прокрутки на меньших разрешениях;
  • При грамотной верстке резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается довольно редко, но, теоретически, если все делать правильно, то такое возможно;
  • Резиновый макет совпадает с макетом, применяемым браузером по умолчанию, что позволяет считать его «идеологически правильным»;
  • Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).

Недостатки резиновых макетов

  • Разработчик в меньшей степени контролирует то, что видит пользователь, и может не увидеть проблемы на своем разрешении;
  • Дизайнеру в некоторых случаях приходится рисовать несколько вариантов макета для разных разрешений;
  • Картинки, видео и другие типы контента с фиксированными размерами желательно предоставить в нескольких вариантах для разных разрешений;
  • На очень больших разрешениях контент может создать лишнее пустое пространство, что негативно повлияет на внешний вид сайта;
  • На очень маленьких разрешениях, если не задана минимальная ширина макета (для этого используется CSS-свойство min-width, которое не поддерживается Internet Explorer (IE) 6 версии и раньше), при слишком маленьком разрешении блоки начинают наезжать друг на друга или перескакивать друг под друга;
  • Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: “White space sells” (имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо применительно к вебсайтам;
  • Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Резиновый макет необходимо использовать строго по назначению, не позволяя своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решено использовать именно ее, необходимо убедиться, что резиновый макет сайта нормально смотрится на большинстве экранных разрешений. Иначе игра не стоит свеч.

Примеры резинового дизайна

резиновый макет

Горизонтальная полоса прокрутки появится при разрешении, меньшем чем 1024рх по ширине

полностью резиновый макет
элементы начинают наезжать друг на друга

При сжатии экрана элементы начинают наезжать друг на друга при сжатии окна до 560рх

нет проблем с картинками

Здесь нет проблем с графическим оформлением и картинками

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

5. Гибрид резинового и фиксированного макета

На практике гораздо чаще, чем полностью резиновый макет, используется гибрид резинового и фиксированного макета. Он дает разработчику больший контроль над графическими элементами, чем полностью резиновый, и в то же время сохраняет главное преимущество резинового макета – адаптивность под каждого пользователя. Также в гибридном макете допускается фиксирование заданного при проектировании минимального разрешения (обычно это 1024768), что дает при меньшем разрешении горизонтальную прокрутку и позволяет всем элементам дизайна оставаться на своих местах, не перекрывая и не налезая друг на друга при изменении размера окна.

Ниже приведены примеры различной комбинации фиксированных и резиновых частей в макетах.

гибрид 1
гибрид 2

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

гибрид 3

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

гибрид 4

Здесь фиксированную ширину имеют боковые колонки, а также меню снизу. Фоновая картинка меняется в зависимости от разрешения экрана пользователя.

6. Эластичный макет

При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Преимущества эластичного макета

  • В случаи правильного исполнения макет может быть очень и очень дружественным пользователю (user-friendly). Цель – увеличивать или уменьшать все в зависимости от настроек пользователя;
  • Эластичный макет понравится и разработчикам, предпочитающим фиксированный макет, и разработчикам, предпочитающим резиновый макет, так как он объединяет в себе преимущества обоих.

Недостатки эластичного макета

  • Даже с учетом всех преимуществ, эластичный макет может стать источником проблем с юзабилити. Много времени уйдет на разработку и тестирование макета, чтобы сделать его подходящим для всех пользователей;
  • Для разработки такого макета приходится приложить намного больше усилий и времени, чем для двух других, что не всегда оправдано;
  • Зависимо от специфики, некоторые эластичные макеты требуют дополнительных стилей и «хаков» для IE6.

Примеры эластичных макетов

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

Эластичный макет

7. Какой же макет подойдет для вашего веб-сайта?

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

При написании статьи использована информация с сайтов:
http://habrahabr.ru
http://www.smashingmagazine.com


Источник: http://free-studio.com.ua/razrabotka/layout/

Похожие новости


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




ШОКИРУЮЩИЕ НОВОСТИ