Vegye be a feltételes terhelést a tervezésbe a jobb UX érdekében

Számos webhely lemarad a mobilhasználati görbe mögött, mivel nem veszi figyelembe a reagáló webdesign (RWD), a progresszív fejlesztés (PE) és / vagy az adaptív webdesign (AWD) elemeket. Ezek a webhelyek gyenge felhasználói élményt (UX) és végül magasabb webhely-visszatérési arányt biztosítanak.
Ha webhelyén még nem szerepel az RWD tervezés, akkor fontolóra kell vennie a reagáló formatervezés feltételes feltöltésének ötletét, amelyről Jeremy Keith először írt 2011 decemberében.

Mi a feltételes betöltés?

A feltöltési folyamat a tartalom releváns részeinek a saját HTML szakaszaiba történő kiosztása, majd csak a felhasználó kérésére vagy bizonyos böngészési feltételek teljesülésekor történő betöltése, például amikor a képernyőn a mobil eszközön észlelik a képernyő méretét.

A nagyobb célkitűzés részeként, amely minden eszközön érzékeny felhasználói élményt nyújt, a feltételes betöltést a tartalmi hierarchia sémájával együtt meg lehet szervezni egy progresszív közzétételi interakciós technika mellett, amelyet évek óta használnak az alkalmazásfejlesztésben. Mindig prioritást szeretne kapni a tartalomra a forma és a funkció optimalizálása érdekében; például nem szükséges teljes weblapokat betölteni a mobil böngésző képernyőire, ha a felhasználók csak a tartalom egy meghatározott részét keresik.

Miután a tartalom prioritást élvez, a következő lépés a tartalmi hierarchia létrehozását egyesíti a progresszív közzététel ellenőrzésének módjával; végül ezeket a döntéseket a tartalomtulajdonosok hozzák meg. Ennek ellenére azt szeretné ellenőrizni, hogy a legrelevánsabb anyag minden eszközön megjelenik-e, és kövesse ezt a tartalom fontosságának következő szintjére, és így tovább az egész weboldalon (A ábra ).

A ábra

Ez a kép annak bemutatása, hogyan kell / hogyan lehet a weboldal tartalmát megszervezni egy feltételes betöltési hierarchia alkalmazásakor.

Nem olyan nehéz, mint gondolnád, hogy a feltételes betöltést beépítik az általános mobil- és eszköz-agnosztikus webdizájn-projektekbe. A CSS-hez multimédiás lekérdezések adhatók, amelyek lehetővé teszik a stílusok megcélzását az eszköz számos tulajdonsága alapján, például a képernyő szélessége, tájolása és felbontása.

Példa a feltételes betöltésre

Több olyan példa létezik olyan webhelyekre, amelyek feltételes feltöltését alkalmazzák a mobil kijelzőn; különösen a Wikipedia kiváló szabványt kínál a mobil tartalmak bemutatására. A Wikipedia magában foglalja a feltételes feltöltést a legmagasabb szintű tartalom bemutatásával: cím, interakciós navigáció, alcím, a fő oldalsáv-információk (beleértve a képet, ha vannak), a vonatkozó statisztikák és a bevezetés. A B. ábra a Goliad-csata bemutatott tartalmát mutatja egy iPhone-n, a Chrome böngészővel megjelenítve.

B. ábra

A bevezető tartalom mentén gördülve bemutatja a cikk alcímeinek fokozatos feltárását ( C ábra) . A Háttér, az Előjáték stb. Alcímek lehetőséget adnak a felhasználó számára, hogy többet olvassa el az érintőképernyőn egy egyszerű érintéssel, hogy megnyissa az adott részt. Ez lehetővé teszi a felhasználók számára, hogy csak a kívánt információkat érjék el.

C. ábra


A D ábra mutatja annak részét, amely a Prelude kiválasztásakor jelenik meg.

D. ábra

További források

Tudjon meg többet a feltételes betöltésről és a fokozatos közzétételről, ha elolvassa ezeket a kiegészítő forrásokat a TechRepublic-ból és más forrásokból.

  • Hogyan kezdjük el a Responsive Web Design használatával - elmagyarázom a Responsive Web Design mögött meghúzódó koncepciót és módszereket, néhány egyszerű példával együtt, amelyek segítik az RWD megismerését.
  • Médialekérdezések létrehozása a Responsive Web Design alkalmazásban - Megmutatom, hogyan hozhat létre médiakérdezéseket, amelyek lehetővé teszik a stílusok megcélzását az eszköz számos tulajdonsága alapján, például a képernyő szélessége, tájolása és felbontása.
  • A Chrome-bővítő Responsive Inspector lehetővé teszi a médiakeresések előnézetét - bemutatom a Chrome számára hasznos kiegészítőt, amely lehetővé teszi az aktív URL-ekkel kapcsolatos médiakérések ellenőrzését és megértését, hogy az érzékeny webhelyek miként működnek különböző képernyőméretekben.
  • Rugalmas webdesign áttekintés: Beágyazás reagálva - Ez az eszköz lehetővé teszi a rögzített szélességű beágyazott médiatartalom rugalmas és rugalmasan reagáló objektumokká történő átalakítását. Nézze meg az eszköz működését.
  • Progresszív közzététel - a legjobb interakció-tervezési technika? - Frank Spillers a Demystifying Usability webhelyről bemutat néhány történetet és a szoftvert, illetve a webfejlesztési szempontokat.
  • Progresszív közzététel a felhasználói felületeken - Alexander Dawson a Six Revisions webhelyről lebontja a jó, a rossz és a közömbös közönséget a progresszív közzététel iránt.

© Copyright 2021 | mobilegn.com