Verkligen lätt ansvarsfull design
Det är ingen hemlighet att många tror att webben är en framtid. Skapa en responsiv webbplats innebär att den kan anpassa sig till de många olika webbläsare och storlekar som finns tillgängliga. Om jag vill se till att min hemsida som jag har skapat på mitt skrivbord kan ses på en tablett med miniumrullning och zoomning, kommer jag att vara intresserad av att skapa en responsiv webbplats.
En anledning till mottagliga webbplatser har blivit populär, eftersom det bara är meningsfullt. Det är billigare att skapa en eller flera extraplatser för mobiltelefoner och surfplattor. Det säkerställer också att det finns en konsekvent visningsupplevelse bland enheter och skrivbordsskärmar. Det är inte kul att behöva öka storleken på ditt fönster eller bläddra horisontellt för att se en hel webbplats.
Medan du skapar lyhörda webbdesign blir det enklare, det finns några sätt att få det att gå ännu snabbare. Tack vare vissa CSS och HTML kan vi koda den direkt i våra webbplatser. Andra element kräver lite mer arbete. Hur som helst har vi kommit fram till en lista för att hjälpa dig att sätta din lyhörda sida tillsammans med minsta krångel och maximala resultat.
jQuery-plugins
Isotop
Isotop är ett jQuery-plugin som hävdar att skapa magiska layouter som inte annars kan skapas av CSS och HTML. Den har möjlighet att omorganisera element inuti en behållare så att de passar in i den när den ändras. Du kan också använda isotopen för att filtrera och sortera objekt efter kategorier och så.
Breakpoints.js
Breakpoint gjordes med utvecklare och designers i åtanke. Det är ett plugin som låter dig skapa brytpunkter för olika webbläsarstorlekar. När din webbläsare ändras till en av dessa storlekar, kan elementen passa in i skärmen.
FitText.js
Detta är en av mina favorit jQuery-plugins eftersom den är för teckensnitt. Alltför ofta i responsiv webbdesign tar människor inte hänsyn till att rubrikerna ska vara mottagliga istället för att klä sig in i ett visst utrymme. FitText låter dig göra just det, men kom ihåg att bara använda den för rubriker!
Response.js
Om du gillar tanken på Breakpoint.js men vill ha mer anpassning är Response.js svaret. Det är jättebra för dem som känner till jQuery bättre än CSS och HTML och behöver skapa responsiva webbplatser. Du använder dina brytpunkter, men det finns så mycket mer anpassning, som enhetsstorlek, pixelrantioner och möjligheten att ladda olika källor i olika storlekar.
TinyNav.js
TinyNav är ett litet jQuery-plugin som gör att du kan ändra menyalternativ med listor för att gå till menyn när webbläsaren ändras. Du kan ange storlekarna och vilka menyer som ska ändras. Det är inte så brett i funktion, men det är mycket effektivt för vad det gör.
Populära ramverk och system
Responsive Grid System
Systemet hävdar att det inte är en panna eller ram, men bara ett system för att göra dina motiv mottagliga. Det verkar vara en av de mest flexibla eftersom det inte begränsar dig till en viss storlek eller till en viss gridsize. De använder olika CSS-klasser som kan flyta och skapa egna kolumner.
Golden Grid System
GGS är också ett system, och inte en "ram". De tycker om att hänvisa till sig själva som en startplats eller riktlinje för dem som wamt att använda en viss mängd nät i sin webbdesign. Du får 18 kolumner på skärmen, men 16 att använda i din design. Du gör upp dina egna bredder och rännor att använda och går väsentligt därifrån.
1140 Grid System
Ett tag använde många designers webbdesigner som var 960px breda. Då blev det för små och de gick upp. Nu utvecklas många mönster med en bredd på 1140 px. Med detta 1140 Grid System kan du skapa 12 kolumner för användning i en bred webbdesign.
Twitter Bootstrap
Bootstrap är en av de mest populära ramarna som finns tillgängliga. Det är en 12 grid ram som har gjort sig användbar cross-browser (inklusive Internet Explorer 7) och kan användas responsivt i handhållna enheter. Det kommer med olika styling komponenter, typografi och JavaScript att använda och skapa snygga, intuitiva webbplatser.
SimpleGrid
SimpleGrid tar tanken på nät och förenklar den. Med de flesta nätsystem och ramverk har du dessa okända klasser och okända kolumner. Enkelt rutnät har klasser som anger vilka kolumner som är första, mitten och sista. Dessutom kan du lägga till olika "slots" i kolumnerna så att det verkar som om det finns fler kolumner. Det är en mycket enkel och enkel ram.
Andra svarande verktyg
Responsive Web Design Sketch Sheets
Såsom någon formgivare eller utvecklare skissar du noga ut dina mönster innan du faktiskt handlar om att göra dem. Förhoppningsvis gör du det. Om inte, kanske du bör börja med att använda dessa RWD-skissark. De kommer med olika enheter och skrivbordsstorlekar på dem så att du kan planera allt.
Responsive Design Sketchbook
Om du gillar tanken på skissen på papper, men vill ha alla dina klotter tillsammans, kan du överväga att få den responsiva design skissboken. Den levereras med 50 sidor, spiral bunden med olika skärmstorlekar på varje sida. Alla nät och matte är redan gjorda för dig, så det här är ett bra verktyg för nybörjare och experter i responsiv design.
Stilplattor
Det här är en trevlig liten resurs för webbdesigners om de letar efter något för responsiv design eller inte. Det är en PSD som låter dig få kärnan på en webbplats genom att lägga till rubriker (typografi), logotyper, färger och andra element. Anledningen till att detta fungerar för lyhörd webbdesign är att det inte innebär några dimensioner, bara en digital idé utan begränsningar.
Responsive Calculator
Det finns massor av matematik som är inblandad i att skapa pixel perfekt lyhörd design. Det är nödvändigt att din matte är korrekt också, för att du ska hantera olika procentandelar, bredder och webbläsarstorlekar. För att hjälpa till, här är en kalkylator som ger dig rätt matte och CSS att följa med det.
Slutsats
Det är absolut nödvändigt att vi tar del av vad den mottagande webben gör. Många kunder vill ha sina webbplatser tillgängliga för en rad olika enheter, och det är bara mer kostnadseffektivt att skapa responsiva webbplatser. Dessutom hjälper de flesta av dina ramar och andra resurser för responsiv design att odla organiserade och högkvalitativa, vanliga webbplatser.
Vilka är dina favorit sätt att börja responsiva mönster? Har vi saknat en resurs du litar på? Låt oss veta i kommentarerna.