8 lépés a rugalmas webdesign kialakításához

A Paravel számára az adaptív webdesign legnehezebb és legérdekesebb aspektusa a rugalmas jellege volt. Folyamatosan kereskedünk a pixel tökéletesség iránti elkötelezettségünkkel, és átfogjuk az internetet annak, ami valójában; folyadék. Itt bemutatunk néhány lépést, amelyek segítenek áttérni a rugalmas webdesignra, vagy ahogy én nevezni akarom, a „Gettin’ Flexy ”-re.

Reszponzív webdesign, Ethan Marcotte ( @ beep a Twitteren) három alapelve van:

  • Rugalmas rácsok: a tartalom százalékos alapú folyadékoszlopai.
  • Média lekérdezések: varázslatos eszköz a CSS megváltoztatására a böngésző aktuális állapota alapján.
  • Rugalmas média: az olyan tartalmaknak, mint a képek és a videók, a böngésző méreteivel kell méretezniük.

Észre fogja venni, hogy ezen összetevők közül kettőnél szerepel a „rugalmas” kifejezés. Ez a legfontosabb megkülönböztető tényező az adaptív webdesign és a többi webdesign-megközelítés között. Nézzük meg, hogyan lehetünk rugalmasak.



Soha ne használja a maximális méretarányt

Esetenként, a webfejlesztők hozzáadnak egy kísérletet az iOS tájékozódási hibájának felülírására maximális skála = 1 Övékéhez meta name = 'nézetablak' címke. Ne csináld ezt. Az a sajnálatos eredmény, hogy a felhasználók nem tudják nagyítani az oldalt (csipet-nagyítás gesztussal). Ez rossz gyakorlat és óriási hozzáférhetőségi aggály. Ha azt akarja, hogy webhelye rugalmas legyen, akkor nagyítani kell.

Tegye ezt: megnyeri az internetet!

Ez tájékoztatja a böngészőt arról, hogy állítsa be az ablak szélességét az eszköz szélességéhez anélkül, hogy felülírná a felhasználói igényeket. Ezután a CSS-ben adja hozzá ezt a vadonatúj szabályt:

/ * Szüksége lesz előtagokra. @ -ms-viewport, @ -o-viewport stb ... * /
@viewport {
szélesség: eszköz-szélesség;
}

Ez egy folyamatban lévő W3C specifikáció, amely a nézetablak információinak CSS-be történő áthelyezéséhez íródott. Az IE10 és az Opera böngészők támogatják ezt. Folytasd, és kezdd el ezt gyártási helyekbe forgatni.

01. Átadás ellenőrzése

Vicces tény: A Paravelnél utáltuk az adaptív webdesign-ot, amikor először megjelent. Úgy gondoltuk, hogy ez egy hatalmas félrelépés a web számára. „Mi van a képmérettel? Hogyan adja el ezt az ügyfeleknek? Az emberek ezt nem akarják, az emberek szeretik a zoom-ot! ” - minden tétovázásunk benne volt a könyvben ... aztán túljutottunk önmagunkon.

Büszkék vagyunk a pixel tökéletes CSS-re. Ez még mindig nyilvánvaló az olyan oldalakon, mint A sok arca vagy Az elveszett világ vásárai ahol hatalmas, 18 000 képpontos PSD-ket kódoltunk egymás mellé a böngészővel.

Ezek a webhelyek még mindig jól néznek ki asztali számítógépeken, de az apró képernyők világában kétségkívül elveszítik fényüket

Ezek a webhelyek még mindig jól néznek ki asztali számítógépeken, de az apró képernyők világában kétségkívül elveszítik fényüket

A reszponzív webdesign elutasításának fő oka az volt, hogy a szokásos módon veszélyeztette az üzletet. Amint az adaptív tervezéssel kísérleteztünk mellékprojekteken, fokozatosan világossá vált, hogy ez egy igazán hasznos technika. Csak akkor kezdtünk el átadni az irányítást, amikor elkezdtünk dolgozni egy konferencián Walesben.

A Do Előadások az emberek egy reszponzív, HTML5 videóoldal ötletével kerestek meg bennünket, hogy kiemeljék elképesztő konferenciájukat. A weboldal tervezése és felépítése során adaptív megközelítéssel kezdtük. Három különböző rögzített szélességű töréspontot építettünk ki, feltételezve, hogy a rugalmas rácsok túlteljesek, és csak a „showoff” tervezők számára készültek.

A böngészőben azonban a tervezés skizofrénnek tűnt: hirtelen meggondolta magát különböző töréspontokon. Az a vágyunk, hogy minden lépésben ellenőrizzük a dizájnt, a felhasználó dezorientálódásához vezetett, ha átméretezték a böngészőt. Tehát tartalmunkat folyékony rácsra helyeztük, és egységesebb felhasználói élményt hoztunk létre a böngészőben.

02. Fogadja a folyékonyságot

Korosztályok óta kergetjük ezeket a népszerű eszközfelbontásokat. Először 800x600 volt. Aztán jött egy blogger, aki 1024x768-at nyilvánított offcial „átlagos” képernyőfelbontásnak, így mindannyian biztonságos 960px szélességűvé tettük webhelyeinket. Aztán megjelent az iPhone, így külön 320px széles webhelyeket készítettünk ... aztán megjelent az iPad, és mindannyian 768px széles változatokat készítettünk a webhelyeinkről. Ennek eredményeként mostantól egy webhely három külön verziója volt frissítésre és karbantartásra.

A „közös töréspontok” gondolata hazugság, és ezek üldözése, ahogy Texasban szoktuk mondani, „szélbe köp”. Vessünk egy pillantást csak pár a ma megvásárolható Android-eszköz felbontások közül:

Creative Commons - Dave Rupert

Creative Commons - Dave Rupert

A dolgok olyan gyorsan változnak ebben az iparágban, hogy a pixelekre vagy a pixelsűrűségre nincs garancia. Jobb, ha folyékonyan gondolkodunk, és kifejlesztünk egy rugalmas rendszert, amely képes kezelni az összes eszközt, függetlenül hitvallásuktól.

03. Gondolj arányosan

Az olyan fogalmak, mint a Aranymetszés már régóta léteznek a tervezésben, és az arány alapú tervezés nem idegen a statikus szélességű webes tervezésnél. Munkatársam, Trent Walton mondja a legjobban:

'Ha válaszul gondolkodunk az internetről, az azt jelenti, hogy arányokban gondolkodunk, nem képpontokban.' - Trent Walton, Újradefiniált

Az adaptív tervezés során a kialakítás nemcsak pixel tökéletes megjelenítés, hanem relatív arányú rendszer. Töltsön el időt arra, hogy átgondolja a hogyan a tervezés elemei kapcsolódnak egymáshoz és ahhoz, hogy ezek a kapcsolatok hogyan változhatnak.

Wikipedia Commons

Wikipedia Commons

04. Használjon min-szélességet

A választott média lekérdezés típusa végső soron befolyásolja a kód méretezhetőségét. Nagyon ajánlom a „mobil először” alkalmazást az adaptív webdesign megközelítésekor, de kidolgoztam egy praktikus táblázatot, amellyel eldöntheti saját döntését.

'Asztal leállva'„Először mobil”
Kezdj nagyot, te lentKezdje kicsiben, építse fel
Jó a régi webhelyeknekJövőbarát

Nem vagyok a főnököd, ezért nem tudom megmondani, mit tegyél, de ma már egy olyan világban élünk, ahol több mobileszközt adnak el, mint PC-t. A Mobile first valójában csak progresszív továbbfejlesztés. Kezdje kicsiben, és fokozatosan fejlessze felfelé, a képpontokat olyan funkcióként kezelve, amely egyes eszközöknél van, mások nem.

A min / max szélesség megközelítéstől függetlenül fontos, hogy a kód olvashatósága következetes legyen. Javaslom, hogy csak egy irányba haladjon az építményén, és ha megsérti ezt a szabályt, akkor csak kínos kivételekre használja, és dokumentálja a fene.

05. Ne használjon px egységeket, hanem em egységeket

A px vs. ban ben a vita hosszú, de ban ben egységek hasznosnak bizonyultak az adaptív webtervezésben. Használata ban ben egységeknek ismerniük kell a legtöbb webfejlesztők, de érdemes áttekinteni. An ban ben mértékegység a szülőelemen alapuló relatív mértékegység.

A leggyakoribb példa a betűméret, ha címet akar beállítani betűméret (20px) a tested alapján betűméret (10px) in ban ben egységek:

20px ÷ 10px = 2em
cél ÷ kontextus = eredmény

A ban ben egységszámítási képlet megegyezik a százalékos rácsszámítási képlettel, mert mindkettő arányos és a szülőhöz viszonyítva.

06. Tartsa viszonylagosan: tipográfia

A típus beállítása ban ben egységek segítségével a CSS erejét felhasználhatja egy méretezhető tipográfiai rendszer felépítéséhez, amely a nézetablakkal együtt növekszik.

body {font: 100% / 1,5 serif; / * 16px * /}
h1 {font-size: 2em; / * 32px * /}

@media (min-szélesség: 600px) {
test {font: 112,5%; / * 18px * /}
h1 {/ * Ne csinálj semmit! Automatikusan 36 képpontos leszek * /}
}

Személyes tapasztalatok alapján ez órákonként megtakaríthatja projektenként a pixelértékek átélését és frissítését. Ez is akadálymentességet jelent, ha a felhasználó beállítja a betűméretet.

07. Tartsa viszonylagosan: szóköz

Ezenkívül a ban ben a párnázás és a margó egységei segítenek a függőleges alap létrehozásában. Nagyobb képernyőméretekkel több üres helyet illeszthet be a tervbe egészséges, következetes módon, túl sok munka nélkül.

#hero {margin-bottom: 1em; }

@media (min-szélesség: 600px) {
#hero {margin-bottom: 2em; }
}

Használata ban ben egységek segítenek megőrizni a kiegyensúlyozott viszonylagos arányrendszert. A relatív méretezés fejlettebb megközelítéséhez ajánlom elolvasni Jonathan Snook cikkét Betűméret REM használatával .

08. Menj és légy rugalmas!

Ezek csak az alapok a folyadék szélességű nirvána felé vezető úton. Fontos megjegyezni, hogy mindannyian tanulunk, és hibázni rendben van. Arra bátorítalak benneteket, hogyha még nem tették meg, akkor tegyék meg a lépést, és készítsék el saját érzékeny tervüket. Az a nap, amikor a legtöbb a weboldalak rugalmas keretben ülnek, és minden eszköz által univerzálisan elérhetőek, remélhetőleg gyorsan közeledik. Segítsen az internetnek jobbá válni.

Dave Rupert vezető fejlesztője a Paravel és a ATX Web Show , egy podcast, amely a texasi Austin webdesign és fejlesztői közösségéről szól. Az interneteken ő davatron5000 .

Tetszett ez? Olvassa el ezeket!