Inhalt
- 01. Wéi kann ee reaktiounsfäeg denken
- 02. 9 reaktiounsfäeger Typographie Tipps
- 03. D'Regele vun der reaktiounsfäeger Webtypographie
- 04. Design e reaktiounsfäege Site mat em-baséierter Gréisst
- 05. Prioritéit Guiden: eng Inhalt-éischt Alternativ zu Wireframes
- 06. De Profi Guide fir reaktiounsfäeger Webdesign
- 07. Wéi reaktiounsfäeg an Apparat-agnostesch Forme designen
- 08. Erstellt e reaktiounsfäege Layout mam CSS Grid
- 09. De Guide vum Web Designer fir Flexbox
- 10. Codrops Flexbox Referenz
- 11. Stacks: Flexbox fir Skizz
- 12. E Crashcours am techneschen RWD
- 13. Erstelle flexibel Layouten mat Susy a Breakpoint
- 14. Wéi kreéiert Dir reagéiert Guiden an Adobe XD
- 15. CSS bei BBC Sport
- 16. Stéck Fousszeilen, fënnef Weeër
- 17. Upassung un den Input
- 18. Eis beschten Praktiken ëmbréngen mobil Web Performance
- 19. Wéi reagéiere Web Apps mat Containerufroen
Responsive Webdesign ass net méi optional; Siten mussen dës Deeg einfach reagéieren. Glécklecherweis ass RWD méi einfach wéi jee ze realiséieren well et ginn esou vill super Tools fir Iech ze hëllefen Är Motiver ze kreéieren an ze testen, a sécherzestellen datt Dir déi bescht Benotzererfarung erstellt.
Hei ass eis Roundup vun e puer vun de beschten Ressourcen déi Iech leeden fir Är Websäiten gutt ze maachen an op all Apparat super ze gesinn. Wëllt Dir méi nëtzlech Ressourcen? Eis Guiden zum beschte Websäit Builder a Webhosting Service sinn hei fir ze hëllefen. A wann Dir besuergt sidd iwwer Dateie sécher ze späicheren, braucht Dir dës brillant Cloud Späicheroptiounen.
01. Wéi kann ee reaktiounsfäeg denken
An dësem Post op FreeCodeCamp mécht de Kevin Powell de wichtege Punkt datt reaktiouns Webdesign net méi en Trend ass; et ass de Wee wéi d'Siten erwaart ginn ze bauen, an dat heescht vun Ufank un reagéieren ze denken. Hei demonstréiert hien wéi een an de reaktiounsfäege Kader vum Geescht kënnt, wärend hien eng ganz reaktiounsfäeg 3-Säit Websäit baut.
02. 9 reaktiounsfäeger Typographie Tipps
Responsive Webdesign, natierlech genuch, brauch reaktiounsfäeger Typographie fir domat ze goen. Awer wat heescht dat iwwerhaapt, a wéi implementéiert Dir et? Mir hu siwe féierend Webdesigner gefrot fir hir Tipps fir elegant, liesbar Text an all Viewport ze kreéieren.
03. D'Regele vun der reaktiounsfäeger Webtypographie
Reaktiounsfäeger Webtypographie ass schwéier - Dir musst béid Designskoteletten an techneschen Know-How hunn. Awer awer komplizéiert et kéint sinn, et falsch ze maachen ass keng Optioun, well Typographie ass den Ecksteen vum Webdesign. Follegt dës Designprinzipien a praktesch Léisunge fir et richteg ze kréien.
04. Design e reaktiounsfäege Site mat em-baséierter Gréisst
Wann Dir Em Eenheete benotzt fir Schrëftgréisst, kënnt Dir Komponenten op der Säit designen déi automatesch reagéieren wann d'Schrëftgréisst ännert. Dann, mat engem klengen Trick fir eng reaktiouns Schrëftgréisst, kënnt Dir eng ganz Säit produzéieren déi sech dynamesch upasst op der Viewport Breet vum Browser. Gitt dësen Tutorial fir ze léieren wéi Dir de 'relativen' Verhalen vun ems benotze fir Designs ze kreéieren déi skalierbar a reaktiounsfäeg sinn.
05. Prioritéit Guiden: eng Inhalt-éischt Alternativ zu Wireframes
Wireframes kënnen dat am meeschte verbreet benotzte Tool fir Websäiten, Apps an aner digital Interfaces z'entwerfen, awer si sinn net ouni hir Nodeeler, besonnesch wann et ëm reaktiounsfäegt Design geet. Hei stellen d'Heleen van Nues an de Lennart Overkamp hir bevorzugte Alternativ zu Wireframes vir: Prioritéitsguiden, déi Inhalter an Elementer fir e mobilen Ecran enthalen, sortéiert no Hierarchie vun uewen no ënnen an ouni Layoutspezifikatiounen.
06. De Profi Guide fir reaktiounsfäeger Webdesign
Geschriwwen vum Justin Avery, Curator vum Responsive Design Weekly Newsletter, dëse Guide vum Netz Magazin hëlt Webproffen duerch d'Basis bis zu de méi fortgeschrattene reaktiounsfäege Webdesign Techniken.
07. Wéi reaktiounsfäeg an Apparat-agnostesch Forme designen
Formen sinn eent vun de wichtegsten Elementer an all digitalem Produktdesign, an egal ob Dir e Signup Flow oder e Multi-View Stepper braucht, Dir musst et designen fir datt et effektiv op mobilen Apparater funktionnéiert sou gutt wéi um Desktop. Hei ass wéi Dir et maacht, komplett mat nëtzlechen Tipps wéi Dir Flexbox benotzt.
08. Erstellt e reaktiounsfäege Layout mam CSS Grid
CSS Grid Layout wiisst am Browser Support all Dag, a wann et net en Ersatz fir Flexbox oder och fir Floats ass, wann et a Kombinatioun mat hinnen benotzt gëtt et e super Wee fir nei a spannend reagéiert Layouten ze kreéieren. Fuert dëse Schrëtt fir Schrëtt Guide fir e responsive Portfolio Site mat Grid ze bauen.
09. De Guide vum Web Designer fir Flexbox
Hutt Dir schonn ugefaang Flexbox ze benotzen? An dësem Tutorial bitt de Wes Bos e komplette Guide fir d'Kärkonzepter, déi Iech en zolitte Verständnis ginn vun alles wat Dir braucht fir mat dësem staarken Tool an de Grëff ze kréien.
10. Codrops Flexbox Referenz
Dëse komplette Guide fir Flexbox ass geschriwwe vum Sara Soueidan, en Autorin déi bekannt ass fir hir Fäegkeet Konzepter z'erklären op eng Manéier déi einfach ze verfollegen ass ouni am Detail ze scrimpen. De Codrops Guide gëtt regelméisseg aktualiséiert sou datt et eng super Ressource ass fir zréckzekommen wann Dir et braucht.
11. Stacks: Flexbox fir Skizz
Stacks, Deel vum Auto Layout Plugin, bidden Iech e Wee fir Flexbox Technologie bannent Sketch ze benotzen, ouni CSS ze benotzen. Dësen Artikel erkläert wéi Dir dës mächteg Technik benotze kënnt fir einfach reaktiounsfäegt Design.
12. E Crashcours am techneschen RWD
Schreift um Treehouse Blog, de Jerry Cao huet vill nëtzlech Informatioun an e relativ kuerzen, liesbarem Artikel kondenséiert.
13. Erstelle flexibel Layouten mat Susy a Breakpoint
Wann Dir kee Framework benotze wëllt fir Är reaktiouns Site ze bauen, sinn dës Sass Extensions eng flott Alternativ, jidd mat hiren eegene Stäerkten. Si këmmere sech ëm déi reagéiert Mathematik fir Iech, sou datt Dir op Design konzentréiere kënnt.
14. Wéi kreéiert Dir reagéiert Guiden an Adobe XD
Wann Dir gär wëllt Adobe Experience Design (XD) ausprobéieren, hei ass e gudden Tutorial fir Iech unzefänken. Et enthält eng Videodemonstratioun déi Iech duerch all Klick vum Prozess féiert.
15. CSS bei BBC Sport
Dëst ass keen Tutorial per se, awer et ass vill Léieren hei. An dësem Post, deen éischte vun enger zweesteleger Serie, hëlt de Frontend Entwéckler Shaun Bent eis op en detailléierten Tour wéi CSS bei BBC Sport gemaach gëtt. Si hunn et fäerdeg bruecht d'CSS Fondatioun vun dësem massive Site ënner 9kb ze halen, an et ass faszinéierend ze gesinn, wéi dat gemaach gouf.
16. Stéck Fousszeilen, fënnef Weeër
Stéck Fousszeilen ... dat sollt einfach genuch sinn, oder? Leider net. Et kann méi komplizéiert sinn wéi Dir kéint erwaarden datt de Fousszeilen op der richteger Plaz op all Apparat kritt. Glécklecherweis huet de Chris Coyier fënnef Tricks zesummegesat, déi Iech hëllefen et mat der Benotzung ze maachen calc (), Flexbox, negativ Margen a Grid.
17. Upassung un den Input
Reaktiounsfäeger Design ass net nëmmen drun datt Är Säit op all Apparat richteg ugewise gëtt, Dir musst et och gutt funktionéiere loossen - an dat heescht et muss gutt sinn fir den Input ze akzeptéieren an enger Welt wou Desktops Touchscreens hunn an Telefonen Keyboards hunn. Dësen Artikel vum Jason Grigsby vu Cloud Four huet e gudde Rot.
18. Eis beschten Praktiken ëmbréngen mobil Web Performance
Ouni Berücksichtegung applizéiert, verschidde Best Practices, déi an der Desktop Ära konzipéiert goufen, kënnen e schiedlechen Effekt op d'mobil Web Performance hunn. Dësen Artikel bréngt Iech méi déif nozedenken wéi Dir Äre Site gutt um Handy schafft.
19. Wéi reagéiere Web Apps mat Containerufroen
Léiert wéi Dir eng schéi, komplex Web App transforméiert - mat Komponenten, Staaten an Interaktiounen - iwwer verschidden Dimensiounen a Resolutiounen, mat Container Querie.
