Anatomia unei bare laterale perfecte - Introducere și folosirea aspectului potrivit

Recunoașteți-o: majoritatea dintre noi văd barele laterale ca pe un container simplu chestie, în blogurile și site-urile noastre. Ea face efortul nostru minim în procesul de proiectare și îl umplem fără să ne gândim ce widget ar trebui să meargă acolo.

Dar pentru un site bine conceput, designerul ar trebui să ia în considerare o serie de factori atunci când lucrează la ele. De exemplu, luați în considerare numărul de containere din bara laterală, lățimea și înălțimea barelor laterale, ordinea elementelor care intră în barele laterale și așa mai departe.

În acest post, vom studia anatomia "barei laterale perfecte".


Definiția și importanța barei laterale

Mai intai lucrurile in primul rand - avem nevoie defini ce "bara laterală" este:

O bară laterală este o secțiune separată grafic care conține părți de informare și de navigare ale site-ului web.

Având în vedere că am înșelat puțin din definiția termenului "sidebar" de la Wikipedia.

Sidebars-urile dețin elemente contextuale pentru conținutul sau întregul site web, cum ar fi meniurile de navigare, formularele de căutare sau widget-urile de abonament. Ele pot de asemenea să dețină elemente non-contextuale precum reclamele sau "citatele zilnice". Ele sunt aproape întotdeauna mai înguste decât secțiunea de conținut pentru a sublinia că conținutul este mai important decât bara laterală. Scopul lor principal este de a ajuta vizitatorul să înțeleagă mai bine și să navigheze pe site.

Ca un sistem de gestionare a conținutului, platforma WordPress consideră că barele laterale sunt "zone widget" unde dezvoltatorii de teme WordPress ar trebui să permiteți widget-urilor WordPress să fie afișate în temele lor.

Deși nu sunt baruri "laterale" din punct de vedere tehnic, zonele widget care aparțin "footerului" temei ar putea fi, de asemenea, considerate "bare laterale" deoarece, de asemenea, ele sunt și zone widget.

Pentru a numi lucrurile în mod corespunzător, acestea ar trebui să fie numite "zonele de fundal pentru subsol", dar în acest articol, vom vorbi și despre ele.


Câte bare laterale ar trebui folosite într-o temă?

După cum probabil ați ghicit deja, nu există un răspuns corect la această întrebare. În funcție de complexitatea site-ului dvs. și de necesitatea elementelor barei laterale, ar putea fi una sau patru - sau nici una.

Bara laterală unică

Exemplu de proiectare bara laterala cu o singura coloana: Twenty Twelve WordPress Theme

O singură bara laterală este probabil cea mai populară alegere pentru un design de blog. Și din moment ce paginile de blog tind să fie lungi cu listele de postări sau postarea de conținut și liste de comentarii, o singură bara laterală poate conține 5 până la 10 elemente ale barei laterale. Nu uitați, totuși: dacă bara laterală depășește înălțimea zonei principale de conținut, va părea cu siguranță urâtă.

Bara laterală poate fi situată în partea stângă a zonei principale de conținut sau pe partea dreaptă. Nu există nicio diferență semnificativă între cele două, dar din moment ce oamenii citesc de la stânga la dreapta, barele laterale din stânga pot atrage mai multe clicuri în timp ce diminuează importanța conținutului principal, reducând astfel durata vizitei fiecărei pagini. (În sens invers merge pentru limbile RTL, cum ar fi arabă sau ebraică.)

Două bare laterale

Exemplu de proiectare a barei laterale cu o singură coloană: Tema WordPress de șaptesprezece

Două bare laterale ar putea fi utile pentru site-urile sau revistele corporative, deoarece ar trebui să afișeze mai multe elemente de navigație și informații decât blogurile. Dezavantajul de a avea mai mult de o bară laterală este că aveți nevoie de mai mult spațiu pentru ei și asta înseamnă că trebuie să restrângeți zona principală de conținut. Cu toate acestea, vă puteți bucura în continuare de două bare laterale cu o abordare receptivă: Pe ecranele mai înguste decât un laptop standard (cu lățime de 1366 pixeli), puteți lua unul dintre barele laterale sub celălalt.

De asemenea, puteți proiecta unul dintre barele laterale foarte înguste pentru a ține unele icoane sau link-uri de un singur cuvânt; dar, dacă îl proiectați prost, neuniformitatea ar putea deranja vizitatorii.

Trei sau patru bare laterale

Patru exemple de design pentru bara laterală a coloanei: SmashingMagazine.com

Acest lucru este de la sine înțeles: Tu trebuie să utilizați tehnici de proiectare receptive pentru acest lucru. Cu excepția cazului în care doriți să vă enervați vizitatorii cu ecrane mai mici de 1600 de pixeli, trebuie să restrângeți sau să mutați barele laterale pentru ecrane înguste.

Designul actual al revistei Smashing Magazine este unul dintre cele mai bune exemple pentru patru modele WordPress cu o abordare receptivă. Pe măsură ce ecranul se îngustează; bara laterală din stânga care deține navigația principală devine navigația de sus, apoi bara laterală din stânga se află sub prima în partea de sus, apoi bara laterală din partea dreaptă dispare complet, în timp ce a doua bara laterală stângă se întoarce la locul său original și, în final cea de-a doua bara laterala din stanga se alatura impreuna cu bara laterala din stanga in partea de sus ca navigatie principala (care este activata cu un buton).

Nu sunt laterale

Exemplul de design "Sidebarless": Beyn.org

Minimalismul ar putea fi răspunsul potrivit pentru orice tip de site web. Dacă te afli în asta, ai putea să revedezi ce elemente ale barei laterale vrei să le afișezi și care dintre ele să le elimini din design.

Apoi, puteți afișa aceste elemente în partea de jos a paginilor dvs. De asemenea, puteți încerca să le afișați pe partea de sus, dar care ar putea risca să nu se afle sub "fold" zona principală de conținut - trebuie să aveți în vedere și înălțimea ecranelor vizitatorilor.

Tema de mai sus este o temă a mea, concepută pentru blogul meu, Beyn. Am folosit mereu / codate teme cu o singura bara laterala pentru Beyn, dar cu aceasta tema noua, am vrut sa incerc un design "sidebarless" si sa descurcat frumos: In partea de jos a fiecarei pagini, am doar trei widget-uri: listă, o listă a butoanelor de e-mail / feed / abonament social și a widgetului "ultimele comentarii".

Beneficiul unui design "sidebarless" este conținutul principal care atrage cea mai mare atenție posibilă.


Va urma…

Acesta este sfârșitul pentru prima parte a acestei serii. Vom aborda subiecte cum ar fi cele două dimensiuni ale barei laterale, ordonarea elementelor și alte aspecte pe care trebuie să le analizăm (cum ar fi culorile, imaginile și dimensiunile fontului) în următoarea parte.

Cod