Realios žiniatinklio maketai mobiliesiems ekranams Intro, patarimai ir pavyzdžiai

Šis straipsnis yra dalis mūsų „Web Responsive Design“ serija - kuriuos sudaro įrankiai, ištekliai ir konsultacijos, padedančios kurti svetaines visų platformų naudotojams. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Dizaineriai dabar yra sunkesni nei anksčiau. Turime ne tik sukurti stacionarius įrenginius, bet ir mobiliuosius įrenginius, pvz., Planšetinį kompiuterį ir išmaniuosius telefonus, ir kadangi čia kalbame apie daug įvairių ekrano dydžių ir rezoliucijų, tai yra didžiulis uždavinys į petį. Atsižvelgiant į tai, jautrus interneto dizainas geriausias sprendimas. Jis siūlo daugiau nei paprastą mobilųjį šabloną; vietoj to, visas jūsų svetainės išdėstymas yra sukurtas taip, kad būtų pakankamai lankstus, kad tilptų į bet kurią galimą ekrano rezoliuciją.

Tokios skysčių konstrukcijos schemoje yra akivaizdžių privalumų ir trūkumų. Apsvarstykite žemiau pateiktus mano pavyzdžius, kaip interneto dizainas gali pereiti prie mobiliųjų įrenginių sklandžiau.

Kaip veikia jautrus dizainas

Kai aš naudoju žodį “reaguoja” kalbant apie interneto dizainą, turiu galvoje, kad visas maketas reaguoja pagal vartotojo ekrano skiriamąją gebą. Įsivaizduokite šį scenarijų: jūs skaitote svetainę vienoje tabletėje, o tada dėl vienos ar kitos priežasties pereinate prie kito įrenginio. Dabar naršyklės langas yra pakeistas. Reaguojantis interneto dizaino išdėstymas apims schemas ir išdėstymą, kuris puikiai suskaidys ir vėl įsikurs. Naudojamumo požiūriu tai yra puikus metodas.

Atsakingas dizainas - tai vienodos patirties kūrimas, nepriklausomai nuo naršyklės ar įrenginio ekrano dydžio. Radau puikų pavyzdį iš „A sąrašo“, kad galėčiau parodyti savo tašką, kuris taip pat apima dinaminius vaizdus. Plotis nustatoma CSS, naudojant daugiausia visų vidinių konteinerių elementų procentus. Didesnės svetainės taip pat gerai reaguoja į dinaminio turinio, pvz., „JavaScript“ pašalinimą, kai jis nepalaikomas.

Kodėl dizainas mobiliesiems?

Paaiškėjo, kad daugiau vartotojų eina mobiliuoju telefonu, o ne tik naršydami žiniatinklyje. Planšetiniai kompiuteriai pradėjo keistis kontekste, kai vartotojai yra klasėje. Mobiliųjų telefonų projektavimas tikrai yra šiuolaikinių žiniatinklio standartų reikalavimas. Vienintelė problema yra pasirinkti savo plėtros būdą ir tinkamai nukreipti auditoriją.

Kai pradėsite koduoti konkrečias ekrano rezoliucijas, jums reikia pernelyg daug stilių lapų, su kuriais norite susidoroti. „CSS3“ žiniasklaidos užklausos gali būti panaudotos tam, kad sukurtų specifinius „iPhone“ išdėstymus portretui ir kraštovaizdžiui. Kadangi jūs galite iš anksto nustatyti pikselių tankį, lengva pertvarkyti bet kokį HTML šabloną mobiliesiems.

(Vaizdo šaltinis: bradfrostweb)

Bet kai koduojate dizainą, kuriame numatytas atsakas, mobilieji aspektai pasirenkami pagal nutylėjimą. Tiek darbalaukyje, tiek mobiliesiems vartotojams bus pasiūlyta panaši patirtis ir jums nereikės nerimauti dėl išorinių CSS savybių. Vienintelis tyrimas, kurį reikia atlikti, yra mažiausio galimo ekrano planavimas. „Google Analytics“ srauto duomenys gali būti labai naudingi.

Jūs negalėsite, kad jūsų svetainė dirbtų 100% kiekviename prietaise, kuriame veikia kiekviena naršyklė. Tačiau galite nukreipti daugumą pagal vidutinį ekrano plotį. Senesni iPhone modeliai naudoja 320 × 480 ekrano skiriamąją gebą, kuri nėra tokia neįtikėtina. Norėčiau nufotografuoti mažiausiai 240 pikselių pločio, arba netgi mažesniu, jei galite jį pritaikyti.

Numatytojo mastelio keitimas

Jei išmaniajame telefone praleidote bet kokį laiką naršydami internete, pastebėsite, kaip išplečiamos svetainės, kad jos būtų rodomos ekrane. Taip yra vartotojo patogumui, nes dauguma svetainių neturi mobiliojo ryšio, todėl visas išdėstymas yra saugiausias statymas.

Bet kai įsijungiate į reaguojamąjį mobilųjį dizainą, automatinis priartinimas gali iš tikrųjų nustebinti jūsų išdėstymo elementus. Konkrečiai, vaizdai ir navigacijos turinys gali pasirodyti nedideli arba per dideli išdėstyme. Yra speciali meta žyma, kurią galite pridėti prie dokumento antraštės, kuri ją atkuria daugelyje „Android“ ir „iPhone“ įrenginių.

Tai žinoma kaip peržiūros srities metažyma kuris nustato kai kuriuos pasirinktinius kintamuosius turinyje. „Apple“ turi dokumentacijos puslapį apie keletą kitų meta žymeklių, kuriuos turėtumėte ieškoti, nors tai yra nukreipta į svetaines, esančios „iOS“. The pradinis mastelis reikšmė yra svarbi, nes jūsų interneto svetainė yra visiškai 100% priartinama.

Paskutinė vertė keičiamo dydžio pašalins šį mastelio keitimo funkciją, kad vartotojas negalėtų pakeisti išdėstymo dydžio. Tai užblokuos dizainą į vieną dydį pagal visą įrenginio plotį. Atkreipkite dėmesį, kad net jei išjungsite priartinimo funkciją, geras reaguojantis dizainas vis dar bus pritaikomas pereinant nuo portreto į kraštovaizdį bet kuriame įrenginyje! Tačiau tikslinga užrakinti atsakingą dizainą ir pašalinti bendrus mastelio keitimo variantus.

Dinaminis vaizdo mastelio keitimas

Vaizdai yra dar vienas svarbus praktiškai kiekvienos svetainės aspektas. Mobilieji naudotojai negali ieškoti vaizdo įrašų, tačiau nuotraukos yra visiškai kitokios. Tai taip pat yra didžiausi kaltininkai, kai kalbama apie maketų modelius.

img maks. pločio: 100%;

Standartinė CSS taisyklė yra taikyti maksimalaus pločio nuosavybę visiems vaizdams. Kadangi jie visada bus nustatyti 100%, niekada nepastebėsite iškraipymų. Kai naudotojas iš naujo matuoja savo naršyklės langą, kuris yra mažesnis už vaizdą, jis bus automatiškai pritaikomas iki 100% pločio. Problema ta, kad „Internet Explorer“ negali suprasti šios savybės, taigi jums reikės sujungti su konkrečia „IE“ stilių lentelę plotis: 100%;.

Lankstūs vaizdai taip pat galimi, jei naudojate „JavaScript“ arba „jQuery“ papildinius. Yra keletas iš tikrųjų protingų kūrėjų, kurie įdėjo laiko sukurti neįtikėtinai jautrų vaizdo turinį. Šis siūlas yra tik vienas iš daugelio „Stack Overflow“, kuriame yra nepaprastas, bet patogus būdas išspręsti IE6 / 7 klaidas.

Norėčiau asmeniškai rekomenduoti prilipti prie natūralaus CSS vaizdo dydžio. Jei jūsų svetainė veikia mobiliajame naršyklėje su įjungta „JavaScript“ funkcija, ji greičiausiai palaikys CSS. Jei tikrai norite giliau iškasti, patikrinkite šį 24 būdų straipsnį „Adaptyvių dizainų vaizdai“ ...

Palieskite dizainą

Žiniatinklio kūrėjai gali pamiršti, kad mobilieji naudotojai nebėra klaviatūros telefonuose, pavyzdžiui, „BlackBerrys“. Šiandien dauguma išmaniųjų telefonų naudoja jutiklinio ekrano sąsajas, dėl kurių skiriasi scenarijus nei pelės ir klaviatūros nustatymai.

Todėl turėsite apsvarstyti alternatyvius mobiliųjų elementų sprendimus. Išskleidžiamieji meniu gali veikti geriau, kai rodomas kaip vienas meniu dešinėje pusėje. Dauguma naudotojų gali paliesti dešinėje pusėje esančias nuorodas lengviau nei kairėje, tačiau bet kuri skiltis padeda sumažinti erdvę. Naudojant paraščių intarpus paprasta nustatyti nuorodų hierarchiją, nereikalaujant jokio jQuery kodo.

Taip pat gera praktika padidinti šių navigacijos nuorodų dydį. Mobilieji naudotojai neturi prabangos didelių ekranų, kuriuos galima įsigyti staliniuose kompiuteriuose ar net nešiojamuose kompiuteriuose. Jums reikia išlaikyti tekstą didelį, priekinį, galimą ir suprantamą bet kokia kaina. Jūs netgi galite pakeisti dydį, jei vartotojas persijungia tarp portreto ir kraštovaizdžio vaizdų - gana dažnas pasikartojimas naršant mobilųjį tinklą.

Pasirinktiniai CSS išdėstymai

Apskritai geriausia pritaikyti savo išdėstymą ir leisti natūraliai pabloginti jūsų turinį. Jei turite šoninės juostos ir turinio sritį, turėtumėte nustatyti juos procentais arba ems pločiu, viską, kas bus pakeista su naršyklės langu. Jei taikote a min. pločio tai galiausiai nutrauks dalį išdėstymo; todėl dabar jūsų šoninės juostos turinys rodomas virš puslapio turinio.

(Image Source: Pepperson)

Kai manote, kaip tai daro įtaką bendram dizainui, išorės stilių kūrimas yra daug lengviau. Tačiau tikėtina, kad pateksite į ekrano rezoliucijas, kurios yra per mažos, kad išdėstytumėte. Tai puikus scenarijus pridedant pasirinktines CSS savybes, kad pašalintumėte puslapio dalis arba iš naujo suformatuotumėte turinį.

Įjungti / išjungti papildomą turinį

Didelių turinio blokų pavyzdžiai apima žiniatinklio formas, dinaminius meniu, vaizdo slankiklius ir kitas panašias idėjas. Vietoj to, kad šie elementai būtų visiškai pašalinti, nes išdėstymas tampa mažesnis, kodėl gi ne tik paslėpti juos a “sumažintas” turinio div? Jei norite atlikti pakeitimus, galite naudoti CSS arba „JavaScript“, bet galiausiai jums reikės tam tikro JS kodo, kad sukurtumėte perjungimo mygtuką.

Ši alternatyva puikiai tinka išlaikyti jūsų pagrindinį puslapį dinamiškai ir pilną turtingų žiniasklaidos priemonių. Vietoj visiškai išskleidžiamojo naršymo ar puslapio struktūros pertvarkymo galite jį paslėpti per turinio div. Jei vartotojas nori rodyti jūsų nuorodas, palieskite perjungimo mygtuką, kad atidarytumėte / uždarytumėte meniu.

Šis formatavimas yra paprastas, intuityvus ir lengva dirbti su jutikliniu ekranu. Diskų viduje kiekvienas išplečiamas meniu gali būti išdėstytas šalia stulpelio. Kadangi langas keičiasi dar mažesniu dydžiu, jie natūraliai nukris žemiau vienas kito ir padidins puslapio aukštį. Vis dėlto galimybė lengvai sugriauti visą meniu yra lengvai pasiekiama ir tik vienu palietimu. Šis perjungiklis taip pat puikiai tinka vaizdų slankikliui bendradarbiaujant su dinamišku nuotraukų perskaičiavimu.

„Media Queries“ naudojimas

Jei mobilusis ekranas pažeistų jūsų 2 ar 3 stulpelių išdėstymą, kiekvienas turinio sritis bus sukrautas vienas ant kito. Atrodo, kad visa svetainė išsilieja ir gali nesunkiai painioti be išskirtinių blokų. Geresnė idėja yra pridėti apatinį kraštą kiekviename stulpelyje, tik mobiliesiems įrenginiams, naudojant išorinį stilių lapą mobile.css.

Su šiais naujais stiliais jūsų turinys yra suskaidytas į skaidomas dalis. Viršuje esantis medijos atributas yra specialiai sukurtas nukreipti senesnius „iPhone“ įrenginius kraštovaizdžio vaizde. Tačiau jis taip pat bus taikomas įrenginiams, kurių ekranai yra mažesni nei 480 taškų. Naudokite tai savo pranašumui, kad galėtumėte nustatyti, kokiu momentu išdėstymas “sulūžta”.

Yra keletas papildomų parinkčių, kuriomis galite aptikti įrenginio orientaciją. Šis fantastinis CSS žiniasklaidos vadovas gali suteikti jums keletą idėjų. Be to, naujasis mobilusis projektas 320 ir naujesnė versija siūlo mobiliojo CSS katilinę @media stilių. Tai gali būti įtraukta tiesiogiai į tą patį Mobile.css failą ir taikyti taisykles daugeliui skirtingų įrenginių.

 / * Smartphone (portretas ir kraštovaizdis) ----------- * / @media tik ekranas ir (min-device-width: 320px) ir (max-device-width: 480px) / * Stiliai * / / * Išmanieji telefonai (kraštovaizdis) ----------- * / @media tik ekranas ir (min. Plotis: 321px) / * stiliai * / / * Smartphone (portretas) ---- ------- * / @media tik ekranas ir (maksimalus plotis: 320px) / * stiliai * / / * iPad (portretas ir kraštovaizdis) ----------- * / @ Tik žiniasklaidos ekranas ir (min-device-width: 768px) ir (max-device-width: 1024px) / * Stilės * /

(Šaltinis: „Hardboiled CSS3 Media Queries“)

Naudingi įrankiai

Skeletas - gražus katilinė, skirta reaguoti į mobilųjį dizainą
Nuo adaptyvaus iki visiškai reaguojančio

Vitrina: gražus jautrus dizainas

Tikiuosi, kad šie patarimai ir dizaino metodai paskatins jus pereiti prie patrauklių atsakingų maketų ne tik mobiliesiems ekranams, bet ir bet kokiam įprastam įrenginiui, kuriame naršoma internete. Norėdami išlaikyti kūrybines sultis tekančias, aš sudėjau nedidelį pristatomų mobiliųjų interneto dizainų vitriną. Būtinai patikrinkite keletą daugiau unikalių savybių ir pasidalykite savo mintimis apie dizainą ar temą diskusijų srityje.

pakabinti mėnulį