Отзивчиви заглавия и логотипи - Съвети и клопки

Концепцията за отзивчив уеб дизайн е проникнала в мрежата и се превръща в основна част от разработчиците на интерфейси. Не се отрича стойността на отзивчивия дизайн в съвременния свят, но има някои трудности напълно да се разбере как правилно да се проектират отзивчивите оформления.

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

Бих искал да покрия съвети за проектиране на заглавки, лога, и менюта за навигация, тъй като те се отнасят за отзивчив дизайн. Вземете тези предложения, тъй като те се прилагат към вашата собствена работа и не забравяйте да проектирате интерфейсите си с поведението на потребителя.

Разредител Navbars

На големи екрани е нормално да имате големи заглавки, може би дори извънгабаритни заглавия с многостепенни нива на връзка. Но по-малките екрани нямат едно и също пространство и трябва да бъдат ограничавани при необходимост.

Тъй като обикновените мобилни приложения обикновено имат фиксирани заглавки, това е обичайна практика и при отзивчивия дизайн. Фиксирана заглавка трябва също да се свие когато на по-малки устройства: това оставя повече място за съдържание, но все пак дава на читателите пряк достъп до заглавката и навигацията.

Вземете например оформлението на анимацията на карикатурата на монитор в пълен размер и на мобилно устройство.

При точката на прекъсване от 600 пиксела навигацията се свива на почти половината от височината на страницата. Това прави по-малките както логото, така и навигационното меню, но те са много по-пропорционален към относителното пространство на екрана.

Също така смятат, че Cartoon Brew има падащо меню като отзивчиво меню на мобилния екран. Това означава наслагва съдържанието на страницата, когато е отворена, така че е важно да оставите достатъчно място за това.

Подобен пример може да се намери на уебсайта на Джаксънвил Арт Уок. Най-горната навигационна лента остава фиксирана, докато превъртате свива на по-малки устройства. Това е по-добре за отзивчив дизайн, тъй като по-тънкият навигатор оставя повече място за съдържание на по-малък мобилен екран.

Всяка връзка в навигационната лента има съответна икона, прикрепена към текстовата връзка. Това изглежда страхотно на широкоекранен монитор, но е твърде подробен за по-малки екрани.

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

При проектирането на отговорен хедър винаги обмисляйте общото пространство на екрана докато стилизираме навигационната лента. Ако не искате заглавието да остане фиксирано, това е напълно добре, но все пак може да искате свивам малко за да спестите място в горната част на страницата.

Иконизиране на логото

Повечето лога включват някакъв текст и икона или графика за представяне на марката. Това означава, че винаги можете iconify (Да, това е истинска дума) този вид лога до символ на пълната му версия.

Това е мощна техника за отзивчиви заглавки, защото не винаги има достатъчно място за пълно лого. Вие губите част от блясъка и блясъка на логото с пълен размер, но това е цената, която може да ви се наложи да платите за чисто отзивчиво оформление.

Разгледайте логото на Web Designer News и вижте как тя се променя, докато променяте размера на браузъра.

Може би не всеки ще разпознае тази икона при първото посещение на сайта, но благодарение на разпознаване на шаблон това не е огромен проблем.

Хората са в интернет достатъчно дълго, за да знаят, че горният ляв ъгъл на страницата обикновено е запазен за лого. Тази малка розова икона се използва и в favicon, така че е лесно да се направят някои заключения, без да се копае твърде далеч в сайта.

Не винаги трябва да разчитате на графики за тази кондензирана техника на лого. Заглавието на Young And Hungry използва ярко зелен текст за логото, което в крайна сметка се кондензира до текста "Y&H".

Дадено, това може да не работи за всеки сайт, ако брандингът не е лесно да се разпознае като отделни букви. Но това показва, че лога може да се опрости както в графиката, така и в текста, и в двата варианта заемат по-малко място на по-малки екрани.

Работа с фоновете на цял екран

Много целеви страници използват фонове на цял екран, за да привлекат повече внимание. Това е мощна техника, но често работи най-добре на големи монитори.

Как се справяте с това на по-малък екран? Като цяло, дизайнери премахнете фоновото изображение минала определена точка на прекъсване или самото изображение се преобръща да се побере в прозореца.

Cap Radio Raffle използва тази техника на началната си страница. Фоновото изображение запазва фокуса по всяко време, без значение колко е преоразмерен екранът.

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

Отвъд големи фонове по естетически причини може да използвате и големи изображения за съдържание на страници. Началната страница на Mashable използва фонова картина за горната история, която обхваща цялото оформление.

Техните отзивчиви оформления компресира изображението докато поддържане на централен фокус. Трудно е да направите това, защото това изображение се променя, когато историята се променя, така че снимките трябва да бъдат внимателно подбрани. Решението на Mashable все още е чудесен метод за работа с снимки на цял екран за блогове и оформления на списания, когато са проектирани правилно.

Опростете навигацията

При обновяване за по-малки екрани, запази възможно най-много връзки в навигацията и лесно достъпна. Това означава, че може да се наложи да премахнете няколко връзки, ако имате многостепенни падащи менюта.

Въпреки че, ако имате правилната стратегия, все още е възможно да запазите всички падащи карти в такт. Например Kidscreen използва a меню с малки стрелки показващи подлинии в отговорното меню.

Много хора спорят срещу менюто за хамбургер, но аз дойдох да го приема като необходим елемент за дълги менюта. Той просто работи и е станал широко разбираем за повечето потребители на смартфони като „бутона за менюто“.

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

Структурата за навигация за CyberChimps се пренарежда, за да се плъзга надолу в горната част на страницата. Менюто пада от горе с големи блокови елементи за връзки.

с повече област за кликване и по-голям текст на връзката, процесът на навигация на страниците става много по-прост. Стремете се да следвате тази философия с целия си отговорен заглавие и вашите проекти ще се подобрят драстично.

Създайте своя собствена

С тези съвети на ваше разположение не би трябвало да има проблеми при изграждането на използваеми отзивчиви заглавия. Въпреки че има много инструменти, които да ви помогнат, единственият начин да разберете наистина е чрез практика.

Така че вземете тези техники с вас и започнете да изграждате уебсайтове! Също така изброих няколко допълнителни ресурси за отговорни заглавки, които можете да видите по-долу.

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