Адаптивный дизайн: сначала/только для мобильных устройств

Нати

Адаптивный дизайн: сначала/только для мобильных устройств

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

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

Этот подход работает очень хорошо, когда мы начинаем проектирование с рабочего стола, но не очень хорошо, если мы хотим «объединить» его с хорошо известным подходом «сначала мобильные», поскольку программисту недостаточно нескольких примеров экранов, чтобы понять общий дизайн. концепция при переходе с мобильного на десктоп (при увеличении экрана)

В основном - я хотел бы перейти от "сначала мобильные" к "в основном мобильным"

Есть ли рекомендуемая техника или подход?

Может статью на эту тему?

Кто-нибудь делал что-то подобное в проекте?

Моя первая идея заключалась в том, чтобы поработать с мобильным дизайном и добавить направляющую сетку (например, если что-то использует 100% экрана на мобильном телефоне, руководство должно преобразовать его в 50% на десктопе), и этого оказалось недостаточно.

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

Зак Сосье

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

пользователь9447

Я думаю, вы неправильно понимаете, как дизайн для мобильных устройств сравнивается с дизайном для настольных компьютеров. Люк Вроблевски лучше всего описал разницу в своем посте « Организация мобильных устройств »:

«[Простой] перенос того, что работало для вас на настольном компьютере, на мобильные устройства часто не имеет смысла. Вместо этого вам нужно подумать о том, в чем мобильные устройства уникальны, и привести их в соответствие с потребностями ваших клиентов».

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

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

Этот простой пример Bootstrap показывает, насколько он может быть раздутым:

<h3>Mixed: mobile and desktop</h3>
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>

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

Что касается другого контента на эту тему, Люк Вроблевски также написал книгу под названием Mobile First , которая включает приведенную выше ссылку.

Хорошим способом, который поможет в вашем процессе, является определение полного метода сопоставления карты сайта/контента. Когда я просматриваю проект, я трачу одинаковое количество времени независимо от того, волнует ли клиент только настольную версию или полностью адаптивный сайт. Таким образом, если клиент вернется и скажет, что он действительно хочет нацелиться на устройство, такое как iPhone или iPad, я сделал эффективное сопоставление, которое поможет в разработке этих дополнительных целевых областей. Вы также можете обратиться к разделу « Каковы этапы разработки веб-сайта? », где я обсуждаю этапы разработки веб-сайта.

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

Саймон Уайт

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

В большом окне браузера в настольной системе сетка из 12 столбцов полностью разнесена следующим образом:

[] [] [] [] [] [] [] [] [] [] [] []

… но как только вы переходите к самому маленькому экрану, сетка схлопывается, так что столбцы стекают вниз по странице:

[]
[]
[]
[]
[]
[]
[]
[]
[]
[]
[]
[]

… но имейте в виду, что некоторые столбцы могут быть пустыми, или элемент может занимать несколько столбцов.

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

Например, если ваша мобильная версия идет:

[  banner   ]
[ product 1 ]
[ product 2 ]
[ product 3 ]
[    cta    ]

… вы можете решить, что настольная версия пойдет:

[               banner                 ]
[ product 1 ][ product 2 ] [ product 3 ]
[                cta                   ]

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

Возможно, вы захотите взглянуть на сетку Bootstrap , которая, вероятно, является самой популярной средой адаптивного дизайна. Существует также один, называемый Skeleton , который гораздо более минимален и отлично подходит для небольших сайтов или для прототипов дизайна. Оба используют сетку из 12 столбцов. Если вы хотите смоделировать свои проекты в инструменте дизайна, вы должны создать там сетку, похожую на эти адаптивные сетки. Если ваш программист предпочитает конкретный адаптивный фреймворк, клонируйте сетку из этого фреймворка.

Нати

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