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

Question

[Mike Gorpinich]

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

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

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

Comments

[Rustam Bainazarov]

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

Answer 1

[lukoie]

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

Comments

[Mike Gorpinich]

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

[lukoie]

Mike Gorpinich, посмотреть статистику по используемым разрешениям
принять волевое решение про ограничение себя до минимум 960 или 1024, и рисовать с учетом этих минимумов

Answer 2

[Михаил Проскурин]

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

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

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

Comments

[Mike Gorpinich]

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

[Михаил Проскурин]

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

[Михаил Проскурин]

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

Answer 3

[Евгений]

Поиграться с сеткой

Comments

[Mike Gorpinich]

Спасибо за полезную ссылку)

Answer 4

[Antonio Solo]

а что, гугл уже отменил "mobile first"?