Сетка для адаптивного дизайна, какую сетку лучше создавать?

Question

Mike Gorpinich @m1keoff

Web-Designer

Сетка для адаптивного дизайна, какую сетку лучше создавать?

Доброго времени суток всем!
С недавних пор начал работать в скетче, в основном занимаюсь разработкой веб-сайтов.
Скетч предлагает мне дефолтный пресет при создании холста шириной 1440 пикселей для hd мониторов.

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

Заранее благодарю всех кто решил в этом вопросе поучаствовать.

Вопрос задан более трёх лет назад
5400 просмотров

1 комментарий

Подписаться 3 Средний 1 комментарий

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 3

3 комментария

Mike Gorpinich @m1keoff Автор вопроса

Спасибо! с этим понятно теперь, но вопрос вот еще в чем, какую максимальную ширину контента и сетки соответственно я могу использовать для адаптивного дизайна сайта?

Написано более трёх лет назад
Михаил Проскурин @mixail_fet

Mike Gorpinich, все зависит от того, под какие экраны делается сайт. Имеет смысл делать широкий сайт для экранов 1920, в этом случае контентная область может быть 1700 - 1800 px. Однако тогда, есть потребность отрисовывать адаптацию для 4-ех экранов:
FullHD
Ноутбук
Планшет
Телефон

Написано более трёх лет назад
Михаил Проскурин @mixail_fet

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

Написано более трёх лет назад

1 комментарий

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2753 просмотра
2

ответа
Веб-разработка

+2 ещё

Простой
Как называется выравнивание цветов?
- 1 подписчик
- 26 мар.
- 190 просмотров
1

ответ
Дизайн

+2 ещё

Простой
Какой шрифт используется в этом дизайне?
- 1 подписчик
- 22 мар.
- 222 просмотра
2

ответа
Дизайн

+1 ещё

Простой
Как в Inkscape объединить объекты под внешним контуром?
- 1 подписчик
- 09 мар.
- 38 просмотров
1

ответ
Дизайн

+3 ещё

Простой
Почему вот такие разрывы линии при рисовании в ФШ?
- 1 подписчик
- 22 февр.
- 157 просмотров
0

ответов
Дизайн

+2 ещё

Простой
Corel Draw как свести все слои для печати?
- 1 подписчик
- 22 февр.
- 80 просмотров
1

ответ
HTML

+3 ещё

Простой
Как в Google web designer сделать баннер с шириной 100% и фикс высотой для яндекса?
- 1 подписчик
- 30 янв.
- 92 просмотра
1

ответ
HTML

+3 ещё

Простой
Где найти материалы или курсы для изучения, чтобы научиться создавать сайты подобного формата?
- 2 подписчика
- 25 янв.
- 497 просмотров
3

ответа
Дизайн

+1 ещё

Простой
Какие навыки и обязанности у Арт-директора?
- 2 подписчика
- 15 янв.
- 152 просмотра
2

ответа
Дизайн

Простой
Как называется такое направление дизайна с круглыми углами и сложной сеткой?
- 2 подписчика
- 09 янв.
- 296 просмотров
2

ответа
Показать ещё Загружается…

Продуктовый дизайнер в команду дизайн-системы

Точка

До 240 000 ₽

Арт-директор

ЛАНИТ • Москва

До 300 000 ₽

Senior UX/UI product designer/Старший продуктовый дизайнер [дизайн интерфейсов]

HelloClient CRM

от 100 000 до 180 000 ₽

Создание и публикация короткого (reels) UGC-видео на YouTube-канале

25 апр. 2024, в 01:46

500 руб./за проект

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

10000 руб./за проект

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Не буду особо ничего советовать, извините, но учтите, что самое популярное разрешение экранов — 1360 на 768 пикселей. Учитывайте это.

Answer 1 · 2019-01-22 04:17:15

обратите внимание на проект https://960.gs/ и почему они так решили почитайте
счас как раз верстаю два таких горе-проекта, где заказчики смотрят результат на...нетбуке. а верстаю я на большом фуллэйчдишном мониторе
думаю, представляете как отличается то, что мы видим перед собой.
нарисовано в скетче было на 1440, причем все 12 колонок были расфигачены на всю ширину, а контент умещается в 10 колонках

Answer 2 · 2019-01-21 16:59:47

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

Сетка - напрямую взаимосвязана с конетной областью, так например стандарт у Boostrat 3 - 1170px.
У него используется сетка с параметрами:
12 колонок, по центру, ширина 70, отступ между колонками 30.

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