Conţinut
- Instrumente pentru început
- 01. Foi de schițe de design web receptiv
- 02. Caiet de schițe de proiectare receptivă
- 03. Wireframes responsive
- 04. Modele de aspect multi-dispozitiv
- 05. Placi de stil
- Instrumente pentru o rețea flexibilă / fluidă
- 06. Sistemul Golden Grid
- 07. Foldy960
- 08. SimpleGrid
- 09. Grila CSS de 1140px
- 10. Sistemul de grilă CSS columnal
- 11. Sistemul de rețea semantică
- 12. SUSY
- 13. Gridpak
- 14. Grilă
- 15. O grilă Photoshop mai bună pentru RWD
- 16. Rețele fluide
- 17. Calculator receptiv
- Instrumente pentru imagini receptive (și text)
- 18. Imagini receptive
- 19. Imagini adaptive
- 20. Sencha.io Src (fost Tinysrc)
- 21. FitText
- 22. slabText
- Instrumente pentru interogări media
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Categorizr
- Proiectare receptivă (și mobilă)
- 27. 320 și mai sus
- 28. Fără rețea
- 29. Schelet
- 30. Bootstrap
- Plugin-uri, shims și polyfills
- 31. Plugin receptiv
- 32. Răsturnarea
- 33. MediaTable
- „Testare, testare: 1-2-3 ...”
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Testarea proiectării responsive
- 37. Responsabilul
- 38. Responsive.is
- 39. Screenqueri.es
- 40. Aptus
- 41. Bookmarklet Design Responsive
- 42. Bookmarklet Test Responsive Design
- 43. Screenfly
- 44. Indicator de interogare media
- 45. Shim
- 46. Drive-In
- 47. Adobe Shadow
- 48. Opera Mobile Emulator + Depanare la distanță
- Inspirație suplimentară
- 49. MediaQueri.es
- 50. @RWD
- I-a plăcut asta? Citiți acestea!
După cum a fost introdus / inventat de Ethan Marcotte atât în articolul său „Responsive Web Design”, cât și în cea mai bine vândută carte, este nevoie de trei elemente pentru a face un site receptiv:
- O rețea flexibilă / fluidă
- Imagini receptive
- Interogări media
Există o mulțime de alte articole grozave care acoperă motive, concepte și tehnici în ceea ce privește design-ul web receptiv, așa că ne vom concentra pe acest articol asupra unor instrumente de top care vă vor ajuta să deveniți receptiv responsabil.
Instrumente pentru început
Înainte de a începe construirea site-ului dvs., este mai bine să schițați modul în care elementele de pe pagină se vor adapta pentru a se potrivi diferitelor dimensiuni ale browserului diferitelor dispozitive pe care vor fi vizualizate și pentru a evita deconectarea care vine adesea de la gândirea în primul rând la designul desktopului și restul iterațiilor responsive ca gândire ulterioară (a se vedea în special comentariul lui Stephanie (Sullivan) Rewis).
01. Foi de schițe de design web receptiv
Acest set de foi de schițe responsive, realizat de Jeremy P Alford, este un punct de plecare excelent pentru a începe cartografierea modului în care secțiunile de pagină se vor schimba în diferite rezoluții.
02. Caiet de schițe de proiectare receptivă
Dacă preferați să păstrați toate schițele într-un singur loc, atunci vă recomandăm să luați în considerare această carte legată de 50 de foi de schițe adaptabile de către compania App Sketchbook.
03. Wireframes responsive
Una dintre dificultățile construirii site-urilor web receptive este utilizarea wireframelor pentru a arăta cum va funcționa designul receptiv. James Mellers de la Adobe a pus la punct acest instrument experimental pentru a arăta modul în care poate funcționa un wireframing receptiv al aspectelor complexe.
04. Modele de aspect multi-dispozitiv
Când planificați un design receptiv, este util să vedeți cum l-au abordat alți oameni înaintea dvs., așa că Modelele de dispunere pe mai multe dispozitive ale lui Luke Wroblewski, care enumeră modele populare cu linkuri spre exemple, este un loc minunat pentru a începe.
05. Placi de stil
Plăcile de stil ale lui Samanatha Warren propun o nouă tehnică pentru proiectare în epoca receptivă; mai degrabă decât machetele de design cu lățime fixă, acestea sunt ca niște mostre sau moodboard-uri care arată abordarea generală a designului fără a intra în detalii granulare.
Instrumente pentru o rețea flexibilă / fluidă
După cum sa menționat anterior, prima componentă necesară pentru un design receptiv este o rețea flexibilă / fluidă.Următoarele sunt deja pre-construite: trebuie doar să le descărcați și veți fi rapid pe drumul către un site mai receptiv.
06. Sistemul Golden Grid
Joni Korpi, care a dezvoltat și Less Framework, a lansat recent această nouă versiune a unui sistem de rețea fiabil pentru un design receptiv. Considerat „pliat”, deoarece se adaptează cu ușurință de la 16, la opt, la patru coloane, sistemul Golden Grid are, de asemenea, o mică suprapunere a browserului, care expune grila pe paginile dvs. pentru testare.
07. Foldy960
Genti talentați de la Paravel, Inc. au lansat grila modificată 960.gs pe care o folosesc ca bază pentru proiectele lor responsive.
08. SimpleGrid
SimpleGrid, de Conor Muirhead, a fost construit cu o capacitate de răspuns rapidă, astfel încât este ușor să începeți și să rulați cu proiectul dvs. de site web receptiv.
09. Grila CSS de 1140px
Un alt sistem de grilă receptiv excelent este Grila CSS de 1140px a designerului de la Andy Andy Taylor, care trece de la o rezoluție largă pentru desktop până la mobil.
10. Sistemul de grilă CSS columnal
Sistemul de rețea Columnal, creat de Pulp + Pixels aka directorul creativ Nick Gorsline, se bazează pe sistemul de rețea de 1140px, dar cu câteva bunătăți suplimentare, cum ar fi un kit de proiectare cu foi de schițe și șabloane de wireframing, precum și stiluri de depanare CSS.
11. Sistemul de rețea semantică
Extensiile CSS preprocesate, cum ar fi Sass și LESS, devin din ce în ce mai populare, iar sistemul de rețea semantică al lui Tyler Tate le folosește pentru a avea un efect maxim în acest sistem de rețea care pretinde că nu folosește clase sau elemente inutile. Citiți mai multe la coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
La fel ca sistemul de rețea semantică, SUSY de la Oddbird a creat un sistem de rețea care nu folosește niciun markup suplimentar sau clase speciale, dar SUSY se adresează numai utilizatorilor Sass (și extensiei sale, Compass).
13. Gridpak
Gridpak, de la Erskine Design, este unul dintre cele mai noi generatoare de rețea responsive din jur. Vă permite să setați coloanele și jgheaburile la un număr de puncte de întrerupere, apoi scoate fișiere CSS, JavaScript și PNG, astfel încât întreaga echipă să lucreze din același punct de plecare.
14. Grilă
Există încă un ușor aer de mister peste Gridset, deoarece, în momentul în care scriu acest lucru, nu a fost deocamdată lansat. Dar instrumentul de la Mark Boulton Design promite sisteme de rețea personalizate, non-prescriptive, și o modalitate de a vă salva și gestiona rețelele online.
15. O grilă Photoshop mai bună pentru RWD
Elliot Jay Stocks propune abandonarea vechiului standard de rețea de facto de 960px și lucrul de la o bază de 1000px, făcând mai ușor să lucreze cu toate calculele procentuale. Dacă sunteți de acord, a făcut un PSD cu care să începeți să lucrați.
16. Rețele fluide
Dacă designul dvs. este extrem de specializat și trebuie să vă creați propria rețea personalizată, puteți face acest lucru cu calculatorul de rețea fluidă Harry Roberts, nominalizat pentru nou-venit.
17. Calculator receptiv
Încă un calculator de pixeli la procente, dar acesta de Stu Robson merge cu un pas mai departe decât alții, generând toate regulile CSS pentru dvs., ceea ce înseamnă că le puteți copia și lipi în foile de stil.
Instrumente pentru imagini receptive (și text)
O altă componentă crucială a designului web receptiv sunt imaginile fluide. În timp ce tehnica de realizare a imaginilor fluide este simplă, optimizarea performanțelor și a încărcării paginii pentru diferite dispozitive pare să fie una dintre cele mai mari provocări în designul web receptiv. Iată câteva resurse pentru abordarea problemei.
18. Imagini receptive
Filament Group a conceput o modalitate de a trimite o imagine de dimensiuni adecvate pe baza rezoluției ecranului. Acest experiment cu imagini primare pe mobil, care scalează în mod responsabil și responsabil, necesită referința la două imagini de dimensiuni diferite.
19. Imagini adaptive
Matt Wilcox s-a inspirat din instrumentul Responsive Images pentru a crea imagini adaptive, care utilizează PHP și un pic de JavaScript pentru a servi imaginile adecvate dispozitivului utilizatorului fără a necesita niciun markup suplimentar.
20. Sencha.io Src (fost Tinysrc)
Sencha oferă un serviciu cloud care trimite versiuni optimizate ale imaginilor găzduite pentru dimensiunea dispozitivului care le solicită. Pentru a afla cum să-l folosiți, consultați docs.sencha.com/io/src/.
21. FitText
O altă bijuterie de la Paravel, Inc este FitText.js, un plug-in jQuery pentru a face tipul web de titlu să răspundă la design și dispozitiv. Pentru detalii, consultați trentwalton.com/2011/05/10/fit-to-scale/.
22. slabText
Inspirat de FitText și de algoritmul SlabType, slabText-ul lui Brian McAllister este un plug-in jQuery care face blocuri de text îndrăznețe care redimensionează în mod receptiv, păstrând în același timp o lățime definită.
Instrumente pentru interogări media
Acum că aveți o idee despre cum se va schimba aspectul dvs. pentru diferite dispozitive, o rețea fluidă și imagini fluide, aveți nevoie de interogări media pentru a schimba elementele paginii într-o stare de reacție.
23. Respond.js
Singura problemă cu designul receptiv este că browserele care nu pot citi interogări media rămân în urmă. Este posibil să nu fie o problemă pentru publicul dvs. țintă, dar este încă o bună practică să găzduiți utilizatorii din browserele mai vechi. Respond.js, de Scott Jehl, acceptă numai proprietățile min-width și max-width.
Pentru mai multe informații, consultați filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js, de Wouter van der Graaf, permite versiunilor mai vechi ale browserelor IE și ale altor browsere să testeze și să aplice în mod eficient tot felul de interogări media.
25. Adapt.js
Nathan Smith, autorul sistemului original de rețea 960.gs, a scris Adapt.js, un script care detectează dimensiunile browserului și servește doar foile de stil necesare - cum ar fi interogări media, dar fără interogări media, ceea ce înseamnă că funcționează și în browsere mai vechi.
26. Categorizr
Aceasta este detectarea dispozitivelor abordate din unghiul opus - scriptul Categorizr al lui Brett Jankord presupune că dispozitivele sunt mobile, cu excepția cazului în care sunt detectate altfel ca desktop sau tabletă, permițându-vă să difuzați resurse browserelor într-un mod simpatic.
Proiectare receptivă (și mobilă)
În spiritul unui flux de lucru eficient și receptiv, plăcile de tip boiler facilitează procesul de mutare a proiectelor în browser mai devreme decât mai târziu. Majoritatea acestor plăci combinate combină cele mai bune instrumente menționate mai sus într-un singur pachet elegant: o grilă flexibilă îmbunătățită cu scripturi, în timp ce implementează mai întâi filozofiile mobile, conținutul.
27. 320 și mai sus
Andy Clarke's 320 and Up este un cazan mobil pentru prima dată, care se integrează cu multe alte instrumente moderne de design web, cum ar fi LESS și Bootstrap (vezi # 30). Este un mod ușor și agil de a pune în funcțiune rapid un site. Verificați și interviul nostru cu Andy, în care ne spune mai multe despre noua versiune.
28. Fără rețea
Gridless este un cazan HTML5 și CSS3 care poate servi drept bază pentru proiectele dvs. receptive, cu accent pe tipografie și compatibilitate cross-browser integrată.
29. Schelet
Spre deosebire de cele două cazane anterioare, al căror punct de plecare este cu cea mai mică rezoluție, kitul de dezvoltare Skeleton, creat de Dave Gamache, se bazează pe sistemul de rețea 960.gs și se ridică la mobil. Skeleton se mândrește, de asemenea, cu un cadru de stil excelent pentru ca dezvoltatorii să construiască stiluri deasupra.
30. Bootstrap
Construit de Twitter și acum open-source, Bootstrap este un cadru și o serie de componente pentru a obține rapid un site online și, începând cu versiunea a doua, toate componentele sale de bază funcționează în mod receptiv.
Plugin-uri, shims și polyfills
Deși browserele și software-urile moderne tind să fie adaptate pentru a răspunde, uneori trebuie să folosim instrumente suplimentare pentru a oferi o experiență consistentă.
31. Plugin receptiv
Marios Lublinski a scris un plugin WordPress care promite să transforme orice temă WP actuală într-una receptivă. Cum funcționează acest lucru, nu știu încă, deoarece nu a fost lansat în momentul scrierii acestei scrieri, dar dacă este la înălțimea promisiunii sale, ar trebui să fie foarte util.
32. Răsturnarea
Gestionarea depășirii conținutului funcționează bine pe browserele desktop, dar browserele mobile mai vechi o gestionează inconsecvent. Poliampla Overthrow de la harnicul grup de filamente adaugă o degradare grațioasă consistentă între dispozitive, asigurându-vă că toți utilizatorii de telefonie mobilă beneficiază de cea mai bună experiență posibilă.
33. MediaTable
Pluginul jQuery al lui Marco Pegoraro, MediaTable, funcționează cu Respond.js pentru a vă ajuta să rezolvați problema modului de afișare a tabelelor de date mari pe dispozitive cu ecran mic, realizând coloane receptive și adăugând o comutare de afișare / ascundere unde este cazul.
„Testare, testare: 1-2-3 ...”
Un alt aspect al fluxului de lucru receptiv este să cunoașteți dispozitivele și rezoluțiile țintă și apoi să le testați în ele.
34. resizeMyBrowser
resizeMyBrowser, de către dezvoltatorul frontend Chen Luo, are mai multe dimensiuni prestabilite pentru fereastra browserului dvs. pentru a testa paginile proiectate în mod responsabil sau pentru a crea o nouă presetare dacă nu o puteți găsi pe cea care se potrivește nevoilor dvs.
35. responsivepx
La fel ca resizeMyBrowser, responsivepx, construit de Remy Sharp, vă încarcă paginile într-o fereastră unde puteți testa lățimea și înălțimea pentru a determina cât de bine se declanșează interogările dvs. media și unde sunt punctele de întrerupere în proiectare.
36. Testarea proiectării responsive
Un instrument incredibil de util de către designerul și dezvoltatorul Matt Kersley: pur și simplu introduceți adresa URL a site-ului dvs. receptiv în Responsive Design Testing pentru a vedea cum se redă la diferite dimensiuni ale browserului.
37. Responsabilul
Introduceți o adresă URL și Responsinator vă va arăta cum se afișează în multe dimensiuni obișnuite ale dispozitivelor - cu o eficiență robotică nemiloasă. Tama Pugsley și Andy Hovey sunt responsabili pentru aceasta.
38. Responsive.is
Un alt emulator de dispozitiv în pagină, Responsive.is vă permite să tastați o adresă URL, apoi să o redimensionați rapid între o serie de presetări diferite. Este realizat de echipa din spatele viitoarei aplicații Typecast.
39. Screenqueri.es
Încă un instrument pentru dimensiunile browserului, dar Screenqueri.es de la Mandar Shirke se diferențiază prin faptul că are un set extins de presetări pentru mobil și tabletă, precum și o grilă și rigle care fac măsurarea fină mult mai ușoară.
40. Aptus
O altă aplicație pentru testarea site-urilor la mai multe dimensiuni definite, dar Aptus este nativ pentru Mac. Este disponibil prin intermediul Mac App Store și a fi nativ aduce funcții suplimentare, cum ar fi capturi de ecran ușoare și suport offline.
41. Bookmarklet Design Responsive
Victor Coulon a realizat un bookmarklet foarte simplu, dar eficient; când îl activați pe orice pagină web, adaugă o bară de instrumente care vă permite să comutați între patru dimensiuni comune ale ecranului, astfel încât să puteți vedea cum se redă site-ul dvs. la diferite dimensiuni.
42. Bookmarklet Test Responsive Design
Acest bookmarklet de la Benjamin Keen permite o mai mare personalizare, permițându-vă să definiți propriile dimensiuni ale dispozitivului și cât de multe sau puține doriți. Când este activat, afișează site-ul la toate dimensiunile selectate, unul lângă altul pentru o comparație ușoară.
43. Screenfly
Screenfly, de QuirkTools, vă permite să testați un site pe diferite rezoluții pe desktop, tabletă, mobil și televizor. Testarea pe desktop este limitată în prezent la Safari, în timp ce tableta și mobilul au mai multe opțiuni pentru dispozitive și browsere. Televiziunea este limitată la Opera.
44. Indicator de interogare media
Johan Brook oferă un mod CSS pur de a testa când o interogare media a fost declanșată de browser. Indicatorul de interogare media este un alt instrument bun pentru testarea și jocul cu punctele de rupere ale designului.
45. Shim
Unul dintre instrumentele utilizate în reproiectarea Boston Globe, băiatul poster al mișcării RWD, Shim este o aplicație Node.js care rulează o pagină web pe mai multe dispozitive din aceeași rețea Wifi, ceea ce face testarea pe mai multe dispozitive mult mai ușoară. .
46. Drive-In
Dacă nu aveți un server Node.js pentru a rula Shim, Scott Jehl a realizat o versiune mai simplă numită Drive-In, care funcționează fundamental în același mod, dar folosind PHP, Apache și un fișier .htaccess.
47. Adobe Shadow
Adobe își continuă impulsul către tehnologiile web cu acest instrument de depanare la distanță. Instalați Shadow și extensia Chrome pe Mac sau Windows, plus clientul Shadow pe Android sau iPhone și puteți partaja pagini web între mai multe dispozitive diferite.
48. Opera Mobile Emulator + Depanare la distanță
O modalitate mai ușoară de a depana paginile mobile este să instalați Opera și Opera Mobile Emulator și să le conectați pe cele două cu opțiunea lor de depanare la distanță. Simplu și rapid de configurat și are avantajul suplimentar de a testa pe mai mult decât WebKit.
Inspirație suplimentară
Doriți să vă faceți o idee despre modul în care alții își adaptează design-urile?
49. MediaQueri.es
Dacă nu l-ați văzut deja, site-ul Mediaqueri.es are un număr din ce în ce mai mare de site-uri care au trecut către partea receptivă.
50. @RWD
Ethan Marcotte rulează un cont Twitter care aduce cele mai noi știri, instrumente și vitrine din lumea RWD.
Denise Jacobs adoră să fie vorbitoare, autoare, formatoare de web design și evanghelist al creativității, în timp ce Peter Gasston este autorul The Book of CSS3 și un veteran dezvoltator web care face bloguri la Broken Links.
I-a plăcut asta? Citiți acestea!
- Sfaturi profesionale pentru construirea unui site web mobil
- Cele mai bune tehnici CSS și JavaScript
- Cum să creați o aplicație
- Cele mai bune fonturi web gratuite pentru designeri
- Descoperiți ce urmează pentru Realitatea Augmentată
- Descărcați texturi gratuite: de înaltă rezoluție și gata de utilizare acum
