Веб-дизайн
На прошлой неделе у меня на блоге сменился дизайн, и в процессе верстке я столкнулся с массой интересных проблем, связанных с веб-дизайном; этим проблемам и посвящена эта статья. Я постарался ее сделать интересной как для вебмастеров, так и для пользователей интернета, у которых нет своего сайта. Вебмастера, думаю, смогут почерпнуть какие-то идеи верстки, для остальных же просто будет интересно узнать, что скрывается за понятием веб-дизайна, и какие подводные камни могут попасться в процессе верстки.
Сразу нужно сделать оговорку: есть два совершенно разных процесса. Сначала дизайн нужно смакетировать - делается это обычно в фотошопе. Но основная проблема макетирования дизайна - отнюдь не техническая; чтобы дизайн удался, необходимо быть художником, творческой личностью, уметь увидеть, какой дизайн нужен этому сайту, а затем превратить свой образ в компьютерный макет. Я очень рад, что за созданием дизайна я обратился именно к Найкрису Кроули (сайт магия дизайна), который и создал то, что вы сейчас можете видеть (если вы уже перешли на сам сайт из ленты новостей).
Вторая часть - верстка дизайна. Для этого не нужно быть художником, а нужно быть программистом. Вы смотрите на макет и пытаетесь так стедать веб-страницу, чтобы нужные блоки и тексты легли именно в соответствии с макетом. И это иногда очень непросто.
В этой статье я затрону такие темы как кросс-браузерная совместимость, шрифты, ширина сайта (резиновая или фиксированная?), фон и фоновый рисунок. Вопросы резиновых колонок одинаковой высоты, закругленных углы и затемненных счетчиков я оставлю на следующий раз (а, возможно, будет поднято и большее количество тем). Заинтересовались? Читаем дальше! Также буду рад вашим вопросам или описаниям проблем, с которыми вы столкнулись.
Кросс-браузерная совместимость
Одной из больших проблем верстке дизайна является то, что разные браузеры могут отображать один код по-разному. Это неприятно, но с этим приходится мириться и бороться. Кстати, рекомендация всем. Если вы видите, что чей-то сайт "расползся" при просмотре вашим браузером, не поленитесь чиркнуть пару строчек администратору. Они, возможно, и не подозревают, что у них что-то не так. Например, этот сайт провисел почти неделю прежде чем я узнал, что в одном бразуере у меня большая проблема. Как вы думаете, в каком? Предлагаю угадать! Сегодня с ним часа два возился. А еще один пример будет чуть ниже, в разделе про шрифты.
При борьбе за кросс-бразерную совместимость можно действовать двумя путями - либо продолжать искать код, который будет работать универсально для всех бразузеров, либо использовать так называемые "хаки" - специальные куски кода, которые воспринимает только один бразуер. Я очень не рекомендую идти вторым путем, во всяком случае, для основных частей дизайна. Подкорректировать по-мелочи, конечно, можно. Отговариваю же я от таких действий по той причине, что эти хаки легко могут перестать работать с выходом новой версии одного из браузеров - то, что воспринималось только одним, может начать восприниматься большим количеством бразуеров, и дизайн поплывет.
Как искать такие хаки? Просто введите в поиске, например, "хак css chrome", и найдете. Только имейте в виду, они уже могут быть устаревшими. А для каких браузеров стоит тестировать совместимость? Я бы взял четыре - Internet Explorer, Opera, Mozilla Firefox и Google Chrome. Если есть возможность, хорошо бы их проверить и в разных версиях и на разных операционных системах.
Шрифты
Разберем проблемы, связанные с использованием шрифтом на примере моего сайта. Он написан шрифтом Arial, относящимся к семейству sans-serif (без "засечек"). То есть это я так думаю, что он должен отображаться при помощи шрифта Arial. А что делать, если у пользователя нет этого шрифта? (для Windows это маловероятно, но под Линуксом вполне возможно. Чтобы избежать этой проблемы я выложил шрифт на сайт и дал инструкцию, где его брать, если он отсутствует на компьютере. И все везде было прекрасно, но только как оказалост позже, Firefox под Winndows стал изображать текст "иероглифами". Решение нашлось, нужно было указать, что можно исползовать и локальную версию шрифта Arial. Все бы ничего, но проблема - в том, что это только Firefox и только под Windows отображал текст неправильно, и я об этом не знал.
Для вебмастеров привожу кусок кода, который нужно вставить в стилевой файл чтобы шрифты работали корректно:
font-family: 'Arial';
src: local('Arial'), url('ПУТЬ К ШРИФТУ В ИНТЕРНЕТЕ');
}
В описаниях же стилей можно писать
Если же не ставить этот кусок вообще, то может получиться так, что Опера будет использовать в качестве шрифта наугат взятый шрифт семейства serif, а не sans-serif, и это будет выглядеть очень некрасиво.
Ширина сайта
Не только браузеры бывают различными, ширина экрана у пользователей также бывает разной. Как оптимизировать свой сайт так, чтобы он у всех читателей отображался красиво? Есть два варианта. Либо вы используете так называемый резиновый макет, либо фиксированную ширину. Резиновый макет хорош тем, что он позволяет использовать всю ширину экрана. Это удобно, но это практически не оставляет вам возможности использовать рисунок, например, в качестве шапки сайта (о рисунках ниже). Такой вариант хорошо подойдет для сайтов с минималистичным дизайном (сходите по ссылке, увидите яркий пример такого дизайна).
Если же хочется отойти от минимализма, то, скорей всего, придется зафиксировать ширину сайта. Мобильные устройства мы не будем брать в расчет, но заметим, что до сих пор очень много пользователей имеет расширение монитора 1024 на 768 (по моему сайту - почти четверть посетителей). Поэтому мы просто обязаны сделать так, чтобы сайт корректно отображался при ширине экрана в 1024 пикселя - чтобы при максимизации окна бразуера содержание сайта было видно полностью, без горизонтальной прокрутки. Если же учесть всякие эффекты края экрана и полосу вертикальной прокрутки, то у нас остается еще меньше места. Для моего сайта Найкрис выбрал ширину в 980 пикселей, и я очень не рекомендую делать ваш сайт шире.
Как такой сайт отображается при более высоком разрешении монитора? Я предлагаю располагать основное содержание в центре экрана, по бокам же нужно сделать плавный переход от фонового рисунка к фону. Написав это, я в свою очередь плавно перехожу к следующей теме.
Фон и фоновый рисунок.
У всей страницы равно как и у любого блока (div) есть возможность установить фон или же фоновый рисунок. Что выбирать? Естественно, фотовый рисунок существенно красивей, и именно он может сделать ваш дизайн уникальным. Однако, имеются разумные ограничения по размеру файла; кроме того, фоновый рисунок не может быть бесконечным, а размер экрана у пользователя может быть большим. Как же можно найти золотую середину?
Если вы посмотрите на мой сайт, то увидите, что по центру идет рисунок, но пространство правее и левее не имеет однородного фона! Такой эффект достигается путем использования повторяющихся рисунков. Берется рисунок шириной в один пиксель, и всему документу велено его повторять, но только по-горизонтали. Уже поверх него ляжет основной фоновый рисунок. Для повторения рисунка используется такой код:
background-color: #ede3c6;
background-repeat: repeat-x;
background-image: url('ПУТЬ К РИСУНКУ ШИРИНОЙ В ОДИН ПИКСЕЛЬ');
}
Заметили, что я использую и фон и рисунок? Правильно, рисунок не может быть бесконечной высоты. Когда он кончается, ниже уже идет фон, и он однороден. Перетекание плавное, глазу оно незаметно.
И еще по поводу фона и рисунка, уже совет только для вебмастеров. Если вы центруете основной рисунок, а потом собираетесь на него накладывать текст с точностью до пикселя, не используйте для этого рисунка конструкцию "background-position:center;"! Дело в том, разные браузеры по-разному центруют div и background. Точного наложения при центровке и того, и другого вы не добьетесь для всех браузеров одновременно - одни будут сдвигать текст на пиксель вправо, другие - влево. Разве только хаками пользоваться...
На этом статья заканчивается. Если у вас остались какие-либо вопросы по использованию описанных приемов, буду рад на них ответить. Если я что-то упустил - дополняйте, я все-таки, не гуру дизайна, а только ученик. В следующий раз обещаю написать про такие фокусы как резиновые колонки одинаковой высоты, закругленные углы и затемненные счетчиков. Возможно также, что я упускаю какие-то темы, тогда напишите мне об этом в комментариях, и я постараюсь их тоже затронуть.
Дата: 30 сентября 2009 г., категория: для вебмастеров.
| ← Cookies | Редактор реестра → |
Комментарии
1# |
думаю что у тебя проблемы были с Operoй ... угадал? :)
|
2# |
sem, нет, не Opera ;) проблема с оперой была только со шрифтами и только под Линуксом, ее я уже описал.
|
3# |
ну да сафари это "стандартный" маковский браузер, но есть и под винду и под линух |
4# |
а у меня дома монитор до сих пор с разрешением 800х600 ;) |
5# |
Скачал safari под виртуальной WinXP, проблем не обнаружилось. Apple порадовали - никаких спецэффектов )))
|
6# |
а каких спецэффектов ты от Эппла ожидал? :) |
7# |
ну мало ли...
|
8# |
ну это должны быть проблемы тех людей а не твои ;) уже давно не то что 7 а и 8 ИЕ... пусть обновляются или страдают :))) проблемы негров шерифа не должны волновать :) может тебе еще и под ИЕ 2,3 делать поддержку? :) кстати по этому тесту даже ИЕ 8 набирает 20 из 100 баллов, фаерфокс - 93, а хром, сафари и опера - 100! |
9# |
ну что значит, проблемы тех людей...
|
![[*]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAA7ElEQVRIie2XTQ6CMBCF3xgPQsLWQ7is8TrlECYeAe7hrhzDHdzkueBX1KSdImjCS7roYuZrp28KFQDECtoDALksW0SwW5Q40gb+UXCZQUSeRlbq4fRSldM0rfcyTF755WjVxnmCSVa5oXX9jLnp4Jbuc1g8+N1CmiSGIZsGwChz1febOlYPrgtcrt3kgDQJT6EosqMdmWs4d/9Sq8DO6h2tB4/bKnSrMeDByWEtNAXrzWXPOKqDFa5O0kMEbpCgKfUsybyhqh+B/kNxQlHHLSDEWqP7eWFX01nV/TwF/9EZz6QNvIG/JsFKj7YHwRrAR6l51asAAAAASUVORK5CYII= "Гость")
