Какой бывает Web-Дизайн.

В этой статье предлагаем Вам обсудить разницу между “жёстким”  и “гибким” дизайном веб-страниц, вникнуть в суть того и другого, разобраться со многими возникающими вопросами…

 

 

Начнём со второго вида — жесткий дизайн (он проще в понимании). Суть его состоит в том, что при любом разрешении монитора, при любых размерах окна браузера, а также при любых других настройках, связанных с визуализацией, страница отображается одинаково. Приведу пример. Вот есть страница, основанная на двух ячейках таблицы, ширина которых стоит в пикселях.

Загружаем эту страницу в развёрнутом окне браузера, а затем окно восстанавливаем в нормальные размеры. В первом и во втором случае ячейки будут иметь одинаковый размер вне зависимости от размеров окна, а сама страница в целом будет одинакова в отображении. Это самый простой пример данного вида вёрстки.

А вот теперь про гибкий дизайн. Именно о его плюсах и минусах буду сегодня говорить я. Берём первый пример из предыдущего абзаца и меняем размер ячеек таблицы, но ставим туда не пиксели, а проценты.

Они задают ширину ячейки в процентах от общей рабочей области браузера. Загружаем обновлённую страницу и меняем размер окна. В каждом новом случае страница отображается с новыми размерами, которые привязаны к размерам окна браузера. Стало немного понятнее?

Жёсткий дизайн в основном не требует применения каких-либо технологий, кроме HTML, но вот гибкий – другое дело. Конечно, создать его можно и при помощи простых средств вёрстки страницы, но всё чаще требуется применение разных языков программирования. Подойдут таких как PHP, Perl, JavaScript, SSI и многого другого, в зависимости от стоящей задачи. Мы же с вами не будем внедряться в такие подробности, ибо это тема совсем другой статьи, посвящённой программированию для веб.

CSS открывают много возможностей, и так как они используются на 99% сайтах, то именно таблицы стилей помогут в создании наиболее гибкого или же самого жёсткого дизайна, создание которого не может ограничиться только тэгами и настройками браузеров по умолчанию. Эти настройки зависят от конкретного браузера и могут меняться по обстоятельствам, но нам это ну никак не нужно. Для создания жёсткого дизайна нам потребуется прописывать различные свойства текста, тэгов, и прочего в твёрдых величинах — пикселях.

.text {font-size: 10px;}

Пиксели всегда остаются пикселями и не меняются при смене размеров окна, но вот при смене разрешения они всё-таки могут увеличиваться или уменьшаться. Именно эта запись позволит иметь размер шрифта для класса text всегда равную 10 пикселям, а вот если запишем то же самое, но вот так:

.text {font-size: 10pt;}

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

Жёсткий дизайн создаётся единым для всех разрешений, размеров окна, определением всевозможных размеров в точных единицах (пикселях). Гибкий же дизайн требует определять размер в относительных величинах, иногда внедряя различные языки и технологии.

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

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

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

Жёсткий дизайн, как и гибкий, имеет право на существование. Он потихоньку вытесняется гибким, но мгновенного перехода с одного типа на другой не будет. Выбор в использовании того или другого за вами, но помните, что жёсткий дизайн не намного легче в разработке, если делать всё с умом. Гибкий же могут применять те, кому стандарта HTML + CSS для вёрстки недостаточно, и он хочет получить что-то вроде HTML + CSS + SSI + JavaScript, а также сделать свой сайт более интерактивным и “живым”, реагирующим на малейшие капризы своих посетителей.

Простой тест
Сколько денег принесет IT-карьера покажет наш тест
Узнайте прямо сейчас
Поехали

Нажмите, чтобы начать тест

Вы будете зарабатывать $2300
Вы будете зарабатывать $5400
Вы будете зарабатывать $6700
Вы будете зарабатывать $3200
Сколько часов в день Вы планируете уделять своей работе в IT?
Когда Вам говорят «Я не понимаю как это сделать» Вы:
На Вашу палатку в лесу бежит разъяренный лось, что Вы сделаете:
Какое из указанных направлений привлекает Вас больше?
Сколько времени в неделю Вы инвестируете в самообразование?
Какая школьная дисциплина из приведенных ниже Вам кажется более привлекательной?
Какой у Вас уровень английского языка?
Пожалуйста заполните квиз
Неправильно введен номер
Поделитесь своими результатами