Inhalt
- Tools fir ze starten
- 01. Reaktiounsfäeger Web Design Skizz Blieder
- 02. Reaktiounsfäeger Design Skizzbuch
- 03. Reaktiounsfäeger Wireframes
- 04. Multi-Device Layout Musteren
- 05. Style Plättercher
- Tools fir e flexibelt / flëssegt Gitter
- 06. Golden Grid System
- 07. Foldy960
- 08. SimpleGrid
- 09. Den 1140px CSS Grid
- 10. Kolonnal CSS Gitter System
- 11. Semantescht Gitter System
- 12. SUSY
- 13. Gridpak
- 14. Netzwierk
- 15. E bessert Photoshop Gitter fir RWD
- 16. Flësseg Gitter
- 17. Reaktiounsfäeger Rechner
- Tools fir reaktiounsfäeg Biller (an Text)
- 18. Reaktiounsfäeger Biller
- 19. Adaptiven Biller
- 20. Sencha.io Src (fréier Tinysrc)
- 21. FitText
- 22. slabText
- Tools fir Medienufroen
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Categorizr
- Reaktiounsfäeger Design (a mobil) Kesselplacken
- 27. 320 an Up
- 28. Gridless
- 29. Skelett
- 30. Bootstrap
- Plugins, Shims a Polyfills
- 31. Reaktiounsfäeger Plugin
- 32. Stierwen
- 33. MediaTable
- "Testen, testen: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Reaktiounsfäeger Design Testen
- 37. De Responsinator
- 38. Reaktiounsfäeger.is
- 39. Screenqueri.es
- 40. Aptus
- 41. Reaktiounsfäeger Design Bookmarklet
- 42. Reaktiounsfäeger Design Test Bookmarklet
- 43. Screenfly
- 44. Media Query Indikator
- 45. Shim
- 46. Drive-In
- 47. Adobe Schied
- 48. Opera Mobile Emulator + Remote Debug
- Weider Inspiratioun
- 49. MediaQueri.es
- 50. @RWD
- Liked dëst? Liest dës!
Wéi agefouert / geprägt vum Ethan Marcotte a sengem Artikel "Responsive Web Design" wéi och säi Bestseller Buch, brauch een dräi Elementer fir e Site reaktiounsfäeg ze maachen:
- E flexibel / flëssegt Gitter
- Reaktiounsfäeger Biller
- Media Ufroen
Et gi vill aner super Artikelen déi Motiver, Konzepter an Techniken iwwer reaktiounsfäegt Webdesign decken, sou datt mir de Fokus vun dësem Artikel op e puer Top-Tools halen, déi Iech hëllefe responsabel ze reagéieren.
Tools fir ze starten
Ier Dir mam Site baut, ass et am beschten ze skizzéieren wéi d'Elementer op der Säit sech upassen fir déi verschidde Browsergréissten vun de verschiddenen Geräter ze passen, op déi se gekuckt ginn, an den Trennung ze vermeiden deen dacks aus der Iwwerleeung kënnt den Desktop Design an de Rescht vun de reaktiounsfäege Widderhuelungen als Iwwerleeung (kuckt besonnesch Stephanie (Sullivan) Rewis 'Kommentar).
01. Reaktiounsfäeger Web Design Skizz Blieder
Dëse Set vu reaktiounsfäege Skizzblieder, vum Jeremy P Alford, ass e super Startpunkt fir ze kartéieren wéi d'Säitensektiounen a verschiddene Resolutioune verréckelen.
02. Reaktiounsfäeger Design Skizzbuch
Wann Dir léiwer all Är Skizzen op enger Plaz hält, da wëllt Dir dëst drahtgebonne Buch vu 50 reagéierende Skizzblieder vun der App Sketchbook Firma berécksiichtegen.
03. Reaktiounsfäeger Wireframes
Ee vun de Schwieregkeete fir reaktiouns Websäiten ze bauen ass Wireframes fir ze weisen wéi de responsive Design funktionnéiert. Den James Mellers vun Adobe huet dëst experimentellt Instrument zesummegesat fir ze weisen wéi reagéiert Wireframing vu komplexe Layouten funktionnéiere kann.
04. Multi-Device Layout Musteren
Wann Dir e reaktiounsfäegen Design plangt, ass et nëtzlech ze gesinn wéi aner Leit et virun Iech ugaange sinn, sou datt de Luke Wroblewski seng Multi-Device Layout Patterns, déi populär Mustere mat Linken op Beispiller lëschten, eng super Plaz fir unzefänken.
05. Style Plättercher
Samanatha Warren's Style Tiles proposéieren eng nei Technik fir Design am reaktiounsfäegen Alter; anstatt mat fixe Breet Design Mockups, si wéi Stécker oder Moodboards déi allgemeng Design Approche weisen ouni an de käregen Detail ze goen.
Tools fir e flexibelt / flëssegt Gitter
Wéi virdru gesot, ass déi éischt Komponent fir reaktiounsfäeger Design gebraucht e flexibel / fléissend Gitter.Folgend si scho virgebaut: Dir musst se just eroflueden an Dir sidd séier op der Strooss op e méi reaktiounsfäege Site.
06. Golden Grid System
Joni Korpi, deen och manner Framework entwéckelt huet, huet viru kuerzem dës nei Versioun vun engem zouverléissege Gitter System fir reaktiounsfäegt Design verëffentlecht. Gleeft "ausklappen" wéi et sech einfach vu 16, op aacht, a véier Säulen upasst, huet de Golden Grid System och e klenge Browser-Overlay deen de Gitter op Äre Säiten aussetzt fir ze testen.
07. Foldy960
Déi talentéiert Häre vu Paravel, Inc. hunn de modifizéierten 960.gs Netz verëffentlecht deen se als Basis fir hir reagéiert Projeten benotzen.
08. SimpleGrid
SimpleGrid, vum Conor Muirhead, gouf mat Reaktiounsfäegkeet agebaakt gebaut, sou datt et einfach ass mat Ärem reaktiounsfäege Websäit Projet opzemaachen.
09. Den 1140px CSS Grid
En anert super reagéiert Gitter System ass den 1140px CSS Grid vum Melbourne Designer Andy Taylor, dee vun enger breeder Desktop-Resolutioun erof op mobil geet.
10. Kolonnal CSS Gitter System
De Columnal Gitter System, erstallt vu Pulp + Pixels alias kreativen Direkter Nick Gorsline, baséiert op dem 1140px Gitter System, awer mat e puer extra Goodies wéi e Design Kit mat Skizzblieder a Wireframing Templates, souwéi CSS Debugging Stiler.
11. Semantescht Gitter System
Virveraarbechtte CSS Extensions wéi Sass an LESS ginn ëmmer méi populär, an dem Tyler Tate säi Semantesche Gitter System benotzt se fir maximal Effekt an dësem Gitter System dat behaapt keng onnéideg Klassen oder Elementer ze benotzen. Liest méi op coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
Wéi de Semantesche Gitter System huet Oddbird's SUSY e Gitter System erstallt deen keen extra Markup oder Spezialklassen benotzt, awer SUSY riicht nëmme fir Benotzer vu Sass (a seng Extensioun, Compass).
13. Gridpak
Gridpak, vun Erskine Design, ass eng vun den neisten reaktiounsfäege Gittergeneratoren ronderëm. Et erlaabt Iech Är Kolonnen a Rinnen op eng Zuel vu Breakpoints ze setzen, da gitt CSS, JavaScript a PNG Dateien aus, sou datt Är ganz Equipe aus dem selwechte Startpunkt schafft.
14. Netzwierk
Et ass nach ëmmer e klengt Geheimnis iwwer Gridset well, zu der Zäit wéi ech dat schreiwen, ass et nach net verëffentlecht ginn. Awer den Tool vum Mark Boulton Design versprécht personaliséiert, net verschriwwend, Gitter Systemer an e Wee fir Är Gitter online ze späicheren an ze managen.
15. E bessert Photoshop Gitter fir RWD
Den Elliot Jay Stocks proposéiert den alen 960px de facto Gitterstandard ze verloossen an amplaz vun enger 1000px Basis ze schaffen, fir all Prozentsaz Berechnungen méi einfach ze maachen. Wann Dir averstan sidd, huet hien eng PSD fir Iech gemaach fir mat ze schaffen.
16. Flësseg Gitter
Wann Ären Design héich spezialiséiert ass an Dir musst Ären eegene personaliséierte Gitter erstellen, da kënnt Dir dat mat .net Awards brillant Newcomer Nominéiert Harry Roberts 'Fluid Grid Rechner maachen.
17. Reaktiounsfäeger Rechner
Eng aner Pixel zu Prozentsatzrechner, awer dee vum Stu Robson geet e Schrëtt méi wäit wéi anerer andeems Dir all d'CSS Regele fir Iech generéiert, dat heescht datt Dir se just an Äre Styleblieder kopéiere kënnt.
Tools fir reaktiounsfäeg Biller (an Text)
En anere wichtege Bestanddeel vum reaktiounsfäege Webdesign ass flësseg Biller. Wärend d'Technik fir flësseg Biller z'erreechen ass einfach, d'Optimisatioun vun der Leeschtung an der Säitelaaschtung fir verschidden Apparater schéngt eng vun de gréissten Erausfuerderungen am reaktiounsfäege Webdesign ze sinn. Hei sinn e puer Ressourcen fir mam Thema unzegoen.
18. Reaktiounsfäeger Biller
D'Filament Group entwéckelt e Wee fir en ugemoossent Bild op Basis vun der Bildschirmaaufléisung ze schécken. Dëst Experiment mat mobilen éischt Biller, déi reaktiounsfäeg a verantwortlech skaléieren, fuerdert zwee Biller vu verschiddene Gréissten ze referenzéieren.
19. Adaptiven Biller
De Matt Wilcox huet sech vum Responsive Images Tool inspiréiert fir Adaptive Biller ze kreéieren, déi PHP an e bësse JavaScript benotze fir passend Biller um Apparat vum Benotzer ze servéieren ouni extra Markup ze erfuerderen.
20. Sencha.io Src (fréier Tinysrc)
Sencha bitt e Cloud-Service deen optimiséiert Versioune vun gehostene Biller schéckt fir d'Gréisst vum Apparat déi se froen. Fir erauszefannen wéi Dir et benotzt, kuckt docs.sencha.com/io/src/.
21. FitText
E weidere Bijou vu Paravel, Inc ass FitText.js, e jQuery Plug-in fir Iwwerschrëft Webtyp reagéiert op den Design an den Apparat. Fir Detailer kuckt trentwalton.com/2011/05/10/fit-to-scale/.
22. slabText
Inspiréiert vu FitText an dem SlabType Algorithmus, dem Brian McAllister säi SlabText ass e jQuery Plug-in deen fett Blocks vum Text mécht déi reagéiert änneren an op eng definéiert Breet hale bleiwen.
Tools fir Medienufroen
Elo datt Dir eng Iddi hutt wéi Ären Layout fir verschidden Apparater ännert, e fléissend Gitter a flësseg Biller, braucht Dir Medienufroen fir d'Elementer vun der Säit an e Responsabilitéitszoustand ze verréckelen.
23. Respond.js
Dat eenzegt Thema mam reaktiounsfäegen Design ass datt Browser déi net Medieufroe liese kënnen hannerlooss ginn. Dëst kann net en Thema mat Ärer Zilgrupp sinn, awer et ass ëmmer nach eng gutt Praxis fir Benotzer op al Browser z'ënnerstëtzen. Respond.js, vum Scott Jehl, ënnerstëtzt nëmmen Eegeschafte min Breet a Max Breet.
Fir méi kuckt filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js, vum Wouter van der Graaf, erméiglecht eeler Versioune vun IE an aner Browser fir effektiv all méiglech Medienufroen ze testen an unzewenden.
25. Adapt.js
Den Nathan Smith, Autor vum originale 960.gs Gitter System, huet Adapt.js geschriwwen, e Skript dat Browser Dimensiounen detektéiert an nëmmen déi erfuerderlech Stylesheets servéiert - wéi Medienufroen awer ouni Medienufroen, dat heescht datt et och an ale Browser funktionnéiert.
26. Categorizr
Dëst ass Gerätsdetektioun aus dem entgéintgesate Wénkel ugeschwat - dem Brett Jankord säi Categorizr Skript setzt viraus datt Geräter mobil sinn, wann et net anescht als Desktop oder Tablet detektéiert gëtt, wat Iech erméiglecht Ressourcen fir Browser op eng sympathesch Manéier ze servéieren.
Reaktiounsfäeger Design (a mobil) Kesselplacken
Am Geescht vun engem effiziente reaktiounsfäege Workflow erliichtert Kesselplazen de Prozess fir Designen an de Browser méi séier ze wiesselen. Déi meescht vun dëse Kesselplazen kombinéieren déi bescht vun den uewe genannten Tools zu engem ordentleche Package: e flexibelt Gitter erweidert mat Skripte, wärend déi mobil éischt, Inhalt-out Philosopien ëmgesat ginn.
27. 320 an Up
Den Andy Clarke's 320 an Up ass eng mobil éischt Kesselplack déi mat villen anere modernen Webdesigninstrumenter integréiert ass, wéi LESS a Bootstrap (kuck # 30). Et ass e liichten an agile Wee fir e Site séier unzefänken. Kuckt och eisen Interview mam Andy, an deem hien eis méi iwwer déi nei Versioun erzielt.
28. Gridless
Gridless ass eng HTML5- an CSS3 Kesselplack déi als Basis fir Är reaktiounsfäeg Designen déngen kann, mat Fokus op Typographie a gebakene Cross-Browser Kompatibilitéit.
29. Skelett
Am Géigesaz zu den zwou fréiere Kesselplazen, deenen hir Startpunkt mat der klengster Opléisung ass, ass de Skelettentwécklungskit, erstallt vum Dave Gamache, baséiert op dem 960.gs Gitter System a gëtt op mobil erof. Skelett huet och e super Stil Framework fir Entwéckler fir Stiler drop ze bauen.
30. Bootstrap
Gebaut vun Twitter an elo oppene Quell ass Bootstrap e Kader an eng Serie vu Komponente fir séier e Site online ze kréien, a wéi an der Versioun zwee funktionnéieren all seng Haaptdeeler reaktiounsfäeger.
Plugins, Shims a Polyfills
Och wa modern Browser a Software éischter reaktiounsfäeg ausgeriicht sinn, heiansdo musse mir extra Tools benotzen fir eng konsequent Erfahrung ze bidden.
31. Reaktiounsfäeger Plugin
De Marios Lublinski huet e WordPress Plug-in geschriwwen dee versprécht all aktuell WP Thema an eng reaktiounsfäeg ze maachen. Wéi dëst funktionnéiert weess ech nach net well et als Zäit vun dësem Schreiwen net verëffentlecht gouf, awer wann et säi Versprieche gerecht gëtt sollt et ganz nëtzlech sinn.
32. Stierwen
Inhalt Iwwerlaf Handling funktionnéiert gutt op Desktop Browser, awer eeler mobil Browser handhaben et onbestänneg. Den Overthrow Polyfill vun der fläisseger Filament Group füügt konsequent graziéis Degradatioun iwwer Geräter bäi, a suergt dofir datt all mobil Benotzer déi bescht méiglech Erfahrung kréien.
33. MediaTable
Dem Marco Pegoraro säi jQuery Plugin, MediaTable, schafft mat Respond.js fir Iech ze hëllefen de Problem ëmzegoen wéi grouss Datetabellen op klengen Ecran Apparater ugewise ginn, reaktiounsfäeg Kolonnen ze maachen an eng Show / Versteckung hinzeweisen wou et passend ass.
"Testen, testen: 1-2-3 ..."
En aneren Aspekt vum reaktiounsfäege Workflow ass Är Zilgeräter a Resolutiounen ze kennen an duerno ze testen.
34. resizeMyBrowser
resizeMyBrowser, vum Frontend Entwéckler Chen Luo, huet verschidde virausgesaat Dimensioune fir Är Browserfenster fir reaktiounsdesignéiert Säiten ze testen oder en neie Virausbezuel ze kreéieren wann Dir déi net fënnt déi Äre Besoinen entsprécht.
35. responsivepx
Genee wéi resizeMyBrowser, responsivepx, gebaut vum Remy Sharp, lued Är Säiten an eng Fënster wou Dir d'Breet an d'Héicht testen kënnt fir ze bestëmmen wéi gutt Är Medienufroen ausféieren a wou d'Brochpunkter am Design sinn.
36. Reaktiounsfäeger Design Testen
En onheemlech nëtzlecht Tool vum Designer an Entwéckler Matt Kersley: gitt einfach d'URL vun Ärem reaktiounsfäege Site am Responsive Design Testing fir ze kucken wéi et a verschiddene Browsergréissten rendéiert.
37. De Responsinator
Gitt eng URL an de Responsinator weist Iech wéi et a ville gemeinsamen Apparatgréissten affichéiert - mat onermiddlechen Robotereffizienz. Tama Pugsley an Andy Hovey si verantwortlech fir dësen.
38. Reaktiounsfäeger.is
En aneren In-Page Gerätsemulator, Responsive.is léisst Dir eng URL tippen an da ännert se séier d'Gréisst tëscht enger Rei vu verschiddene Viraus. Et gëtt vum Team hannert der kommender Typecast App gemaach.
39. Screenqueri.es
Ee méi Browser Dimensiounsinstrument, awer Screenqueri.es vum Mandar Shirke differenzéiert sech selwer mat engem ausgedehnte Set vu mobilen an Tablet-Presets, souwéi e Gitter an Linealer déi Feinmessung sou vill méi einfach maachen.
40. Aptus
Eng aner App fir Testplazen a verschidde definéierte Gréissten, awer Aptus ass Mac-native. Et ass verfügbar duerch de Mac App Store, a Mammesprooch bréngt extra Features wéi einfach Screenshots an offline Support.
41. Reaktiounsfäeger Design Bookmarklet
De Victor Coulon huet e ganz einfacht awer effektiv Bookmarklet gemaach; wann Dir se op all Websäit aktivéiert füügt et eng Toolbar bäi déi Iech léisst tëscht véier gemeinsame Bildschirmdimensiounen wiesselen, fir datt Dir gesitt wéi Äre Site a verschiddene Gréisste gëtt.
42. Reaktiounsfäeger Design Test Bookmarklet
Dëse Bookmarklet vum Benjamin Keen erlaabt méi Personnalisatioun andeems Dir Är eegen Apparatgréissten definéiert, a sou vill oder wéineg wéi Dir wëllt. Wann aktivéiert weist de Site op all ausgewielte Gréissten, niewentenee fir einfache Verglach.
43. Screenfly
Screenfly, vu QuirkTools, erlaabt Iech e Site op verschiddene Resolutiounen op Desktop, Tablet, Handy an Televisioun ze testen. Den Desktop Test ass aktuell limitéiert op Safari, wärend d'Tablet an den Handy méi Optiounen fir Apparater a Browser hunn. Fernseh ass limitéiert op Opera.
44. Media Query Indikator
De Johan Brook bitt e puren CSS Wee fir ze testen wann eng Medienufro vum Browser ausgeléist gouf. Media Query Indikator ass e weidert gutt Tool fir ze testen an ze spille mat Designbriechpunkten.
45. Shim
Ee vun den Tools, déi an der Neigestaltung vum Boston Globe benotzt ginn, de Posterjong vun der RWD Bewegung, Shim ass eng Node.js App déi eng Websäit iwwer verschidde Geräter am selwechte Wifi Netz féiert, wat Tester iwwer Geräter mécht dat vill méi einfach .
46. Drive-In
Wann Dir keen Node.js Server op der Plaz hutt fir Shim ze lafen, huet de Scott Jehl eng méi einfach Versioun mam Numm Drive-In gemaach déi am Fong déiselwecht funktionnéiert, awer mat PHP, Apache an enger .htaccess Datei.
47. Adobe Schied
Adobe fiert weider an d'Webtechnologien mat dësem Remote Debugging Tool. Installéiert Shadow an d'Chrome Extensioun op Mac oder Windows, plus de Shadow Client op Android oder iPhone, an Dir kënnt Websäiten tëscht ville verschiddenen Apparater deelen.
48. Opera Mobile Emulator + Remote Debug
E méi einfache Wee fir mobil Säiten ze debugéieren ass Opera an den Opera Mobile Emulator ze installéieren an déi zwee mat hirer Remote Debug Optioun ze verbannen. Einfach a séier ze installéieren, an huet den zousätzleche Virdeel fir op méi wéi WebKit ze testen.
Weider Inspiratioun
Wëllt Dir eng Iddi kréien wéi anerer hir Design reaktiounsfäeg maachen?
49. MediaQueri.es
Wann Dir et net scho gesinn hutt, huet de Site Mediaqueri.es eng ëmmer méi grouss Zuel vu Site déi op déi reaktiouns Säit duerchgestrachen sinn.
50. @RWD
Den Ethan Marcotte leeft en Twitter Kont deen déi neisten News, Tools a Vitrinnen aus der Welt vum RWD bréngt.
Denise Jacobs veréiert e Spriecher, Autor, Webdesign Trainer a Kreativitéit Evangelist, wärend de Peter Gasston den Autor vum The Book of CSS3 ass an e veteranesche Webentwéckler dee bei Broken Links bloggt.
Liked dëst? Liest dës!
- Pro Tipps fir eng mobil Websäit ze bauen
- Top CSS a JavaScript Techniken
- Wéi bauen ech eng App
- Déi bescht gratis Web Schrëften fir Designer
- Entdeckt wat fir Augmented Reality nächst ass
- Luet gratis Texturen erof: Héichopléisend a prett fir elo ze benotzen
