• Prevod

Nedavno je pristup dizajniranju web stranica pomoću horizontalnog pomicanja postao sve popularniji. Veoma smo zabrinuti zbog izvodljivosti i upotrebljivosti ovog pristupa. Da bismo razumjeli ovo pitanje, preveli smo članak o horizontalnom pomicanju. Pozivamo vas da pročitate materijal i razgovarate o ovoj temi u komentarima ...

Originalni naziv publikacije: “Tužba za horizontalno skrolovanje”…

O svemu se s vremena na vrijeme preispita. Stoga nije ni čudo što web stranice s horizontalnim sadržajem postaju moderne. Ovo je hrabra i impresivna inovacija dizajna, budući da velika većina web stranica na webu danas koristi okomito pomicanje.

Razlog popularnosti pristupa vertikalnog pomicanja je očigledan - lakši je za implementaciju, poznatiji je i češće se koristi. Veb lokacije sa vertikalnim pomeranjem se takođe smatraju efikasnijim. Budući da je ovo mišljenje većine, upotreba horizontalnog skrolovanja postaje još devijantnija i smelija.

Oni koji su odabrali „put“ horizontalnog skrolovanja raspravljaju sa stanovišta sopstvenog izbora. A organizacije koje su odabrale ovu metodu proglašavaju svoje stranice umjetničkim djelima.

(http://www.guillaumejuvenet.com/)

Horizontalni sajtovi su izjava o sopstvenoj posebnosti i nespremnosti da se uklope u društveni okvir. Kao rezultat toga, brend koji koristi ovaj dizajn web stranice često sebi zarađuje reputaciju "čudnog" i "čudnog".

Zašto neki ljudi koriste horizontalno skrolovanje

Klađenje na mobilnom uređaju možda nije tako dobra ideja

Glavni razlog za to je već naveden gore. Ono što ljudi ne znaju je da sadržaj možete pogledati jednostavnim skrolovanjem kroz njega na drugačiji način.

Budući da se ekrani mobilnih telefona ili tableta i desktop ekrani smatraju prilično specifičnim jedni drugima, sličnost se ovdje ne primjenjuje. Ne možete koristiti horizontalno prevlačenje na radnoj površini, jednostavno zato što je to uobičajeno na tabletima i telefonima.

To se zasniva na principu da ljudi koriste ove uređaje s različitim načinom razmišljanja, a promjena prihvaćenog stanja stvari može dovesti do nekog nesporazuma, ostavljajući korisnike izvan njihove zone komfora.

Glavni nedostatak implementacije horizontalnog skrolovanja je to što korisnici ne preferiraju jedinstvenu mehaniku za gledanje sadržaja na stranici, već uniformnost u web interfejsima.

Produktivno korištenje vertikalnog prostora za područje sadržaja

Za razliku od popularnih vertikalnih rasporeda, horizontalni rasporedi imaju jednu prednost. Oni uredno pružaju samo mali dio informacija u području horizontalnog pomicanja. A ključne informacije mogu se fiksirati u vertikalnom prostoru, privlačeći pažnju korisnika na njih ne samo dizajnom, već i pozicioniranjem.

Kada koristiti horizontalno pomicanje ako to zaista želite

Stranice s horizontalnim sadržajem najprikladnije su za situacije u kojima trebate prikazati nekoliko objekata istovremeno: grafičke slike, male blokove informacija, grupe ikona ili preglede koji povezuju na detaljniji opis.

Mobilne verzije "desktop" stranica ili web stranice dizajnirane da se gledaju s mobilnih uređaja - ovo je opseg u kojem je horizontalno pomicanje potpuno prikladno. Međutim, takođe je pogodan za brojne druge stranice, omogućavajući im da prikažu veliku količinu informacija na jednostavan i isplativ način.

problem upotrebljivosti

Iako su mnogi korisnici danas upoznati, pa čak i upoznati s horizontalnim pomicanjem (kada se promijeni cijeli sadržaj stranice), mnogi i dalje osuđuju horizontalno pomicanje (sa nesmetanim učitavanjem sadržaja). I dalje dobija negativne povratne informacije od mnogih korisnika i stoga ga treba koristiti s oprezom. Obično se koristi za pokazivanje individualnosti, kao što je brendiranje. Ali čak i uz ovu upotrebu, mnogima je to neobično.

Korisnici zanemaruju blokove stranica s horizontalnim pomicanjem

Ljudi obično ne primjećuju čak ni eksplicitne naznake u vezi s horizontalnom navigacijom po web stranici, često ostavljajući velike strelice i druge horizontalne elemente navigacije neprimijećenima i netaknutima.

(http://www.lorenzobocchi.com/)

To je uglavnom zato što ovaj oblik upotrebe ne odgovara očekivanom obrascu rada i, kao rezultat, nije prihvatljiv ili smislen.

Nije neuobičajeno da stranice na kojima prelistavanje cijele stranice (slično papirnim knjigama i časopisima) ima visoka očekivanja korisnika, ali kao rezultat toga, ljudi su često razočarani ponuđenim sadržajem. Dakle, dobro rješenje za jednoga (te baš te papirnate knjige i časopisi) može učiniti medvjeđu uslugu drugom.

Kako je to ispravno?

Što učiniti ako i dalje želite implementirati horizontalno pomicanje na svojoj web stranici i istovremeno ne gubiti korisnike? Sve je zaista jednostavno - dodajte dodatne opcije za navigaciju.

Dodajte meni mehanici horizontalnog pomeranja koji će vam omogućiti ne samo da se krećete od jednog odeljka do drugog, već i da preskačete neke sekcije u potpunosti. Ovo će donijeti fleksibilnost i inspirisati više korisnika da pretražuju odjeljke za koje su zainteresirani.

Horizontalna traka za pomicanje je također neophodna da pokaže koliko sadržaja još uvijek nije gledano. Ponekad ovo motiviše ljude da čitaju malo više kada se spremaju da napuste sajt.

Šta uzeti u obzir

Iako se stavovi prema korišćenju horizontalnog skrolovanja polako menjaju pojavom novih tehnologija kao što su ekrani osetljivi na dodir, tableti, sve-u-jednom računari sa ekranom osetljivim na dodir itd., ovaj metod još uvek nije dominantan.

Kod analognih tastatura, tasterima gore/dole je lakše manipulisati nego tasterima levo/desno. Ali na touchpadu, dodavanje novih pokreta će biti praktičnije kada se implementira horizontalno pomicanje.

Brzinu pomicanja također treba optimizirati. Prebrzo pomicanje može uzrokovati glavobolju, a presporo pomicanje može biti vrlo neugodno.

Uprkos činjenici da smo čitali s lijeva na desno, polako listajući stranicu, ova navika se sada mijenja. S pojavom e-knjiga i raznih aplikacija za pametne telefone, tablete i touchpade, ljudi se postepeno navikavaju na prevrtanje dok čitaju. Međutim, uvijek je važno uzeti u obzir ono s čime se korisnici mogu susresti prilikom uvođenja novih koncepata u svakodnevni život.

U ovom članku ćemo detaljno analizirati svojstvo overflow sa svim njegovim vrijednostima, koje vam također omogućava dodavanje ili uklanjanje horizontalne/vertikalne trake za pomicanje. Drugim riječima, kako napraviti trake za pomicanje.

Overflow u CSS-u je odgovoran za to kako će informacije u bloku izgledati ako sadržaj premašuje visinu ili širinu ovog bloka. Ovo svojstvo se odnosi samo na blok elemente (display : block ; ili one koji su inicijalno blok elementi - div i tako dalje).

Moguće vrijednosti koje ovo svojstvo može imati (zadana vrijednost je vidljiva):

• Vidljivo - prikazuje se cijeli sadržaj elementa, čak i izvan postavljene visine i širine.
• Skriveno - Samo područje unutar elementa je prikazano, ostalo će biti skriveno.
• Scroll - trake za pomicanje se uvijek dodaju.
• Automatski - trake za pomicanje se dodaju samo kada su potrebne.
• Naslijediti - Nasljeđuje vrijednost roditelja.

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje nekom elementu. Ovako se, na primjer, rukuje okvirima kako se ne bi nagurali u punoj veličini. Ili da ubacite neki veliki tekst tako da ne zauzima pola stranice, već da se udobno smjesti u poseban blok, i tamo se može listati i čitati. Uglavnom, nekretnina rješava probleme udobnog prikaza informacija.

U demonstraciji možete vidjeti kako svaka od vrijednosti svojstva funkcionira u praksi:

HTML kod

tijelo (margina:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) div ( širina:200px; /* fiksna širina */ visina:300px; /* fiksna visina */ border:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

Vrijedno je obratiti pažnju na činjenicu da su u ovom konkretnom slučaju blokovi sa datom fiksnom visinom i širinom. Ovo je važno, na primjer, razmotrite opciju kada je visina bloka postavljena na auto:

Vidimo da je tekst u svim slučajevima ispravno prikazan unutar bloka, osim male neugodnosti u slučaju scroll , gdje se pojavljuju neaktivne trake za pomicanje.

Ali u ovom slučaju postoji mala opasnost, susrevši se s kojom mnogi ne razumiju zašto je nastala i kako to popraviti. Poenta je da ako je blok sa overflow: vidljiv; to jest, zadana vrijednost, a njegov sadržaj ima elemente sa bilo kojom float vrijednosti osim none , onda sve ovo neće biti ispravno prikazano. Da biste razumjeli kakva je ova situacija, razmotrite primjer:

Ispod bloka VisibleDiv je još jedan blok

Nema ničega ispod bloka VisibleDiv

tijelo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) p (float:left;) div ( width:500px; visina:auto; granica: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (background: rgba(0,255,0,0.6); color:# FFFFFF;font-weight:bold;)

U prvom slučaju, jasno je da sadržaj sa svojstvom float izlazi izvan bloka i ne uzima se u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka sa overflow : visible ; drugi blok je posebno postavljen i ofarban u drugu boju. Ovo nisu jedini primjeri kako se takvi blokovi (s overflow : visible ; i height : auto ; ) mogu ponašati na stranici. Ovo je popravljeno zamjenom vidljive vrijednosti sa hidden, zapamtite da ovo svojstvo treba specificirati samo za blokove s visinom: auto; , ako postoji fiksna visina, onda postoji velika šansa da će se sadržaj jednostavno sakriti ako je veći od date visine.

Evo kako bi ispravljena verzija izgledala:

Također, nećete imati takav problem ako je blok sa overflow : vidljiv ; i visina: auto; određena je vrijednost svojstva float. Općenito, u mnogim slučajevima, prikaz elemenata ovisi o skupu svojstava, a ne o pojedinačnim svojstvima.

Možete koristiti overflow-y: skrolujte da biste se pomerali okomito.

Uputstvo

Koristite oznaku div ako vam je potrebna traka za pomicanje ne za cijelu stranicu, već samo za ograničeno područje. U HTML-u (HyperText Markup Language - “jezik za označavanje hiperteksta”), “tagovi” su pojedinačne komande pretraživaču za prikaz određenog elementa stranice. Najjednostavnije rečeno, div oznaka (koja se često naziva "sloj") izgleda ovako: