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: velika slika na početnoj strani
Na ovom sajtu desktop fotografija radnog stola ima detalje uz obe ivice. Za telefon koristimo uži izrez kako bi se u sredini videli laptop, olovka i knjiga. Menja se izrez fotografije, ne naslov ili ponuda. Učitava se varijanta namenjena toj širini, umesto da telefon uvek preuzima celu desktop sliku.
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.
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.