Отзывчивые Заголовки и Логотипы - Подсказки и Подводные камни

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

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

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

Разбавитель Навбарс

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

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

Возьмите, например, макет Cartoon Brew на полноразмерном мониторе и на мобильном устройстве..

В точке останова 600px навигация сокращается почти до половины ее высоты на странице. Это делает логотип и интерактивное навигационное меню меньше, но они гораздо более пропорциональный на относительное пространство экрана.

Также учтите, что у Cartoon Brew есть выпадающее меню в качестве адаптивного меню на экране мобильного телефона. Это значит наложение контента на странице при открытии, поэтому важно оставить достаточно места для этого.

Подобный пример можно найти на веб-сайте Art Walk в Джексонвилле. Верхняя панель навигации остается фиксированной во время прокрутки, но сжимается на небольших устройствах. Это лучше для адаптивного дизайна, потому что более тонкий Navbar оставляет больше места для контента на меньшем экране мобильного телефона.

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

Навигация Art Walk изменится на выпадающее меню с фиксированными ссылками вокруг точки останова 770 пикселей. Значки скрыты в выпадающем меню, потому что они будут слишком маленькими и слишком компактными на небольших устройствах.

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

Iconify логотип

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

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

Проверьте логотип для новостей веб-дизайнера и посмотрите, как он меняется при изменении размера браузера..

Возможно, не все узнают эту иконку при первом посещении сайта, но благодаря распознавание образов это не огромная проблема.

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

Вам не всегда нужно полагаться на графику для этой техники сжатого логотипа. Заголовок Young And Hungry использует ярко-зеленый текст для логотипа, который в конечном итоге сокращается до текста «Y & H».

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

Обработка полноэкранных фонов

Многие целевые страницы используют полноэкранные фоны, чтобы привлечь больше внимания. Это мощная техника, но часто лучше всего работает на больших мониторах.

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

Cap Radio Raffle использует эту технику на своей домашней странице. Фоновое изображение держит фокус в поле зрения в любое время, независимо от размера экрана.

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

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

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

Упростить навигацию

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

Хотя, если у вас есть правильная стратегия, все равно можно сохранить все выпадающие списки. Например, Kidscreen использует выпадающее меню с маленькими стрелками с указанием подссылок в адаптивном меню.

Многие люди спорят с меню гамбургеров, но я пришел к выводу, что он необходим для длинных навигационных меню. Это просто работает и стало широко пониматься большинством пользователей смартфонов как «кнопка меню».

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

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

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

Построй свой собственный

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

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

• Создать базовое мобильное CSS отзывчивое навигационное меню (Teamtreehouse.com)
• Лучшая практика для адаптивного заголовка сайта (Ux.stackexchange.com)
• Как я могу сделать свое изображение заголовка правильно адаптивным? (Stackoverflow.com)