Фиксированный, резиновый или адаптивный?

Question

[assert]

Недавно начал осваивать HTML и CSS. И почти сразу возник вопрос: какой дизайн перспективнее? Сверстал несколько средненьких по сложности фиксированных один резиновый с горем пополам… и один простенький адаптивный… на сколько я понял сейчас самый перспективный это адаптивный? Или это не так? Я так и не понял как в случае адаптивного дизайна поставить изображение как background? объясните кто знает. Оно должно быть векторным или нет?

P.S.

Получилось сразу несколько вопросов в одном, но создавать для каждого отдельную тему смысла нет.

Answer 1

[Виталий Желтяков]

Самый перспективный дизайн это тот, который Вы лучше знаете. В идеале лучше знать всё.

Дело в том, что направлений проектов много и для каждого какой-то дизайн лучше, какой-то хуже.

Answer 2

[theaspin]

Адаптивная верстка подразумевает изменения размера, положения, видимости элементов в зависимости от размеров экрана пользователя и других пареметров (через css media queries). В резиновой верстке обычно просто тянется основной элемент с содержанием. Полезно знать оба подхода, да и никто не мешает использовать их одновременно. Изображение на фон ставится как обычно, можно сделать несколько размеров под разные размеры экрана.

Answer 3

[Softlink]

Строго говоря, верстка везде одна и та же. Что в адаптивном вы используете div'ы, что в фиксированном, что в резиновом. И научиться верстать адаптивные сайты не умея делать фикс просто невозможно.
Разница лишь в расположении элементов в браузере пользователя.
В общем, надо просто научиться верстать, а там сами поймете, что от чего и чем отличается.

Answer 4

[DibrovLALALA]

За несколько лет никакой вариант не победил и видимо не победит. Так что выбирать нужно какой больше нравится и какой не ограничивает восприятие.

Answer 5

[Кирилл Мамаев]

Всегда будут сайты где настолько мало контента (о целесообразности не будем говорить), что их «резинить» просто нет ни малейшего смысла. Так, что даже статическая верстка ещё долго будет жива. Например, сайты визитки различных ООО «Вектор+» с 5-ю страничками.

В тоже же время, именно резиновая и адаптивная верстка позволяют максимально эффективно заполнить рабочее пространство, чем-то полезным. Ну это конечно, когда есть чем заполнять :) Например, новостные порталы, или различные он-лайн сервисы.

Answer 6

[Deleted Deleted]

Вообще, по "эволюции" веб-дизайна всё шло так: фиксированый>резиновый>адаптивный.

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

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

Адаптивный впишется во всё: планшет, смартфон, нетбук и т. д...

__
Вывод: всё зависит от Ваших целей, умений и навыков.

Answer 7

[Сергей Ефимов]

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

Comments

[Ивор Барханский]

IMHO начинать стоит с чистого html. Как человек сможет выбрать удобный инструмент, если он не знает как его прикладывать и в чём именно он удобен?

Answer 8

[Александр]

Вот неплохая статья о различиях между макетами "Адаптивно-отзывчивый: разбираемся в терминологии". Но, я считаю, классификация условная.

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

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

Если у вас возникают трудности с пониманием адаптивной верстки, то советую пробежаться по книге "Отзывчивый веб-дизайн". Когда придет пониманию, смотрите в исходники сеток в фреймворках типа boostrap, zurb foundation (в нём используется mobile-first подход), ну и продвинутые сетки типа jeet.gs