Контент как вся страница или только область контента?

Это решение должно приниматься на индивидуальной основе в зависимости от ситуации. Однако, используя дизайн, ориентированный на мобильные устройства (то есть по порядку, а не по важности), это решение может быть принято проще.

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

Вот стандартная HTML-структура страницы с основным разделом контента и боковой панелью для справки:

<div class="main">
    <div class="content">
         <!-- All of your body's content, the bulk of the page -->
    </div>
    <aside class="sidebar"> <!-- I use an aside here, but it could be something else -->
         <!-- Sidebar menu's content-->
    </aside>
</div>

Итак, вопрос: «Что мне делать с боковой панелью, когда экран слишком мал для ее размещения?»

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

_{Контент «боковой панели» находится ниже основного контента на мобильных устройствах ( слева ) и действует как боковая панель, когда он подходит ( справа ).}

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

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

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

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

_{Кое-что из этого было взято из моего поста в блоге об адаптивном дизайне , в котором содержится больше информации по связанным вопросам.}

Я обычно использую боковую панель для отображения ссылок, как если бы это было меню. Обычно я делаю боковую панель, как на iOS, отдельной, по ней нужно кликнуть, чтобы увидеть содержимое. Я ставлю ссылки, которые или мне важны для пользователя, например: Главная, О нас, Контакты, Профиль, Настройки,... или подобные. Мне нравится быть уверенным, что пользователь найдет его, но я также предпочитаю не размещать его в виде двухколонной структуры, мне нравится фокусироваться на содержании.

Надеюсь ты понимаешь :)

Я думаю, что это зависит от содержания, контекста и целей сайта.

Чем четче различие между модулями, которые служат разным целям, тем лучше.

Помните, что близость в дизайне играет роль в том, как мы соотносим вещи. Если две вещи близки, мы воспринимаем их как связанные. Если они разделены/разделены, они должны быть отдельными.