Адаптивная верстка

Сейчас все чаще и чаще заказчики требуют адаптивную верстку. При этом сроки и бюджеты от обычной верстки почему-то не отличаются. Но вопрос не об этом.

Сейчас куча всяких фреймворков для адаптивной верстки, сотни тем. Интересует кто какие фреймворки, темы использует или может сами с нуля пишете. Меня жутко пугает написание с нуля, т.к. как пока все распишешь для всех разрешений и протестируешь, это отнимет очень много времени. В то время как создание на какой-нибудь grid-системе позволит ускорить этот процесс в разы, но тут также есть минус - привязка к сетке.

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

+ часто требуют не имея "отрисованных" макетов под необходимые разрешения
+ часто макеты с косяками
Цена и срок у меня всегда больше, но соглашусь что заказчики не понимают всего этого.
Вообще сами фрилансеры виноваты в этом, много слишком неопытных исполнителей, которые демпенгиуют, "лепят" из одного макета 10 + еще и адаптируют.

Начал баловаться с media queries еще за долго до появления фреймворков типа твиттер бутстрапа. Мне удобнее с нуля делать(я думаю у многих со временем появились свои наработки/болванки/фреймворки). А во фреймворках много чего не нравится. Да и выбирать нужно по ситуации исходя из поставленных задач.

art-apple, а не поделитесь в личку своими шаблонами? Хотелось бы посмотреть кто как пишет разметку

Bob301, принципиально верстаю с нуля. Вручную. В блокнотике.
Нет желания даже пробовать всякие бутстрапы.
Быть может это и ускоряет процесс. Быть может это и модно. Быть может кто-то и делает на них качественно.
НО сколько видел поделок на этих фреймах (отдают для натяжки), ни одного нормально сверстанного.
Даже от самых лучших экземпляров меня воротит. Куча классов, черт ногу сломит. Огромные css. Лишние js.
Да капец.


Цитата (Bob301):

пока все распишешь для всех разрешений и протестируешь

Да ну...
Вручную нормальный макет сверстать адаптивно - это всего лишь +15-25% времени и сложности.

И, кстати, за ручную верстку платят щедро.

parkgraphic, проблема может быть как раз с тестировании. Чтобы проверить верстку во всех условиях нужно много ресурсов. Когда протестировать фреймворк - эту работу уже сделали и это если не гарантия, то высокая вероятность того, что в боевых условиях все будет нормально. А в своем можно накосячить и вылезет это только в каких-то определенных условиях. Будет неприятно.

frig, не соглашусь.
1. я участвую в верстке один. А фреймворк писало куча народа. И потом еще один пользуется при верстке. Итого человеческий фактор растет.
2. мой css весит в 4-6 раз меньше. А, как известно, чем больше кода - тем больше ошибок.

Цитата (frig):

Чтобы проверить верстку во всех условиях нужно много ресурсов.

а за то и платят.
И почему я должен понадеяться на чьё-то изобретение, нежели сам аккуратно и внимательно все делать?

parkgraphic, возможно вы и правы. Нужно будет попробовать. А что касается кучи классов, скриптов, то я согласен. А вы как-то разделяете CSS по файлам или все в одном делаете?

Bob301, как правило в одном.
В среднем выходит от 20кб до 100 кб.
Что тут еще делить? Дольше займет подключение к лишнему файлу.
Делю, если только для каких-то целей нужно.
Например, цветовое решение отделить.
Или подсовывать разным платформам\браузерам.

parkgraphic, а по поводу того. что вы говорите, что за ручную верстку платят больше, то я такого не встречал. Клиенту в 99% пофигу как вы пишете и на чем. Ему главное результат. Сейчас например многие хотят за 50$ получить адаптивную верстку шаблона, хотя там обычная верстка стоит долларов 100$, а ещё накинуть 50$ за адаптацию и получается все 150$

Bob301, так ищите других клиентов)
Я прекрасно знаю, что за день здесь десятки проектов, бюджет у которых в 3-10 раз меньше интересного.
Но все равно один-два проекта за день проскакивают с адекватным ценником и с клиентом, который понимает за что платит.
А еще я сильно стараюсь не брать говнодизайны в верстку.
Верстать приятный и качественный дизайн куда легче.

Цитата (parkgraphic):

А фреймворк писало куча народа. И потом еще один пользуется при верстке. Итого человеческий фактор растет.

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

Цитата:

2. мой css весит в 4-6 раз меньше. А, как известно, чем больше кода - тем больше ошибок.

Есть вероятность, что тот объемный код таки что-то делает. Например покрывает бОльшее количество условий. Хорошо, если не в 4-6 раз больше. Иначе это значит, что ваш самописный код недорабатывает в те самые 4-6 раз.
Цитата (parkgraphic):

а за то и платят.

Платят за результат. И за качество. Заказчика вообще не волнует как вы это сделали, ему по сути и вы не нужны, ему результат нужен. Чем качественнее и дешевле - тем лучше.

Цитата (parkgraphic):

И почему я должен понадеяться на чьё-то изобретение, нежели сам аккуратно и внимательно все делать?

Соберите себе внимательно компьютер, напишите ОС, инструменты разработки, потом поговорим, нужно ли надеяться на чье либо изобретение Машину тоже сами себе собрали? Ну вдруг там много много инженеров допустили много ошибок в таком сложном механизме и вам угрожает опасность?

Цитата (frig):

Соберите себе внимательно компьютер, напишите ОС, инструменты разработки, потом поговорим, нужно ли надеяться на чье либо изобретение Машину тоже сами себе собрали? Ну вдруг там много много инженеров допустили много ошибок в таком сложном механизме и вам угрожает опасность?

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

Цитата (frig):

Заказчика вообще не волнует как вы это сделали

Нескольких моих постоянных волнует.
Одному после меня натягивать. И ему нравится чистота, простота и незамороченность.
А двое других просто ценят.
И готовы платить именно за это. Мне повезло?
Остальным просто пофиг, им действительно нужен результат. Но они и платят хорошо. Тогда почему я должен халтурить?
Ну и есть люди, которые просто любят свою работу. Я очень люблю верстать. Люблю решать интересные задачи.
Просто люблю. И за мое удовольствие платят.

Можно картину нарисовать на компьютере, а можно кистями.
Я это как-то так вижу.

Видимо, каждому свое.

parkgraphic, какие правила CSS3 media queries используете?

У меня уже голова кругом идет. Каждый лепит свои размеры.

На одном сайте такие предлагают

/* View < 1200px */

@media (max-width: 1200px){

/* Styles */}

 

/* Max width 1024px and orientation: landscape for iPad in landscape */

@media (max-device-width: 1024px) and (orientation: landscape){

/* Styles */}

 

/* Design for a width of 768px for iPad in portrait */

@media (max-device-width: 1024px) and (orientation: portrait){

/* Styles */}

 

/* Design for a width of 740px for Tablet (Portrait) */

@media only screen and (min-width: 768px) and (max-width: 959px){

/* Styles */}

 

/* Design for a width of 420px for Mobile (Landscape) */

@media only screen and (min-width: 601px) and (max-width: 767px){

/* Styles */}

 

/* Mobile width < 600px */

@media (max-width: 600px){

/* Styles */}

на другом такие

@media screen and (max-width:480px) {

}


@media screen and (min-width:480px) and (max-width:800px) {

}


@media screen and (min-width:800px) {

}

на бутстрапе вообще другие значения.

Bob301, секреты не выдаю
parkgraphic, поддерживаю каждое сообщение
Цитата:

какие правила CSS3 media queries используете?

Это опять же зависит от ТЗ, разные использую.

Bob301, по-разному.
Зависит от возможностей макета и ТЗ.
Из последнего 980, 840, 768, 595, 480, 320.
Бывает немало промежуточных, когда хочется, чтоб прям при любом размере смотрелось круто, а макет не совсем простой.

parkgraphic,Извините за нескромность, но можно ли взглянуть на какую-нибудь вашу работу?

parkgraphic, интересуюсь просто ради "быть в курсе". Будучи специалистом в "адаптивной вёрстке", на какой перечень устройств / разрешений / клиентов ( имеется в виду не "заказчиков", а "ПО для просмотра веб-страниц ) вы рассчитываете свой код? Т.е. "когда я сдаю вёрстку заказчику, я гарантирую, что свёрстанный шаблон будет работать в ..."

b0nn1e, нет.
TigerDesign, на всех существующих в пределах разумного.
На самом деле главное - сохранность функциональности. Т.е. я могу допустить, что какая-то фишечка не сработает в ие7, но она не нарушит работу как всего сайта, так и рабочей области, к которой она относится.
Тестирую на двух айфонах, айпаде, трех андроид-планшетах, двух андроид телефонах, виндовс-смарте, паре ноутбуков, маке и стационарнике.
По-старинке таскаю браузеры за уголки и на всякий случай прогоняю через онлайн-просмотрщики, хотя это как правило скорее эмуляторы, нежели реальная проверка.

Мисье знает толк в извращениях