MALI I VELIKI PROBLEMI

Izbjegnite ove greške kako biste izradili bolje web stranice

07.06.2017 u 18:00

Bionic
Reading

Pri izradi web stranica s HTML-om i CSS-om uvijek može doći do stvaranja malih i velikih problema. Dok su potonji lako uočljivi i praktički sami traže intervenciju, mnogi manji problemi i omaške mogu proći potpuno neopaženo i zagorčati život tek dugoročno gledano

Jedna od učestalijih greški je to da početnici koriste neke stvari koje su im dostupne, a možda to i nije najpametnija ideja ako će se stvari ikad u budućnosti uređivati opet. HTML i CSS omogućuju uređivanje bilo koje linije teksta ili pojedine riječi kako god to korisnik želi. Početnici tu znaju napraviti grešku pa i u srednjim i većim projektima uređuju brdo toga, obično ne razmišljajući što će ako bude stvari trebalo popravljati naknadno. 

Neki tekst.

Tada ne preostaje ništa drugo nego pronalazak svakog takvog inline stylinga i ručna izmjena. Kako bi se izbjegle ovakve stvari, valja koristiti CSS stylesheet. Želi li se primjerice imati paragrafe s veličinom slova od 120% i plave boje, bolje rješenje za style je nešto ovakvo: 

p.important { size: 120%; color:blue; }

Umjesto korištenja inline stylea, valja tek iskoristiti liniju: 

Neki tekst.

Na ovaj način je za buduće izmjene dovoljno tek izmijeniti klasu 'important' u CSS-u, čime će se izmijeniti svi paragrafi pod njom. Brzo i učinkovito. 

Ah te tablice

Ne tako davno, tvorci internetskih stranica su redovito koristili tablice za uređivanje oblika stranica. Organiziranje elemenata u redove u stupce zvuči vrlo korisno, posebno s obzirom na to da se svaki element može (relativno) jednostavno i urediti naknadno...na krajnje jednostavnim projektima. Danas se na tu praksu ne gleda baš najbolje. 

Kao i u ranijem slučaju, bolje se posvetiti CSS-u umjesto HTML tablicama. Stvari je jednostavno lakše održavati na taj način, posebno ako će se mijenjati deseci ili stotine stranica i segmenata. 

Ne samo da je lakše upravljanje sadržajem korištenjem CSS-a, već je i čitanje takvih layouta mnogo lakše od čitanja HTML tablica. Pritom valja imati na umu da umetanje kakve jednostavne tablice nije nekakav smrtni grijeh, piše Dann Albright na stranici MakeUseOf. Caka je samo u tom da u slučaju stvaranja golemih tablica s više slojeva CSS predstavlja jedino korektno rješenje. 

Zastarjeli kod

Baš kao i drugi jezici, HTML se s vremenom mijenja. Neki od službeno prepoznatih tagova se tek promijene, dok drugi završe u domeni zastarjelih. Čak i da potonji funkcioniraju na današnjem webu, najbolja je praksa - potpuno ih izbjeći. 

Od primjera tu vrijedi izdvojiti naviku korištenja <b> za podebljana slova te <i> za nakošena slova. Danas su uobičajeni tagovi za to <strong> i <em> (emphasis, naglašavanje). Tagovi <center>, <align>, <color>, <size> i mnogi drugi danas su jednostavno zastarjeli. Njih je zamijenilo korištenje CSS-a, a brza pretraga na ovim stranicama otkrit će sve bitnije novitete. 

Inline JavaScript

Ovdje treba biti kratak i reći tek kako neke stranice koriste JavaScript za dodatnu funkcionalnost. Tim se stranice mogu učiniti interaktivnima, dodati animacije i slično. No, kao i u ranijim primjerima, korištenje inline JavaScripta u HTML-u nije najbolje rješenje. Stranice koriste više prometa nego skripta povezana iz različite datoteke, a to je tek jedan od brojnih razloga zašto izbjegavati ovakvo što. 

Samo je jedan H1

Tzv. heading tagovi su iznimno korisne stvari. Stranice čine čitljivijima, povećavaju preglednost, naglašavaju bitno i poboljšavaju SEO karakteristike. 

Mnogi zaboravljaju da postoji više razina heading oznaka - i postoji ih više s razlogom. Na stranicama vrijedi zlatno pravilo - H1 tag treba biti samo jedan. Možda će Google uhvatiti stranicu radije kada ona ima više H1 tagova, no to nije najbolja praksa jer se uništava čitljivost stranice. Na taj način će se korisnike koji i stignu odvratiti od ponovnog čitanja, a čime će bilo kakvi bonusi od SEO-a otići u povijest. 

Alt atributi za slike

S modernim preglednicima mnogi su počeli zaboravljati na alt atribut pri ubacivanju slika. Ovo je poseban problem s obzirom na to koliko prometa se ostvaruje baš mobilnim surfanjem, a koje nikad nije idealno. Slike se ponekad jednostavno ne učitaju, a korisnik dobije tek veliku prazninu umjesto njih. Atribut alt tu može pomoći, da se i ne spominje činjenica da slabovidni koji koriste čitače zaslona ili slične alate za pregled weba jednostavno moraju imati atribut kako bi znali što je tu.