html — Резиновая или адаптивная верстка?

Решил добавить к себе в портфолио «резиновую верстку», начинаю делать и понимаю, что вот вот и адаптивная щас будет. То есть пару часов и уже адаптив. Вопрос: время резины прошло что ли? для чего сейчас применяют такой вид верстки?(возможно — это экономия, то есть резина нужна для больших экранов/планшетов(ну примерно такой диапазон: max-width: 1920px; min-width: 768px), а для мобильников нам не нужно(ведь по сути для мобильников, свой минималистичный дизайн и т.п.) и экономнее сделать именно резину?).

• html
• css
• вёрстка
• адаптивная-верстка

я бы использовал flex’ы. Самый удачный и правильный подход, по моему неавторитетному мнению. И резинит, и адаптирует. Ссылка на пример

.flex-block {
  display: flex;
  flex-flow: row wrap;
}
.one {
  background: #583C5A;
  padding: 20px;
  margin: 5px;
}
.half {
  flex: 45%;
}
.third {
  flex: 30%;
}
.four {
  flex: 20%
}
@media only screen and (max-width: 600px) {
  .  third {
    flex: 1 100%
  }
}
@media only screen and (max-width: 480px) {
  .flex-block {
    flex-flow: column;
  }
}

Возможно, это не совсем ответ на Ваш вопрос, однако, например Яндекс намекнул, что в выдаче будет опускать НЕмобильные страницы. Если Ваш сайт не предоставляет адаптивную вёрстку под таблетки/мобильники, он будет ниже в Яндексовской выдаче, чем сайты с такой же тематикой, но которые предоставляют такую вёрстку.

Вполне себе тренд для работы верстальщиков.

Лично мой подход таков: если max-device-width/height превышает размеры таблетки/мобильника, то подключать резиновую верстку. Если же нет — использовать адаптивную под таблеточные/телефонные разрешения.

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

/ * Небольшие устройства (телефоны, меньше, чем 768px) * /
/ * То что по умолчанию в Bootstrap * /
/ * Небольшие устройства (таблетки, 768px и выше) * /
media (min-width: 768px) {. ..}
/ * Средний устройства (настольные, 992px и выше) * /
media (min-width: 992px) {...}
/ * Большие устройства (крупные настольные, 1200px и выше) * /
media (min-width: 1200px) {...}
///// Это пример из bootstrap 3 в том случаи если верстать как mobile first////
///// Или если desctop first //////
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 992px) { ... }
@media (min-width: 992px) and (max-width: 1200px) { ... }
@media (min-width: 1200px) { ... } 

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как разобраться с высотой экрана в адаптивной верстке?

Задать вопрос

Вопрос задан

1 год 9 месяцев назад

Изменён 1 год 9 месяцев назад

Просмотрен 53 раза

Нужен совет по поводу адаптивной верстки при минимальной высоте экрана — как правильно выставлять правила и от чего чтобы в итоге сайт смотрелся хорошо, как на минимальном разрешении, так и на большом? Я сделал адаптивную верстку первой страницы сайта, но не уверен, что сделал это правильно. Нужно ставить max-height: 768px или mшт-height: 768px или же вообще делать отрезками от минимальной до максимальной высоты @media screen and (min-height: 768px) and (max-height: 850). Прошу прощения за нечетко сформулированный вопрос

Сам сайт http://ilyin1ib.beget.tech/ Весь код https://jsfiddle.net/6dp9cwvz/

Я написал так

@media screen and (max-height: 768px) {
  section {
    padding: 0 !important;
  }
  .hamburger-box {
    margin-top: -10px !important;
  }
  .main-gal .owl-carousel {
    max-height: 350px !important;
  }
  .main-gal .owl-item {
    max-height: 350px !important;
    position: relative;
  }
  .main-gal .owl-dots {
    bottom: 20px;
  }
  .hamburger_wrapper {
    top: 28px;
  }

• html
• css

2

медиа к адаптиву с ширины экрана лучше делать, если верстается mobile-first то @media(min-width: size), если от десктопа @media(max-width: size), основные разрешения 320, 768, 1024, 1280 или 1400

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Mobile First Design: Что это такое и как его реализовать

Содержание

Мобильные устройства находятся в авангарде цифровой революции, произошедшей за последнее десятилетие. Приблизительно 54% ​​всего веб-трафика поступает с мобильных устройств, поэтому на рынке закрепился подход, ориентированный на мобильные устройства.

Источник изображения

Широкое использование мобильных устройств для доступа в Интернет привело к появлению новых методов разработки, таких как дизайн, ориентированный на мобильные устройства, который поощряет веб-дизайн, удобный для мобильных устройств. Это руководство поможет вам внедрить стратегию мобильного дизайна в первую очередь для создания приложений и веб-сайтов, удобных для устройств, в которых мобильным пользователям уделяется приоритетное внимание.

Что такое Mobile-First Design?

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

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

Проектирование и разработка для небольших экранов вынуждает дизайнеров удалять все, что не является необходимым для удобной визуализации веб-сайта и навигации.

Как возникла стратегия мобильного дизайна?

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

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

• Недостатком этого подхода является то, что некоторые веб-элементы плохо адаптируются к экранам меньшего размера. Следовательно, это ухудшает внешний вид веб-сайтов на небольших устройствах.

Для решения этой проблемы разработчики придумали другой подход — Progressive Advancement или Mobile-First Design.

• Подход, ориентированный на мобильные устройства, побуждал дизайнеров сначала начинать процесс разработки веб-сайта для самых маленьких устройств, а затем добавлять дополнительные функции для больших экранов.
  

Почему дизайн, ориентированный на мобильные устройства, так важен?

Мобильные устройства стали неотъемлемой частью современного веб-ландшафта и останутся жизненно важными и в будущем. Как упоминалось в начале, мобильные устройства составляют примерно половину всего веб-трафика.

Следует также иметь в виду, что количество мобильных пользователей превысило количество пользователей настольных компьютеров. По данным Statcounter GlobalStats, общее количество пользователей мобильных устройств продолжает расти, и их доля на рынке составляет 60,43% по сравнению с пользователями настольных компьютеров.

Статистика использования смартфонов обращается к нескольким статистическим данным, чтобы пересмотреть подход, ориентированный на мобильные устройства:

1. Пользователи смартфонов, как правило, проводят в своих телефонах в среднем 3 часа и 15 минут.
2. Millennials тратят более 5,7 часа на свои смартфоны в день
3. человек проверяют свои телефоны 58 раз в день в среднем

Статистики выше. устройства. Естественно, для веб-дизайнеров имеет смысл расставить приоритеты в своих усилиях и следовать правилу «сначала мобильные» в дизайне продукта.

Как реализовать подход Mobile-First в дизайне продукта?

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

Предположим, веб-дизайнеру нужно поработать над веб-сайтом для ресторана. Поскольку дизайнер должен следовать подходу, ориентированному на мобильные устройства, он должен подумать о том, что пользователь ожидает от веб-сайта ресторана на мобильном устройстве.

Дизайнеры должны определить основные вещи, которые ищет конечный пользователь при доступе к веб-сайту ресторана на мобильном устройстве. Учитывая, что пользователь находится на мобильном телефоне, можно с уверенностью предположить, что он в основном ищет — часы работы, точное местоположение и контактные данные (или нажмите кнопку вызова, если он мобильный). Исходя из этих предположений, страницу можно спроектировать именно следующим образом.

Источник

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

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

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

Узнайте больше: Идеальный размер экрана для адаптивного дизайна

Передовой опыт для мобильного подхода

Для сложных и многоуровневых дизайнов веб-дизайнеры UI/UX эксперты должны учитывать следующие передовые методы для обеспечения мобильного первый подход эффективно:

1. Приоритет содержимого страницы 

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

2. Интуитивно понятная навигация

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

Скорость и интуитивность идут рука об руку. SpeedLab от BrowserStack мгновенно предоставляет вам оценку скорости страницы из 100 как для настольных, так и для мобильных платформ. Благодаря этим сведениям ваша команда дизайнеров может оптимизировать интерфейс для мобильных устройств и браузеров, чтобы он был удобным для мобильных устройств.

С помощью BrowserStack вы также получите действенные рекомендации и идеи, которые помогут улучшить общий дизайн и макет веб-сайта.

В отчете представлены точные оценки для мобильных и настольных компьютеров, а также ключевые показатели, такие как API времени навигации, сводка ресурсов страницы и другие, чтобы помочь вам согласовать подход, ориентированный на мобильные устройства, с фактической производительностью.

3. Избегайте отвлекающих внимание всплывающих окон

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

4. Тестирование на реальных устройствах в реальных условиях

Самый эффективный способ обеспечить оптимальную работу веб-сайта для пользователей на разных устройствах — это протестировать их на реальных устройствах. Это помогает дизайнерам проверить, правильно ли отображается веб-сайт на мобильных устройствах, планшетах и ​​настольных компьютерах. Облако реальных устройств BrowserStack предоставляет командам и отдельным тестировщикам более 3000 реальных устройств и браузеров для мгновенного тестирования в реальных пользовательских условиях.

Вы можете выбрать как BrowserStack Live, так и App Live, чтобы провести всестороннее кросс-браузерное тестирование и интерактивное тестирование приложений, чтобы обеспечить реализацию дизайна, ориентированного на мобильные устройства.

BrowserStack также предлагает отдельным пользователям или командам интуитивно понятный инструмент Responsive Checker. Этот инструмент позволяет пользователям мгновенно просматривать свои веб-сайты на различных типах устройств, таких как мобильные телефоны, планшеты и настольные компьютеры. Это позволяет пользователям проверять, правильно ли отображаются их веб-сайты на определенных устройствах.

Как запустить адаптивный тест в BrowserStack?

1. Введите URL-адрес тестируемого веб-сайта.
2. После входа в систему вы можете ввести URL-адрес веб-сайта и нажать «Проверить», чтобы проверить реакцию.
3. При выборе конкретного устройства пользователь увидит, как сайт выглядит на нем.

Использование адаптивного тестирования BrowserStack

Заключение

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

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

Практическое руководство по дизайну, ориентированному на мобильные устройства, от UXPin

Подход, ориентированный на мобильные устройства, звучит именно так: проектирование для самого маленького экрана и продвижение вперед. Это одна из лучших стратегий для создания отзывчивого или адаптивного дизайна.

• Подход Mobile-First является принципом прогрессивного улучшения . Это идеология, что мобильный дизайн, как самый сложный, должен быть сделан в первую очередь. Как только будут даны ответы на вопросы мобильного дизайна, проектирование для других устройств станет проще. Это сводится к тому, что самый маленький из дизайнов будет иметь только основные функции, поэтому вы сразу же спроектировали сердце своего UX.

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

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

Mobile-First = Content-First

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

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

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

Еще одно преимущество подхода, ориентированного на мобильные устройства, заключается в том, что контрольные точки на маленьком экране лучше подходят для содержимого. Опять же, альтернатива хуже: необходимость втиснуть и без того пухлый дизайн в крошечную рамку. Но при подходе, ориентированном на мобильные устройства, точки останова естественным образом развиваются вокруг контента, поэтому вам не нужны какие-либо неудобные правки.

Процесс проектирования Mobile-First

Мы опишем процесс, который помогает нашим дизайнерам в UXPin.

Как обычно, создание каркаса является рекомендуемым начальным шагом для наиболее эффективного структурирования макета. При создании каркаса или прототипа мы используем адаптивное меню точек останова, чтобы упростить процесс перехода к разным размерам экрана, начиная с самого маленького.

Эти предустановки создают правильный размер экрана для вас, поэтому вы можете создавать каркасы, не забывая только о содержимом.

Наша процедура состоит из следующих шагов:
1. Инвентаризация содержимого — Это электронная таблица или аналогичный документ, содержащий все элементы, которые вы хотите включить.

Источник: Maadmob

2. Визуальная иерархия — Расставьте приоритеты элементов в инвентаре содержимого и определите, как наиболее важные элементы должны отображаться на видном месте.

3. Проектируйте с наименьшими контрольными точками, а затем масштабируйте — Сначала создайте мобильный каркас, а затем используйте его в качестве модели для более крупных контрольных точек. Расширяйте экран до тех пор, пока не останется слишком много пустого пространства

4. Увеличивайте сенсорные объекты — Пальцы намного шире, чем курсоры мыши с точностью до пикселя, и поэтому им нужны более крупные элементы, на которые можно нажимать. На момент написания этой статьи Apple рекомендует для сенсорных целей квадрат размером 44 пикселя. Дайте гиперссылкам достаточно места, немного увеличьте кнопки и убедитесь, что вокруг всех интерактивных элементов достаточно места».

5. Не рассчитывайте на ховер — Само собой разумеется, но дизайнеры часто полагаются на эффекты зависания и наведения мыши в своей интерактивной работе. Если вы думаете об удобстве для мобильных устройств, не делайте этого. Пока нет управления наведением для кончиков пальцев.

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

7. Избегайте крупной графики — Пейзажные фотографии и сложная графика плохо отображаются, когда размер экрана составляет всего несколько дюймов. Предложите мобильным пользователям изображения, которые можно прочитать на экранах портативных устройств.

8. Протестируйте на реальном устройстве — Ничто не сравнится с открытием для себя, насколько удобен (или неудобен) веб-сайт. Отойдите от настольного/портативного компьютера и загрузите свой продукт на реальный телефон или планшет. Перелистывайте страницы. Легко ли ориентироваться на сайте? Загружается своевременно? Текст и графика легко читаются?

Это только общая схема. Чтобы получить полное руководство по нашему процессу, загрузите бесплатную версию Content Wireframing for Responsive Design.

Учебное пособие по дизайну для мобильных устройств

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

Мы создадим пример и опишем, как масштабировать контент со смартфона на планшет и рабочий стол. Создайте бесплатную пробную версию и следуйте инструкциям ниже.

Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.

Подпишитесь на бесплатную пробную версию. Попробуйте бесплатно!

Установите приоритеты контента

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

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

1. Новейшая модель велосипеда

2. Самый продаваемый велосипед

3. Призыв к действию «Найди свою идеальную езду»

4. Название компании и изображение героя

5. Навигация

6. Поиск

7. Второй по популярности велосипед

8. Подарочные сертификаты

9. Отзыв

10. Последний пост в блоге

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

Смартфон

Сколько нужно пользователям?

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

Представление на планшете

Поскольку мы разрабатываем дизайн для просмотра на планшете, мы можем лучше добавлять вторичную информацию, например дополнительные продукты (например, «Конденсатор»). Мы также можем расширить навигацию в верхней части страницы и добавить контент, который стимулирует продажи, но на самом деле не ведет к ним, а именно отзыв.

Поскольку доступно больше опций, это может быть на удивление сложнее, чем решить, что включить в пользовательский интерфейс смартфона. Разница между вторичными и третичными элементами размыта, и велико искушение включить все.

Сопротивляйтесь желанию. Используйте упорядоченный список содержимого. Как и в смартфонах, пространство по-прежнему ограничено.

Вид рабочего стола

Наконец, вид рабочего стола может поддерживать столько информации, сколько вы считаете важным. Здесь домашняя страница может содержать всю информацию, которую вы считаете подходящей, независимо от того, подходит она или нет. Обратите внимание на некоторые дополнительные материалы, которые мы добавили:

• Подарочные сертификаты
• Отзывы клиентов
• Сообщение в блоге о новейшем велосипеде Lightning Bolt

Самостоятельно создавайте макеты, подходящие для устройства

Если вы используете UXPin, довольно легко создавать разные макеты для этих представлений.

1. Откройте прототип UXPin.
2. Нажмите «Добавить новую адаптивную версию» в правом нижнем углу редактора UXPin
3. Выберите предустановленный размер или введите собственные размеры.