Для избежания таких ситуаций были произведены вычисления высоты активной области браузера для разных разрешений. Высота приводится с допустимой погрешностью на пользовательские настройки браузера для развернутого на весь экран браузера с вкладками и Windows Vista со стандартной темой и некрупными иконками.
Итак, высота панели задач и меню «пуск» составляет 50px. К ней необходимо прибавить высоту верхней части браузера. Поехали:

1. Mozilla Firefox: меню «файл» + адресная строка + панель закладок + вкладки + нижняя панель = 153px
2. Safari 4.0.2 адресная строка + закладки + вкладки = 101рх
3. Opera меню «файл» + адресная строка + вкладки + нижняя панель = 130px
4. Google Chrome вкладки + адресная строка = 63рх
5. Internet Explorer 6 меню «файл» + адресная строка + панель настроек + нижняя панель = 132рx
6. Internet Explorer 7 адресная строка + вкладки + нижняя панель = 116px
7. Internet Explorer 8 адресная строка + закладки + вкладки + нижняя панель = 143px

Вывод: высота активной области браузера меньше всех у Mozilla Firefox – 153px, от нее и будем отталкиваться.

Итак, на экране при развернутом на весь экран браузере «съедается» 153+50= 203px.
Значит, для следующих разрешений высота активной области браузера составляет:

Таким образом, если минимальное разрешение, на которое ориентирован сайт, – 1024*768, то для избежания вертикальной прокрутки необходимо в макете отталкиваться от высоты 565px

Рассмотрим, как создавать анимированные gif картинки в PhotoShop CS3.

Задача: у нас есть исходная картинка:

при наведении на нее необходимо показать эту картинку:

Добавим «эффектности»: пусть при наведении на картинку текст выезжает снизу:

Для создания анимации открываем наше исходное изображение в PhotoShop CS3. Отобразим панель анимации: Window -> Animation

В отобразившемся окне анимации (1) перейдем к панели покадровой анимации (2):

У нас есть 2 группы слоев: picture – фоновая картинка, которая меняться не будет, и hover – текст и подложка с градиентом, которая быдет выезжать, с ней мы и будем работать.

Для каждого кадра необходимо задать время, которое он будет отображаться. В нашем случаи 0,1с:

And let the magic begin … Копируем наш кадр и сдвигаем вверх группу hover вверх

Копируем следующий кадр и сдвигаем группу hover вверх еще немного. Продолжаем копировать и сдвигать до тех пор, пока надпись не займет необходимое положение, в нашем случаи это 7 кадров. Для просмотра результата можно использовать кнопку «Play animation»:

И последний штрих: выбираем режим проигрывания анимации: один раз, заданное количество раз либо же постоянно.

Зададим постоянное проигрывание.

Если результат нас устраивает, полученное изображение сохраняем File -> Save for Web & Devices. И не забывваем, что сохраняем картинку в формате gif! И вот он, результат:

Теперь необходимо вставить картинку с анимацией на страничку. Вставляем в код страницы ссылку <a href=»#» class=»cat» title=»Погладь кота»></a>

a.cat {
background: url(cat_static.gif) no-repeat 0 0;
display: block;
height: 107px;
width: 100px;
}
a.cat:hover {
background: url(cat_animated.gif) no-repeat 0 0;
}

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

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

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

В данном случаи используется следующий спрайт:

Удачи вам с анимацией!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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