30 Nyttige Responsive Web Design Tutorials
Så vi har nået slutningen af vores "Responsive Web Design Week", i aftes post bliver den sidste af serien. Vi går ud for at hjælpe dig med at finpudse dine færdigheder ved at manipulere disse koder for at reagere på vilje, når de vises på forskellige enheder. Og for at gøre dette, vi byder på 30 Responsive Web Design Tutorials fundet online. Denne liste er ikke beregnet til at være en udtømmende, men det vil sætte dig i gang med at forstå det grundlæggende ved at designe en adaptiv hjemmeside, der vil tage højde for alle slags skærmstørrelser.
Vi starter med introduktionstutorials i 'Breaking the Ice', som en RWD: 101 klasse, du skal være med til at tage fat på konceptet, inden vi går videre til 'Start Building' øvelser.
Endelig slutter vi med et 'Gør mere' -afsnit, hvor vi vil få vejledninger, der afspilles med vandrette layouter, 'elastiske' videoer, rullemenuer og slide-to-top accordeonnavigationer, miniaturer og det klæbende problem med tabeller.
Men først…
Her er en oversigt over de to tutorials, der blev præsenteret tidligere i denne uge af vores forfattere:
Responsive website Navigation
Af Thoriq Firdaus - [Se vejledning]
Her er en vejledning til at hjælpe dig med at lave din helt egen lydhør hjemmeside navigation. Et af de vigtigste aspekter af et websted er, hvor nemt det er at navigere gennem forskellige dele af webstedet. Find ud af, hvordan du optimerer dette med CSS3 med denne vejledning.
Responsive CV
Af Jake Rocheleau - [Se vejledning]
Hvis du er en webprofessor, og et online CV er allerede en del af din karriere, så skal du benytte lejligheden til at slå det igen, så det bliver godt. Gør det lettere for arbejdsgivere og kunder at finde dig på en hvilken som helst enhed. Og mens du er i det, fordobler dit eget CV som en portefølje af, hvad du kan gøre som en udvikler.
Bryde isen
Nu hvor var vi? Åh ja, lad os få nogle isbrydende handlinger startet!
Begynder's Guide til Responsive Web Design
Af Nick Petit - [Se vejledning]
Denne vejledning er et godt udgangspunkt for begyndere, da det beskriver, hvad web-responsivt design betyder, hvordan det kom til lys, samt forklaringer om fluidnettet og medieforespørgsler blandt andre. Tjek de ressourcer, der er anført i bunden af selvstudiet.
Introduktion til Responsive Web Design: Video
Af Nick Petit - [Se vejledning]
Dette er en vejledning, der er tæt på 9 minutter lang, som skinner overfladen af, hvilket lydhurtigt webdesign handler om, hvordan det har været, hvilken indvirkning den har på design af et websted, og hvilke elementer der er involveret i at producere et lydhurt webdesign . Hvis du ser ud til at forstå, hvad lydhurtigt webdesign handler om uden at gå ind i kodning først, skal du starte med denne video.
Sådan ændres ethvert websted til et responsivt websted
Af Rochester Oliveira - [Se vejledning]
Dette er en anden vejledning, der starter fra det grundlæggende, men bryder alt ned lidt efter lidt, herunder OS og browsere, som du gør din hjemmeside lydhør for såvel som de elementer, der påvirkes, når hjemmesiden ses fra forskellige enheder. Forfatteren har også nogle nyttige WordPress- og jQuery-plugins til at gøre dit arbejde langt lettere.
Responsive Design i 3 trin
Af Nick La - [Se vejledning]
Denne vejledning vil forklare, hvordan du kan producere et lydhurtigt webdesign med metatags, HTML-struktur og de vigtige medieforespørgsler. Du har brug for lidt viden om CSS for at forstå det ...
Designing For A Responsive Web
Af Max Luzuriaga - [Se vejledning]
Her er en artikel, der ikke er så meget en tutorial, da det er en guide til at skabe lydhurt webdesign. Når det er sagt, fortæller forfatteren bogstaveligt talt, hvad du gør og don'ts af lydhurt webdesign. Der er forklaringer på, hvorfor visse funktioner ikke er følsomme nok, hvordan man arbejder med proportioner og moduler, og bedst af alt er det relativt kort og let at absorbere.
Responsive Web Design: En visuel vejledning
Af Andrew Gormley - [Se vejledning]
Hvis tekstfyldte vejledninger ikke er levedygtige muligheder, skal du prøve denne video-øvelse i stedet. Det er stadig ret teknisk, men hvis det får dig til at føle sig bedre, behøver du ikke at læse meget. Det er omkring 25 minutter lang, og videobåndoptageren er hurtigt fastgjort gennem de dele, hvor han koder, og går derefter tilbage for at forklare, hvad koderne gør.
Start bygningen
Okay, lad os begynde at bygge nogle lydhørige designs, begyndende med ...
Fluidgitter
Af Ethan Marcotte - [Se vejledning]
Sig gitter, og du ville tænke på 'stive strukturer', siger væske, og du tror, at det kunne strømme fra den ene side af skærmen til bunden eller toppen eller siden, når du anvender pres til browseren, men sæt dem sammen og du vil nok tro at du skal se på denne vejledning for fuldt ud at forstå, hvordan væskeformede net kan gøre dit design mere lydhør.
Væske billeder
Af Ethan Marcotte - [Se vejledning]
Ved udgangen af denne artikel bør du vide, hvem Ethan Marcotte er. Her er et tip: han er den, der kom op med konceptet og begrebet til web-responsive designs. Hans navn vil stort set komme op i hver anden vejledning i denne liste, så hvorfor ikke tage råd om flydende billeder lige fra Master selv?.
Skalerbare navigationsmønstre i Responsive Web Design
Af Michael Mesker - [Se vejledning]
Denne vejledning fortæller om de erfaringer, som forfatteren lærte af at arbejde på et stort, responsivt webdesign projekt. Læs hans 'walkthrough' om, hvordan man opretter skabeloner, der er nemmere at konfigurere til brugervenlige og lydhøre resultater. Det er et godt kig bag kulisserne i at forstå, hvordan man designer grænseflader på den bedste måde til desktop-, tablet- og mobilvisninger.
Responsive Web Design med CSS3 Media Queries
Af Nick La - [Se vejledning]
Og en anden fremragende tutorial til at få dig til at lære at designe en cross-browser responsiv website skabelon med HTML5 og CSS3. Det er en trin-for-trin tilgang, og der er demoer af et webdesign før og efter mediernes forespørgsler blev implementeret for bedre at kunne forstå effekten af medieforespørgsler.
CSS Effects: Rumbilleder ud for at matche teksthøjde
Af Zoe Mickley Gillenwater - [Se vejledning]
Denne vejledning gør dig i stand til at lære det trick at lave billeder med fast bredde, ændre deres størrelse og mellemrum for at rette op på den medfølgende tekst, uanset hvordan browservinduet ændres.
Adaptive Layouts med medie forespørgsler
Af Aaron Gustafson - [Se vejledning]
Lær, hvordan du bruger adaptive eller fleksible layouter med CSS-medieforespørgsler. Bare følg øvelsen for at lære at tilpasse dit design til dobbeltkolonnevisning eller enkeltkolonnevisning samt at forberede designet til iPhone og iPad.
Responsive Images: Eksperimentering med kontekstbevidst billedstørrelse
Af Scott Jehl - [Se vejledning]
Her er en vejledning, der anvendte den første-til-mobil-tilgang. Denne teknik angiver en større størrelse for de billeder, der skal bruges på større skærmopløsninger, minus billedforespørgsler såvel som UA sniffing.
Gøre mere
Elastiske videoer
Af Nick La - [Se vejledning]
Denne vejledning omhandler skaleringen af videoer, da dit browservindue er ændret. Det er i det væsentlige et CSS-trick, og der er en demo for at se trick på arbejde i selve selvstudiet.
Skjule og afsløre portioner af billeder
Af Zoe Mickley Gillenwater - [Se vejledning]
Selvstudiet er faktisk taget fra forfatterens bog og beskriver hvordan man afslører eller gemmer portioner af billeder afhængigt af skærmopløsninger. Det lærer dig, hvordan du dynamisk beskærer billeder, når skærmstørrelsen ændres, og viser kun en del af det fulde billede, når der er begrænset plads.
Responsive Content Navigator med CSS3
Ved Mary Lou - [Se vejledning]
Foretrækker en mere avanceret måde for brugerne at navigere rundt om i din side? Derefter bør du læse denne vejledning for at lære at kode i nogle kølige overgange: fade ind, dias, rotationer og opskalering. Overgange er i det væsentlige indholdslag, der blev vist eller skjult med specifik kodning.
Opret en Responsive Web Design Template
Af Harry Atkins - [Se vejledning]
Dette er en kort vejledning til at producere en lydhør web skabelon det virker både på skrivebordet og på iPhone.
Responsive Horizontal Layout
Ved Mary Lou - [Se vejledning]
Denne vejledning lærer dig, hvordan du opretter et vandret layout med flere rullende indholdspaneler. Ved brug af Oprindelsen af arter Som eksemplet tekst adskilles hvert kapitel i bogen i kolonner, der er placeret ved siden af hinanden i fuldbrowser-tilstand, men når skrumpet ned til lille nok ændres layoutet til en fuldt lodret rullende bog.
Konverter en menu til en drop down for små skærme
Af Chris Coyier - [Se vejledning]
Denne vejledning viser dig, hvordan du konverterer en menu til en rulleliste, når browservinduet er smalt, eller når du er på en mobil enhed. Rækken af links i øverste højre hjørne af siden bliver konverteret til en rullemenu for at spare plads uden at ofre navigationens muligheder.
Fleksibel Slide-to-Top Accordion
Ved Mary Lou - [Se vejledning]
Lær, hvordan du opretter et simpelt og fleksibelt accordeonlayout med fade-in overgange og justerbare bredder baseret på skærmstørrelse og opløsninger.
Sådan bruges CSS3 Orientation Media Queries
Af Ryan Seddon - [Se vejledning]
Baseret på den enkle regel, der definerer portræt (højde større end bredde) og landskabsbredde (bredde større end højde), kan du skrive en medieforespørgsel til målretning på bestemte stilarter baseret på den tilstand, du ser den på. Denne vejledning viser os, hvordan du gør netop det, og det leveres komplet med et link til en farveændrende kameleon, der bruger farve til at demonstrere denne ændring, mens du krymper browservinduet.
Responsive Data Tables
Af Chris Coyier - [Se vejledning]
Tabeller er en kilde til hovedpine, når det kommer til små skærmstørrelser, men det betyder ikke, at vi helt undgår tabeller. Lær hvordan du bruger medieforespørgsler til at gøre dine tabelændringsformater helt, når du skifter til mobile skærmstørrelser. Se demoen for at få en ide om den magi du kan lave baseret på denne tutorial.
Fluid CSS3 Slideshow med Parallax Effect
Ved Ring Wing - [Se vejledning]
Opret et CSS3 diasshow, hvor der anvendes to baggrundsbilleder, og når baggrundspositionerne ændres, ses en parallax-effekt. Bortset fra det er diasshowet fleksibelt, og størrelsen ændres, når browservinduet lukker ind på det.
Sådan opbygger du et Responsive Miniaturebillede Galleri
Af Joshua Johnson - [Se vejledning]
Dette er fantastisk til websites, der indeholder miniaturer i et galleri. Da browservinduet ændres, ændres layoutet til at optage mellem to kolonner (mindre skærmstørrelser) og fem (maksimum) kolonner. For mere lignende lysbilledshow og skydere, se vores Top 10 Free Responsive Image Galleries / Slideshows artikel.
Optimering af din e-mail til mobilenheder
Af Ros Hodgekiss - [Se vejledning]
Selv e-mails kan optimeres til visning i små skærmbilleder, som hvordan websteder er. Det meste af tiden ændres teksten i en HTML-email til et punkt, der ikke er lavet til behagelig læsning; lær hvordan man styrer dette og mere fra denne vejledning.
ved hjælp af rammer
Byg et responsivt mobilvenligt websted med skelet
Af Joshua Johnson - [Se vejledning]
Skelet er en fantastisk ramme for at opbygge lydhøre websites med det. Denne vejledning tager dig i en trinvis vejledning om, hvordan du bruger Skeleton-rammer til at oprette fantastiske lydhørige designs. Du vil blive bedøvet for at se, hvor nemt det er at implementere.
Responsive Web Design med HTML5 & Less Framework 3
Af Louis Simoneau - [Se vejledning]
Hvis du ikke er korrekt introduceret til Less, så tjek vores egen Mindre CSS-tutorial først for at få en smag af Mindre. I denne vejledning blev Mindre rammer brugt til at lade dig se klart virkningerne af medieforespørgsler.
Konklusion
Og det konkluderer vores Responsive Web Design serie. Vi håber, at temaerne, værktøjerne og andre ressourcer i denne serie har hjulpet eksponeret begrebet lydhurt webdesign til vores læsere. Men hvordan ville vi vide, om du ikke fortæller os?
Lad os vide din feedback på serien og hvis du har forslag til flere ideer, du vil se på hongkiat.com. Drop os en linje eller en kommentar nedenfor.
