Респонсиве Хеадерс & Логос - Савјети и замке

Концепт респонзивног веб дизајна прожима веб и постаје основни производ за фронтенд програмере. Не може се порећи вриједност прилагодљивог дизајна у модерном свијету, али постоје неке потешкоће у потпуности разумјети како правилно дизајнирати одговарајући распоред.

Субјекат би могао да се настави, јер постоји толико много јединствених области веб-сајта, али фокусирање на појединачне елементе може вам помоћи да боље разумете циљеве корисника и како се ти циљеви могу постићи уз одговарајући дизајн.

Волео бих да покријем дизајнерски савети за заглавља, логотипе, и менија за навигацију, као што се односе на одговарајући дизајн. Узмите ове сугестије док се оне односе на ваш рад и будите сигурни да дизајнирате своје интерфејсе с обзиром на понашање корисника.

Тхиннер Навбарс

На великим екранима нормално је имати велика заглавља, можда чак и превелике заглавља са вишеслојним линковима. Међутим, мањи екрани немају исти простор и треба да буду ограничени по потреби.

Пошто обично имају мобилне апликације фиксни заглавља, ово је уобичајена пракса у дизајну који одговара. Фиксни заглавље такође треба смањити када је на мањим уређајима: то оставља више простора за садржај, али и даље даје читаоцима директан приступ заглављу и навигацији.

Узмимо на пример распоред Цартоон Брев на монитору пуне величине и на мобилном уређају.

На 600пк тачки прекида, навигација се смањује на скоро половину своје висине на страници. Ово смањује и лого и навигациони мени, али они су много пропорционалније на релативни простор екрана.

Узмите у обзир да Цартоон Брев има падајући оквир као одговарајући мени на мобилном екрану. То значи садржај слојева на страници када је отворена, тако да је важно оставити довољно простора за то.

Сличан пример можете наћи на веб сајту Јацксонвилле Арт Валк. Горња навигацијска трака остаје фиксирана док се креће, али смањује се на мање уређаје. Ово је боље за одговарајући дизајн зато што је тањи навбар оставља више простора за садржај на мањем екрану мобилног телефона.

Свака веза у навигационој траци има повезану икону која је приложена текстуалној вези. Ово изгледа одлично на широком монитору, али је превише детаљно за мање екране.

Навигација Арт Валк се мења у падајући мени са фиксним везама око тачке прекида од 770 пиксела. Иконе су скривене у падајућем менију јер би биле премале и превише скучене на мањим уређајима.

Приликом дизајнирања одговарајућег заглавља увијек размотрите укупног простора на екрану док стилизује навбар. Ако не желите да заглавље остане фиксно, то је сасвим у реду, али ипак желите смањите га мало да сачувате собу на врху странице.

Ицонифи Тхе Лого

Већина логотипа садржи неки текст и икону или графику за представљање бренда. То значи да увек можете ицонифи (да, то је права реч) ова врста логотипа до симбола његове пуне верзије.

Ово је моћна техника за одговорне заглавља јер нема довољно простора за комплетан логотип. Изгубили сте дио гламура логотипа у пуној величини, али то је цијена коју ћете можда морати платити за јасан одговарајући изглед.

Погледајте лого за Веб Десигнер Невс и погледајте како се он мења док мењате величину претраживача.

Можда неће сви препознати ту икону када први пут посете сајт, али захваљујући распознавање узорака ово није велики проблем.

Људи су били на Интернету довољно дуго да знају да је горњи леви угао странице обично резервисан за логотип. Ова мала ружичаста икона се такође користи у фавицону, тако да је лако направити неке закључке без копања предалеко у сајт.

Не морате увек да се ослањате на графику за ову кондензовану технику логотипа. У заглављу Иоунг анд Хунгри користи светло зелени текст за лого који се коначно своди на текст "И&Х".

Ово није дозвољено за сваки сајт ако брендирање није лако препознати као једно слово. Али то показује да је то логотип може бити једноставније у обе графике и текст, и обе варијанте заузимају мање простора на мањим екранима.

Хандлинг Фуллсцреен Бацкгроундс

Многе одредишне странице користе позадину пуног екрана да би привукле више пажње. Ово је моћна техника, али често најбоље ради на великим мониторима.

Па како се носите са овим на мањем екрану? Генерално, дизајнери уклоните позадинску слику прошли одређену тачку прекида, или саму слику добива преуређено да стане у прозор.

Цап Радио Раффле користи ову технику на својој почетној страници. Позадинска слика одржава фокусну тачку у виду у сваком тренутку, без обзира на величину екрана.

Ова врста решења типично захтева одређено ЦСС позиционирање али то је стварно једноставно када добијете то. Само задржати фокусну тачку у виду у сваком тренутку, и промените величину контејнера за слике да стане у складу са уређајем.

Иза великих позадина из естетских разлога, можете користити и велике слике за садржај странице. Масхабле-ова почетна страница користи истакнуту позадинску слику за горњу причу која обухвата цијели распоред.

Њихов одговарајући распоред компримира слику док одржавање централне тачке. Тешко је то урадити јер се ова слика мијења када се прича промијени, тако да фотографије морају бити пажљиво куриране. Масхабле-ово решење је још увек одличан начин за руковање фотографијама преко целог екрана за блогове и распореде часописа када је правилно дизајниран.

Поједноставите навигацију

Приликом прераде за мање екране, задржите што више линкова у навигацији, и лако приступачан. То значи да ћете можда морати да одбаците неколико веза ако имате падајуће меније са више нивоа.

Иако имате праву стратегију, још увијек је могуће задржати све падајуће листе у такту. На пример, Кидсцреен користи а флиоут мену са малим стрелицама показује подлинкове у менију који одговара.

Многи се препиру против менија хамбургера, али сам дошао да га прихватим као неопходну ставку за дугачке меније. Једноставно ради и већина корисника паметних телефона постала је широко прихваћена као "дугме менија".

Заправо, тешко би било пронаћи одговарајући сајт који се не ослања на мени са три бара. ЦиберЦхимпс је одличан пример тога користи вертикални падајући мени уместо слајда.

Структура навигације за ЦиберЦхимпс је преуређена да би се спустила на врх странице. Мени пада одозго са велики блокови за везе.

Са више простора за клик и већи линк линк, процес навигације страница постаје много једноставнији. Настојте да пратите ову филозофију са читавим одговорним заглављем, и ваши дизајни ће се драстично побољшати.

Изградите своје

Са овим саветима на располагању вам не би сметало да направите корисне одговорне заглавља. Иако постоји много алата који вам могу помоћи, једини начин да заиста схватите је кроз праксу.

Зато узмите ове технике са собом и почните да правите сајтове! Навела сам и неколико додатних ресурса за одговорне заглавља које можете погледати у наставку.

• Креирајте основни мобилни ЦСС одговарајући мени за навигацију (теамтреехоусе.цом)
• Најбоља пракса за одговорни заглавље сајта (ук.стацкекцханге.цом)
• Како могу да исправно реагујем на слику заглавља? (стацковерфлов.цом)