Share
Atunci când tabletele și telefoanele inteligente au început să apară, mulți editori au dezvoltat site-uri distincte distincte sau, cel puțin, arbori cu coduri HTML generate în mod distinct, pentru a personaliza experiența vizitatorilor pe diferite dispozitive. Desigur, au apărut soluții pentru a face mai ușoară, cum ar fi pluginul tematic pentru mobil WordPress:
Dar, pentru a oferi într-adevăr o experiență solidă pentru vizitatori pe toate dispozitivele, majoritatea proiectelor au necesitat dublarea sau triplicarea designului, codarea și testarea eforturilor.
Conceptul de design web receptiv a căutat să unifice arborele de cod, să elimine furci de cod și să ofere o abordare mai simplă pentru a oferi o experiență de înaltă calitate a utilizatorilor pe toate dispozitivele. La început, a fost nevoie de un pic de experimentare și de o expertiză timpurie, dar astăzi, ea a devenit mainstream. Este o dovadă a orientării în jurul tehnologiei DRY.
Când am lansat site-ul personal WordPress, alegerea designului receptiv a fost încă un pic de salt - și multe site-uri efectuate cu diferite nivele de calitate pentru experiența vizitatorului dvs..
Comunicarea open source a Bootstrap de la Twitter a ajutat la transformarea incredibilă a reacției în designul web. Probabil, ca mine, rulați o temă receptivă pe site-ul dvs. și sunteți familiarizați cu conceptele generale de prezentare dinamică. Dar știți cât de repede se face designul web sub capota? Știi cum să construiești ceva receptiv de la zero? Doriți să aflați mai multe?
În acest tutorial, vă încurajăm să consultați ultima hârtie albă a companiei Telerik privind designul web receptiv (RWD). Tehnicile pentru construirea de aplicații HTML5 pentru orice dimensiune a ecranului, pe care le puteți descărca gratuit acum, oferă un ghid extrem de detaliat pentru a răspunde la aceste întrebări și pentru a vă ajuta să vă apropiați de viteză.
Există multe motive pentru care designul web receptiv a trecut de la a fi numit tendință de a fi sinonim cu cele mai bune practici web. Este o modalitate rapidă și eficientă de a servi o experiență personalizată utilizatorilor de desktop și de pe web. Puteți utiliza setul de calificări existent, aveți o bază de coduri, un set de adrese URL și un limbaj de proiectare.
Cartea albă vă învață ce trebuie să știți despre practicile web receptive, astfel încât să puteți crea aplicații pentru orice dimensiune a ecranului. Te învață cum să:
În acest tutorial, vă voi oferi doar un scurt rezumat al ceea ce oferă hârtia albă. De asemenea, particip la discuțiile de mai jos. Dacă aveți o întrebare sau o sugestie de subiect, vă rugăm să postați un comentariu sau tweet la mine @ reifman sau trimiteți-mi un e-mail direct.
Iată câteva din domeniile pe care le va învăța hârtia albă.
Interogările privind mediile fac parte din CSS3 și sunt ceea ce face ca designul web să fie receptiv.
În esență, interogările mass-media ajută browserul să spună condiționalitățile din codul dvs. CSS cum să stil, să ascundă sau să dezvăluie elemente de conținut.
Iată un exemplu pentru cea mai mică dimensiune a dispozitivului de până la una cu o lățime mai mare de 768 px:
/ * Stilul de bază pentru dispozitivele mici mici și în sus * / .ro-text font-size: 22px; / * Pentru ecranul mare și în sus * / numai @media și (min-width: 768px) .hero-text font-size: 48px;
Cadrele populare, cum ar fi Bootstrap, Foundation și Telerik RadPageLayout, utilizează în mare măsură solicitările mass-media pentru a-și crea sistemele puternice de rețea.
Utilizând interogările media în cadrul codului, puteți construi foi de stil cu grilaje care răspund rapid la dispozitive, ajustând dinamic ce și cum vizitatorul văd conținutul dvs. pe baza dispozitivului și a lățimii browserului.
Sintaxa poate varia între cadre, dar conceptul general este același. Fiecare dimensiune a dispozitivului are o proprietate de interogare și proprietăți de mediu corespunzătoare care creează efectul de aspect dorit. Aceste interogări media sunt denumite puncte de pauză. Bootstrap identifică punctele de rupere ca xs (extra mici), sm (mic), md (med), lg (mare). Acestea se referă la mărimea dispozitivului.
Iată câteva exemple de Bootstrap și ce pot face ca pe dispozitive de dimensiuni diferite:
Partea superioară din stânga este dispozitivul mic și comprimatul mai mic, în partea dreaptă sus sunt dispozitivele de dimensiuni medii. Coborâți sunt dispozitivele și desktopurile mai mari.
Un alt concept comun este containerul de conținut de bază. Elementul container este cel mai exterior element al planului. Scopul său este de a crea spațiu alb între aspect și marginea ferestrei browserului.
Cartea albă vă arată, de asemenea, că designul de web receptiv instruiește conținutul să se extindă sau să se contracte pe baza dimensiunii afișării vizitatorului:
Cred că alegerea standardelor este incredibil de importantă în dezvoltarea software-ului de succes. Ajută echipele să comunice și permite oamenilor noi să vină la viteză rapidă. Aceasta face angajarea mai ușoară a oamenilor cunoscând abilitățile stabilite în tehnologiile standard. Și îmbunătățește siguranța, performanța și caracteristicile în timp - mai ales atunci când utilizează tehnologii open-source.
Alegerea unui cadru standard în designul web receptiv poate aduce o mare diferență succesului sau eșecului proiectului dumneavoastră. Cartea albă Telerik vă umblă prin avantajele și dezavantajele uneia dintre cele mai populare, Bootstrap:
Bootstrap oferă cele mai bune caracteristici de clasă, cum ar fi o rețea solidă receptivă, primul design mobil, clase CSS helper, componente adaptive JavaScript și multe altele. Grila este, în mod implicit, o rețea standard de 12 coloane cu o sintaxă simplă pentru crearea de machete care acceptă mai multe dimensiuni ale ecranului.
Cartea albă subliniază, de asemenea, Fundația Zurb. Este un cadru open-source care a evoluat de la Bootstrap.
Fundația este dotată cu caracteristici avansate, potrivite pentru echipe cu dezvoltatori experimentați, în special pentru cei care folosesc Sass.
Cartea albă se înscrie și într-o serie de subiecte avansate:
Fără a merge prea departe, ne dă celor mai mulți dintre noi o introducere foarte detaliată a celor mai importante aspecte pe care trebuie să le cunoașteți.
Sper că v-am intrigat destul că doriți să aflați mai multe. În calitate de manager de proiect care gestionează în mod regulat persoane cu experiență în aceste probleme, am constatat că acesta este un ghid foarte ușor de înțeles pentru un design web receptiv și cum funcționează.
Vrei să te scufunzi? Vizitați colecția de descărcări și descărcări ale cărții electronice Telerik, trebuie să cunoașteți tehnici pentru construirea de aplicații HTML5 pentru orice dimensiune a ecranului acum.
Aceste cadre responsabile sunt puncte de plecare importante și includ componentele UI pentru a începe proiectul. Componentele conțin, de obicei, caracteristicile de bază necesare funcționării și construirii prototipurilor. Cu toate acestea, aplicațiile dvs. mai avansate și cu funcții complete necesită caracteristici de interfață de utilizator mai robuste. În curând, căutați o suită UI compatibilă cu web-ul compatibil.
Funcția UI Telerik Kendo are o rețea, diagrame, planificatoare și alte componente care funcționează perfect cu orice cadru de design web receptiv pe care îl utilizați. A fost făcută de sponsorul nostru care a creat hârtia albă RWD de mai sus.
Vreau doar să vă dau un tur vizual rapid despre ceea ce vă puteți aștepta de la interfața Kendo:
Construirea unor controale interactiv interactive de rețea nu este niciodată ușor. Kendo UI oferă o grilă puternică și flexibilă din cutie:
Există o vizualizare program (sau calendar):
Interfața Kendo include diagrame încorporate:
Și există un editor bogat, ușor de configurat:
De fapt, există o bibliotecă plină cu 73 de widget-uri UI care se adaugă:
Practic, în acest moment, există două lucruri pe care trebuie să le faceți:
Sper că sunteți intrigat de ceea ce poate oferi albumul HTML5 al companiei Telerik (și de Kendo UI Framework). Vă rugăm să nu ezitați să postați experiențele dvs. de mai jos, precum și întrebări și comentarii. Puteți, de asemenea, tweet la mine @ reifman sau trimiteți-mi un e-mail direct și răsfoiți pagina de instructor Envato Tuts + pentru a vedea alte tutoriale pe care le-am scris.
Accentsconagua