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

Здравствуйте. Всегда ли есть необходимость адаптировать сайт под все устройства? Если нет, то какие размеры вы выставляете для сайта (min и max)? Если адаптируете, то посредством чего? Медиа запросы или применяете какие-то доп. плагины ?
  • Вопрос задан
  • 5101 просмотр
Решения вопроса 5
aliencash
@aliencash
Партизан
Я уже давно понял, что лучше сразу делать адаптивно. Иначе потом все равно переделывать придется. Контейнер у меня выглядит так:
.container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
}

Причем стараюсь делать все резиново. Если такой возможности нет - медиазапросы.
Ответ написан
Комментировать
SuperMax899
@SuperMax899
лучшее "спасибо" - кнопка "решение вопроса"
На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
Советую так же прочесть вот эту статью: 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, цвет текста в поле).

Нужно ли это? Безусловно - на любом сайте, в любой отрасли половина трафика с мобильных устройств, это уже стандарт качества, на мой взгляд:)
Ответ написан
@quant78
<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;
    		}
    }
Ответ написан
MyaFF
@MyaFF
Верстальщик
Адаптировать или нет - зависит от проекта и, к сожалению, желания и бюджета заказчика. Не адаптивные проекты встречаются все реже, но и в них используем как минимум модульную сетку.
Количество контрольных точек, в которых перестраивается макет, и их значения зависят от дизайна, также бывают дополнительные медиа-запросы для элементов, которые на какой-то ширине/высоте начинают плохо выглядеть.
Основной принцип - конкретный дизайн должен хорошо выглядеть всегда, без привязки к размерам конкретного устройства (но дизайнеры все равно рисуют 320, 768 и "большой" - какой? по настроению дизайнера), все, что не нарисовано, додумывает верстальщик на ходу.
Элементы форм, анимацию, кнопки, ссылки - все, с чем взаимодействует пользователь, также делим по принципу тач/не тач.
Ответ написан
Комментировать
lukoie
@lukoie
>Всегда ли есть необходимость адаптировать сайт под все устройства?
Далеко не всегда - конечно это зависит от бюджета заказчика.

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы