@Martyer

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

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