Включаете ли вы боковое меню в сетку 960?

У меня есть клиент, которому нужен дизайн для веб-приложения. Он сказал мне, что хотел бы «большое боковое меню слева», и привел в качестве примера новый дизайн MailChimp . Мы оба согласились, что клиент хотел адаптивного дизайна и внешнего вида, похожего на MailChimp. Текущий сайт клиента использует начальную загрузку и находится под сеткой 960 пикселей. Раньше я делал дизайны, подходящие для сетки 960 пикселей, но это мой первый раз, когда я добавляю вертикальное меню.

Как бы я это сделал? Я не уверен, должен ли я включать ширину меню в ширину 960 пикселей. Например, если ширина меню составляет 200 пикселей, следует ли использовать 760 пикселей в качестве основного блока содержимого? Или я должен проектировать основной контент div как 960 пикселей и создавать меню за пределами ширины 960 пикселей?

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

скриншот приборной панели

Мне кажется, вы ориентируетесь не на ту аудиторию. graphicdesign.stackexchange.com предназначен в первую очередь для графического дизайна, а не для разработки на Bootstrap.
Мой вопрос больше опирается на boostrap, а не на макет? Хм.. Я думал, что это все еще в рамках дизайна. Должен ли я вместо этого спросить об этом в stackoverflow? Спасибо за ваш вклад.
Что ж, вопрос мог быть по теме, если он не выглядел как вопрос мозгового штурма. Качественный веб-дизайн учитывает все необходимое пространство, какова ваша основная цель, что должно быть включено в боковую панель, какие цвета должны использоваться, как посетитель сайта должен использовать боковую панель, делает это боковая панель включает в себя всю навигацию и т. д. и т. д. и т. д. Я мог бы продолжать, но, как я уже сказал, это скорее вопрос мозгового штурма, который мы не разрешаем. Если у вас есть вопрос о том, как сделать X-дизайн, не стесняйтесь спрашивать.
Как я понял, ваш вопрос касается альтернативных способов кодирования вашего дизайна с помощью HTML и CSS в рамках Bootstrap. Гуру Photoshop, вероятно, понятия не имеют, как вам помочь. Судя по вашему снимку экрана, я бы выбрал два div на одном уровне (меню и контент). Вы получите меньше и чище правил CSS. Но это без учета Bootstrap! Я думаю, что stackoverflow будет лучшим местом, чтобы спросить об этом. Не забудьте пометить его [bootstrap].
Традиционно 960px означает, что весь контент находится в пределах 960. Не 960px + ширина боковой панели.

Ответы (2)

Я не совсем понимаю, что вы имеете в виду. Ваш клиент хочет адаптивный дизайн, но вы говорите о фиксированной ширине в пикселях.

Вам удобно программировать css? Я собираюсь предположить, что вы неплохо разбираетесь в css.

У Bootstrap есть решения для адаптивной сети, я не уверен, что вы имеете в виду, когда говорите, что они используют 960 под бутстрапом. Устанавливают ли они фиксированную ширину в пикселях? Если да, то почему? Тогда многие причины использования бутстрапа являются спорными.

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

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

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

Затем с помощью начальной загрузки вы сделаете простой выбор столбца и добавите любые элементы меню, кнопки и т. д., которые хотите. Это довольно хорошо описано здесь http://getbootstrap.com/css/#grid

Вот базовая структура mailchimp:введите описание изображения здесь

Вот как это делается в Bootstrap: столбцы должны в сумме составлять 12. Поэтому, основываясь на примере с mailchimp, ваша сидбар будет иметь, например, col-md-3, тот, который содержит слова «приборная панель», может быть col-md-6, содержащий «черновики, создать кампанию» в col-md-3.

Тот, что ниже этого; содержащий текст «недавние кампании...», тогда будет col-md-9 (12 минус 3). Вот как они это обрисовывают:введите описание изображения здесь

Что бы ты не делал. Избавьтесь от любой фиксированной ширины.

В конкретном случае с MailChimp они сделали свой фреймворк доступным для публичного использования здесь: http://ux.mailchimp.com/patterns/ Вы также найдете самородки их процесса проектирования в статьях их блога и если вы подпишетесь на их информационный бюллетень. Они также предупреждают, что это не похоже на Twitter Bootstrap, и многие из них были адаптированы для удовлетворения их потребностей.

Важный вопрос, который все остальные здесь также поднимают, заключается в следующем: какова ваша контент-стратегия? Потому что ваш дизайн должен быть ответом на это. И мир давно вышел из сетки 960. С помощью адаптивных макетов вы пытаетесь максимально эффективно использовать доступное вам пространство и в то же время гарантировать, что пользователь получит максимальное удобство использования на каждом размере экрана. Это многоуровневое упражнение. Сеточная система может не обязательно отвечать на все вопросы. Ваше понимание контента и потребностей пользователя во многом определит результат.

Включаете ли вы боковое меню в сетку 960?
СпросиСетьПолитика конфиденциальности1y, 0v