Responsiv webbdesign är hela rasen för tillfället, men som en heltidsdesigner är det svårt att ta tid att hämta nya trender oavsett hur användbara och kanske till och med nödvändiga de kan vara.
Förbyggda teman och mallar ger dig ett snabbt och enkelt sätt att komma igång med lyhörd webbdesign. Många av dem gör allt arbete för dig och ger en enkel plug-and-play-arbetsflöde, andra tar hand om den tunga lyftningen genom att ta hand om mediasökningarna och ge dig fullständig kontroll över designen. Det här inlägget innehåller 20 gratis och premium mallar, som alla är fulla responsiva direkt ur lådan.
Responsive Layout: Fad eller Nödvändighet?
Det har varit massor av diskussioner om responsiv webbdesign på senare tid. Många hail det som framtiden för webbdesign och till och med gå så långt som att säga att du helt enkelt inte gör webbdesign på rätt sätt om dina webbplatser inte överensstämmer med deras specifika formel för maximal kompatibilitet. Andra hävdar att detta bara är en annan leksak i en lång rad kramar som kommer och går.
Svaret är sannolikt någonstans mellan de två. Sanningen är att webbdesign verkligen har slagit ett stort hinder med en mängd olika skärmstorlekar som nu öppnar webben regelbundet. Många webbplatser kan inte heller ha råd att lämna ut stora delar av mobila användare, eller kan de bygga anpassade webbplatser som är skräddarsydda för alla smartphones, surfplattor, bärbara datorer och skrivbord på marknaden.
Responsiv design, det är trend eller inte, är för närvarande det bästa svaret på det här problemet. Om mediafrågor faller borta, kommer det helt enkelt att vara en bättre lösning, inte för att problemet upphör att vara viktigt.
Jag kan inte säga hur vi ska utveckla webbplatser tio år från nu, men du kan satsa på att skärmstorlekarna bara fortsätter att bli mer fragmenterade, eftersom allt med ett batteri eller en plugg snabbt kan komma åt webben. Om vi definierar? Lyhörd? webbdesign som en uppsättning tekniker som används för att säkerställa maximal kompatibilitet på så många enheter som möjligt, så tittar vi definitivt inte på en kram men nuvarande och framtida standard för proffs i vår bransch.
Vissa klagar över den extra insatsen och utvecklingenstiden, men det är egentligen inte så illa som du kanske tror och när du har dragit det av ett par gånger kan påverkan på ditt arbetsflöde vara ganska minimal. Verktygen i det här inlägget gör det ännu snabbare och tar det mesta av trycket från dig när det gäller de responsiva elementen.
20 Responsive Templates & Themes
Yoko - Gratis HTML5 / CSS3 WordPress 3.1+ Tema
? Yoko är ett modernt och flexibelt WordPress-tema. Med den responsiva layouten baserad på CSS3-mediefrågor anpassas temat till olika skärmstorlekar. Designen är optimerad för stora skrivbordsskärmar, tabletter och små smarttelefonskärmar. För att göra din blogg mer individuell kan du använda de nya inläggsformat (som galleri, tillägg eller citat), välj din egen logotyp och header image, anpassa bakgrunden och länkfärgen.?
Pris: Fri
Skelett
Skelett är en panna som lyckas med att utveckla lyhörda webbplatser en bris för att uppnå. Vi har skrivit om det några gånger på Design Shack och älskar verkligen sin enkelhet. Tillsammans med nedladdningen får du självklart en demofil som enkelt kan användas som startmall för att bygga upp ditt eget arbete.
Pris: Fri
Super Skeleton: Responsive, Minimal, Beautiful
? SuperSkeleton är mer än en mall, det är en omfattande HTML5-ram En samling av flera otroligt kraftfulla skript och CSS-strukturer som är bundna i ett kit som är perfekt som en hoppning av punkten i ditt nästa projekt.?
Detta är ett superpremiepaket med 20 HTML-mallar, en PSD-gränssnittskit, flera skinn, fontstacker och mer. Det är en stjäl för under $ 20 och är det perfekta sättet att starta dina satsningar i responsiv layout.
Pris: $17.00
Responsive Twenty Ten (WP Theme)
Responsive Twenty Ten är ett barntema för standard WordPress-temat med många bra funktioner som flexibla bilder. Författarna ger dig tillstånd att? Ladda ner, ta, använda, ändra och göra vad du vill med det.?
Pris: Fri
Onextrapixel Responsive Web Design Template
En mycket grundläggande men solid gratis mall / handledning för responsiv webbdesign. Det här är perfekt om du bara vill gräva runt och se hur en enkel responsiv mall fungerar utan all fluff.
Pris: Fri
The Novelist: Responsive WP Tema för författare
Ett mycket unikt utseende med ett simulerat öppet bokgränssnitt som viker snyggt när du ändrar webbläsaren. Perfekt för personliga författarportföljer.
Pris: $35
Ari WordPress Theme
Ari är ett mycket minimalt bloggtema som är super attraktivt i sin enkelhet. Det är byggt för WordPress 3 och upp och har både ett ljust och ett mörkt tema. Du kommer definitivt att ge den här en titt.
Pris: Fri
Golden Grid
Gyllene galler är som Skelett mer än en mall, det är en ram för att bygga upp svåra platser. Självmärkta som ett falsnät för lyhörd design? De 16 kolumnerna kan kombineras eller vikas i 8 kolumner för skärmar i tablettformat och i 4 kolumner för mobilstorlekar.?
Pris: Fri
Hero - En Responsive Single Page Template
? En smidig, ren och minimal stil enkelsidsmall för personliga och företagstyp. Den har en fast meny längst upp i dokumentet för enkel navigering. Det har också en 10 pixel kant i kroppen.?
Helt kommer med både ett ljust och mörkt tema, som båda ser bra ut, men mörkret är speciellt smalt.
Pris: $14
Bra Minimal - En Responsiv HTML5 Mall
? Bra Minimal är en ren och minimalistisk stilmall som är bra för portfölj, bloggar och företag.? Mycket lik den tidigare mallen i många hälsningar men med en djärvare, mer unik design. Jag gillar verkligen utseendet på typografi i den här.
Pris: $14
iTheme2 (WordPress)
iTheme2 är en underbar gratis bloggmall som har en lyhörd layout och massor av bra funktioner som en anpassningsbar funktionsreglage, en social media-widget, två temahud och mer.
Pris: Fri
Folio Two
? Folio Two är en avancerad portfölj, en praktisk och användbar mall utformad med HTML5 + CSS3 och använder jQuery för att förbättra en fantastisk användarupplevelse.?
Denna mall har ett riktigt trevligt stort galler av bilder som mimlar smidigt när webbläsarfönstret ändras. Ruten ser bra ut både små och stora!
Pris: $12
Grido WP Theme
Grido är en fantastisk och imponerande prestation för webblayout-tricks. Den har både en masonry-liknande layout och ett lyhörd system som justerar den layouten för flera skärmstorlekar. Den levereras med flera färgscheman, en lightbox galleri, sju skinn och mer.
Pris: $39
Flexibel WordPress Theme
Flexibel är ett WordPress-tema som hjälper till att presentera ditt innehåll och visa det för att passa olika skärmstorlekar, med en egen design. Det ger också en väldigt enkel integration med Facebook och Fan Gate-alternativet, en måste ha om du kör en webbplats.?
Pris: Fri
Deresan Gray Profile Template
En sofistikerad mall med ett fint neutralt färgschema, en bildreglage och massor av bra lilla designdetaljer. Den mottagliga skalan är inte min favorit men den är funktionell.
Pris: $14
Constellation WordPress Theme
Detta tema har allt. Det är inte bara lyhört, det är byggt på HTML5 Boiler Plate och innehåller både ett horisontellt rutnät och en pixel perfekt vertikal rytm som vågar snyggt över enheter. Detta är den perfekta utgångspunkten för ditt nästa WordPress-projekt.
Pris: Fri
Seamless Responsive Photo Grid
Ett fint litet experiment från Chris Coyier som du kan ladda ner och använda. Det är i grund och botten bara ett stort galler av foton som direkt anpassar sig till skillnader i webbläsarfönsterformat.
Pris: Fri
Tisa WP Theme
Ett annat snyggt och responsivt Themify-tema med massor av stora bilder, ett vackert färgschema och sex tema skinn.
Pris: $39
Meerkats Responsive WordPress Theme
? Meerkats Theme är byggt för att svara på olika plattformar och enheter. Det är ett enkelt och grundläggande WordPress-tema byggt av Gregor McKelvie. ?
Pris: Fri
Whiteboard Framework
? Whiteboard Framework för WordPress utvecklades för att påskynda processen att utveckla ett WordPress-tema. Whiteboard gör det genom att eliminera tiden som spenderas på kod som är gemensamt för alla WordPress-teman och innehåller icke-påträngande kod som förbättrar det övergripande WordPress-temat på många sätt - inklusive SEO, hastighet, användbarhet och mobilt support.?
Whiteboard bygger på den populära mindre ramen, både HTML5 och CSS3 och ger dig en nästan oslagbar utgångspunkt för att utveckla WP-teman.
Pris: Fri
Slutsats
Med dessa tjugo fantastiska resurser borde du vara fullt beväpnad för att börja skapa responsiva webbdesigner i både rakt HTML / CSS och WordPress. Oavsett vad din budget är, finns det flera teman och mallar här som är perfekta för dig.
Lämna en kommentar nedan och låt oss veta om vi missat några. Har du stött på några bra mottagliga mallar och teman? Vi vill se dem!