Van " reagáló webhely "? Ez egy oldal, amelynek elrendezése megváltozik egy látogató eszközén és képernyőméretében. A felelősségteljes webes tervezés ma már az iparág legjobb gyakorlata. A Google javasolja, és az interneten több millió webhelyen találhatók. Van azonban egy nagy különbség a weboldalnak, amely egyszerűen "illik" a különböző képernyőméretekre és egy olyan webhelyre, amely valóban érzékeny.
Rutinszerűen látom, hogy a vállalatok újratervezik weboldalukat, és kinyomozzák a sajtóközleményt, amely kiemeli az új, mobilbarát design előnyeit. Amikor meglátogatom azokat a webhelyeket, amit gyakran találok, az az elrendezés, amely valóban skálázik és megváltozik, hogy illeszkedjen a különböző képernyőkhöz, de ez annyit jelent, hogy a válaszkészségre gondolnak. Ez nem elég. A valóban érzékeny weboldal több mint egyszerűen egy kisebb vagy nagyobb képernyőhöz illeszkedik. Ezen a webhelyeken a következő fontos tulajdonságok is megtalálhatók.
1. Optimalizált teljesítmény
Senki nem szeretne várni egy weboldal betöltésére, és ha valaki olyan mobileszközt használ, amelynek kapcsolata kisebb lehet, mint az ideális, akkor szükség van egy webhely gyors betöltésére.
Tehát hogyan optimalizálja a webhely teljesítményét? Ha egy új webhelyet újratervezés részeként kezdesz, akkor meg kell tennie annak a pontnak, amellyel a projekt részeként teljesítményköltséget hozhat létre . Ha egy meglévő webhelyen dolgozik, és nem a semmiből kezdődik, az első lépés az Ön webhelyének teljesítményének tesztelése, hogy megnézze, hol állsz ma.
Ha van egy kiindulási alapja, hogy webhelye teljesítményt nyújt, akkor elkezdheti megtenni a szükséges fejlesztéseket a letöltési sebesség növelése érdekében. Nagyszerű kiindulópont valószínűleg webhelye képeihez. A túl nagy képek a # 1-s bűnösök, amikor a lassú betöltőhelyekről van szó, így a képek webes megjelenítésre való optimalizálása valóban segítheti webhelyét teljesítmény szempontjából.
A valóság az, hogy a weboldal teljesítményének javítása és a gyors letöltési sebesség olyan előny, amelyet minden látogató nagyra értékel. Végül is senki sem panaszkodott arra, hogy a webhely "túl gyorsan" töltődik be, de ha egy webhely túl sok időt vesz igénybe a betöltéshez, teljesen el fogja fordítani az embereket, hogy reagálnak-e a képernyőre, vagy sem.
2. Smart Content Hierarchia
Amikor egy weboldal megjelenik egy nagy képernyőn, akkor a tartalom széles skálájára különféle módon állíthatja le a tartalmat. A képernyőn egyszerre fontos üzenetek és képek, hírek frissítései, eseményinformációi és webhely-navigációi érhetők el. Ez lehetővé teszi a látogató számára, hogy könnyen és gyorsan átvizsgálja az egész oldal tartalmát, és eldöntsék, mi számít számukra.
Ez a forgatókönyv drámaian megváltozik, amikor az adott webhelytervezést átalakítja, és átalakítja a kis képernyős eszközökhöz, például egy mobiltelefonhoz. Hirtelen a képernyőn lévő ingatlanok töredékével dolgozik. Ez azt jelenti, hogy eldöntheti, hogy mi jelenik meg először a webhelyen, mi követi azt stb. Ahelyett, hogy mindent látni egyszerre, akkor valószínűleg csak egy vagy két dolog jeleníthető meg (amelyek közül az egyik valószínűleg navigáció). Ez azt jelenti, hogy hierarchikus döntéseket kell hozni. Sajnos, mi határozza meg gyakran, hogy mi következik be először a képernyőn, majd a második, stb. A legegyszerűbben, amikor felépít egy érzékeny webhelyet, megjeleníti a képernyőn először a kódot, majd a kód második elemét és így tovább. Sajnos az egyik eszköz legfontosabb eszköze nem lehet annyira kritikus a másiknál. A valóban érzékeny webhely úgy érti, hogy a tartalom hierarchiája a különböző helyzetektől függően változik, és okosnak kell lennie arról, hogy mit jelenít meg.
A CSS-elrendezési technikák - köztük a CSS Grid Layout, a Flexbox és egyéb - fejlesztései lehetővé teszik a webes tervezők és a fejlesztők számára, hogy több lehetőséget biztosítsanak a tartalom intelligens megjelenítésére, ahelyett, hogy a HTML-kód tartalmi területeinek pontos sorrendbe kerülnének. Ezen új elrendezési technikák kihasználása még fontosabbá válik, mivel a készülék tájképe és a webhelyünk felhasználói igényei tovább fejlődnek.
3. Tapasztalatok, amelyek figyelembe veszik a készülék erősségeit és gyengeségeit
Az eszközök témakörében való tartózkodás - minden olyan eszköz, amelyet valaki használhat webhelyének meglátogatásához, mind az erősségekkel és gyengeségekkel rendelkezik, amelyek az adott platformhoz tartoznak. A nagy érzékenységű weboldal megérti a különböző eszközök képességeit és korlátait, és felhasználja azokat személyre szabott élmények létrehozására, amelyek a leginkább alkalmasak arra a készülékre, amelyet a látogató ebben a pillanatban használhat.
Például egy mobiltelefon számos olyan funkciót tartalmaz, amelyet nem találhat hagyományos asztali számítógépen. A GPS egy példa a mobilközpontú szolgáltatásra (igen, általános helyadatokat is szerezhet az asztali számítógépeken is, de az eszköz GPS sokkal pontosabb). A webhely GPS-információkat használhat arra, hogy okosan küldjön egy személynek nagyon részletes és konkrét lépésenkénti irányú információkat vagy különleges ajánlatokat, attól függően, hogy pontosan hol vannak abban a pillanatban.
A gyakorlatban egy másik példa erre a weboldalra vonatkozik, amely megérti, hogy milyen képernyőképet használ, és olyan képeket küld, amelyek a legmegfelelőbbek a megjelenítéshez. Ha magas képpontsűrűségű képernyő van, akkor dönthet úgy, hogy magasabb minőségű képeket küld a képernyőre. Ugyanezek a képek egy kevésbé alkalmas képernyőn értelmetlenek lennének, és az extra minőség elveszne, míg az extra fájlméretet tényleges ok nélkül letöltenék.
A nagyszerű válaszadók a teljes felhasználói élményt és a tapasztalatot úgy alakítják ki, hogy ne csak a készülék típusát vagy méretét, hanem a hardver egyéb fontos szempontjait is figyelembe vegyék.
4. A tartalom kontextusban
Kezdetben a reaktív webes formatervezés azért kapta a nevét, mert a weboldal elrendezésének elgondolását különböző képernyőméretekre reagálta, de sokkal többet tud válaszolni, mint a képernyőméret. Az eszköz erősségeinek és gyengeségeinek korábbi példáján alapulva használhatja azokat, valamint más adatokat, például a dátumot és az időt, hogy valóban személyre szabhassa a weboldal élményét.
Képzeljen el egy weboldalt egy nagy szakmai kiállításra. Miközben a reagáló weboldal megváltoztatja a webhely oldalainak elrendezését a különböző képernyők méretarányához, akkor a dátumot is használhatja annak meghatározásához, hogy a tartalom melyik legfontosabb a megjelenítéséhez. Ha az esemény előtti időtartam van, akkor valószínűleg láthatóan megjeleníti a regisztrációs adatokat. Ha azonban az esemény valójában abban a pillanatban történik, a regisztrálás nem feltétlenül a legfontosabb tartalom. Ehelyett eldöntheti, hogy a napi események ütemezése kritikusabb, mivel sokkal fontosabb a felhasználó azonnali szükségleteinek kielégítésére.
Ha további lépéseket vesszük a dolgokra, megérinthetnénk a készülék GPS-jét, hogy meghatározzuk, hol vannak a vásáron. Interaktív tartalmat adhat nekik helyük alapján, bemutatva azokat a közelben lévő fülkéket vagy munkameneteket, amelyekkel elkezdhetjük.
5. Elérhetőség
A végső példa, hogy megvizsgáljuk, hogy egy webhely valóban reagál-e a látogató igényeire, az a weboldal elérhetõségének gondolata. A weboldalakat a lehető legtöbb embernek kell használnia, beleértve a fogyatékkal élőket is. Az Ön weboldalának képesnek kell lennie arra, hogy olyan személy használhassa, akinek szüksége van egy képernyőolvasóra vagy más segédprogramra a tartalom eléréséhez. Ily módon a webhely az igényeire reagál, mivel biztosította, hogy a tapasztalat, bár eltérő a fogyatékkal élő látogatók számára, még mindig megfelelő.
Ha a lehető legtöbb adatpontot választja, és nem csak a képernyőméretet, a weboldal sokkal több lehet, mint csupán "mobilbarát". Ez a kifejezés minden értelemben valóban érzékeny élményt jelenthet.