A webes tervezés progresszív fejlesztésének legjobb gyakorlata

A weboldalak építése rendkívül összetett számos gyorsan változó alkatrésszel. A web design közösség célja, hogy csökkentse a bonyolultságot, és csökkenti a hiba lehetőségét a létrehozási folyamat minden szakaszában.

Fokozatos javítás egy ilyen ötlet a web designban, amelynek célja csökkenti a hibákat és következetes felhasználói élményt nyújt a fedélzeten keresztül. A koncepció saját Wikipedia-oldala van, amely ezt a módszert ismerteti teljesen hozzáférhető tartalom, a továbbfejlesztett funkciók megjelenítése csak akkor, ha a böngésző támogatja.

Könnyű megérteni a progresszív fejlesztést, de nem olyan könnyű alkalmazni közvetlenül a tervezési munkájára. Szeretnék néhányat lefedni a valós projektek fokozatos fejlesztésének legjobb gyakorlata nak nek segítsen a tervezőknek tartósabban gondolkodni munkafolyamatukkal kapcsolatban.

1. A progresszív fejlesztés megértése

A progresszív fejlesztés elmélete azt javasolja kezdődik egy egyszerű weboldal amely minden böngészőben működik, így minden látogató számára elérhető. Ezután adjon hozzá lehetőségeket, amikor csak lehetséges.

Ez az ellenkezője a kecses degradációnak, amely alapértelmezés szerint tartalmazza az összes funkciót, majd lebomlik, ha valami nem működik.

A progresszív fejlesztés jobban megfelel az általános felhasználói élménynek, hiszen az a magában áll csak a szükséges elemeket tölti be. Minden webböngésző támogatja a szöveget (és általában képeket). CSS nélkül ez az információ káprázatosnak és ízletesnek tűnik, de elérhető lesz.

Ez Listák listája A cikk szerint a progresszív fejlesztés tartalmi első val vel későbbi stílusok és dinamikus elemek. A szemantikus HTML tartalmát bármi más előtt kell szállítani.

Az általunk használt fejlett CSS és JavaScript széles körben támogatott, de ha a progresszív fejlesztés elveit szeretnénk követni, azokat luxusnak kell tekinteni.

Az alábbiakban ismertetjük a progresszív fejlesztés főbb jellemzőit, amelyeket figyelembe kell venni:

• Szemantikus jelölés minden tartalomhoz
• Users' böngésző beállításai tiszteletben kell tartani
• A tartalomnak és az alapvető funkcióknak kell lennie minden felhasználó számára elérhető
• A feltűnő JavaScript csak betöltve van olyan környezetben, amely támogatja azt

A front-end fejlesztés technológiai korlátait elsősorban a böngésző kompatibilitása határozza meg. A progresszív fejlesztés visszajut az alapokba, gondolkodva arról, hogy a csupasz csont legegyszerűbb weboldal nézhet ki. Innen lehet fejlettebb funkciók tervezése, mint a CSS3 tulajdonságai.

De mi van a böngészőkkel, amelyek nem támogatják a modern CSS3-at? Ez az a hely, ahol olyan oldalak jönnek létre, mint a Can I Use. El kell döntenie, hogy melyik funkciót érdemes megvalósítani, és döntéseket hozni webhelyének célközönségére.

2. A stíluslapok megélhetése

A legtöbb böngésző ma támogatja az összes szükséges alapvető tulajdonságot. De A fejlett CSS3 továbbra is problémát jelent a régi felhasználók számára, és a progresszív fejlesztés megoldást kínál.

Ahelyett, hogy visszamenőleges módszereket keresne az új funkciók fenntartásához, először is aggodalomra ad okot megfelelő elrendezési struktúrák.

Szemantikus HTML és CSS jelölés írása, amely a lehető legtöbb aktív böngészőben működik (a régi böngészők támogatása, mint az IE5 támogatás nem szükséges).

Vegyük például ezt a JSFiddle-t, amely két oldalsó sávot használ..rögzített), és egy folyékony tartalom terület (.folyadék). Ha törli az összes CSS-t, és újra megismétli a kódot, akkor az első oszlopban, majd a másodikban, és végül az utolsó.

Egyes fejlesztők inkább a tartalmi oszlopot (.folyadék) először jelenik meg a HTML-ben. Itt jön a progresszív fejlesztés, és az alternatív CSS megoldások életképessé válnak.

A HTML két elsődleges célja a következő:

• Teljesen szemantikus és érvényes kód
• A következetes tapasztalat mindenkinek

E célok elérésének legegyszerűbb módja az, hogy kezdj semmitől és feldolgoz, mivel a legtöbb progresszív fejlesztő javasolja.

Ha a kódja jól működik a CSS-nél mind letiltva, mind engedélyezve, akkor mindenki számára elfogadható megoldást kínál.

Érdemes megfontolni milyen ponton valamit támogat. A Microsoft már elvesztette az IE6 támogatását, így a böngészőt futtató felhasználók esetleg nem érik meg az időt.

De még mindig van egy nagy kérdés: ha egy böngésző nem támogatja a modern CSS-t, mit kell tennem?

Egyszerűen írjon kódot, amely működik nélkül azt, és a modern CSS-t progresszív fejlesztésnek tekinti. Ez a progresszív fejlesztés módszertanának szépsége.

Nem kell lemaradni, mert te vagy alapvetően feltételezve, hogy az alapértelmezés szerint semmi sem támogatott.

A progresszív továbbfejlesztési módszerek arra irányulnak, hogy a webhelyet akkor is használhassák, ha valamit nem támogatnak, de ha támogatott, annál jobb.

Meg kell fontolnia hogyan történik a tartalom CSS nélkül. Például amikor letiltom a CSS-t a Transmit weboldalán, a tartalom még mindig organikusan folyik az oldalról.

Igen, ez csúnya, és igen, úgy érzem, elvesztettünk húsz éves előrehaladást… de működik.

3. A JavaScript kezelése

Érdemes megemlíteni, hogy minden olyan JavaScript-probléma, amelyet a fejlesztési folyamat során behatolhat, trükkös és egyedi. Ha egy új projektet fokozatosan fejlesztett ki, fel kell sorolnia az összes szükséges JS-alapú funkciót, és fontolja meg, hogyan lehetne JavaScript nélkül.

Ehhez sok internetes kutatásra van szükség ahhoz, hogy érvényes megoldásokat találjanak. Aaron Gustafson nagyszerű blogbejegyzést írt a különböző problémák megoldásaival, például az Ajax meta frissítésével az iframe-ben lévő tartalomra..

A JavaScript lapok létrehozásakor jó ötlet használjon valódi azonosító értékekkel rendelkező horgony kapcsolatokat. Így, ha a JavaScript le van tiltva, a fülek még mindig láthatók és elérhetõk a horgonyérték segítségével. Aaron egy másik darabot írt az A List Apart-ról, amely egy általánosabb áttekintést tartalmaz arról, hogyan kell gondolni ezekre a problémákra.

Itt van egy másik példa. Tegyük fel, hogy van egy linked, amely dinamikusan betölti a tartalmat. A href az érték üres, mert minden betölti a JavaScript-et az PrevDefault () módszerrel.

Ehelyett bölcs dolog lenne beállítani href tulajdon mutasson egy másik oldalra ahol a tartalom természetesen betölthető, de a látogató csak akkor látja ezt az oldalt, ha a JavaScript le van tiltva.

A progresszív fejlesztés több, mint a JavaScript, de a webfejlesztés minden évben tovább fejlődik, nem kétséges, hogy a JavaScript jelentős szerepet játszik.

Feltételezzük, hogy minden le van tiltva, és felfelé. Ez magában foglalhatja a beágyazott widgetekkel kapcsolatos problémákat is, amelyek nincsenek vezérelve, a

Gondolj a JavaScript szolgáltatásokra is hiányzik az átfogó böngésző támogatás. Ez magában foglalja a letöltési API-t, a push API-t, a nyíl funkciós szintaxist, vagy akár a modern könyvtárak támogatása nélküli böngészőket, mint a jQuery.

Minden funkció szükséges egyedi tesztelés egyedi megoldással.

A fokozatosan továbbfejlesztett JavaScript lényege a szkriptek nélkül működő tartalom létrehozása. Ez kezdetleges felhasználói élményhez vezethet, de ez rendben van, amíg a weboldal használható, és a tartalom hozzáférhető.

Ha élő tesztet szeretne tenni, akkor tipikusan tiltsa le a CSS-t és a JavaScript-et minden nagyobb böngészőben hogy megtudja, hogyan működik a webhely. Érdemes megfontolni olyan kiterjesztések használatát is, mint az A-Tester a WCAG megfelelőségéhez.

A progresszív fejlesztéssel rendelkező JavaScript nagy téma. Íme néhány hozzászólás, amelyek segítenek mélyebben ásni:

• Progresszív javítás! = “Nincs JavaScript”
• Az interakció kulcsfontosságú: progresszív fejlesztés és JavaScript
• Progresszív fejlesztés: a tartalomról szól
• Progresszív fejlesztés alkalmazása, ha a JavaScript úgy tűnik, mint egy követelmény

Ahol a progresszív fokozódás elmarad

Bár a progresszív fejlesztés ragyogó ötlet szinte minden típusú modern webhelyre, egyszerűen lehet nem alkalmazható olyan projektekre, amelyek célja a webes technológia korlátainak \ t.

Például, ez a módszertan nem jó megoldás az olyan webalkalmazásokra, amelyek kizárólag az Ajax hívásokon működnek. Ez jó választás a hozzáférhetőséghez? Nem, természetesen nem. De ha ez lenne a helyzet, akkor a Codrops legtöbb bemutatója még nem létezne. Neked kell emlékezzen a célközönségre.

Egy üzleti weboldal valószínűleg nem rendelkezik olyan közönséggel, amely érdekes az új CSS3 perspektivikus tulajdonságait illetően, de a webes fejlesztők a tökéletes közönség az ilyen speciális funkciókhoz.

A progresszív fejlesztés csak a webalkalmazásokhoz tartozik egyszerűen nem érdekel, hogy visszamegy az időben. Rájöttem, hogy ezek a webalkalmazások kevések és messze vannak, de a fejlesztők szeretik az előrehaladást, és bizonyos esetekben célszerű lehet az új technológiák előremozdítása, a mögötte lévők elhagyása.

Támogatom az általános webprojektek progresszív fejlesztését (vagy akár kecses degradációját, az Ön választását). De rájöttem, hogy ez nem tökéletes megoldás mindennek. Valójában nincs tökéletes megoldás. Mindez a közönség igényeihez és a projekt céljaihoz vezet.

További irodalom

Ha folyamatosan webes projekteket épít, érdemes megfontolni a munkafolyamat fokozatos fejlesztését. Sokkal könnyebb, mint az első pillantásra, és mindez az alapokkal kezdődik. A progresszív fejlesztést körülvevő legtöbb téma csak gyakorlatot és tesztelést igényel. Próbálja ki a cikkben szereplő javaslatokat, és nézze meg, hogy mi a legjobban megfelel a munkafolyamatának.

Ha többet szeretne megtudni a progresszív fejlesztésről, nézze meg ezeket a kapcsolódó bejegyzéseket:

• A progresszív fejlesztés megértése
• Progresszív fokozás: mi az, és hogyan kell használni?
• A JavaScript-függőség visszafelé: Mítosz-Busting Progressive Enhancement