Сайт — резиновый или фиксированный…
Здравствуйте, друзья!
Сегодня я хотел поговорить с Вами про два разных типа дизайна сайтов: резиновый и фиксированной ширины.
Часто начинающие веб-мастера не знают о существовании этих типов дизайна, и тем более, чем они отличаются. Сегодня мы восполним этот пробел.
Я расскажу Вам о достоинствах и недостатках обоих типов дизайна. Но сначала давайте поговорим о том, что это вообще такое и как их отличить.
На сегодняшний день существует два базовых типа дизайна сайтов: фиксированный и резиновый.
1. Фиксированный дизайн сайта.
Под фиксированный дизайном сайта понимается фиксированная ширина макета сайта. Такой сайт фиксирован по своим параметрам, то есть не меняет своих параметров при изменении размера окна браузера… или при просмотре на мониторах с разным разрешением экрана.
Не сложно понять, что разработка сайта по принципу фиксированного дизайна очень проста. Именно этот тип дизайна я рекомендую всем начинающим веб-мастерам.
Используя фиксированный шаблон сайта можно добиться того, что посетители с разным размером окна браузера или с разной величиной дисплея будут видеть одну и ту же картинку, и информация в любом случае будет отображаться по заданным зафиксированным параметрам.
Простейший пример фиксированного дизайна — это сайт, на котором вы сейчас находитесь.
Давайте рассмотрим все плюсы и минусы использования данного вида дизайна.
Преимущества фиксированного шаблона:
- Дизайн сайта будет смотреться одинаково в любых операционных системах, на любых дисплеях. Искажение дизайна практически исключается.
- Благодаря фиксированной ширине элементов сайта можно добиться того, что весь контент станет более читабельным.
Недостатки фиксированного шаблона:
- Фиксированный дизайн обладает только одним оптимальным разрешением экрана, то есть на мониторах с другим разрешением может выглядит не очень красиво.
- При фиксированном дизайне возможно появление полос прокрутки на мониторах с небольшим разрешением, что скрывает часть информации и смотрится не эстетично.
2. Резиновый дизайн сайта.
Суть резинового шаблона заключается в следующем: весь контент на сайте распределяется равномерно по всей доступной площади окна браузера. Таким образом, изменяя ширину и высоту окна браузера можно добиться отображения элементов сайта в различном расширении, однако при этом размер дисплея не имеет никакого значения.
Резиновый шаблон сайта – это следствие масштабирования элементов браузером посетителя сайта, то есть вся обработка «резиновости» происходит на стороне клиента, а не сервера. Такой подход к организации сайта имеет свои достоинства и недостатки, о которых мы поговорим далее.
Достоинства резинового шаблона сайта:
- Гибкая страница сайта будет одинаково привлекательно смотреться на дисплее любого размера.
- Такой шаблон сайта полностью заполняет все пространство окна браузера. Поэтому нет пустых, неиспользованных областей экрана (окна браузера).
Недостатки резинового шаблона сайта:
- Текст на сайте с таким дизайном может потерять читабельность, поскольку нет строго зафиксированных границ вывода текста.
- Резиновый дизайн сайта может оказаться непредсказуемым, поскольку вывод информации на экран практически ничем не ограничивается. Графика и текст могут занимать любые положения на экране, что не всегда желательно.
- Некоторые браузеры плохо работают с резиновым дизайном, то есть разные браузеры могут отображать одну и ту же страницу по-разному.
- Создание резинового дизайна – это очень трудоемкий процесс. Кроме того, загрузка страницы с резиновым дизайном занимает несколько больше времени, чем в случае с фиксированным дизайном.
Как видите, у каждого типа дизайна есть свои плюсы и минусы. В любом случае, последнее слово за Вами. Так что выбирать Вам.
Я лично предпочитаю фиксированный дизайн. С ним проще работать (не возникает никаких «неожиданных сюрпризов»). Просто нужно адаптировать макет под наименьшее из самых широко распространенных разрешений экрана (сейчас это 1024×768 пикс.)
На этом все на сегодня. Желаю Вам определиться с типом дизайна раз и навсегда.
5 техник резиновой верстки сайта.
От автора: 5 бесплатных уроков по резиновой верстке сайта. Это прям-таки то, что никак не дает покоя всем тем, кто имеет свой сайт или только планирует его создать. В общем – мастхэв (должен изучить абсолютно каждый, кто не хочет, чтобы его сайты разлетались как им вздумается при различных разрешениях экрана). Никакой воды, лишь практический опыт.
Техника 1. Ширина элемента и свойство float.
Тема: HTML&CSS
Время ролика: 00:22:38
Cложность: средняя
Прикладные программы: Dreamweaver CS4
Автор: Бернацкий Андрей
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееВ этом уроке мы досконально разберем все подводные камни такого, казалось бы, простого понятия, как ширина элемента. Поймем, из чего она складывается и что представляет на самом деле. Так же рассмотрим работу свойства float. Рассмотрим на примере, почему плавающие элементы при изменении ширины окна браузера съезжают на новую строку, и решим данную проблему. Рассмотрим и решим проблему схлопывания границ блока.
Техника 2. Создание резинового меню, используя списки.
Тема: HTML&CSS
Время ролика: 00:16:13
Cложность: средняя
Прикладные программы: Dreamweaver CS4
Автор: Бернацкий Андрей
Навигация — это, пожалуй, самая главная часть сайта. И у резинового сайта, как правило, навигация тоже резиновая. Создать резиновое меню, используя таблицы, труда не составит. Но когда речь заходит о создании такого меню, используя списки, возникает много вопросов. В уроке мы как раз создадим резиновое меню, используя списки. Разберемся с теорией создания такого меню. Выявим и решим возможные проблемы.
Техника 3. Выстраиваем элементы позиционированием.
Тема: HTML&CSS
Время ролика: 00:23:39
Cложность: средняя
Прикладные программы: Dreamweaver CS4
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееАвтор: Бернацкий Андрей
Часто возникают ситуации, когда нужно сделать перекрытие элементов. Или заставить элемент располагаться, например, в правом нижнем углу, независимо от того, как расположены окружающие блоки. Данную проблему лучше всего решает свойство position. В уроке мы разберемся с позиционированием элементов. Поработаем над перекрытием элементов с помощью свойства z-index. Выясним необходимое условие для работы свойства z-index.
Техника 4. Центрирование элемента переменной ширины.
Тема: HTML&CSS
Время ролика: 00:11:45
Cложность: средняя
Прикладные программы: Dreamweaver CS4
Автор: Бернацкий Андрей
При верстке резиновых макетов, часто возникает ситуация, когда необходимо центрировать элемент. Когда известна ширина центрируемого элемента, то проблем не возникает. Все становиться сложнее, когда ширина блока, который нужно расположить по центру, не известна или она может меняться. В уроке мы рассмотрим пример центрирования блока переменной ширины, на примере создания постраничной навигации.
Техника 5. Центрирование элемента переменной ширины.
Тема: HTML&CSS
Время ролика: 00:16:00
Cложность: средняя
Прикладные программы: Dreamweaver CS4
Автор: Бернацкий Андрей
Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.
Ваши пожелания, отзывы и рекомендации оставляйте в комментариях!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьНесколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым
Доброго времени суток!Несколько дней назад, гуляя по интернету, я наткнулся на достаточно интересную подборку сайтов, которые следуют, если можно так сказать, практике под названием Responsive Web Design. В двух словах, эта практика подуразумевает создание «резинового» сайта, который будет тянуться в зависимости от размера окна вашего браузера, или же экрана вашего мобильного телефона. Итак, встречайте наших сегодняшних героев!
Fork CMS
Full view
Mobile view
SimpleBits
Full view
Mobile view
White Lotus Aromatics
Full view
Mobile view
1140px CSS Grid
Full view
Mobile view
Atlason
Full view
Mobile view
10K Apart
Full view
Mobile view
Cognition
Full view
Mobile view
Reverse Buro
Full view
Mobile view
Sunday Best
Full view
Mobile view
Dustin Senos
Full view
Mobile view
Clean Air Challenge
Full view
Mobile view
Owltastic
Full view
Mobile view
320 and up
Full view
Mobile view
Yaron Schoen
Full view
Mobile view
Build Guild
Full view
Mobile view
Do Lectures
Full view
Mobile view
Trent Walton
Full view
Mobile view
Food Sense
Full view
Mobile view
Sparkbox
Full view
Mobile view
ribot
Full view
Mobile view
Sweet Hat Club
Full view
Mobile view
A Different Design
Full view
Mobile view
Teixido
Full view
Mobile view
Sasquatch Music Festival
Full view
Mobile view
Electric Pulp
Full view
Mobile view
Stephen Caver
Full view
Mobile view
Social Marketer’s Summit
Full view
Mobile view
Sleepstreet
Full view
Mobile view
Porcupine
Full view
Mobile view
Interim
Full view
Mobile view
Tileables
Full view
Mobile view
CalebAcuity
Full view
Mobile view
Simon Collision
Full view
Mobile view
Spigot Design
Full view
Mobile view
Forefathers Group
Full view
Mobile view
Deren Keskin
Full view
Mobile view
Robot… Or Not?
Full view
Mobile view
Arrcamp Conference
Full view
Mobile view
Thirst Studios
Full view
Mobile view
Visua Design
Full view
Mobile view
Made by Splendid
Full view
Mobile view
Five Simple Steps
Full view
Mobile view
Ryan O’Rourke
Full view
Mobile view
dConstruct 2011
Full view
Mobile view
Diablo Media
Full view
Mobile view
Asbury Agile Web Conference
Full view
Mobile view
Также хочу поделиться с вами несколькими ссылочками по данной теме:
- Как сделать один сайт для всех устройств (Responsive Web Design) / Хабрахабр
- Responsive Web Design Book / A Book Apart
- Неплохой русскоязычный блог по Responsive Web Design
- Responsive Web Design / A List Apart
- Responsive Web Design: What It Is and How To Use It / Smashing Magazine
До скорых встреч!
Как сделать макет сайта. Виды макетов.
Огромное число дизайнерских организаций вкладывают огромные денежные средства в разработку макетов. Некоторые макеты похожи на афиши к кинокартинам. Но формировать полноценный проект из такого этапа, как создание макета далеко не предусмотрительно. Даже в случае если Вы не превосходный веб-дизайнер, то у Вас может выйти очень привлекательный вариант макета, какой затем, при помощи профессионалов, имеется возможность претворить в реальный веб – сайт.
Чтобы создать макет сайта было бы желательно знать определенные условия и стандарты изготовления макетов. Вот главные из них:
1. При создании макета сайта не рекомендуется посвящать максимальное количество времени компонентам сайта. Скажем, в том случае если вы поместили в правом блоке навигационную панель, не надо пробовать придумывать заголовки категориям. Помните, что это просто эскиз.
2. Не стоит писать контент на эскиз сайта. Его можно заменить простыми горизонтальными линиями.
3. Требуется уделить дополнительное внимание таким критериям, как форма проекта, соотношение габаритов составляющих ресурса, страницам с уникальным дизайном.
В том случае, когда Вы создаете макет сайта на листе бумаги, то лучше всего используйте простой карандаш. Ведь Вам что-то может не понравиться в Вашем макете, а начинать делать макет снова – станет очень сложным делом. Как заготовку для вашего макета есть возможность применять распечатанный скриншот чистой веб странички в браузере. Нужно напечатать загодя десяток подобных листов. Вам будет удобно создавать на листе бумаги со скриншотом, поскольку Вам будет проще представить, как будет смотреться ваш сайт в браузере. Созданные макеты смогут применяться как образцы для страниц Вашего сайта. Именно поэтому не забудьте придумать названия Вашим будущим страничкам.
Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:
– Слоган
– Система навигации
– Название компании и логотип, если это сайт фирмы
Вдумчиво продуманный и оформленный макет сайта, э