Reaalsed veebiplaadid mobiiliekraanide tutvustamiseks, näpunäited ja näited

See artikkel on osa meie "Web Responsive Design seeria" - sisaldab vahendeid, ressursse ja õpetusi, mis aitavad teil luua veebisaite kõigi platvormide kasutajatele. Kliki siia et näha sama seeria rohkem artikleid.

Disainerid on seda karmim kui varem. Me ei pea mitte ainult projekteerima statsionaarseid seadmeid, vaid ka mobiilseid seadmeid, nagu tahvelarvuti ja nutitelefonid, ning kuna me räägime siin palju erinevatest ekraani suurustest ja resolutsioonidest, on see väga suur ülesanne. Selle valguses, tundlik veebidisain võiks olla parim lahendus. See pakub rohkem kui lihtsalt lihtsat mobiilimudelit; selle asemel on teie kogu saidi paigutus piisavalt paindlik, et see sobiks igasuguse võimaliku ekraani eraldusvõimega.

Sellise vedelikukujunduse skeemil on ilmseid eeliseid ja puudusi. Vaadake allpool toodud näiteid selle kohta, kuidas reageeriv veebidisain saab üleminekut mobiilseadmetele sujuvamaks.

Kuidas reageeriv disain töötab

Kui ma sõna kasutan “tundlik” seoses veebidisainiga mõtlen, et kogu paigutus vastab kasutaja ekraani eraldusvõimele. Kujutage ette seda stsenaariumi: sa loed veebilehte ühel tabletil, seejärel lülitad teisele seadmele ühel või teisel põhjusel. Brauseri aken on nüüd ümber suurusega. Reageeriv veebidisaini paigutus sisaldab skeeme ja paigutust, mis õrnalt laguneb ja ennast taaselustab. Kasutatavuse seisukohast on see suurepärane tehnika.

Vastupidav disain on mõeldud homogeense kogemuse loomiseks, sõltumata brauseri või seadme ekraani suurusest. Ma leidsin täiusliku näite „A List Apart'ist”, et illustreerida oma punkti, mis sisaldab ka dünaamilisi pilte. Laius määratakse CSS-is, kasutades põhiliselt kõigi sisemiste mahutite elementide protsenti. Suuremad veebisaidid reageerivad hästi ka dünaamilise sisu, näiteks JavaScripti eemaldamisele, kui seda ei toetata.

Miks disaini mobiilile?

On ilmnenud, et rohkem kasutajaid liigub mobiilis ja mitte ainult veebi sirvimiseks. Tahvelarvutid on hakanud kontekstis muutuma, kui kasutajad on klassiruumis võrgus. Mobiilile projekteerimine on kindlasti nõue tänapäeva veebistandardites. Ainus probleem on teie arendusmeetodi valimine ja sihtrühma sihtimine.

Kui hakkate konkreetse ekraani eraldusvõime kodeerimist alustama, on teil liiga palju stiilitabeleid. CSS3 meediaküsimusi saab kasutada iPhone-spetsiifiliste paigutuste ehitamiseks nii portree- kui ka vaade. Kuna te saate pikslite tiheduse eelnevalt kindlaks määrata, on lihtne mobiilseadmete HTML-malli ümber kujundada.

(Pildi allikas: bradfrostweb)

Aga kui kodeerite tundliku disaini skeemi, hoolitsetakse vaikimisi mobiilsed aspektid. Nii töölaua- kui mobiilikasutajatele pakutakse sarnast kogemust ja te ei pea muretsema väliste CSS-omaduste pärast. Ainus teadustöö, mida soovite teha, on väikseima võimaliku kuva kuvamine. Google Analyticsi liiklusandmed võivad selleks olla väga kasulikud.

Sa ei saa tõenäoliselt oma veebilehte 100% iga brauseriga töötava seadme kohta. Kuid te saate sihtida enamuse ekraani keskmise laiuse alusel. Vanemad iPhone'i mudelid kasutavad 320 × 480 ekraani eraldusvõimet, mis ei ole nii uskumatu. Ma võiksin pildistada minimaalse laiusega 240 pikslit või isegi väiksemat, kui see sobib.

Vaikimisi suumi eemaldamine

Kui olete nutitelefonis veebi sirvimise ajal veetnud, märkate, kuidas veebisaidid ekraani piires täielikult kuvatakse. See on mõeldud kasutaja mugavuse huvides, kuna enamikul veebisaitidel ei ole mobiilvastast, seega on kogu paigutus kõige ohutum.

Aga kui jõuad reageeriva mobiilse disaini loomisele, võib automaatne suumimine teie paigutuselemente tõesti segi ajada. Täpsemalt võivad pildid ja navigeerimissisu teie paigutusel olla väikesed või liiga suured. On olemas spetsiaalne metakood, mille saate lisada dokumendi päisesse, mis seda enamikes Android- ja iPhone-seadmetes lähtestab.

Seda tuntakse kui vaateava metakood mis seab sisusse mõned kohandatud muutujad. Apple'il on dokumentatsioonileht, mis käsitleb mõningaid teisi metakoode, mida peaksite uurima, kuigi need on suunatud just iOS-i veebisaitidele. The esialgne skaala väärtus on oluline, kuna see määrab teie veebisaidi täieliku 100% suumi.

Viimane väärtus kasutaja skaleeritav eemaldab selle suumi funktsiooni täielikult, nii et kasutaja ei saa paigutuse suurust muuta. See lukustab disaini üheks suuruseks, lähtudes seadme täielikust laiusest. Pange tähele, et isegi kui lülitate suumi funktsionaalsuse välja, kohandub portree-maastikul mis tahes seadmele üleminekul hea reageeriv disain. Kuid on mõttekas lukustada reageeriv disain ja eemaldada üldised skaleerimisvalikud.

Dünaamiline kujutise mastaapimine

Pildid on praktiliselt iga veebisaidi teine oluline aspekt. Mobiilikasutajad ei pruugi videoid voogesitada, kuid fotod on täiesti erinevad. Need on ka suurimad süüdlased, kui tegemist on kasti mudelist väljaulatuvate paigutustega.

img max-width: 100%;

CSS-i standardreegel on rakendada maksimaalset laiusomadust kõigile piltidele. Kuna nad on alati seatud 100% -ni, ei märka sa kunagi moonutusi. Kui kasutaja suurendab brauseri akna suurust, mis on teie pildist väiksem, reguleerib see automaatselt 100% laiuse vähendamise. Probleem on selles, et Internet Explorer ei suuda seda omadust mõista, nii et peate koostama IE-spetsiifilise stiili laius: 100%;.

Paindlikud pildid on võimalikud ka siis, kui kasutate JavaScripti või jQuery pluginaid. Seal on mõned tõesti nutikad arendajad, kes on pannud aega uskumatult tundliku pildi sisu loomiseks. See lõng on vaid üks paljudest Stacki ülevoolul, mis sisaldab äärmuslikku, kuid mugavat lähenemist IE6 / 7 vigade lahendamisele.

Ma soovitaksin isiklikult CSS-i kujutise suuruse muutmist. Kui teie veebileht töötab JavaScripti lubatud mobiilibrauseris, võib see tõenäoliselt toetada ka CSS-i. Kui sa tõesti tahad sügavamalt kaevata, vaadake seda 24 viisi, kuidas artikkel kohanduvad kujundused ...

Disainide puudutamine

Veebiarendajad võivad unustada, et mobiilikasutajad ei ole enam BlackBerrysega sarnastel telefonidel. Enamik nutitelefonidest kasutab täna puutetundliku ekraani liideseid, mis muudavad stsenaariumi hiire ja klaviatuuri seadistustest erinevaks.

Sellisena peate kaaluma mobiilse elemendi alternatiivseid lahendusi. Allalaadimise menüüd võivad parema serva ühe menüü kuvamisel paremini toimida. Enamik kasutajaid on võimelised paremal poolel lingid puudutama, kui vasakul, kuid kumbki veerg töötab ruumi leevendamiseks. Kasutades marginaale, on linki hierarhia lihtne identifitseerida ilma, et oleks vaja jQuery koodi.

Samuti on hea tava suurendada nende navigatsioonilinkide suurust. Mobiilikasutajatel ei ole luksust suurte ekraanide kohta, mis on pakutud lauaarvutitele või isegi sülearvutitele. Teil on vaja hoida teksti suur, ülespoole, puudutades ja loetavalt iga hinna eest. Võib-olla soovite isegi suuruse muutmist, kui kasutaja vahetab portree- ja maastikuvaadet - mobiilse veebi sirvimisel üsna tavaline kordumine.

Kohandatud CSS paigutused

Üldiselt on kõige parem kohandada oma paigutust ja võimaldada teie sisu loomulikku halvenemist. Kui teil on külgriba ja sisupiirkond, peaksite need määrama protsentide või ems laiustega, mis kõik on brauseri aknaga uuesti suurusega. Kui rakendate a min-laius see katkestab lõpuks osa paigutusest; nüüd kuvab teie külgriba sisu lehekülje sisu kohal.

(Pildi allikas: Pepperson)

Kui arvate, kuidas see mõjutab üldist disaini, on väliste stiililehtede väljatöötamine palju lihtsam. Kuid teil on tõenäoline, et kuvatakse ekraani resolutsioonid, mis on paigutuse muutmiseks liiga väikesed. See on ideaalne stsenaarium, et lisada kohandatud CSS-i omadusi lehe osade eemaldamiseks või sisu uuesti vormindada.

Lülitab ekstra sisu sisse / välja

Suurte sisu plokkide näideteks on veebivormid, dünaamilised menüüd, pildi liugurid ja muud sarnased ideed. Selle asemel, et täielikult eemaldada need elemendid, kui paigutus muutub väiksemaks, miks mitte lihtsalt neid peita a “minimeeritud” sisu div? Saate kasutada muudatuste tegemiseks kas CSS-i või JavaScript-i, kuid lõpuks on teil tõenäoliselt vaja mõnda JS-koodi ümberlülitamisnupu loomiseks.

See alternatiiv sobib ideaalselt kodulehe dünaamiliseks ja rikkalike veebimeediumide täielikuks säilitamiseks. Selle asemel, et oma rippmenüü täielikult eemaldada või lehe struktuuri ümber paigutada, saate selle peita sisu div. Kui kasutaja soovib oma linke kuvada, siis puudutage menüü avamiseks / sulgemiseks lülitusnuppu.

See vormindamine on lihtne, intuitiivne ja puutetundlikes seadmetes lihtne töötada. Divisiseselt saab iga rippmenüü paigutada veergude vormingusse. Kuna aken suurendab veelgi väiksemat suurust, langevad nad loomulikult üksteise alla ja suurendavad lehekülje kõrgust. Kuid kogu menüü kokkuvarisemise võimalus on kergesti saavutatav ja ainult üks puudutus. See lüliti sobib ideaalselt ka piltide liuguritele koos dünaamilise fotode suuruse muutmisega.

Meediumiküsimuste kasutamine

Kui mobiiliekraan katkestaks teie 2 või 3-veerulise paigutuse, jõuad iga sisupiirkonna üksteise peale. Kogu sait näib verejooksvat ja võib olla väga segadust tekitav ilma eristatava blokeerimispiirkonnata. Parem idee on lisada igale veerule alumine äär, ainult mobiilseadmete jaoks, kasutades sellist välist stiili mobile.css.

Nende uute stiilide puhul jagatakse sisu jagatavaks osaks. Ülaltoodud meediatunnus on mõeldud spetsiaalselt vanematele iPhone'i seadmetele maastikuvaates. Kuid see kehtib ka seadmetele, mille ekraanid on väiksemad kui 480 pikslit. Kasutage seda oma eeliseks, et saaksite kindlaks määrata, millisel hetkel paigutus “laguneb”.

Seadme orientatsiooni avastamiseks on veel mõned võimalused. See fantastiline juhend CSS-meedias võib anda teile mõned ideed. Lisaks pakub uus mobiiliprojekt 320 ja üles mobiilse CSS-i katla @media stiilid. Neid saab lisada otse samasse mobile.css faili ja rakendada reegleid paljude erinevate seadmete jaoks.

 / * Nutitelefonid (portree ja maastik) ----------- * / @media ainult ekraan ja (min-device-width: 320px) ja (max-device-width: 480px) / * stiilid * / / * Nutitelefonid (maastik) ----------- * / @media ainult ekraan ja (min-laius: 321px) / * stiilid * / / * nutitelefonid (portree) ---- ------- * / @media ainult ekraan ja (max-width: 320px) / * stiilid * / / * iPadid (portree ja maastik) ----------- * / @ ainult meedia ekraan ja (min-device-width: 768px) ja (max-device-width: 1024px) / * stiilid * /

(Allikas: Hardboiled CSS3 meedia päringud)

Kasulikud tööriistad

Skelett - ilus boilerplokk reageerivale mobiilse disaini jaoks
Kohanduvast ja täielikult reageerivast

Showcase: ilus reageeriv disain

Loodan, et need näpunäited ja disainitehnikad julgustavad teid liikuma põnevatele vastupanu kujundustele mitte ainult mobiiliekraanide, vaid ka veebibrauseriga ühiste seadmete jaoks. Et hoida loomingulisi mahla voolav, olen pannud kokku väikese esitlusvõimelise mobiilse veebi kujunduse. Kontrollige kindlasti mõningaid unikaalsemaid funktsioone ja jagage oma mõtteid disaini või teema kohta arutelualal.

riputama kuu