Jedan sadržaj, različit raspored
Responsive sajt koristi isti URL i HTML, dok CSS prilagođava prikaz raspoloživom prostoru. Tri kartice na desktopu mogu postati jedna kolona na telefonu. Sadržaj se ne mora uklanjati, ali redosled treba da ostane logičan i kada elementi više nisu jedan pored drugog.
Prelom se bira prema sadržaju
Raspored menjajte kada navigacija, tekst ili kontrole više ne staju, ne samo prema listi popularnih telefona. Fleksibilne širine i mreže rešavaju deo posla, a media queries uvode promene na odabranim širinama. Osnovni princip objašnjava MDN vodič za responsive dizajn.
Primer rasporeda: kartice smeštaja
Zamislite stranicu sa tri apartmana: svaki ima fotografiju, naziv, kapacitet i link ka detaljima. Na velikom ekranu kartice mogu stajati u jednom redu, a na telefonu jedna ispod druge. Naziv, kapacitet i link ostaju uz odgovarajuću sliku. Duži naziv apartmana ili prevod ne sme da prekrije dugme. To je primer planiranja rasporeda, a sadržaj za takav projekat opisujemo na stranici izrade sajta za apartmane.
Slika ne sme da pomera sadržaj
Rezervišite prostor dimenzijama ili odnosom stranica. Razlikujte dekorativnu pozadinu koju možete iseći i fotografiju proizvoda čiji detalji moraju ostati vidljivi. Pregledajte rezultat u obe orijentacije; dobar izrez na uskom telefonu ne mora biti dobar na tabletu.
Testirajte više od širine prozora
- Dugačke naslove i stvarne prevode, ne samo kratak probni tekst.
- Meni, tabele, galerije i forme sa prikazanim greškama.
- Uvećan tekst, fokus tastature i redosled čitanja.
- Sporije učitavanje slika i položaj dugmeta pre i posle učitavanja.
- Stvarni telefon, dodir i otvorenu tastaturu.
Responsive prikaz nije garancija pozicije u pretrazi. On treba da omogući upotrebljiv pristup istom korisnom sadržaju. Za pregled obima pogledajte responsive web dizajn, a za uređivanje sadržaja stvarne CMS primere.
Kako proveriti da li promena rasporeda radi
Testirajte uski i široki ekran, ali i širinu neposredno pre i posle promene broja kolona. Uporedite redosled kartica, cele naslove i vidljivost linkova. Ako izgled deluje dobro, a posetilac ipak ne može da pošalje upit, nastavite kroz praktičnu proveru mobilne upotrebljivosti.
Planirate sličan projekat?
Ako želite da ovaj savet primenimo na Vaš poslovni sajt, pogledajte povezane usluge ili pošaljite kratak upit za procenu obima.