Imate " odzivno spletno stran "? To je stran s postavitvijo, ki se spreminja glede na obiskovalčevo napravo in velikost zaslona. Odzivno spletno oblikovanje je zdaj najboljša praksa v industriji. Google priporoča, naj ga najde na milijone spletnih mest na spletu. Vendar obstaja velika razlika med spletno stranjo, ki se preprosto "prilega" različnim velikostim zaslona in ima spletno stran, ki je resnično odzivna.
Rutinsko gledam, da podjetja redizajnirajo svojo spletno stran in izpustijo sporočilo za javnost, ki razglaša vrline svojega novega mobilnega prijaznega oblikovanja. Ko obiščem tista spletna mesta, kar pogosto najdem, je postavitev, ki se resnično spreminja in spreminja, da se prilega različnim zaslonom, a to je, kolikor jemlje idejo o odzivnosti. To ni dovolj. Resnično odzivna spletna stran naredi več kot le, da ustreza manjšemu ali večjemu zaslonu. Na teh straneh boste našli tudi naslednje pomembne lastnosti.
1. Optimizirana učinkovitost
Nihče ne želi počakati, da se spletna stran naloži, in ko nekdo uporablja mobilno napravo s povezavo, ki je morda manj kot idealna, je še toliko bolj pomembno, da se spletno mesto hitro naloži.
Kako optimizirate uspešnost svojega spletnega mesta? Če začnete z novo spletno stranjo kot del prenove, potem morate narediti to točko za ustvarjanje proračuna za uspešnost kot del tega projekta. Če delate z obstoječo spletno stranjo in ne začnete s praskami, je prvi korak, da preizkusite uspešnost svojega spletnega mesta in si oglejte, kje danes stojite.
Ko imate osnovo, na kateri strani vaši strani stoji zmogljivost, lahko začnete s potrebnimi izboljšavami povečati hitrost prenosa. Odličen kraj za začetek je verjetno s podobami vašega spletnega mesta. Preveč velike slike so krivci # 1, ko gre za počasna mesta za nalaganje, zato lahko optimizacija slik za spletno dostavo resnično pomaga vaši strani z vidika delovanja.
Resničnost je, da so izboljšana učinkovitost spletne strani in hitre hitrosti prenosa korist, ki jo bodo vsi obiskovalci cenili. Navsezadnje se nihče ni nikoli pritožil, da je spletno mesto naloženo "prehitro", vendar če spletno mesto traja predolgo, bo to popolnoma zavrnilo ljudi, ali se odzivno "prilega" na zaslonu ali ne.
2. Pametno vsebinsko hierarhijo
Ko je spletna stran prikazana na velikem zaslonu, lahko na različne načine postavite vsebino zaradi znatne razpoložljive nepremičnine na zaslonu. Na zaslonu lahko na zaslonu pogosto namestite pomembna sporočila in slike, novice, informacije o dogodkih in navigacijo po spletnem mestu. To omogoča obiskovalcu enostavno in hitro skeniranje vsebine celotne strani in se odloči, kaj je zanje pomembno.
Ta scenarij se precej dramatično spremeni, ko si vzamete to zasnovo spletnega mesta in ga spremenite za naprave z manjšim zaslonom, kot je mobilni telefon. Nenadoma delate z delom nepremičnine, ki ste jo imeli prej. To pomeni, da se morate odločiti, kaj se bo najprej prikazalo na spletnem mestu, kaj bo sledilo, itd. Namesto vsega, kar je videti hkrati, imate verjetno le prostor, da pokažete eno ali dve stvari (od katerih je ena verjetno navigacija). To pomeni, da je treba sprejeti odločitve hierarhije. Na žalost, kar pogosto določa, kaj prihaja prvi na zaslonu, nato pa drugo itd. Je način kodiranja same strani. Najlažje je pri izdelavi odzivnega spletnega mesta prikazati karkoli najprej v kodi najprej na zaslonu, ki ji sledi drugi element v kodi in tako naprej. Na žalost je tisto, kar je morda najpomembnejše na eni napravi, morda drugače kritično. Resnično odzivna spletna stran razume, da bi se morala hierarhija vsebine spremeniti glede na različne situacije in biti pameten glede tega, kaj prikaže.
Izboljšave tehnik postavitve CSS, vključno s CSS Grid Layout, Flexbox in drugo, omogočajo spletnim oblikovalcem in razvijalcem več možnosti pri inteligentni postavitvi vsebine, namesto da bi jih zmotili natančni vrstni red vsebinskih področij v HTML kodi. Uporaba teh novih tehnik postavitve bo postala še pomembnejša, saj se krajina naprave in potrebe uporabnikov našega spletnega mesta še naprej razvijajo.
3. Izkušnje, ki se zavedajo prednosti in pomanjkljivosti naprave
Ostanite na temo naprav - vsaka naprava, ki jo nekdo lahko uporabi za obisk vaše strani, ima tako prednosti in slabosti, ki so neločljivo povezane s to platformo. Odlična odzivna stran razume zmogljivosti in omejitve različnih naprav in jih uporablja za ustvarjanje prilagojenih izkušenj, ki so najbolj primerne za katero koli napravo, ki jo obiskovalec lahko uporablja v tem trenutku.
Na primer, mobilni telefon vključuje številne funkcije, ki jih ne bi našli v tradicionalnem namiznem računalniku. GPS je en primer funkcije, ki je osredotočena na mobilne naprave (ja, lahko dobite tudi splošne informacije o lokaciji na namiznih računalnikih, vendar je naprava GPS bolj natančna). Vaša spletna stran lahko uporablja podatke o GPS-ju, da pametno pošilja osebi zelo podrobne in specifične informacije o smeri po korakih ali posebne ponudbe, ki temeljijo na natanko takrat, ko so v tem trenutku.
Drug primer tega principala v praksi bi bila spletna stran, ki razume, kakšen prikaz zaslona uporabljate, in pošlje slike, ki so najbolj primerne za ta prikaz. Če imate zaslon z visoko gostoto slikovnih pik, se lahko odločite, da boste na ta zaslon poslali slike višje kakovosti. Te iste slike bi bile nesmiselne na manj zmogljivem zaslonu, vendar bi bila dodatna kakovost izgubljena, medtem ko bi bila dodatna velikost datoteke prenesena brez dejanskega razloga.
Resnično velika odzivna spletna mesta štejejo za celotno uporabniško izkušnjo in si prizadevajo prilagoditi to izkušnjo, ki temelji na vrsti naprave ali velikosti zaslona, pa tudi na drugih pomembnih vidikih strojne opreme.
4. Vsebina s kontekstom
Na začetku je odzivno spletno oblikovanje prejel svoje ime zaradi ideje postavitve spletnega mesta, ki se odziva na različne velikosti zaslona, vendar se lahko odzove na veliko več kot samo velikost zaslona. Na podlagi prejšnjega primera uporabe prednosti in slabosti naprave lahko uporabite te in druge podatke, kot sta datum in čas, da bi resnično prilagodili izkušnjo spletnega mesta.
Predstavljajte si spletno stran za velik dogodek trgovine. Medtem ko bo odzivna spletna stran spremenila postavitev strani na spletnem mestu, da bi lahko merila z različnimi zasloni, lahko uporabite tudi datum, s katerim določite vsebino, ki je najpomembnejša za prikaz. Če je čas pred dogodkom, boste verjetno želeli prikazati podatke o registraciji. Če se dogodek dejansko dogaja v tem trenutku, registracija morda ni najpomembnejša vsebina. Namesto tega lahko ugotovite, da je dnevni red dogodkov bolj kritičen, saj je bolj ustrezen trenutnim potrebam tega uporabnika.
Če nadaljujete stvari, se lahko dotaknite GPS naprave naprave, da ugotovite, kje so dejansko na sejmu. Lahko jim daste interaktivne vsebine glede na njihovo lokacijo, tako da jim prikažete bližnje kabine ali seje, ki jih želite začeti.
5. Dostopnost
Končni primer, kako bomo spletno mesto resnično odgovorili na potrebe obiskovalca, je razmišljati o dostopnosti spletne strani . Spletne strani bi morali imeti možnost, da jih uporabljajo čim več ljudi, vključno s tistimi z invalidnostjo. Vaša spletna stran bi morala imeti možnost, da jo uporablja nekdo, ki potrebuje bralnik zaslona ali drugo programsko opremo za pomoč pri dostopanju do njene vsebine. Na ta način se vaša stran odziva na njihove potrebe, ker ste zagotovili, da je izkušnja, medtem ko je drugačna za obiskovalce invalidov, še vedno primerna.
Z odzivom na čim več podatkovnih točk, ne samo velikosti zaslona, je spletna stran lahko toliko več kot le "prijazna za mobilne naprave". Lahko postane resnično odzivna izkušnja v vsakem smislu fraze.