Итак, у меня есть этот вопрос, который беспокоил меня довольно давно, я постараюсь объяснить его подробно.
Я разрабатываю обычный маркетинговый веб-сайт и сначала сделал настольную версию, используя стандартную загрузочную сетку (12 столбцов, 30 пикселей отступов). Я не пишу код (я знаю, что должен).
Теперь, когда нас попросили сделать как планшетную, так и мобильную версии, в голову пришел этот большой вопрос. Как эта сетка, в частности, ведет себя при меньших разрешениях? Было бы логично, если бы в iPad с небольшим, но все же хорошим разрешением стандарт в 12 колонок и 30-пиксельную полосу оставался в силе. Это заставит веб-сайт просто адаптировать и изменить размер некоторых контейнеров, и он все равно будет работать.
У меня проблема с мобильным. Когда мы достигнем точки останова, останется ли то же количество столбцов и размер поля прежним? Потому что при 30px отступах столбцы становятся меньше или того же размера, что и отступы. Или мне просто сделать точку останова и стереть 8 столбцов и оставить только 4?
Как должна выглядеть сетка в PSD-файле для мобильных устройств? Или, по крайней мере, какой лучший подход?
Спасибо
Он ведет себя так, как вы ему говорите. Другими словами, эти фреймворки дают вам сетку для работы... но вы должны с ней работать. Вы должны решить, какие точки останова использовать и что произойдет с каждой точкой останова. Что изменяет размер, что сужается, что переносится на новую строку, что скрывается, что отображается и т. д. и т. д.
В идеале вы делаете это ВМЕСТЕ с разработчиком, а не создаете отдельные PSD-файлы.
На сайте Foundation 6 я прочитал, что сетка с желобами может масштабироваться. В Sketch 3.5 (лучшее приложение для адаптивного дизайна по сравнению с Photoshop), когда я выбираю «адаптивную сеть» для своих монтажных областей, сетка, которую он автоматически генерирует, масштабируется, поэтому желоба становятся уже в двух мобильных точках разрыва.
Например, при разрыве 768 пикселей сетка Sketch остается 12 столбцами с отступом 10 пикселей. А при разрешении 320 пикселей для мобильных устройств отступы масштабируются до 4 пикселей. Это полезно знать, потому что это будут ваши минимальные левые и правые поля для вашего ОДНОГО столбца в окне просмотра 320 пикселей.
Основная идея заключается в том, что на телефоне столбцы сворачиваются, так что у вас остается только один столбец.
Если у вас есть это на рабочем столе:
[ column1 ] [ column2 ] [ column3 ]
… то на телефоне вы должны увидеть это:
[ column1 ]
[ column2 ]
[ column3 ]
Все это делается с помощью базового HTML+CSS.
Возможно, вы захотите взглянуть на Skeleton , бесплатный адаптивный дизайн с готовым шаблоном HTML + CSS, который очень хорошо сработал для меня. Сетка и точки останова уже определены. Вы можете хотеть или не хотеть его использовать, но он, по крайней мере, действительно образовательный. Возможно, вам даже не потребуется его загружать. Просто измените размер окна браузера на веб-сайте Skeleton , и вы увидите, как столбцы свернутся. Но сам шаблон — отличный ресурс для дизайнеров, потому что вы можете преобразовать PSD в адаптивный веб-сайт с минимальными усилиями.
Я не пишу код (я знаю, что должен).
Я не из тех людей, которые думают, что все должны кодить, но дело в том, что HTML+CSS на самом деле не кодирование. Здесь нет ни логики, ни переменных, ни условий, ни циклов. HTML+CSS выглядит очень сложно, когда вы впервые смотрите на него, но как только вы немного изучите его, вы поймете, что тег HTML эквивалентен объекту на холсте Photoshop (например, некоторый текст, заключенный в тег ap, является просто текстом). объект), а правило CSS эквивалентно свойствам, которые вы применяете к этому объекту с помощью панелей Photoshop (например, настройка ширины и высоты, добавление тени). HTML+CSS. Вы уже говорите на языке объектов, свойств и измерений в пикселях, вам просто нужно выучить альтернативный словарь.
Это отличная книга, которая помогла многим дизайнерам, которых я знаю. Он специально написан для людей, которые не в восторге от кода. Он имеет очень легкий тон и охватывает только основы.
Это мой рабочий процесс, который со временем стал проще:
При разработке PSD-файлов для адаптивного дизайна вы обычно также используете HTML и CSS (плюс JS), поэтому вам на самом деле не нужно разрабатывать в Photoshop веб-сайт для планшета / мобильного устройства, вам нужно только помнить, что он вам нужен для изменения компоновка при обнаружении меньших экранов.
Поэтому вам необходимо хорошо знать Media Queries , базовый пример:
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
* Это определяет ширину вашего экрана, и если экран имеет минимальную ширину 480 пикселей, он меняет цвет фона: Пример
Зная это, вы можете ориентироваться на ширину экрана планшета и написать желаемый CSS, который повлияет на ваш макет, а также написать другое правило для ширины экрана телефона с другим CSS, например:
body{ background-color: black; }
@media screen and (max-width: 480px){ body {background-color: red;} }
@media screen and (max-width: 300px){ body {background-color: green;} }
Перевод:
Цвет фона корпуса черный . Если ширина экрана равна или меньше 480 пикселей , измените цвет фона на красный , а если ширина экрана равна или меньше 300 пикселей , измените цвет фона на зеленый .
Надеюсь это поможет.
РЕДАКТИРОВАТЬ: Ха-ха, я только что видел, что этот вопрос был задан 10 месяцев назад. :)) В любом случае, надеюсь, что это кому-то поможет.
Зак Сосье