Интернет все еще находится в зачаточном состоянии, но постепенно, очень медленно дизайнеры с этим соглашаются. Ну, небольшое обстоятельство дизайнеров в любом случае.
Печальный факт заключается в том, что подавляющее большинство веб-сайтов, с которыми вы сталкиваетесь, особенно сайты малого бизнеса, было бы лучше превратить в печатную брошюру.
Вы знаете, что я имею в виду: «окно» с разрешением 720 × 400 пикселей, сидящее посередине монитора и выглядящее одиноким и нелюбимым. Возможно спортивные «короткие кнопки», «мигающие ручки» и легендарный «Spinning Logo».
<Дрожь>
Эта статья познакомит вас с основными концепциями создания гибкого макета веб-страницы с помощью CSS и таблиц. Если вы до сих пор не исследовали эту область, самое время это сделать!
Сеть не печатается
Люди, которые сталкиваются с задачей создания или ввода в эксплуатацию веб-сайта, склонны думать с точки зрения печати. Это то, что мы знаем, в конце концов. Тот факт, что к Интернету можно получить доступ с помощью множества различных вариантов браузеров, платформ, настроек или даже устройств, часто полностью исключается нашими потенциальными клиентами веб-дизайна.
Ваши посетители могут использовать практически все для доступа к вашей информации, от простых вариаций популярных тем, таких как:
- Браузеры с большими шрифтами
- Браузеры с отключенным JavaScript и изображениями
- «Альтернативные» браузеры, такие как Opera, Mozilla или Netscape
… для более экстремальных концов спектра, таких как:
- Веб-телевидение
- Текстовые браузеры
- Программы чтения с экрана и браузеры Брайля
- Портативные устройства
Таким образом, пытаться наложить строгий, жесткий, идеальный по пикселям дизайн на такую текучую и непредсказуемую среду бесполезно.
Что такое Liquid Design?
Термин «жидкость» подразумевает, что веб-сайт должен плавно перетекать в любое пространство, которое ему предоставляется. Если вы используете монитор с высоким разрешением, это может означать, что вам нужно немного изменить размер браузера, что и делает большинство людей в этой ситуации. Если у вас низкое разрешение, вы все равно увидите информацию, она будет немного более компактной.
Если вы правильно сделаете Liquid Design, вы сможете отображать свои страницы практически на чем угодно и при этом иметь смысл для пользователя.
Но дело не только в том, чтобы страница «текла» из окна браузера. Принцип Liquid Design неразрывно связан с принципами доступности.
Не у всех есть идеальное зрение, и многие из ваших потенциальных клиентов действительно могут быть слепыми. Если вы создаете свой сайт, используя относительные единицы шрифта и ширину в процентах для общих элементов, вы уже значительно упростите жизнь некоторым посетителям. Может быть, даже многие из них.
Достаточно теории!
Итак, как мы реализуем принципы жидкого дизайна на наших сайтах? Ну, первое, что вам нужно сделать, это изменить свой взгляд на Интернет. Вся концепция Liquid Design — это образ мышления…
- Отбросьте необходимость, чтобы ваши страницы выглядели одинаково на всех устройствах.
- Будьте готовы пойти на компромисс со своими идеалами
- Начните думать о проблемах доступности во время разработки
- Держите голову высоко, вы делаете сеть лучше!
Существует два основных способа решения проблемы жидкого дизайна:
- С таблицами
- С CSS-P
Я большой сторонник CSS (Cascading Style Sheets) и за доступность и Liquid Design (не говоря уже о скорости, хорошей разметке и проблемах SEO), это явный победитель. Чистая, незагроможденная разметка не только ускорит загрузку ваших страниц, но и сделает процесс написания жидких макетов намного более интуитивным.
… И еще до того, как кто-то начнет кричать о NN4, да, я знаю: если ваша аудитория включает в себя большую долю пользователей NN4, вам лучше всего использовать основанный на таблицах подход.
Внедрение жидкого дизайна на практике
Так как нам это сделать? Что ж, давайте начнем с рассмотрения типичного макета страницы с тремя столбцами. Сначала мы рассмотрим это в CSS, а затем с таблицами.
«Голые кости» 3-х колоночный CSS-макет
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bare bones 3 column CSS layout</title>
<style type="text/css">
#leftpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
left: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#rightpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
right: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#content {
position: absolute;
top: 140px;
padding-left: 220px; /* 20px to play with */
padding-right: 220px; /* 20px to play with */
}
</style>
</head>
<body>
<h1>Bare bones 3 column CSS layout</h1>
<!-- Content here -->
<div id="content">
<p>You can put your content here, under the space
for a header, or you can re-arrange the
divs in the html to put your right or left column first.</p>
</div>
<!-- Right column here -->
<div id="rightpanel">
<p>This is a good place to pop nice optimized
text into, especially if your #content div
is full of images and little text. I like to
put an 'editors note' here: Just an excuse to
squeeze optimized copy into the html flow without
bothering the user ;-)</p>
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
<p>Links, come last, presuming your 'header' has
a 'main sections' navigation with regular text links
this is just fine for SE's and magic for
optimization.</p>
</div>
</body>
</html>Вставьте этот код в vim, блокнот или что-то еще, что вам нравится, и вы увидите, что это действительно чистый пример. Вы заметите, что когда вы изменяете размер своего браузера, средний столбец расширяется и сжимается, чтобы компенсировать разницу. Левая и правая колонны остаются фиксированными.
И если вам интересно, почему я не сделал это полностью плавным, ответ прост: он просто выглядит и работает лучше, по крайней мере, мне нравится. Попробуйте настроить ширину левого и правого столбцов в процентах: все должно работать нормально.
Вам нужно будет откорректировать закомментированные разделы в CSS и добавить намного больше правил представления, но этот базовый макет должен дать любому новичку хороший строительный блок для начала.
Другие CSS-ресурсы можно найти здесь:
Если вам интересно, можете ли вы реализовать гибкие CSS-макеты на своих веб-страницах, вы можете также попробовать эти примеры:
- Первый — небольшой частный фан-сайт: Gone To Ground
- и это из отдела дистанционного обучения колледжа Пирса .
Хорошие примеры верстки с разных сайтов!
А теперь с таблицами
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bare Bones 3 column Liquid Tables Layout</title>
</head>
<body bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0"
border="0" height="120" width="100%">
<tr>
<td align="center">
<h1>Bare Bones 3 column Liquid Tables
Layout</h1>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="20"
border="0" width="100%">
<tr>
<!-- Left column -->
<td width="200"><p>This is your left panel.
Generally used for navigation and
with this kind of layout, getting in
the way of the content!</p></td>
<!-- Content column -->
<td><p>This is your content area
and flow with your browser just the same
as the CSS layout above. The content
is pushed down the code flow a bit
by the tables layout but the end result is
preferable to a fixed width page. You
can see I'm biased, right?</p>
</td>
<!-- Right column -->
<td width="200"><p>Right column - fixed width at 200 px
again for the purpose of this demo. Just adjust the
widths to suit and don't be afraid to experiment!</p>
</td>
</tr>
</tr>
</table>
</body>
</html>
Как вы, вероятно, можете сказать, я не так привык писать макеты таблиц, как CSS-макеты. Несмотря на свои ограничения, приведенный выше пример дает вам еще один строительный блок для жидкого дизайна, если вы предпочитаете — или вам нужно — создавать макеты с помощью таблиц.
Как насчет шрифтов?
Хорошая точка зрения! Что ж, если мы придерживаемся наших принципов жидкого дизайна, нам нужно использовать относительные единицы шрифта. Наш выбор:
- Эма
- % ‘S
- экс-х
- Ключевые слова CSS (больше, меньше и т. Д.)
- Страшный тег <font>
Использование относительных единиц даст вашим пользователям возможность настроить свои шрифты в соответствии с вашими потребностями. Я должен признать, что не всегда следую своим собственным советам, но на большинстве своих сайтов я выбираю их. Подробное обсуждение этого вопроса сделало бы совершенно новую статью, так что я оставлю это на ваше усмотрение.
Liquid Design: это можно сделать?
Да, без сомнения! Фиксированные макеты постепенно уходят в прошлое. И принципы и соображения, касающиеся создания ликвидного макета (а не фиксированного макета), очень легко реализовать на вашем сайте.
Однако вся идея ликвидности требует смещения фокуса. Перестаньте думать о Интернете как о средстве, которым вы можете управлять, перестаньте думать о своих пользователях, и вы станете счастливее, ваши посетители будут счастливее, а сеть станет чуть более приятной для всех.
Если вам нравятся идеи, которые я затронул, но просто не можете реализовать их все, не волнуйтесь. Я не могу все время. Если вам нравится идея, вы ненавидите эту идею или чувствуете, что я говорю абсолютную чепуху (это было известно…), перейдите по ссылке «обсудить эту статью» внизу и расскажите нам, почему. Интернет — это классное место, в нем есть место для всевозможных мнений и идей, и я хотел бы услышать ваше! Веселиться!