Responsabil Web Layouts pentru ecranele mobile Intro, sfaturi și exemple
Proiectanții o au acum mai mult decât înainte. Nu numai că trebuie să proiectăm dispozitive staționare, dar și dispozitive mobile cum ar fi tableta și smartphone-urile, și din moment ce vorbim despre o mulțime de dimensiuni și rezoluții diferite de aici, este o sarcină uriașă de umăr. În lumina acestei, web design sensibil ar putea fi cea mai bună soluție. Acesta oferă mai mult decât un simplu șablon mobil; în schimb, întregul aspect al site-ului dvs. este proiectat să fie suficient de flexibil pentru a se potrivi cu orice rezoluție posibilă a ecranului.
Cu o astfel de schemă de proiectare fluidă există beneficii și dezavantaje evidente. Luați în considerare exemplele mele de mai jos pentru modul în care designul web receptiv poate transforma tranziția în dispozitive mobile într-un mod mai neted.
Cum funcționează designul responsabil
Când folosesc cuvântul “sensibil” în ceea ce privește designul web, vreau să spun că întregul aspect răspunde în funcție de rezoluția ecranului utilizatorului. Imaginați-vă acest scenariu: citiți un site pe un singur comprimat, apoi treceți la alt dispozitiv dintr-un motiv sau altul. Fereastra browserului este acum redimensionată. Un aspect receptiv al designului web va cuprinde scheme și un aspect care se descompune grațios și se reinventează. Din perspectiva utilizării, aceasta este o tehnică genială.
Designul receptiv se referă la crearea unei experiențe omogene, indiferent de dimensiunea ecranului browserului sau a dispozitivului. Am găsit exemplul perfect din "A List Apart" pentru a ilustra punctul meu, care include și imagini dinamice. Lățimea este setată în CSS utilizând procente pentru majoritatea elementelor interne ale containerului. Site-urile mai mari răspund de asemenea la eliminarea conținutului dinamic, cum ar fi JavaScript, atunci când nu este acceptat.
De ce design pentru mobil?
A devenit evident că mai mulți utilizatori merg mobil, și nu doar pentru navigarea pe internet în mișcare, fie. Tablet PC-urile au început să se schimbe în context atunci când utilizatorii sunt online în sala de clasă. Proiectarea pentru mobil este cu siguranță o cerință în standardele moderne de web. Singura problemă este alegerea metodei de dezvoltare și direcționarea adecvată a publicului.
Când începeți codarea pentru rezoluții specifice ale ecranului, ajungeți la prea multe foi de stil pentru a le rezolva. Întrebările media din CSS3 pot fi folosite pentru a crea machete specifice pentru iPhone, atât pentru vizualizarea portret, cât și pentru vizualizarea peisajului. Deoarece puteți predetermina densitatea pixelilor, este ușor să actualizați orice șablon HTML pentru mobil.
(Imagine Sursa: bradfrostweb)
Dar când codați un aspect pentru un design receptiv, aspectele mobile sunt luate în considerare implicit. Atât utilizatorilor desktop cât și utilizatorilor mobili li se va oferi o experiență similară și nu va trebui să vă faceți griji cu privire la proprietățile CSS externe. Singura cercetare pe care ar trebui să o efectuați este planificarea pentru cel mai mic ecran posibil de afișare. Datele de trafic Google Analytics pot fi foarte utile pentru acest lucru.
Probabil că site-ul dvs. nu va funcționa 100% pe fiecare dispozitiv care rulează fiecare browser. Dar puteți viza o majoritate bazată pe lățimea medie a ecranului. Modelele iPhone mai vechi utilizează o rezoluție a afișajului de 320 × 480, care nu este atât de incredibilă. Mi-ar trage pentru o lățime minimă de 240px, sau chiar mai mici, dacă se poate potrivi.
Eliminarea zoom-ului implicit
Dacă ați petrecut în orice moment navigarea pe Web pe un smartphone, veți observa modul în care site-urile web sunt redimensionate pentru a fi afișate complet pe ecran. Acest lucru este pentru comoditatea utilizatorului, deoarece majoritatea site-urilor web nu au un partener mobil, așadar aspectul complet este cel mai sigur pariu.
Dar, atunci când intri în construirea unui design mobil receptiv, auto-zoom-ul poate dezordine într-adevăr elementele de aspect. Concret, imaginile și conținutul de navigare pot apărea mici sau prea mari în aspectul dvs. Există o etichetă meta specială pe care o puteți adăuga în antetul documentului care resetează acest lucru în majoritatea dispozitivelor Android și iPhone.
Aceasta este cunoscută sub numele de meta tag-ul de vizualizare care stabilește unele variabile personalizate în cadrul conținutului. Apple are o pagină de documentare cu privire la câteva alte meta taguri pe care ar trebui să le priviți, deși acestea sunt orientate în mod specific către site-urile web din iOS. Scara inițială valoarea este importantă, deoarece aceasta implică faptul că site-ul dvs. Web este vizibil la un zoom complet de 100%.
Ultima valoare pentru Utilizator scalabil va elimina complet această funcție de zoom, astfel încât utilizatorul nu poate redimensiona aspectul. Aceasta va bloca design-ul într-o singură dimensiune pe baza lățimii totale a dispozitivului. Rețineți că, chiar dacă dezactivați funcționalitatea zoom, un design bine receptiv se va adapta în continuare la trecerea de la portret la peisaj pe orice dispozitiv! Dar este logic să blocați un design receptiv și să eliminați opțiunile generale de scalare.
Scalarea imaginii dinamice
Imaginile reprezintă o altă parte importantă a practic fiecărui site web. Este posibil ca utilizatorii de dispozitive mobile să nu caute să transmită videoclipuri, dar fotografiile sunt o poveste cu totul diferită. Aceștia sunt, de asemenea, cei mai mari vinovați atunci când vine vorba de machete care izbucnesc din modelul casetei.
img max-lățime: 100%;
Regula standard pentru CSS este de a aplica o proprietate cu o lățime maximă tuturor imaginilor. Întrucât vor fi întotdeauna fixați la 100%, nu veți observa denaturări. Când utilizatorul redimensionează fereastra browserului mai mică decât imaginea pe care o poate gestiona, va fi reglată automat la lățimea de 100% redusă. Problema este că Internet Explorer nu înțelege această proprietate, așa că va trebui să creați o foaie de stil specifică IE lățime: 100%;.
Imaginile flexibile sunt, de asemenea, posibile dacă utilizați pluginuri JavaScript sau jQuery. Există unii dezvoltatori cu adevărat inteligenți, care au pus timpul să construiască conținut de imagine incredibil de receptiv. Acest thread este doar unul dintre numeroșii din Stack Overflow, care oferă o abordare extraordinară și convenabilă pentru rezolvarea problemelor de eroare IE6 / 7.
Mi-ar recomanda personal lipirea la redimensionarea imaginii naturale CSS. Dacă site-ul dvs. rulează într-un browser mobil cu JavaScript activat, acesta poate cel mai probabil să suporte și CSS. Dacă doriți cu adevărat să săturați mai adânc, verificați acest articol cu 24 de căi Imagini pentru modele adaptabile ...
Atingerea modelelor
Dezvoltatorii web ar putea uita că utilizatorii mobili nu mai sunt pe telefoane de la tastatură, cum ar fi BlackBerrys. Majoritatea smartphone-urilor utilizează astăzi interfețe touchscreen, ceea ce face ca scenariul să fie diferit de setările mouse-and-keyboard.
Ca atare, va trebui să luați în considerare soluții alternative în elementele mobile. Meniurile de derulare pot funcționa mai bine atunci când sunt afișate ca un singur meniu din partea dreaptă. Cei mai mulți utilizatori au posibilitatea să atingă link-urile din partea dreaptă mai ușor decât stânga, dar oricare dintre coloane funcționează pentru a ușura spațiul. Utilizând linii de margine, este simplu să identificați ierarhia de link-uri fără a cere niciun cod jQuery.
De asemenea, este o bună practică să măriți dimensiunea acestor linkuri de navigare. Utilizatorii mobili nu au luxul unor ecrane mari oferite pe desktop-uri sau chiar pe laptop-uri. Aveți nevoie să păstrați textul mare, în față, ușor de citit și ușor de citit cu orice preț. Puteți chiar să doriți redimensionarea dacă utilizatorul comută între vizualizarea portret și peisaj - o recurență destul de frecventă atunci când navigați pe webul mobil.
CSS Custom layouts
În general, este mai bine să vă adaptați aspectul și să permiteți degradarea naturală a conținutului dvs. Dacă aveți o bara laterală și o zonă de conținut, ar trebui să le setați în lățimi de procente sau ems, orice va fi redimensionat cu fereastra browserului. Dacă aplicați a min lățime acest lucru va întrerupe în cele din urmă o parte din aspect; astfel că acum conținutul bara laterală se afișează deasupra conținutului paginii.
(Imagine Sursa: Pepperson)
Când analizați modul în care acest lucru afectează designul general, este mult mai ușor să dezvoltați foi de stil externe. Cu toate acestea, este posibil să întâlniți rezoluții de ecran care sunt prea mici pentru a vă oferi aspectul. Acesta este scenariul perfect pentru adăugarea de proprietăți CSS personalizate pentru a elimina porțiunile din pagină sau pentru a reformula complet conținutul.
Activează / dezactivează conținutul suplimentar
Exemple de blocuri mari de conținut includ forme web, meniuri dinamice, glisoare de imagine și alte idei similare. În loc de a elimina complet aceste elemente ca aspectul devine mai mic de ce nu pur și simplu să le ascunde într-o “minimizat” conținut div? Ați putea utiliza fie CSS, fie JavaScript pentru a efectua modificările, dar în cele din urmă probabil că veți avea nevoie de un cod JS pentru a crea un buton de comutare.
Această alternativă este perfectă pentru menținerea paginii dvs. de pornire dinamică și plină de conținut media bogat. În loc să vă eliminați complet navigarea prin drop-down sau să rearanjați structura paginii, puteți să o ascundeți într-un div de conținut. Dacă utilizatorul dorește să afișeze legăturile dvs., atinge un buton de comutare pentru a deschide / închide meniul.
Acest format este simplu, intuitiv și ușor de utilizat cu dispozitivele touchscreen. În interiorul divului puteți plasa fiecare meniu derulant unul lângă altul într-un format de coloană. Pe măsură ce fereastra este redimensionată și mai mică, acestea vor cădea în mod natural sub ele și vor crește înălțimea paginii. Cu toate acestea, opțiunea de a restrânge întregul meniu este ușor de atins și la doar un singur acces. Acest buton div este, de asemenea, perfect pentru glisoarele de imagine în colaborare cu redimensionarea dinamică a fotografiilor.
Utilizarea interogărilor media
Dacă un ecran mobil ar sparge structura de 2 sau 3 coloane, veți ajunge la fiecare dintre zonele de conținut așezate unul peste celălalt. Întregul sit ar părea că sângerează și poate cădea foarte confuz, fără a avea zone distincte. O idee mai bună este să adăugați o margine inferioară pe fiecare coloană, numai pentru dispozitivele mobile, folosind o foaie de stil exterioară mobile.css.
Cu aceste stiluri noi conținutul dvs. este împărțit în secțiuni divizibile. Atributul media de mai sus este special conceput pentru a viza dispozitive iPhone mai vechi în vizualizare peisaj. Dar se va aplica și dispozitivelor cu ecrane mai mici de 480 de pixeli. Utilizați acest lucru în avantajul dvs., astfel încât să puteți stabili în ce punct aspectul “se rupe”.
Există câteva opțiuni pe care le puteți utiliza pentru detectarea orientării dispozitivului. Acest ghid fantastic pe mass-media CSS vă poate oferi câteva idei. În plus, noul proiect mobil 320 și mai sus oferă o placă de bază pentru CSS mobilă @mass-media stiluri. Acestea pot fi incluse direct în același fișier mobile.css și pot aplica reguli pentru multe dispozitive diferite.
/ * Smartphone-uri (portret și peisaj) ----------- * / numai în ecranul @media și (min-device-width: 320px) / / * Smartphone-uri (peisaj) ----------- * / numai ecranul @media și (min-width: 321px) / * Stiluri * / / * ------- * / numai pentru ecranul @media și (max-width: 320px) / * Stiluri * / / * iPads (portret și peisaj) ----------- * / @ numai media (min-device-width-width: 768px) și (max-width-device: 1024px) / * Styles * /
(Sursa: Întrebări media CSS3 Hardboiled)
Instrumente utile
- Schelet - Placă plăcută pentru un design mobil receptiv
- Trecerea de la adaptiv la complet receptiv
Showcase: modele frumoase receptive
Sper că aceste sfaturi și tehnici de design vă vor încuraja să vă mutați spre construirea unor structuri receptive interesante nu doar pentru ecrane mobile, ci și pentru orice dispozitiv obișnuit cu navigare pe Internet. Pentru a menține fluxul de sucuri creative, am pus împreună o mică vitrină de design web mobil receptiv. Asigurați-vă că verificați unele dintre caracteristicile unice și împărtășiți-vă gândurile cu privire la design sau subiect în zona de discuții.
agățând luna
Hoteluri Macdonald
CSS-trucuri
Cogul fericit
Teixido
CSS Wizardry
Arhitecți de informații
ART = LUCRU
Proiectare Web Hardboiled
Sony USA
Viitorul prietenos
Nu putem să gândim
Locuri de muncă autentice
Colbow Design
320 și în sus
FMS CMS
Happy Bit
Pulp electric
Foster Props
Plexical
Prajita de Preeti
Mai multe pericole
Centrul de Informare al Stomatologiei
ribot - design de interfață
Bună, Fisher
Summitul social al comerciantului
William Csete
Woolly Robot
Meltmedia
Rămâneți aproape!
În postul de mâine vom prezenta câteva gratuit ce teme WordPress receptiv puteți descărca pentru utilizare. Asigurați-vă că aveți tonul pentru asta.
