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

Здравствуйте. Всегда ли есть необходимость адаптировать сайт под все устройства? Если нет, то какие размеры вы выставляете для сайта (min и max)? Если адаптируете, то посредством чего? Медиа запросы или применяете какие-то доп. плагины ?
  • Вопрос задан
  • 4710 просмотров
Решения вопроса 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
@esvlad
Веб-разработчик
Лично я считаю, что поскольку аудитория пользователей мобильного интернета чуть ли не больше чем десктопного, то адаптировать нужно.

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

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

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

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

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
OTUS Москва
от 120 000 руб.
от 80 000 до 150 000 руб.