30 Nyttige Responsive Web Design Tutorials
Så vi har nådd slutten av vår "Responsive Web Design Week", I kveld er posten den siste av serien. Vi går ut for å hjelpe deg med å finpusse dine ferdigheter ved å manipulere disse kodene for å svare på vilje når de vises på forskjellige enheter. Og for å gjøre dette presenterer vi 30 Responsive Web Design Tutorials funnet på nettet. Denne listen er ikke ment å være en uttømmende, men det vil komme i gang med å forstå grunnleggende om å designe et adaptivt nettsted som vil imøtekomme alle slags skjermstørrelser.
Vi starter med innledende opplæringsprogrammer i "Breaking the Ice", noe som en RWD: 101-klasse du bør delta for å få tak i konseptet før vi går videre til "Start Building" -øvelser.
Til slutt slutter vi med en "Gjør mer" -avdeling der vi vil vise opplæringsprogrammer som spiller med horisontale oppsett, 'elastiske' videoer, rullegardinmenyer og skyve-til-topp trekkspillnavigasjoner, miniatyrbilder og det klissete problemet med tabeller.
Men først…
Her er et sammendrag av de to veiledningene som ble omtalt tidligere i uken av våre forfattere:
Responsive Website Navigation
Av Thoriq Firdaus - [Se opplæringen]
Her er en veiledning for å hjelpe deg med å lage din egen responsive nettside navigasjon. Et av de viktigste aspektene ved et nettsted er hvor enkelt det er å navigere gjennom ulike deler av nettstedet. Finn ut hvordan du optimaliserer dette med CSS3 med denne opplæringen.
Responsive CV
Av Jake Rocheleau - [Se opplæringen]
Hvis du er en webprofessor og en online CV er allerede en del av karrieren din, bør du benytte anledningen til å slå den som gjenopptar responsiv også. Gjør det lettere for arbeidsgivere og klienter å finne deg på en hvilken som helst enhet. Og mens du er på det, dobler ditt eget CV som en portefølje av hva du kan gjøre som en utvikler.
Bryte isen
Nå, hvor var vi? Å ja, la oss få en isbremsende handling påbegynt!
Nybegynners guide til Responsive Web Design
Av Nick Petit - [Se opplæringen]
Denne opplæringen er et godt utgangspunkt for nybegynnere, da det beskriver hva web-responsivt design betyr, hvordan det kom til lys, samt forklaringer om fluidnett og medieforespørsler blant andre. Sjekk ut ressursene som er oppført nederst i opplæringen også.
Introduksjon til Responsive Web Design: Video
Av Nick Petit - [Se opplæringen]
Dette er en opplæring som er nær 9 minutter lang, som skinner overflaten av det responsive webdesignet handler om, hvordan det har skjedd, hvilken innvirkning det har på utformingen av et nettsted og hvilke elementer som er involvert i å produsere en responsiv webdesign . Hvis du ønsker å forstå hva responsivt webdesign handler om uten å gå inn på koding først, bør du starte med denne videoen.
Slik bytter du et hvilket som helst nettsted til et responsivt nettsted
Av Rochester Oliveira - [Se opplæringen]
Dette er en annen opplæringsoppgave som starter fra det grunnleggende, men bryter alt ned litt etter hverandre, inkludert operativsystemet og nettleserne du setter webområdet ditt på, så vel som elementene som påvirkes når nettstedet vises fra forskjellige enheter. Forfatteren hadde også noen nyttige WordPress- og jQuery-plugins for å gjøre arbeidet ditt lettere.
Responsive Design i 3 trinn
Av Nick La - [Se opplæringen]
Denne opplæringen vil forklare hvordan du kan produsere et responsivt webdesign med metatagger, HTML-struktur og de viktigste media-spørringene. Du trenger litt kunnskap om CSS for å forstå det ...
Utforming For En Responsiv Web
Av Max Luzuriaga - [Se opplæringen]
Her er en artikkel som ikke er så mye en veiledning som det er en veiledning for å skape responsivt webdesign. Når det er sagt, forteller forfatteren bokstavelig talt hva du gjør og ikke gjør om responsivt webdesign. Det er forklaringer på hvorfor visse funksjoner ikke er følsomme nok, hvordan man arbeider med proporsjoner og moduler, og best av alt, det er relativt kort og lett å absorbere.
Responsive Web Design: En visuell veiledning
Av Andrew Gormley - [Se opplæringen]
Hvis tekstfylte opplæringsprogrammer ikke er levedyktige alternativer, kan du prøve denne videoopplæringen i stedet. Det er fortsatt ganske teknisk, men hvis det får deg til å føle deg bedre, trenger du ikke å lese mye. Det er omtrent 25 minutter lang, og videomaskinen er faktisk fast-fowarded gjennom delene der han koder, og går deretter tilbake for å forklare hva kodene gjør.
Begynn å bygge
OK, la oss begynne å bygge noen lydhørige design, fra og med ...
Fluid Grids
Av Ethan Marcotte - [Se opplæringen]
Si grid, og du ville tenke "stive strukturer", sier væske, og du tror at det kan flyte fra den ene siden av skjermen til bunnen eller toppen eller siden når du legger press på nettleseren, men legg de to sammen og du vil trolig tro at du må se på denne opplæringen for å fullt ut sette pris på hvordan væskenettet kan bidra til å gjøre utformingen mer responsiv.
Fluidbilder
Av Ethan Marcotte - [Se opplæringen]
Ved slutten av denne artikkelen bør du vite hvem Ethan Marcotte er. Her er et hint: Han er den som kom opp med konseptet og begrepet for web-responsive design. Hans navn vil stort sett komme opp i hver annen opplæring i denne listen, så hvorfor ikke ta råd om flytende bilder rett fra Mesteren selv?.
Skalerbare navigasjonsmønstre i Responsive Web Design
Av Michael Mesker - [Se opplæringen]
Denne opplæringen snakker om leksjonene forfatteren lærte av å jobbe på et stort, responsivt webdesignprosjekt. Les hans "walkthrough" om hvordan du lager maler som er enklere å konfigurere for brukervennlige og responsive resultater. Det er et flott utseende bak kulissene i å forstå hvordan du utformer grensesnitt på den beste måten for desktop, tablet og mobile visninger.
Responsive Web Design med CSS3 Media Queries
Av Nick La - [Se opplæringen]
Og en annen utmerket opplæringsoppgave for å få deg til å lære å designe en nettleserversvarlig nettsidemal med HTML5 og CSS3. Det er en trinnvis tilnærming, og det er demoer av et webdesign før og etter at mediaforespørsmålene ble implementert for å bedre sette pris på effekten av medieforespørsler.
CSS-effekter: Space-bilder ut for å matche teksthøyde
Av Zoe Mickley Gillenwater - [Se opplæringen]
Denne opplæringen gjør at du lærer trikset med å gjøre bilder med fast bredde, endre størrelse og mellomrom for å rette opp med den medfølgende teksten, uansett hvordan nettleservinduet endres.
Adaptive Layouts med Media Queries
Av Aaron Gustafson - [Se opplæringen]
Lær hvordan du bruker adaptive eller fleksible layouter med CSS-mediesøk. Bare følg øvelsen for å lære å tilpasse designet til visning med dobbeltsøyle eller enkeltkolonne samt å forberede designet til iPhone og iPad.
Responsive Images: Eksperimentering med kontekstbevisst bildeformatering
Av Scott Jehl - [Se opplæringen]
Her er en opplæring som brukte den første tilnærmingen fra mobilen. Denne teknikken spesifiserer en større størrelse for bildene som skal brukes på større skjermoppløsninger, minus bildeforespørsler, samt UA-sniffing.
Gjøre mer
Elastiske videoer
Av Nick La - [Se opplæringen]
Denne opplæringen omhandler skalering av videoer ettersom nettleservinduet er endret. Det er egentlig et CSS-triks, og det er en demonstrasjon for å se trikset på jobb i selve opplæringen.
Gjemmer og avslører deler av bilder
Av Zoe Mickley Gillenwater - [Se opplæringen]
Opplæringen er faktisk hentet fra forfatterens bok, og beskriver hvordan å avsløre eller skjule deler av bilder avhengig av skjermoppløsninger. Det lærer deg hvordan du dynamisk beskjærer bilder når skjermstørrelsen endres, og viser bare en del av hele bildet når det er begrenset plass.
Responsive Content Navigator med CSS3
Av Mary Lou - [Se opplæringen]
Foretrekker en finere måte for brukere å navigere rundt din side? Deretter bør du lese gjennom denne veiledningen for å lære å kode i noen kule overganger: fade inn, lysbilder, rotasjoner og oppskalering. Overgangene er i hovedsak innholdslag som ble vist eller skjult med spesifikk koding.
Lag en Responsive Web Design Template
Av Harry Atkins - [Se opplæringen]
Dette er en kort opplæring for å produsere en responsiv web mal som fungerer både på skrivebordet og på iPhone.
Responsive Horizontal Layout
Av Mary Lou - [Se opplæringen]
Denne opplæringen lærer deg hvordan du lager et horisontalt layout med flere rullbare innholdspaneler. Ved hjelp av Opprinnelsen til arter Som eksempeltekst blir hvert kapittel av boken skilt i kolonner plassert ved siden av hverandre i fullbrowser-modus, men når den krympes ned til liten nok, endres oppsettet til en fullstendig vertikal rullende bok.
Konverter en meny til en nedgang for små skjermer
Av Chris Coyier - [Se opplæringen]
Denne opplæringen viser deg hvordan du konverterer en meny til en rullegardinliste når nettleservinduet er smalt, eller når du er på en mobilenhet. Ruten med koblinger øverst til høyre på siden blir konvertert til en rullegardinmeny for å spare plass uten å ofre navigasjonsalternativer.
Fleksibel Slide-to-Top Accordion
Av Mary Lou - [Se opplæringen]
Lær hvordan du lager en enkel og fleksibel trekkspill layout med fade-in overganger og justerbare bredder basert på skjermstørrelse og oppløsninger.
Slik bruker du CSS3 Orienteringsmediaforespørsler
Av Ryan Seddon - [Se opplæringen]
Basert på den enkle regelen som definerer stående (høyde større enn bredde) og landskapsforhold (bredde større enn høyde), kan du skrive en medieforespørsel for å målrette mot bestemte stilarter basert på modusen du ser på den. Denne opplæringen vil vise oss hvordan du gjør nettopp det, og det kommer komplett med en kobling til en fargeskiftende kameleon som bruker farge for å demonstrere denne endringen mens du krymper nettleservinduet.
Responsive Data Tables
Av Chris Coyier - [Se opplæringen]
Tabeller er en kilde til hodepine når det gjelder små skjermstørrelser, men det betyr ikke at vi trenger å unngå tabeller helt. Lær hvordan du bruker medieforespørsler for å gjøre tabellendringsformatene dine helt når du bytter til mobilskjermstørrelser. Se demoen for å få en ide om den magien du kan lage basert på denne opplæringen.
Fluid CSS3 Slideshow med Parallax Effect
Av Ring Wing - [Se opplæringen]
Opprett en CSS3 lysbildefremvisning der to bakgrunnsbilder brukes, og når posisjonene til bakgrunnene endres, vises en parallell effekt. Bortsett fra det er lysbildeserien fleksibel, og størrelsen tilpasses når nettleservinduet lukkes inn på den.
Slik bygger du et responsivt miniatyrbilde
Av Joshua Johnson - [Se opplæringen]
Dette er bra for nettsteder som har miniatyrbilder i et galleri. Når nettleservinduet endres, endres oppsettet for å oppta mellom to kolonner (mindre skjermstørrelser) og fem (maksimale) kolonner. For mer lignende lysbildeserier og skyveknapper, sjekk ut vår Top 10 Free Responsive Image Galleries / Slideshows artikkel.
Optimalisering av e-posten din for mobilenheter
Av Ros Hodgekiss - [Se opplæringen]
Selv e-postmeldinger kan optimaliseres for småskjermsvisning som hvordan nettsteder er. Mesteparten av tiden skrives teksten i en HTML-e-post til et punkt som ikke er laget for komfortabel lesing; lære å håndtere dette og mer fra denne opplæringen.
bruker rammer
Bygg et responsivt, mobilvennlig nettsted med skjelett
Av Joshua Johnson - [Se opplæringen]
Skeleton er et kjempebra rammeverk for å bygge lydhemmede nettsteder med det. Denne opplæringen tar deg i en trinnvis veiledning om hvordan du bruker skjelettrammer for å lage kjempeflott responsive design. Du vil bli bedøvet for å se hvor lett det er å implementere.
Responsive Web Design med HTML5 og mindre ramme 3
Av Louis Simoneau - [Se opplæringen]
Hvis du ikke har blitt riktig introdusert til Less, så sjekk ut vår egen Mindre CSS opplæring først for å få en smak av Mindre. I denne opplæringen ble Mindre rammeverket brukt til å la deg se tydelig effekten av medieforespørsler.
Konklusjon
Og det avsluttes vår Responsivt webdesign serie. Vi håper at temaene, verktøyene og andre ressursene i denne serien har bidratt til å synliggjøre konseptet med lydhør webdesign til våre lesere. Men hvordan vil vi vite om du ikke forteller oss?
Gi oss beskjed om tilbakemelding på serien og hvis du har forslag til flere ideer du vil se på hongkiat.com. Slett oss en linje, eller en kommentar nedenfor.
