Share
Innrøm det: De fleste av oss ser sidebjelker som ingenting annet enn en enkel beholder som holder ting, i våre blogger og nettsteder. Det blir vår minste innsats på designprosessen, og vi fyller den opp uten å tenke hvilken widget skal gå der.
Men for et godt designet nettsted bør designeren vurdere en rekke faktorer når de jobber med dem. For eksempel vurdere antall sidebarbeholdere, bredden og høyden på sidebjelker, rekkefølgen av elementene som går inn i sidebjelene og så videre.
I dette innlegget skal vi studere anatomien til "perfekt sidebar".
Første ting først - vi må definere hva en "sidebar" er:
Et sidebjelke er en grafisk fraskilt seksjon som inneholder informasjons- og navigasjonsdeler av nettstedet.
Gitt, jeg lurte av fra Wikipedias definisjon av begrepet "sidebar" litt.
Sidebarer beholder kontekstuelle elementer til innholdet eller hele nettstedet, for eksempel navigasjonsmenyer, søkeformer eller abonnements widgets. De kan også inneholde ikke-kontekstuelle elementer som annonser eller "daglige sitater". De er nesten alltid smalere enn innholdsdelen for å understreke at innholdet er viktigere enn sidelinjen. Hovedformålet er å hjelpe den besøkende til å forstå og navigere på nettstedet bedre.
Som et innholdsadministrasjonssystem, vurderer WordPress-plattformen sidelinjer som "widget-områder" der WordPress-temautviklere bør la WordPress-widgets bli vist i deres temaer.
Selv om de ikke er teknisk "side" -barer, kan widgetområdene som tilhører "footer" av temaet også betraktes som "sidebars" siden, ja, de er også widgetområder.
For å kunne navngi ting riktig, bør de kalles "footer widget-områder", men i denne artikkelen skal vi snakke om dem også.
Som du kanskje allerede har gjettet, er det ikke noe riktig svar på dette spørsmålet. Avhengig av nettstedets kompleksitet og behovet for sidebarelementer, kan det være en til fire - eller ingen.
Enkeltkolle sidebar design eksempel: Twenty Twelve WordPress Theme Et enkelt sidebar er trolig det mest populære valget for en bloggdesign. Og siden blogsider har en tendens til å være lang med postlister eller postinnhold og kommentarlister, kan et enkelt sidebjeld inneholde 5 til 10 sidebarelementer. Ikke glem, skjønt: Hvis sidebjellet overskrider høyden av hovedinnholdsområdet, vil det definitivt virke styggt.
Sidebjelken kan være på venstre side av hovedinnholdsområdet eller på høyre side. Det er ingen signifikant forskjell mellom de to, men siden folk leser fra venstre til høyre, kan venstre sidebjelper tiltrekke seg flere klikk mens du reduserer viktigheten av hovedinnholdet, og dermed senker besøksvarigheten til hver side. (Den andre veien går for RTL-språk som arabisk eller hebraisk.)
Enkeltkolonne sidebar design eksempel: Seventeen WordPress Theme To sidebjelker kan være nyttige for bedriftens nettsteder eller magasiner, siden de skal vise mer navigasjons- og informasjonselementer enn blogger. Ulempen med å ha mer enn ett sidebar er at du trenger mer plass til dem, og det betyr at du må begrense hovedinnholdsområdet. Selv om du fortsatt kan nyte to sidebar med en responsiv tilnærming: På skjermene smalere enn en vanlig bærbar datamaskin (1366 piksler bred), kan du ta en av sidebjelene under den andre.
Du kan også designe en av sidebjegene svært smale for å holde noen ikoner eller ett-ord-linker også; men hvis du designer det dårlig, kan ujevnheten forstyrre dine besøkende.
Fire kolonne sidebar design eksempel: SmashingMagazine.com Denne sier selvsagt: Du må bruk responsive design teknikker for dette. Med mindre du vil irritere de besøkende med skjermer mindre enn 1600 piksler, må du kollapse eller flytte sidebjørene for smale skjermer.
Smashing Magazine's nåværende design er et av de beste eksemplene for fire kolonne WordPress-design med en responsiv tilnærming. Som skjermen smalner ned; Den venstre sidelinjen som holder hovednavigasjonen blir toppnavigasjonen, og den andre venstre sidebaret blir under den første på toppen, så forsvinner hovedpanelet til høyre helt mens den andre venstre sidebaret kommer tilbake til det opprinnelige stedet, og til slutt den andre venstre sidepanelet knyttes sammen med venstre sidefelt øverst som hovednavigasjonen (som er aktivert med en knapp).
"Sidebarless" designeksempel: Beyn.org Minimalisme kan være det rette svaret for enhver form for nettside. Hvis du er i det, vil du kanskje revurdere hvilke sidebarelementer du vil vise, og hvilke som skal eliminere fra designen din.
Deretter kan du vise elementene nederst på sidene dine. Du kan også prøve å vise dem på toppen, men det kan risikere at hovedinnholdsområdet ligger under "fold" - du må også vurdere skjermens høyde for besøkende.
Temaet ovenfor er et tema for meg, designet for bloggen min, Beyn. Jeg har alltid brukt / kodet temaer med et enkelt sidebar for Beyn, men med dette nye temaet ønsket jeg å prøve et "sidebarless" -design, og det virket vakkert: På bunnen av hver side har jeg bare tre widgets: En "kunngjøringer" liste, en liste over e-post / feed / sosiale abonnementsknapper og en "nyeste kommentar" -grensesnitt.
Fordelen med en "sidebarless" -design er at hovedinnholdet ditt trekker mest mulig oppmerksomhet.
Dette er slutten på del en av denne serien. Vi skal dekke emner som sidebarens to dimensjoner, bestilling av elementene og andre problemer som skal vurderes (som farger, bilder og skriftstørrelser) i neste del.
Accentsconagua