Dobra mala web stranica posjetitelju olakšava jedan konkretan posao. Pronaći raspored radionice, razumjeti uslugu, pročitati uputu ili poslati upit. Odluke o tehnologiji imaju smisla tek kada znamo koji je to posao.

Zamislimo mali fotografski klub koji želi objavljivati susrete i nekoliko vodiča. Primjer je ilustrativan: klub nema internetsku trgovinu, korisničke račune ni potrebu za velikom aplikacijom. Njegov početni problem nije izbor efekta pri pomicanju stranice. Problem je da se informacije rasipaju po porukama, a posjetitelj ne zna koja je obavijest još aktualna.

Prvo napišite put posjetitelja

Na jedan list zapišite tri pitanja: što se događa, kome je namijenjeno i što trebam učiniti sljedeće? Početna stranica treba kratko odgovoriti na njih. Detaljan program pripada zasebnoj stranici događaja, dok uputa za pripremu fotografija pripada trajnom vodiču. Takva podjela omogućuje da obavijest nestane s istaknutog mjesta, a koristan tekst i dalje ostane dostupan.

Napravite mali popis sadržaja sa stupcima naslov, svrha, odgovorna osoba i sljedeći pregled. To nije urednički ukras. Ako nema osobe koja će promijeniti raspored nakon otkazivanja susreta, ni najbolji sustav za upravljanje sadržajem neće održavati stranicu točnom. Za početak su dovoljne početna stranica, pregled vodiča, stranica pojedinog vodiča i jasna mogućnost kontakta.

Odaberite način održavanja, pa tehnologiju

Statička stranica može odgovarati projektu čiji sadržaj rijetko mijenja osoba koja zna urediti datoteke. Sustav poput WordPressa praktičan je kada više urednika treba samostalno objavljivati tekstove kroz preglednik. Ta odluka ne govori da je jedan pristup uvijek brži ili sigurniji; opisuje gdje želite obavljati urednički posao i što možete redovito održavati.

Prije izbora napravite probni postupak: objavite tekst, zamijenite jednu sliku, ispravite datum i vratite prethodnu verziju. Zabilježite gdje ste zapeli. Pet minuta u stvarnom uređivanju često otkrije više od usporedne tablice s desecima mogućnosti koje nikad nećete koristiti. Odvojeno provjerite što se izvozi pri preseljenju: tekstovi, slike, njihove putanje i postavke nisu nužno u jednoj datoteci.

Raspored gradite od najužeg zaslona

Počnite jednim stupcem. Naslov, uvod i glavni sadržaj moraju se moći pročitati bez vodoravnog pomicanja. Tek kada ima prostora, dodajte drugi stupac za sadržaj članka ili povezane vodiče. MDN objašnjava prilagodljive rasporede, elastične dimenzije i medijske upite u vodiču za responzivni dizajn. U vlastitom projektu prijelomnu širinu odaberite prema tome kada se sadržaj počinje gužvati.

.tekst { width: min(100% - 2rem, 44rem); margin-inline: auto; }
img { max-width: 100%; height: auto; }
@media (min-width: 60rem) {
  .raspored { display: grid; grid-template-columns: 1fr 16rem; gap: 3rem; }
}

Ovaj mali primjer ne predstavlja cijelu temu. Pokazuje tri odluke: tekst ima ograničenu širinu, slika ne prelazi roditeljski element, a dodatni stupac nastaje tek na većem zaslonu. U zaglavlju dokumenta potreban je i odgovarajući viewport zapis. Izbjegavajte fiksnu visinu blokova koji sadrže duži naslov; prijevod ili povećanje slova brzo razotkriju takvo ograničenje.

Brzina počinje izborom sadržaja

Za fotografiju koju prikazujete u širini od nekoliko stotina piksela nemojte automatski slati izvorni višemegabajtni zapis iz fotoaparata. Izradite prikladne veličine, provjerite detalje nakon kompresije i odredite dimenzije slike u prikazu. Dekorativni video u zaglavlju teško će pomoći posjetitelju koji samo traži adresu susreta. Najlakši resurs za ubrzati jest onaj koji stranici uopće nije potreban.

Izmjerite početnu stranicu i jedan dugi članak pod istim uvjetima, pa promijenite samo jednu stvar. Zabilježite uređaj, vrstu veze i je li predmemorija bila prazna. Broj bez tih okolnosti može navesti na pogrešan zaključak. Ako učitavanje izgleda brzo, a tekst poskakuje dok slike dolaze, korisnički problem i dalje postoji.

Probni posjet prije objave

  • Otvorite izravnu poveznicu na članak u privatnom prozoru, bez uredničke prijave.
  • Prođite navigaciju tipkom Tab i provjerite gdje je fokus.
  • Povećajte tekst i pročitajte najduži naslov na uskom zaslonu.
  • Pošaljite probni upit i provjerite potvrdu primitka, a ne samo izgled gumba.
  • Otvorite jednu nepostojeću adresu i provjerite vodi li poruka natrag prema sadržaju.

Za obrazac je korisno napraviti zaseban pregled prema vodiču za jasna polja i poruke pogreške. Ako sadržaj dolazi iz tablice, provjerite i pravila za uredne podatke: dobar raspored ne može popraviti pogrešan datum u izvoru.

Mali plan održavanja

Nakon objave sačuvajte popis ključnih adresa i zabilježite kako nastaje sigurnosna kopija. Nakon svake značajne promjene provjerite barem početnu stranicu, članak i kontakt. Jednom mjesečno pregledajte aktualne obavijesti, neispravne poveznice i sadržaj bez vlasnika. Učestalost prilagodite stvarnim promjenama, ne želji da kalendar izgleda popunjen.

Za fotografski klub uspjeh je vrlo konkretan: novi posjetitelj nalazi sljedeći susret, razumije treba li prijava i može pročitati vodič na telefonu. Kada taj put radi, dodatne značajke mogu se uvoditi pojedinačno, s jasnim razlogom i načinom provjere.