Share
Geef toe: de meesten van ons zien sidebars als niets meer dan een eenvoudige container die vasthoudt spul, in onze blogs en websites. Het krijgt onze minimale inspanning in het ontwerpproces en we vullen het op zonder na te denken welke widget waar zou moeten gaan.
Maar voor een goed ontworpen website moet de ontwerper rekening houden met een aantal factoren wanneer hij eraan werkt. Bekijk bijvoorbeeld het aantal zijbalkcontainers, de breedte en hoogte van zijbalken, de volgorde van de elementen die in de zijbalken gaan enzovoort.
In deze post gaan we de anatomie van de "perfecte zijbalk" bestuderen.
De eerste dingen eerst - we moeten bepalen wat een "zijbalk" is:
Een zijbalk is een grafisch gescheiden gedeelte dat informatieve en navigatiedelen van de website bevat.
Toegegeven, ik bedroog een beetje van Wikipedia's definitie van de term "zijbalk".
Sidebars bevatten contextuele elementen voor de inhoud of de gehele website, zoals navigatiemenu's, zoekformulieren of abonnementswidgets. Ze kunnen ook niet-contextuele elementen bevatten zoals advertenties of 'dagelijkse koersen'. Ze zijn bijna altijd smaller dan de inhoudssectie om te benadrukken dat de inhoud belangrijker is dan de zijbalk. Hun voornaamste doel is om de bezoeker te helpen de website beter te begrijpen en te navigeren.
Als een content management systeem beschouwt het WordPress platform zijbalken als "widget gebieden" waar WordPress thema-ontwikkelaars moeten laat WordPress-widgets weergeven in hun thema's.
Hoewel het geen technisch 'zijbalk' is, kunnen de widgetgebieden die bij het 'voetgedeelte' van het thema horen, ook als zijbalken worden beschouwd, want het zijn ook widgetgebieden.
Om de dingen goed te benoemen, zouden ze 'footer widget areas' moeten worden genoemd, maar in dit artikel gaan we er ook over praten.
Zoals je misschien al hebt geraden, is er geen goed antwoord op deze vraag. Afhankelijk van de complexiteit van uw website en de behoefte aan zijbalkelementen, kan het een tot vier zijn - of geen.
Zijbalkontwerp met een enkele kolom: Twenty Twelve WordPress Theme Een enkele zijbalk is waarschijnlijk de meest populaire keuze voor een blogontwerp. En aangezien blogpagina's vaak lang zijn met de postlijsten of postinhoud en opmerkingenlijsten, kan één zijbalk 5 tot 10 zijbalkelementen bevatten. Vergeet echter niet: als uw zijbalk de hoogte van het hoofdinhoudsgebied overschrijdt, zal het absoluut lelijk lijken.
De zijbalk bevindt zich aan de linkerkant van het hoofdgedeelte van de inhoud of aan de rechterkant. Er is geen significant verschil tussen beide, maar sinds mensen van links naar rechts lezen, kunnen zijbars aan de linkerkant meer klikken genereren, terwijl het belang van de hoofdinhoud wordt verminderd, waardoor de bezoekduur van elke pagina wordt verkort. (De andere kant op gaat voor de RTL-talen zoals Arabisch of Hebreeuws.)
Zijbalkontwerp met een enkele kolom: Zeventien WordPress-thema Twee zijbalken kunnen handig zijn voor bedrijfswebsites of tijdschriften, omdat ze meer navigatie- en informatie-elementen dan blogs zouden moeten weergeven. Het nadeel van meer dan één zijbalk is dat je meer ruimte voor ze nodig hebt en dat betekent dat je je hoofdinhoudsgebied moet verkleinen. Hoewel, je kunt nog steeds genieten van twee zijbalken met een responsieve aanpak: op schermen smaller dan een standaard laptop (1366 pixels breed), kun je een van de zijbalken onder de andere nemen.
Ook kun je een van de zijbalken erg smal ontwerpen om ook een aantal pictogrammen of één-woord-links te bevatten; maar als u het slecht ontwerpt, kunnen de oneffenheden uw bezoekers storen.
Vier kolom zijbalkontwerp voorbeeld: SmashingMagazine.com Dit is vanzelfsprekend: jij moet gebruik hiervoor responsieve ontwerptechnieken. Tenzij u uw bezoekers wilt irriteren met schermen kleiner dan 1600 pixels, moet u de zijbalken inklappen of verplaatsen voor smalle schermen.
Het huidige ontwerp van Smashing Magazine is een van de beste voorbeelden voor WordPress-ontwerpen met vier kolommen met een responsieve aanpak. Naarmate het scherm smaller wordt; de meest linkse zijbalk die de hoofdnavigatie bevat, wordt de bovenste navigatie, dan komt de tweede linkerzijbalk onder de eerste aan de bovenkant, dan verdwijnt de hoofdzijbalk aan de rechterkant volledig terwijl de tweede linkerzijbalk terugkeert naar zijn oorspronkelijke plaats, en ten slotte de tweede linkerzijbalk voegt zich samen met de meest linkse zijbalk bovenaan als de hoofdnavigatie (die wordt geactiveerd met een knop).
Ontwerpvoorbeeld "Zij zonder voet": Beyn.org Minimalisme kan het juiste antwoord zijn voor elke soort website. Als je daar zin in hebt, zou je misschien willen heroverwegen welke elementen in de zijbalk je wilt weergeven en welke elementen uit je ontwerp moeten worden verwijderd.
Vervolgens kunt u die elementen onder aan uw pagina's weergeven. Je kunt ook proberen ze bovenaan weer te geven, maar dat kan tot gevolg hebben dat het gedeelte met de hoofdinhoud onder de "vouw" komt te liggen - je moet ook rekening houden met de hoogte van de schermen van bezoekers.
Het bovenstaande thema is een thema van mij, ontworpen voor mijn blog, Beyn. Ik heb altijd thema's gebruikt / gecodeerd met een zijbalk voor Beyn, maar met dit nieuwe thema wilde ik een "zijbalkloos" ontwerp proberen en het werkte mooi: onderaan elke pagina beschik ik slechts over drie widgets: Een "aankondigingen" lijst, een lijst met knoppen voor e-mail / feed / sociaal abonnement en een widget 'laatste reacties'.
Het voordeel van een "sidebarless" ontwerp is uw belangrijkste inhoud die de meeste aandacht trekt.
Dit is het einde voor deel één van deze serie. We behandelen onderwerpen als de twee dimensies van de zijbalk, de volgorde van de elementen en andere zaken die in aanmerking komen (zoals kleuren, afbeeldingen en lettergroottes) in het volgende deel.
Accentsconagua