30 Användbara Responsive Web Design Tutorials
Så vi har nått slutet av vår "Responsive Web Design Week", ikvällens inlägg kommer att vara det sista av serien. Vi går ut för att hjälpa dig att stärka dina färdigheter i att manipulera dessa koder för att reagera på vilja när de visas på olika enheter. Och för att göra detta presenterar vi 30 Responsive Web Design Tutorials hittades online. Denna lista är inte avsedd att vara en uttömmande men det kommer att komma igång med att förstå grunderna för att designa en anpassningsbar webbplats som kommer att tillgodose alla slags skärmstorlekar.
Vi börjar med introduktionshandledningar i "Breaking the Ice", något som en RWD: 101-klass, du borde delta för att hänga på konceptet innan vi går vidare till "Börja bygga" övningar.
Slutligen slutar vi med ett avsnitt "Gör mer" där vi kommer att presentera handledningar som spelar med horisontella layouter, "elastiska" videor, rullgardinsmenyer och dragspel till dragspel, miniatyrer och det klibbiga problemet med tabeller.
Men först…
Här är en sammanfattning av de två handledningarna som presenterades tidigare i veckan av våra författare:
Responsive Website Navigation
Av Thoriq Firdaus - [Visa handledning]
Här är en handledning för att hjälpa dig göra din egen hemsida navigering. En av de viktigaste aspekterna av en webbplats är hur lätt det är att navigera genom olika delar av webbplatsen. Ta reda på hur du optimerar detta med CSS3 med denna handledning.
Responsive CV
Av Jake Rocheleau - [Visa handledning]
Om du är en webbprofessor och en online CV är redan en del av din karriär, då borde du ta tillfället i akt att vända det återuppta responsivt också. Gör det lättare för arbetsgivare och kunder att hitta dig på vilken enhet som helst. Och medan du är på det, dubblas ditt eget CV som en portfölj av vad du kan göra som utvecklare.
Bryta isen
Nu var var vi? Åh ja, låt oss få igång en isbrytande åtgärd!
Nybörjarens guide till Responsive Web Design
Av Nick Petit - [Visa handledning]
Denna handledning är en bra utgångspunkt för nybörjare, eftersom det beskriver vilken webbdesignerad design som helst, hur det kom fram, liksom förklaringar om fluidnät och mediasökningar bland andra. Kolla in de resurser som anges längst ner i handledningen också.
Introduktion till Responsive Web Design: Video
Av Nick Petit - [Visa handledning]
Det här är en handledning som är nära 9 minuter lång, vilket skymmer ytan på vilken lyhörd webbdesign som handlar om hur det har påverkat inverkan på en webbplats och vilka faktorer som är inblandade i att producera en lyhörd webbdesign . Om du letar efter att förstå vad lyhörd webbdesign handlar om utan att gå in på kodning först bör du börja med den här videon.
Så här byter du vilken webbplats som helst till en Responsive Site
Av Rochester Oliveira - [Visa handledning]
Det här är en annan handledning som startar från grunderna men bryter allt lite efter bit, inklusive operativsystemet och webbläsarna som du gör din webbplats mottaglig för, liksom de element som påverkas när webbplatsen ses från olika enheter. Författaren har också några användbara WordPress- och jQuery-plugins för att göra ditt arbete mycket enklare.
Responsiv design i 3 steg
Av Nick La - [Visa handledning]
Denna handledning kommer att förklara hur du kan producera en lyhörd webbdesign med metataggar, HTML-struktur och alla viktiga mediefrågor. Du behöver lite kunskap om CSS för att förstå det ...
Designa för en Responsive Web
Av Max Luzuriaga - [Visa handledning]
Här är en artikel som inte är så mycket en handledning, eftersom det är en guide för att skapa responsiv webbdesign. Som sagt berättar författaren bokstavligen om vad du gör och inte om responsiv webbdesign. Det finns förklaringar till varför vissa funktioner inte är tillräckligt mottagliga, hur man arbetar med proportioner och moduler, och bäst av allt är det relativt kort och lätt att absorbera.
Responsive Web Design: En visuell guide
Av Andrew Gormley - [Visa handledning]
Om textfyllda handledningar inte är användbara, kan du prova den här videotutorialen istället. Det är fortfarande ganska tekniskt, men om det gör dig bättre, behöver du inte läsa mycket. Det är ungefär 25 minuter långt och videobandspelaren snabbar fast genom de delar där han koder och går tillbaka för att förklara vad koderna gör.
Börja bygga
Okej, låt oss börja bygga några lyhörda mönster, börja med ...
Fluid Grids
Av Ethan Marcotte - [Visa handledning]
Säg rutnät, och du skulle tänka på "styva strukturer", säg vätska och du skulle tro att det kunde strömma från ena sidan av skärmen till botten eller toppen eller sidan när du trycker på webbläsaren, men sätta dessa två tillsammans och du skulle troligen tro att du måste titta på den här handledningen för att fullt ut uppskatta hur vätskekanaler kan göra din design mer lyhörd.
Fluidbilder
Av Ethan Marcotte - [Visa handledning]
I slutet av denna artikel borde du veta vem Ethan Marcotte är. Här är en ledtråd: han är den som kom upp med konceptet och termen för webbdesigner. Hans namn kommer ganska gott att dyka upp i varje annan handledning i den här listan så varför inte ta råd om flytande bilder direkt från Mästaren själv?.
Skalbara navigationsmönster i Responsive Web Design
Av Michael Mesker - [Visa handledning]
Denna handledning talar om de lärdomar som författaren lärde sig av att arbeta på ett storskaligt mottagligt webbdesignprojekt. Läs hans "walkthrough" om hur man skapar mallar som är enklare att konfigurera för användarvänliga och lyhörda resultat. Det är ett bra utseende bakom kulisserna när man förstår hur man utformar gränssnitt på bästa sätt för skrivbord, surfplattor och mobila vyer.
Responsive Web Design med CSS3 Media Queries
Av Nick La - [Visa handledning]
Och en annan utmärkt handledning för att få dig att lära dig hur du utformar en webbläsarsmall för webbläsare med HTML5 och CSS3. Det är ett steg för steg-tillvägagångssätt och det finns demos av en webbdesign före och efter att mediafrågorna genomfördes för att bättre uppskatta effekterna av mediasökningar.
CSS-effekter: Utrymme bilder ut för att matcha texthöjd
Av Zoe Mickley Gillenwater - [Visa handledning]
Denna handledning gör att du lär dig tricket att göra bilder med fast bredd ändra storlek och avstånd för att stämma överens med den medföljande texten, oavsett hur webbläsarfönstret ändras.
Adaptiva layouter med mediefrågor
Av Aaron Gustafson - [Visa handledning]
Lär dig hur du använder adaptiva eller flexibla layouter med CSS-mediafrågor. Följ bara övningen för att lära dig att anpassa din design till dubbelkolumn eller en kolumnvy samt för att förbereda designen för iPhone och iPad.
Responsive Images: Experimentera med kontextmedveten bildstorlek
Av Scott Jehl - [Visa handledning]
Här är en handledning som använde den första tillvägagångssättet från mobilen. Denna teknik anger en större storlek för bilderna som ska användas på större skärmupplösningar, minus bildförfrågningar och UA-sniffing.
Gör mer
Elastiska videor
Av Nick La - [Visa handledning]
Denna handledning handlar om skalering av videor när ditt webbläsarfönster ändras. Det är i grunden ett CSS-trick och det finns en demonstration för att se tricket på jobbet i självstudiet.
Dölja och avslöja delar av bilder
Av Zoe Mickley Gillenwater - [Visa handledning]
Handledningen tas faktiskt från författarens bok och beskriver hur man avslöjar eller döljer portioner av bilder beroende på skärmupplösningar. Den lär dig hur du dynamiskt beskärar bilder när skärmstorleken ändras och visar bara en del av hela bilden när det finns begränsat utrymme.
Responsive Content Navigator med CSS3
Av Mary Lou - [Visa handledning]
Föredra dig ett mer avancerat sätt för användarna att navigera runt din sida? Då bör du läsa igenom den här handledningen för att lära dig hur du kodar i några fina övergångar: blekna, glida, rotera och skala upp. Övergångarna är i huvudsak innehållsskikt som visades eller dolde med specifik kodning.
Skapa en Responsive Web Design Template
Av Harry Atkins - [Visa handledning]
Detta är en kort handledning för att producera en responsiv webbmall som fungerar både på skrivbordet och på iPhone.
Responsive Horizontal Layout
Av Mary Lou - [Visa handledning]
Denna handledning lär dig hur man skapar en horisontell layout med flera rullbara innehållspaneler. Använder sig av Uppkomsten av arten Som provtext skiljs varje kapitel i boken i kolumner som är placerade bredvid varandra i läget fullläsare men när de krymps ner så små som möjligt ändras layouten till en helt vertikal rullande bok.
Konvertera en meny till en nedgång för små skärmar
Av Chris Coyier - [Visa handledning]
Denna handledning visar hur du konverterar en meny till en rullgardinslista när webbläsarfönstret är smalt eller när du är på en mobilenhet. Längdsraden i det övre högra hörnet av sidan konverteras till en rullgardinsmeny för att spara utrymme utan att offra navigationsalternativ.
Flexibel Slide-to-Top Accordion
Av Mary Lou - [Visa handledning]
Lär dig hur du skapar en enkel och flexibel dragspellayout med fade-in övergångar och justerbara bredder baserat på skärmstorlek och upplösningar.
Så här använder du CSS3-orienteringsmediafrågor
Av Ryan Seddon - [Visa handledning]
Baserat på den enkla regeln som definierar lägen för porträtt (höjd större än bredd) och landskap (bredd större än höjd) kan du skriva en mediefråga för att rikta in specifika stilar baserat på det läge du tittar på. Denna handledning visar oss hur man gör just det och det kommer komplett med en länk till en färgbyte kameleon som använder färg för att visa denna förändring när du krymper webbläsarfönstret.
Responsive Data Tables
Av Chris Coyier - [Visa handledning]
Tabeller är en källa till huvudvärk när det gäller små skärmstorlekar men det betyder inte att vi helt behöver undvika tabeller. Lär dig hur du använder mediafrågor för att göra dina tabelländringsformat helt när du växlar till mobila skärmstorlekar. Se demoen för att få en uppfattning om den magi du kan göra baserat på denna handledning.
Fluid CSS3 Bildspel med Parallax Effekt
Av Ring Wing - [Visa handledning]
Skapa ett CSS3-bildspel där två bakgrundsbilder används och när bakgrundspositionerna ändras, ses en parallell effekt. Bortsett från det är bildspelet flexibelt, vilket ändrar storlek på sig när webbläsarfönstret stängs in på det.
Så här bygger du ett ansvarsfullt miniatyrbild Galleri
Av Joshua Johnson - [Visa handledning]
Detta är bra för webbplatser som innehåller miniatyrbilder i ett galleri. När webbläsarfönstret ändras ändras layouten för att uppta mellan två kolumner (mindre skärmstorlekar) och fem (maximala) kolumner. För mer liknande bildspel och reglage, kolla in vår Top 10 Free Responsive Image Galleries / Slideshows artikel.
Optimera din e-post för mobila enheter
Av Ros Hodgekiss - [Visa handledning]
Även e-postmeddelanden kan optimeras för småskärmsvisning som hur webbplatser är. För det mesta ändras texten i en HTML-e-post till en punkt som inte är gjord för bekväm läsning. lära sig hur man hanterar detta och mer från denna handledning.
använda ramar
Bygg en responsiv mobilvänlig webbplats med skelett
Av Joshua Johnson - [Visa handledning]
Skelett är en fantastisk ram för att bygga lyhörda webbplatser med den. Denna handledning tar dig i en steg-för-steg guide om hur du använder Skelettramen för att skapa fantastiska lyhörda mönster. Du kommer bli bedövad för att se hur lätt det är att genomföra.
Responsive Web Design med HTML5 & Less Framework 3
Av Louis Simoneau - [Visa handledning]
Om du inte har introducerats ordentligt till Mindre, kolla in vår egen Mindre CSS-handledning först för att få en smak av Mindre. I den här handledningen användes Mindre ram för att låta dig se tydligt effekterna av mediefrågor.
Slutsats
Och det avslutar vår Responsive Web Design serier. Vi hoppas att teman, verktygen och andra resurser som presenteras i denna serie har hjälpt till att avslöja begreppet responsiv webbdesign till våra läsare. Men hur skulle vi veta om du inte berätta för oss?
Låt oss veta din feedback på serien och om du har förslag på fler idéer du vill se på hongkiat.com. Släpp oss en rad, eller en kommentar nedan.
