Как вы создаёте адаптивный дизайн и всегда ли это нужно?

Question

[Martyer]

Здравствуйте. Всегда ли есть необходимость адаптировать сайт под все устройства? Если нет, то какие размеры вы выставляете для сайта (min и max)? Если адаптируете, то посредством чего? Медиа запросы или применяете какие-то доп. плагины ?

Comments

[copal]

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

[Martyer]

copal: Благодарю, за Ваш ответ)

[glamurchik]

copal: Если брать плату отдельно за адаптивный дизайн, то некислая сумма получится... во всем нужно иметь золотую середину. Если делаешь дизайн - то адаптивность должна присутствовать минимальная, все остальное (количество устройств) по желанию... Адаптивность в вебе - должна быть полюбому!

[copal]

glamurchik: адаптивность к чему? Ком всем тысячам телефонов и планшетов?
Программистам дали в руки инструменты, которые имеют адаптивность из коробки, как например в bootstrap3 и теперь требуют адаптивность за бесплатно, забывая что из-за этих инструментов повышается порог вхождения, что означает лишнее затраченное на обучение время, а значит на повышенную стоимость. А так же все закрывают глаза на сложность в кастомизации стилей в готовых библиотеках, начав изменять которые понимаешь что лучше сделать с нуля самому.
То есть фактор "готового решения" сводится к нулю, но это в расчет почему-то не берут прося чтобы за копейки сделали сразу под все платформы и устройства.

Answer 1

[Андрей Федоров]

Я уже давно понял, что лучше сразу делать адаптивно. Иначе потом все равно переделывать придется. Контейнер у меня выглядит так:

.container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
}

Причем стараюсь делать все резиново. Если такой возможности нет - медиазапросы.

Answer 2

[Max]

На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
Советую так же прочесть вот эту статью: frontender.info/building-a-better-responsive-website

Обычно использую bootstrap, который дополняю своими стилями, к примеру, сразу удаляю\перекрываю .row с его -15px margin'ом по сторонам, добавляю класс padding-0 для убирания в некоторых блоках padding'a у col- (который стандартно по 15px).

Стандартно учитываю разрешения - HD, ноутбучное 1366 и свое чуть меньше 1366 (у меня пуск справа:) ), 1024-960 - старые мониторы и нетбуки, смотрю в диапазоне 768px-960 для некоторых планшетов и телефонов, и меньше 768 для телефонов. Тут дизайн один, через media onlyscreen убираем с загрузки ненужные части.
Если все сверстано правильно и добавлены везде классы, то сайт будет полностью адаптивным.
Для тестов меньше 768px проверяю через iphone 5 и старенький android-телефон. (Через Toggle Device mode в Google Chrome получаешь очень сильно разительные результаты в сравнении с устройством - браузеры то другие, хотя большие косяки всплывают сразу.)
Тут кстати еще (мобильная) кросс-браузерность очень тонкий вопрос. Стиль у каждого браузера свой, особенно у всяких элементов типа input, так что тоже требует проверки и состояний тоже (placeholder, цвет текста в поле).

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

Comments

[Martyer]

Благодарю Вас, за развёрнутый ответ.)

[Max]

Martyer: Всегда пожалуйста:)

Answer 3

[Кирилл]

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

#left{
    	width: 600px;
    	float: left;
    	margin-right: 10px;
    	}
    #right{
    	width: 400px;
    	float: right;
    	}	
    	
    @media only screen and (max-width: 1010px){ 
    	#left, #right{
    		width: 98%;
    		float: none;
    		margin: 10px auto;
    		}
    }

Comments

[Павел Радьков]

Использовать айдишники для стилей — один из признаков дурного кода. Этим вы создаете проблемы себе в будущем или другому верстальщику, который будет работать с сайтом после вас.

[dedmagic]

Павел Радьков: А можно узнать – почему?

[Павел Радьков]

dedmagic

1. Айдишник можно использовать на странице один раз. Два и более раза — это уже не валидно. Поэтому, если понадобится переделать сайт по схеме «три колонки → блок от края до края → снова три колонки» на одной странице, этот кусок кода придется полностью переписывать.

2. На один элемент можно повесить только один айдишник, а классов на один элемент можно повесить много. Получается, если вешать стили на id, мы лишаемся гибкости.

3. У айдишников слишком высокий вес селектора. Если вам понадобится контекстно перестилить что-то внутри колонки, то вероятнее всего вы впишите в селектор айдишник и потом, чтобы обнулить овверрайд или сделать новый, вам придется использовать этот же айдишник (или поставить другой). Классами перебить селектор с айдишником не получится — не хватит веса. Айдишник будет множиться в css-ке и реффакторить становится всё сложнее.

Поэтому выводы: 1) никогда не вешать на айдишники стили; 2) если нет выбора, писать селектор так: div[id="left"] {...} — этот селектор медленнее, чем селектор по классу, но и вес у него на равне с классом. Т.е. это меньшее зло, чем айдишник в стилях.

[dedmagic]

Павел Радьков: Ну то, что несколько айдишников на странице нельзя, это очевидно. Но на странице есть элементы, которые встречаются ровно один раз - один header, один left-column и т.д. Почему нельзя для них использовать id?
При этом в CSS к этому айдишнику привязываем только специфичные для этого элемента стили, например, left-column имеет ширину 25%.
Расположенные внутри элементы (например, меню), стилизуем с помощью классов без привязки к родительскому блоку, что позволяет их спокойно переносить, например, из левой колонки в правую.
Что скажете за подобное использование айдишников при вёрстке?

ЗЫ: Что касается "если понадобится переделать сайт по схеме...", то в данном случае переписывать код придётся в любом случае, независимо от того, что было использовано для частей страницы - классы или id, имхо.

[Павел Радьков]

dedmagic

Если элемент встречается ровно один раз — это не значит, что так будет всегда. Когда в верстке используется компонентный подход, при переделке структуры переписывать придется только HTML, т.к. CSS уже приспособлен для повторного использования.

Вы сейчас думаете как фрилансер, который делает маленькие корпоративные сайты на 10-20 страниц по утвержденным дизайнам и не заботится о том, что будет после него. А если переделывать, то сразу всё, чтобы больше заплатили. (Это я всё утрирую, извините, если обидел).

Когда работаешь с большим проектом, дизайнеры, верстальщики и бэкэнд программисты работают параллельно, а сверху им спускает требования бизнес-команда. Одна страница, пока дойдет до продакшена, может успеть поменяться 5 раз. Поэтому нужно думать наперед, «подстелить себе соломки», чтобы будущие возможные изменения занимали как можно меньше усилий.

Доводы против айдишников я вам озвучил. Если для вас они звучат не убедительно, значит вы еще наступите на эти грабли :) Успехов!

[dedmagic]

Павел Радьков: Наверное, Вы правы - понимание в этом вопросе придёт только на личном опыте. Просто достаточно часто встречаю в интернете это утверждение (про айдишники), но ни разу не видел конкретный пример, его иллюстрирующий. Надо будет попросить такой пример здесь, на Тостере :).
В любом случае спасибо!

Answer 4

[Ольга Грабко]

Адаптировать или нет - зависит от проекта и, к сожалению, желания и бюджета заказчика. Не адаптивные проекты встречаются все реже, но и в них используем как минимум модульную сетку.
Количество контрольных точек, в которых перестраивается макет, и их значения зависят от дизайна, также бывают дополнительные медиа-запросы для элементов, которые на какой-то ширине/высоте начинают плохо выглядеть.
Основной принцип - конкретный дизайн должен хорошо выглядеть всегда, без привязки к размерам конкретного устройства (но дизайнеры все равно рисуют 320, 768 и "большой" - какой? по настроению дизайнера), все, что не нарисовано, додумывает верстальщик на ходу.
Элементы форм, анимацию, кнопки, ссылки - все, с чем взаимодействует пользователь, также делим по принципу тач/не тач.

Answer 5

[lukoie]

>Всегда ли есть необходимость адаптировать сайт под все устройства?
Далеко не всегда - конечно это зависит от бюджета заказчика.

>Если нет, то какие размеры вы выставляете для сайта (min и max)?
В процентах. И проще использовать готовые фреймворки - зачем изобретать велосипед каждый раз?

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

Comments

[littleguga]

Какие инструменты имеете ввиду? Что ужа даже шаблон для cms готовый на выходе есть? Слышал про Adobe Muse, но там код на выходе каловый получается.

Answer 6

[Monitorkin]

bootsrap 3

Answer 7

[Владислав Старцев]

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

Сам на своём одном проекте использую 2 метода, сначала скриптом Mobile_Direct узнаю устройство, затем заношу переменную в сессию, далее подключаю css для мобильной версии.

Многие могут сказать, что я создаю лишний геморрой, однако в реализуемом проекте он необходим, к примеру у меня информационный портал разрабатывается, и суть подключения скрипта в том, что, если пользователь заходит с мобильника, то мне половину блоков нет необходимости подключать, можно просто выставлять через стили display:none однако вес картинок, баннеров, а также доп запросов к удаленным сервисам и БД никуда не денутся, потому я их не подгружаю, чем существенно уменьшаю вес страницы для моб. версии и сокращаю кол-во запросов к бд. Но, как я и писал это то что я делаю в рамках данного проекта.

А так, медиа запросами, можно обойтись, хотя у каждого своё видение.