Share
Pe măsură ce ne mutăm în 2015, este momentul potrivit pentru a aborda "Statul de Web Design Responsabil".
Vom revedea ceea ce știm despre RWD, ceea ce a fost lăsat pe marginea drumului în ultima vreme, noile trucuri pe care le putem încorpora astăzi în jocul nostru și ce se întâmplă la orizont.
Înainte de a intra în aceasta, să începem prin definirea a ceea ce în realitate înțelegem atunci când spunem "Design Web Responsabil".
Când Ethan Marcotte a inventat inițial termenul de acum cinci ani în articolul său despre A List Apart, el a citat grilajele fluide, imaginile flexibile și interogările mediatice ca trei "ingrediente tehnice" ale RWD.
Imaginea nemuritoare de însoțire a lui Kevin CornellCu toate acestea, el a calificat imediat aceste specificații spunând:
"... dar, de asemenea, necesită un mod diferit de gândire".
Începând cu acel articol din 2010, am văzut o evoluție continuă a tehnologiei pe care oamenii o folosesc pentru a accesa internetul, precum și apariția mai multor ingrediente tehnice noi care pot fi adăugate în setul nostru de instrumente de dezvoltare.
Încă mai folosim rețele de fluide, imagini flexibile și interogări media, însă aceste trei lucruri nu mai formează o imagine completă a ceea ce implică Responsive Web Design.
Tehnologia și tehnicile de web design sunt într-o stare perpetuală de flux, deci definiția RWD ar trebui să ne dea în mod ideal un mod diferit de gândire care va fi la fel de aplicabil după alți cinci ani de schimbare, așa cum este astăzi.
În opinia mea, acest mod de gândire poate fi rezumat după cum urmează.
"Responsive Web Design este o abordare a creării de site-uri care pot răspunde la toate dispozitivele de navigare web cunoscute, cu livrarea de conținut și optimizarea interacțiunii UI în cel mai înalt grad posibil pentru toți vizitatorii. "
Concentrându-ne pe modul de gândire care stă la baza Responsiv Web Design, mai degrabă decât ingredientele tehnice specifice, rămânem liberi să ne străduim să găsim cele mai bune noi modalități de a crea site-uri responsabile în peisajul continuu al industriei noastre.
Deși există cu siguranță multe lucruri care s-au schimbat în RWD, există, de asemenea, câteva lucruri care au rămas în esență aceleași și că mulți dezvoltatori vor fi de acord să fie o bună practică.
Iată câteva dintre cele mai acceptate aspecte ale actualei RWD, așa cum o știm.
Știm cu toții că trebuie să satisfacem o listă de rezoluții posibile, atât timp cât brațul, densitățile pixelilor multiple și dimensiunile diferitelor ferestre de vizualizare.
Trebuie să satisfacem mai multe metode de introducere, de ex. spunand la revedere dependenta de mouse-ul si transformarea elementelor UI in atingere.
Trebuie să folosim interogările media pentru a implementa ajustări ale machetelor noastre, atunci când sunt necesare.
Știm că punctele de intersecție nu trebuie să fie plasate la lățimi prestabilite, ci mai degrabă în punctul în care designul "se rupe" și justifică ajustarea.
Imaginile noastre trebuie să fie dimensionate în mod fluid, astfel încât să nu fie prea mari sau prea mici la diferite dimensiuni de afișare.
Alte medii, cum ar fi playerele video și audio, trebuie, de asemenea, să se comporte în același mod fluid.
Trebuie să includem o meta-etichetă de vizualizare a imaginilor (și, în perspectivă, echivalentul CSS), astfel încât aspectul nostru să se comporte cum ne așteptăm ca:
Există câteva filozofii și tehnologii care, în trecut, au fost încorporate într-un design web receptiv sau cel puțin nu au fost excluse în mod absolut, dar acum sunt treptat scoase din imagine prin alternative îmbunătățite.
Luați în considerare următoarea colecție de dispozitive de navigare pe web:
Țineți cont de faptul că această listă este compusă în întregime din cazuri reale din lumea reală.
Să presupunem că site-ul meu are un set de caracteristici specifice de dimensiuni mai mici, touch-friendly, specifice pentru dispozitive mobile și caracteristici de proiectare specifice dimensiunilor specifice mouse-ului. La ce lățime trebuie setat interogările media să implementeze funcțiile "mobile" și "desktop" astfel încât toți utilizatorii acestor dispozitive să aibă o experiență de primă importanță?
Lista noastră acoperă o serie de exemple diferite, dar există sute dacă nu chiar mii de cazuri suplimentare de utilizare acolo care aruncă chei suplimentare în lucrări.
Realitatea este că astăzi nu mai există o distincție clară între dispozitive mobile și desktop, astfel încât cel mai bun mod de urmat este acela de a satisface simultan toate metodele cunoscute de navigare pe Internet.
Dacă site-urile dvs. sunt construite de la sol pentru a răspunde frumos fiecărui caz de utilizare cunoscut, nu numai celor definite în mod tradițional ca mobile și desktop, ați creat cea mai largă formă de reacție posibilă.
În primul rând, am renunțat la încercarea de a face machete fixe bazate pe pixeli în întregime în Photoshop pentru că nu erau suficient de fluide sau suficient de flexibile pentru a face față spectrului în curs de dezvoltare al cerințelor de vizualizare.
Acum, de asemenea, începem să renunțăm la aranjarea pixelilor fixați în codul nostru, pentru aproape același motiv. În loc să construim schemele noastre folosind o combinație de rem, em și % valorile noastre, site-urile noastre rămân întotdeauna complet scalabile și flexibile.
Cu abordarea unității flexibile, desenele pot fi scalate în sus și în jos în mod uniform prin schimbarea unei valori de bază unice. Setările pentru fonturile browserului și pentru zoom ale utilizatorilor pot fi pe deplin respectate și acceptate. Mai multe probleme legate de mărimea ferestrei pot fi rezolvate imediat. Cel mai important, citirea conținutului și accesibilitatea pot fi întotdeauna menținute.
Cadrele front-end "Big 2" deja debarchează The Good Ship PX și îmbarcă zborurile lor către Land Flexible Unit.
Bootstrap 4 este în lucru și va fi în întregime rem / em / % bazându-se, lăsând în urmă px bazate pe planurile Bootstrap 3. Și Fundația 5 și-a încheiat deja trecerea la lucrul cu unități flexibile.
Zilele vechii unități de imagine vechi pe care am cunoscut-o cu toții de-a lungul anilor se apropie.
S-ar putea ca curând să se găsească într-un scaun confortabil în casa de pensionare, alături de vechii săi prieteni din zilele de glorie, IE6 suport și animate anteturi Flash.
Vorbind despre Flash ...
Desigur, s-ar putea să fi văzut că anteturile Flash animate dispăreau cu ceva timp în urmă, dar încă mai vedem că filmele, prezentările de diapozitive și jocurile dependente de Flash se dezvăluie destul de regulat. Nu vorbesc doar despre site-urile mici de pasionați - văd site-uri importante și foarte traficate care afișează încă acest mesaj dacă nu utilizați Flash și încercați să vizionați materialul video:
Este foarte frecvent ca dispozitivele mobile să nu accepte Flash, încrederea în acesta pentru a furniza conținut nu este cea mai sigură abordare.
De fapt, din motive legate în primul rând de securitate și stabilitate, browserele web încep să se îndepărteze de sprijinirea unor plugin-uri cum ar fi Flash, Silverlight și Java, în favoarea unei tehnologii alternative care funcționează exclusiv prin includerea browser-ului nativ.
A sosit timpul să începem să lăsăm slides-ul bazat pe plugin-uri și să trecem la o nouă eră a tehnicilor de afișare media.
Unele dintre aceste tehnologii sunt aproape noi și unele au fost în jur de ceva timp, dar se îmbunătățesc continuu, dar toate au un lucru în comun: sunt intrați în lumea RWD care depășesc concentrarea inițială pe rețele flexibile, imagini fluide și interogările mass-media.
Doar pentru că Flash și partenerii săi se află în jos, nu înseamnă că nu putem avea încă lucruri frumoase. Video, audio, animație și chiar jocuri 3D și pline sunt încă foarte mult în mix datorită HTML5 și bunurilor bazate pe CSS3 și JavaScript pe care le aduce în mix.
În cazul în care am avut plug-uri de browser, acum avem playere video și audio HTML5, animație CSS3, instrumente cum ar fi Google Web Designer, Canvas, WebGL și o listă din ce în ce mai bună de bunuri interesante noi.
Noul element HTML5 și element.
Aceasta ne permite să efectuăm verificări privind mărimea portului de vizualizare și a densității pixelilor dispozitivului și apoi să încărcăm cea mai potrivită versiune a unei imagini în funcție de rezultate.
Încă nu este complet susținut nativ în browsere, cu toate acestea există un polyfill foarte solid numit Picturefill (de Scott Jehl, omul din spatele Design Responsabil Responsive), care permite
Citiți mai multe despre cum funcționează toate în Quick Tip: Cum să utilizați HTML5 "picture" pentru imagini receptive.
De ce aveți pictograme cu dimensiuni fixe când puteți avea libertatea de redimensionare completă, cu o schimbare la setarea unei singure dimensiuni a fontului în CSS?
Prin intermediul unor biblioteci uimitoare de fonturi web, cum ar fi Font Awesome, Entypo, Typicons și multe altele, puteți avea tot felul de imagini pe site-urile dvs., de la rachete la agrafe de birou până la logo-uri sociale. Dar deoarece sunt livrate ca fonturi și nu imagini, le puteți recolora și redimensiona pe toate prin intermediul CSS.
Acest lucru înseamnă că puteți asigura pictogramele dvs. să răspundă la dimensiunea ferestrei de vizualizare în care se află, întotdeauna frumoase și ușor de văzut și de a interacționa cu ele, după cum este necesar.
Flexbox este setat pentru a rezolva multe dintre cele mai mari dureri de cap pe care designerii de web au încercat să le stingă de ani de zile.
Există o singură problemă: ratele de utilizare a browserelor care nu o suportă sunt încă prea importante în multe cazuri de utilizare pentru ca Flexbox să meargă complet la lucru. Dacă lucrați la un proiect care exclude sprijinul IE8, IE9 și Opera Mini, aveți la el.
Cu toate acestea, CanIUse.com se referă la procentul de utilizare globală a acestor trei browsere, la 3,18%, 2,13% și, respectiv, 2,82%. Nu există, de asemenea, nici o schimbare de încredere pentru Flexbox la minut. Asta inseamna ca pe un site cu trafic mediu pana la greu te uiti la sute de mii de utilizatori care ruleaza lunar intr-un site rupt.
Cu totii dorim ca Flexbox sa devina standardul in managementul layout-ului, astfel incat sa nu mai visezi la modalitatile de a face ceea ce ar trebui sa fie sarcini de layout relativ simple si de indata ce cele trei marci rosii ramase in acest tabel CanUUse se estompeaza,.
Am vorbit despre componentele web cu puțin timp în urmă, și ei încă se îndreaptă spre noi ca pe calea viitorului, apropiindu-se de ruperea în zi de zi a mainstream-ului.
Anterior am menționat video, audio și imagine elemente și cât de utile sunt pentru un design web receptiv. Atunci când componentele web ajung în vigoare, fiecare dintre noi va fi în măsură să creeze în mod efectiv elemente personalizate la fel ca acestea, pentru orice scop trebuie să-l umplem. În plus, componentele web vor fi partajate, ceea ce înseamnă că există o cantitate practic nelimitată de elemente noi receptive care pot deveni utilizabile în desenele noastre.
Acest lucru democratizează esențial HTML, care este un fel de mare.
Dacă există un element nou pe care lumea ar putea să-l folosească cu adevărat, nu va trebui să așteptăm implementarea browser-ului - trebuie să vedem doar că un dezvoltator open source a pus ceva împreună și a luat decizia generoasă de a-și împărtăși munca.
De exemplu, am menționat mai devreme că RWD necesită o plasare media flexibilă și care include includerea mediilor încorporate iframe, cum ar fi videoclipurile YouTube, pentru a-și mări și menține raportul de aspect.
Dezvoltatorul Joselito Junior a creat și a deschis o componentă web care face doar acest lucru, folosind acest simplu HTML:
Citiți mai multe despre această nouă tehnologie fascinantă în Cum puteți crea propriile elemente HTML cu componente Web.
Deoarece tehnologia se schimbă mereu cu minutul, este extrem de important să rămânem concentrându-ne pe obiectivele de bază ale designului web receptiv și să nu ne prea atașăm la nici un mod de a face lucrurile. În acest fel, ne asigurăm că suntem întotdeauna deschiși să descoperim noi modalități de a crea experiențe mai bune pentru persoanele care utilizează site-urile noastre.
Pentru ca acest lucru să se întâmple, trebuie să ținem mereu urechile la sol, ascultând cele mai recente evoluții atât în dispozitivele de navigare web, cât și în tehnicile de web design.
Dacă doriți să vă spălați pe propriile dvs. tehnici de proiectare receptivă, vă recomandăm să verificați cursul Responsiv Web Design Revisited. În doar puțin peste două ore vă voi trece prin tot ceea ce trebuie să știți pentru a crea un site web complet receptiv cu tehnicile minime. Primele două videoclipuri sunt gratuite, deci mergeți mai departe și obțineți o previzualizare a site-ului pe care îl veți crea și tot ce veți învăța.
Aveți un mare 2015, și aici este pentru a evoluează în continuă dezvoltare design web!
Accentsconagua