Érzékeny webes elrendezések a mobil képernyőkhöz Intro, tippek és példák

Ez a cikk a mi része "Web Responsive Design sorozat" - eszközöket, erőforrásokat és oktatóanyagokat tartalmaz, amelyek segítenek a webhelyek létrehozásában minden platform számára. Kattints ide több cikket láthat ugyanazon sorozatból.

A tervezők most már keményebbek. Nem csak a helyhez kötött eszközök, hanem a mobileszközök, például a tablet és az okostelefonok tervezése is szükséges, és mivel itt sok különböző képernyőméretről és felbontásról beszélünk, ez hatalmas feladat a vállra. Ennek fényében, érzékeny web design lehet a legjobb megoldás. Többet kínál, mint egy egyszerű mobil sablont; ehelyett a teljes webhely elrendezését úgy tervezték, hogy elég rugalmas legyen ahhoz, hogy beleférjen bármilyen lehetséges képernyőfelbontásba.

Egy ilyen folyadéktervezési rendszer nyilvánvaló előnyökkel és hátrányokkal rendelkezik. Tekintsd meg az alábbi példáimat, hogy a webes tervezés hogyan reagálhat a mobileszközökre az egyenletesebbre.

Hogyan reagálnak az érzékeny design

Amikor a szót használom “fogékony” A webes tervezés szempontjából azt értem, hogy a teljes elrendezés a felhasználó képernyőfelbontásán alapul. Képzeld el ezt a forgatókönyvet: egy táblagépet olvassz egy táblagépen, majd egy vagy másik okból vált át egy másik eszközre. A böngészőablak most átméretezett. A választható webdesign elrendezései olyan sémákat és elrendezéseket tartalmaznak, amelyek kecsesen lebontják és újragondolják magát. Használhatósági szempontból ez egy ragyogó technika.

Az érzékeny kialakítás homogén tapasztalat létrehozása a böngésző vagy az eszköz képernyőméretétől függetlenül. Megtaláltam a tökéletes példát az „A List Apart” -ból, hogy bemutassam a pontomat, amely dinamikus képeket is tartalmaz. A CSS-ben a szélességet a legtöbb belső konténerelemhez viszonyított százalékarányban állítjuk be. A nagyobb webhelyek is jól reagálnak a dinamikus tartalom, például a JavaScript eltávolítására, ha nem támogatott.

Miért tervezték a mobilhoz?

Nyilvánvalóvá vált, hogy több felhasználó megy mobilba, és nem csak a webes böngészéshez. A táblaszámítógépek kontextusban kezdtek megváltozni, amikor a felhasználók online vannak az osztályteremben. A mobil tervezése minden bizonnyal a modern webes szabványok követelménye. Az egyetlen probléma a fejlesztési mód kiválasztása és a közönség célzott megcélozása.

Amikor elkezdi kódolni az adott képernyőfelbontásokat, akkor túl sok stíluslapot szeretne kezelni. A CSS3-ban lévő média lekérdezések felhasználhatók iPhone-specifikus elrendezések kialakítására mind a portré-, mind a tájképre. Mivel előre meghatározhatja a pixel sűrűségét, könnyen módosíthatja a mobil HTML-sablonjait.

(Képforrás: bradfrostweb)

De ha kódol egy elrendezést az érzékeny tervezéshez, a mobil szempontokat alapértelmezés szerint kezelik. Mind az asztali, mind a mobil felhasználók számára hasonló élményt kínálnak, és nem kell aggódnia a külső CSS tulajdonságok miatt. Az egyetlen olyan kutatás, amelyet végre kell hajtani a legkisebb lehetséges megjelenítési képernyő megtervezése. A Google Analytics forgalmi adatai nagyon hasznosak lehetnek.

Nem valószínű, hogy a webhelye 100% -ra fog működni minden egyes böngészőt futtató eszközön. De a többséget a képernyő átlagos szélessége alapján lehet megcélozni. Az idősebb iPhone modellek 320 × 480 felbontást használnak, ami nem olyan hihetetlen. Minimális szélességű, 240x-es vagy annál kisebb lesz, ha elférne.

Az alapértelmezett zoom eltávolítása

Ha egy okostelefonon bármikor böngészett az interneten, észre fogod venni, hogy a webhelyek hogyan méretezhetők ki a képernyőn belül. Ez a felhasználó kényelmét szolgálja, mivel a legtöbb webhelynek nincs mobiltársa, így a teljes elrendezés a legbiztonságosabb tét.

De ha egy rugalmas mobil kialakításra kerül, az automatikus zoom valóban elronthatja az elrendezési elemeket. Pontosabban, a képek és a navigációs tartalom kicsinek vagy túl nagynak tűnhet az elrendezésben. Van egy speciális metatag, amelyet hozzáadhat a dokumentumfejléchez, amely ezt a legtöbb Android és iPhone eszközön visszaállítja.

Ez az úgynevezett viewport meta tag amely egyéni változókat állít be a tartalomban. Az Apple dokumentációs oldalt tartalmaz néhány más metakódhoz, amelyeket érdemes megvizsgálnia, bár ezek kifejezetten az iOS weboldalakra irányulnak. A kezdeti léptékű az érték fontos, mivel ez alapértelmezés szerint a webhely teljes 100% -os zoomjára vonatkozik.

Az utolsó érték felhasználó skálázható eltávolítja ezt a zoom funkciót, így a felhasználó nem tudja átméretezni az elrendezést. Ez a készülék teljes szélessége alapján egy méretre rögzíti a tervet. Ne feledje, hogy még akkor is, ha letiltja a zoom funkciót, a jó válaszkészség még mindig alkalmazkodik, ha a készülékről bármilyen portrészről átáll a tájképre. De van értelme zárolni egy érzékeny tervezést, és eltávolítani az általános skálázási beállításokat.

Dinamikus képméretezés

A képek gyakorlatilag minden oldal fontos aspektusa. Előfordulhat, hogy a mobil felhasználók nem szeretnének videókat közvetíteni, de a fényképek egy teljesen más történet. Ezek a legnagyobb bűnösök, amikor a dobozmodelltől elszakadnak.

img max. szélesség: 100%;

A CSS általános szabálya, hogy minden képre maximális szélességű tulajdonságot alkalmazzon. Mivel mindig 100% -ra kerülnek, soha nem fogják észrevenni a torzulásokat. Amikor a felhasználó kicsinyíti a böngészőablakát, amely kisebb, mint a kép, képes lesz automatikusan beállítani a 100% -os szélességet. A probléma az, hogy az Internet Explorer nem tudja megérteni ezt a tulajdonságot, ezért össze kell állítania egy IE-specifikus stíluslapot szélesség: 100%;.

A JavaScript vagy a jQuery bővítmények használata esetén a rugalmas képek is lehetségesek. Vannak igazán okos fejlesztők, akik idejüket hozták a hihetetlenül érzékeny képtartalom létrehozására. Ez a szál csak egy a sok közül a Stack túlcsordulásból, amely egy idegen, mégis kényelmes megközelítést kínál az IE6 / 7 hibák megoldására.

Én személy szerint azt javaslom, hogy ragaszkodjunk a természetes CSS képmérethez. Ha a webhelye a JavaScript engedélyezett mobilböngészőben fut, akkor valószínűleg támogatja a CSS-t is. Ha tényleg mélyebben akarsz ásni, nézd meg ezt a 24 módú cikket az Adaptív formatervezési minták képei ...

Tervek megérintése

A webes fejlesztők elfelejthetik, hogy a mobil felhasználók már nem a BlackBerrys-hez hasonló billentyűzettel rendelkeznek. Az okostelefonok többsége ma érintőképernyős interfészeket használ, amelyek az egér-billentyűzet beállításaitól eltérő forgatókönyvet tesznek lehetővé.

Mint ilyen, meg kell fontolnia a mobil elemek alternatív megoldásait. A legördülő menük jobban működhetnek, ha a jobb oldalon egyetlen menüként jelenik meg. A legtöbb felhasználó könnyebben érheti el a jobb oldali linkeket, mint a bal oldali, de bármelyik oszlop a helyet megkönnyíti. A margók betűit használva egyszerűen azonosíthatja a link hierarchiát anélkül, hogy bármilyen jQuery kódot igényelne.

Az is jó gyakorlat, hogy növeljük a navigációs linkek méretét. A mobil felhasználók nem rendelkeznek luxusokkal az asztali számítógépeken vagy akár laptopokon elérhető nagy képernyőkön. Tartsa a szöveget nagynak, előremutatónak, minden áron érthetőnek és olvashatónak. Lehet, hogy átméretezheti, ha a felhasználó átkapcsol a portré- és a tájkép között - a mobilhálózat böngészése során meglehetősen gyakori visszatérés.

Egyéni CSS elrendezések

Általában a legjobb, ha az elrendezést alkalmazkodik, és lehetővé teszi a tartalom természetes romlását. Ha van oldalsáv és tartalmi területe, akkor a százalékok vagy az ems szélességében kell beállítania őket, bármi, ami a böngészőablakkal újra méretezhető. Ha a min-width ez végül megszakítja az elrendezés egy részét; így most az oldalsáv tartalma megjelenik az oldal tartalma felett.

(Képforrás: Pepperson)

Ha figyelembe vesszük, hogy ez hogyan befolyásolja az általános tervezést, sokkal könnyebb a külső stíluslapok kifejlesztése. Azonban valószínűleg a képernyőfelbontásokba kerül, amelyek túl kicsi ahhoz, hogy az elrendezés megjelenjen. Ez a tökéletes forgatókönyv az egyéni CSS-tulajdonságok hozzáadásához az oldalrészek eltávolításához, vagy a tartalom átformázásához.

Az Extra tartalom be- és kikapcsolása

Nagy tartalomblokkok például a webes űrlapok, a dinamikus menük, a kép csúszkák és más hasonló ötletek. Ahelyett, hogy ezeket az elemeket teljesen eltávolították volna, az elrendezés kisebb lesz, miért nem rejtjük el őket egyszerűen a “minimalizált” tartalom div? A szerkesztések elvégzéséhez használhatja a CSS-t vagy a JavaScript-et, de végül valószínűleg szüksége lesz egy JS-kódra a váltógomb létrehozásához.

Ez az alternatíva tökéletes ahhoz, hogy a kezdőlapot dinamikusan és gazdag webes médiával töltse. Ahelyett, hogy teljesen eltávolítaná a legördülő navigációt, vagy átrendezné az oldalszerkezetet, elrejtheti azt egy tartalmi div. Ha a felhasználó szeretné megjeleníteni a linkjeit, érintse meg a váltógombot a menü megnyitásához / bezárásához.

Ez a formázás egyszerű, intuitív és könnyen kezelhető érintőképernyős eszközökön. Az osztáson belül a legördülő menük mindegyikét egymás mellett helyezheti el oszlopformátumban. Mivel az ablak mérete még kisebb, az természetesen csökken egymás alatt, és növeli az oldalmagasságot. A teljes menü összeomlásának lehetősége azonban könnyen elérhető, és csak egyetlen érintéssel érhető el. Ez a váltó div is tökéletes a kép csúszkák számára a dinamikus fotó átméretezéssel együttműködve.

A Média lekérdezések használata

Ha egy mobil képernyő megszakítja a 2 vagy 3 oszlopos elrendezést, akkor minden egyes tartalmi terület egymás fölé kerül. Úgy tűnik, hogy az egész terület vérzik, és nagyon zavarba ejtő, megkülönböztető blokkterületek nélkül. Jobb ötlet, hogy minden oszlopon egy külső szegélyt adjunk hozzá, csak mobil eszközökhöz, egy külső stíluslapot használva mobile.css.

Ezekkel az új stílusokkal a tartalom megosztott részekre bontható. A fenti médiatribútum kifejezetten a régebbi iPhone-eszközökre fekvő tájolású célzás céljára készült. Ez azonban a 480 képpontnál kisebb képernyőkkel rendelkező készülékekre is vonatkozik. Használja ezt az előnyeire, így meghatározhatja, hogy az elrendezés mely ponton van “szakít”.

Néhány további lehetőség van az eszköz tájolásának észlelésére. Ez a fantasztikus útmutató a CSS adathordozón néhány ötletet adhat. Emellett az új 320 és újabb mobilprojekt a CSS mobilkészülékét kínálja @média stílusokat. Ezeket közvetlenül a mobil.css fájlba lehet beilleszteni és szabályokat kell alkalmazni számos különböző eszközre.

 / * Okostelefonok (portré és tájkép) ----------- * / @media csak képernyő és (min-device-width: 320px) és (max-device-width: 480px) / * Stílusok * / / * Okostelefonok (tájkép) ----------- * / @media csak képernyő és (min-szélesség: 321px) / * Stílusok * / / * Okostelefonok (portré) ---- ------- * / @media csak képernyő és (max-width: 320px) / * Stílusok * / / * iPad (álló és tájkép) ----------- * / @ csak média képernyő és (min-device-width: 768px) és (max-device-width: 1024px) / * Stílusok * /

(Forrás: Hardboiled CSS3 Media Queries)

Hasznos eszközök

Csontváz - szép Boilerplate az érzékeny mobil tervezéshez
Az adaptívtól a teljes mértékben reagáláshoz

Showcase: Gyönyörű érzékeny minták

Remélem, ezek a tippek és tervezési technikák arra ösztönzik Önt, hogy ne csak a mobil képernyőkhöz, hanem a webes böngészéssel rendelkező közös eszközökhöz hozzon létre izgalmas, rugalmas elrendezéseket. A kreatív gyümölcslevek áramlása érdekében összeállítottam egy kis bemutatót a mobil webes formatervezési mintákról. Győződjön meg róla, hogy megvizsgálja néhány egyedi tulajdonságát, és ossza meg gondolatait a tervezési témáról vagy a témakörről a vita területén.

a Hold felakasztása