50 fantastiska verktyg för responsiv webbdesign

Författare: Monica Porter
Skapelsedatum: 17 Mars 2021
Uppdatera Datum: 17 Maj 2024
Anonim
50 fantastiska verktyg för responsiv webbdesign - Kreativ
50 fantastiska verktyg för responsiv webbdesign - Kreativ

Innehåll

Som introducerades / myntades av Ethan Marcotte i både sin artikel "Responsive Web Design" och hans bästsäljande bok, behöver man tre element för att göra en webbplats lyhörd:

  1. Ett flexibelt / flytande rutnät
  2. Responsiva bilder
  3. Mediefrågor

Det finns många andra bra artiklar som täcker motiv, koncept och tekniker angående responsiv webbdesign, så vi kommer att hålla fokus i den här artikeln på några toppverktyg som hjälper dig att bli ansvarsfullt lyhörd.

Verktyg för att starta

Innan du börjar bygga din webbplats är det bäst att skissera hur elementen på sidan kommer att anpassa sig till de olika webbläsarstorlekarna på de olika enheterna som de kommer att ses på, och undvika den koppling som ofta kommer från att tänka på skrivbordsdesignen och resten av de responsiva iterationerna som en eftertanke (se särskilt Stephanie (Sullivan) Rewis kommentar).

01. Responsive Web Design Sketch Sheets

Denna uppsättning responsiva skissark, av Jeremy P Alford, är en utmärkt utgångspunkt för att börja kartlägga hur sidavsnitten kommer att förändras i olika upplösningar.


02. Skissbok för responsiv design

Om du föredrar att hålla alla dina skisser på ett ställe, kanske du vill överväga denna trådbundna bok med 50 responsiva skissark från App Sketchbook-företaget.

03. Responsiva trådramar

En av svårigheterna med att bygga responsiva webbplatser är att använda trådramar för att visa hur den responsiva designen kommer att fungera. James Mellers från Adobe har satt ihop det här experimentella verktyget för att visa hur lyhörd wireframing av komplexa layouter kan fungera.


04. Layoutmönster för flera enheter

När du planerar en lyhörd design är det bra att se hur andra har närmat sig den före dig, så Luke Wroblewskis layoutmönster för flera enheter, som listar populära mönster med länkar till exempel, är ett bra ställe att börja.

05. Stilplattor

Samanatha Warren Style Tiles föreslår en ny teknik för design i den responsiva tidsåldern; snarare än designmockups med fast bredd, dessa är som färgrutor eller moodboards som visar den allmänna designmetoden utan att gå in i detaljer.

Verktyg för ett flexibelt / flytande galler

Som nämnts tidigare är den första komponenten som behövs för responsiv design ett flexibelt / flytande nät.Följande är redan förbyggda: du behöver bara ladda ner dem så kommer du snabbt på vägen till en mer responsiv webbplats.


06. Golden Grid System

Joni Korpi, som också utvecklat Less Framework, har nyligen släppt den här nya versionen av ett pålitligt nätverk för lyhörd design. Anses vara "vikning" eftersom det enkelt anpassar sig från 16, till åtta till fyra kolumner. Golden Grid System har också ett litet webbläsaröverlägg som exponerar rutnätet på dina sidor för testning.

07. Foldy960

De begåvade herrarna hos Paravel, Inc. har släppt det modifierade 960.gs-nätet som de använder som grund för sina lyhörda projekt.

08. SimpleGrid

SimpleGrid, av Conor Muirhead, byggdes med inbyggd respons, så det är enkelt att komma igång med ditt responsiva webbplatsprojekt.

09. CSS-nätet på 1140 pixlar

Ett annat bra responsivt nätverkssystem är 1140px CSS Grid av Melbourne-designern Andy Taylor, som går från en bred skrivbordsupplösning ner till mobil.

10. Kolumn-CSS-rastersystem

Columnal grid system, skapat av Pulp + Pixels aka creative director Nick Gorsline, är baserat på 1140px rutnätet, men med några extra godsaker som ett designsats med skissark och wireframing mallar, samt CSS felsökningsstilar.

11. Semantiskt nätsystem

Förbehandlade CSS-tillägg som Sass och LESS blir mer och mer populära, och Tyler Tates semantiska nätsystem använder dem för att maximera effekten i detta nätverk som påstår sig inte använda onödiga klasser eller element. Läs mer på coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Precis som det semantiska rutnätet skapade Oddbirds SUSY ett rutnätssystem som inte använder någon extra markering eller specialklasser, men SUSY riktar sig bara till användare av Sass (och dess tillägg, kompass).

13. Gridpak

Gridpak, av Erskine Design, är en av de nyaste responsiva nätgeneratorerna. Det låter dig ställa in dina kolumner och rännor vid ett antal brytpunkter och sedan mata ut CSS-, JavaScript- och PNG-filer så att hela ditt team arbetar från samma startpunkt.

14. Gridset

Det finns fortfarande ett litet mysterium över Gridset eftersom det inte har släppts när jag skriver detta. Men verktyget från Mark Boulton Design lovar skräddarsydda, receptfria, rutnätssystem och ett sätt att spara och hantera dina nät online.

15. Ett bättre Photoshop-nät för RWD

Elliot Jay Stocks föreslår att man överger den gamla 960px de facto-nätstandarden och arbetar från en 1000px-bas istället, vilket gör alla beräkningar i procent enklare att arbeta med. Om du håller med har han gjort en PSD som du kan börja arbeta med.

16. Flytande galler

Om din design är mycket specialiserad och du behöver skapa ditt eget anpassade rutnät kan du göra det med .net Awards lysande nykomlingskandidat Harry Roberts fluid grid calculator.

17. Responsiv miniräknare

En annan pixel till procentsatsräknare, men den här av Stu Robson går ett steg längre än andra genom att generera alla CSS-regler åt dig, vilket innebär att du bara kan kopiera och klistra in dem i dina stilark.

Verktyg för responsiva bilder (och text)

En annan viktig del av responsiv webbdesign är flytande bilder. Medan tekniken för att uppnå flytande bilder är okomplicerad, verkar optimering av prestanda och sidbelastning för olika enheter vara en av de största utmaningarna inom lyhörd webbdesign. Här är några resurser för att närma dig problemet.

18. Responsiva bilder

Filament Group utformade ett sätt att skicka en bild av lämplig storlek baserat på skärmupplösning. Detta experiment med mobil-första bilder som skalas responsivt och ansvarsfullt kräver att man har två bilder i olika storlekar som referens.

19. Adaptiva bilder

Matt Wilcox hämtade inspiration från Responsive Images-verktyget för att skapa Adaptive Images, som använder PHP och lite JavaScript för att betjäna lämpliga bilder till användarens enhet utan att kräva någon extra markering.

20. Sencha.io Src (tidigare Tinysrc)

Sencha tillhandahåller en molntjänst som skickar optimerade versioner av värdbilder för storleken på enheten som begär dem. För att ta reda på hur du använder den, se docs.sencha.com/io/src/.

21. FitText

Ännu en pärla från Paravel, Inc är FitText.js, en jQuery-plugin för att göra rubrikens webbtyp lyhörd för designen och enheten. För detaljer se trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Inspirerad av FitText och SlabType-algoritmen, är Brian McAllister's slabText ett jQuery-plugin-program som gör djärva textblock som ändrar storleken på ett smidigt sätt samtidigt som de håller sig till en definierad bredd.

Verktyg för mediefrågor

Nu när du har en uppfattning om hur din layout kommer att ändras för olika enheter, ett flytande rutnät och flytande bilder, behöver du mediefrågor för att flytta sidans element till ett tillstånd av lyhördhet.

23. Respond.js

Det enda problemet med responsiv design är att webbläsare som inte kan läsa mediefrågor blir kvar. Det här kanske inte är ett problem för din målgrupp, men det är fortfarande en bra metod att ta emot användare i äldre webbläsare. Respond.js, av Scott Jehl, stöder endast egenskaper min-bredd och max-bredd.

Mer information finns på filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, av Wouter van der Graaf, gör det möjligt för äldre versioner av IE och andra webbläsare att effektivt testa och tillämpa alla typer av mediefrågor.

25. Adapt.js

Nathan Smith, författare till det ursprungliga 960.gs-rastersystemet, har skrivit Adapt.js, ett skript som upptäcker webbläsardimensioner och endast serverar de önskade formatmallen - som mediefrågor men utan mediefrågor, vilket betyder att det också fungerar i äldre webbläsare.

26. Categorizr

Det här är enhetsdetektering som närmar sig från motsatt vinkel - Brett Jankords Categorizr-skript förutsätter att enheter är mobila om inte annat upptäcks som stationär eller surfplatta, så att du kan skicka resurser till webbläsare på ett sympatiskt sätt.

Responsiv design (och mobil) pannplattor

I en anda av ett effektivt responsivt arbetsflöde underlättar pannplattorna processen att flytta mönster till webbläsaren förr än senare. De flesta av dessa pannplattor kombinerar de bästa verktygen som nämns ovan i ett snyggt paket: ett flexibelt rutnät förbättrat med skript, samtidigt som man implementerar den mobila första innehållsfilosofin.

27. 320 och uppåt

Andy Clarke's 320 and Up är en mobil första pannplatta som integreras med många andra moderna webbdesignverktyg, som LESS och Bootstrap (se # 30). Det är ett lätt och smidigt sätt att få en webbplats igång snabbt. Kolla också in vår intervju med Andy, där han berättar mer om den nya versionen.

28. Gridless

Gridless är en HTML5- och CSS3-pannplatta som kan tjäna som bas för dina responsiva mönster, med fokus på typografi och inbyggd kompatibilitet mellan webbläsare.

29. Skelett

Till skillnad från de tidigare två pannplattorna, vars utgångspunkt är med den minsta upplösningen, är Skeleton-utvecklingssatsen, skapat av Dave Gamache, baserat på 960.gs nätsystem och skalas ner till mobil. Skeleton har också en fantastisk stilram för utvecklare att bygga stilar ovanpå.

30. Bootstrap

Bootstrap är byggt av Twitter och nu öppet, och är ett ramverk och en serie komponenter för att snabbt få en webbplats online, och från och med version två fungerar alla dess kärndelar responsivt.

Plugins, shims och polyfills

Även om moderna webbläsare och programvara tenderar att vara anpassade för lyhörd, ibland måste vi använda extra verktyg för att ge en konsekvent upplevelse.

31. Responsivt plugin

Marios Lublinski har skrivit ett WordPress-tillägg som lovar att förvandla alla nuvarande WP-teman till ett lyhördt. Hur detta fungerar vet jag ännu inte eftersom det inte har släppts i skrivande stund, men om det lever upp till sitt löfte borde det vara mycket användbart.

32. störta

Hantering av innehållsöverflöde fungerar bra på stationära webbläsare, men äldre mobilwebbläsare hanterar det inkonsekvent. Overthrow-polyfyllningen från den flitiga Filament Group lägger till konsekvent graciös nedbrytning över enheter, vilket ser till att alla mobilanvändare får bästa möjliga upplevelse.

33. MediaTable

Marco Pegoraros jQuery-plugin, MediaTable, fungerar med Respond.js för att hjälpa dig att komma runt problemet med hur du visar stora datatabeller på småskärmsenheter, gör responsiva kolumner och lägger till en show / göm-växling där det är lämpligt.

"Testning, testning: 1-2-3 ..."

En annan aspekt av det responsiva arbetsflödet är att känna till dina målenheter och upplösningar och sedan testa dem.

34. resizeMyBrowser

resizeMyBrowser, av frontend-utvecklaren Chen Luo, har flera förinställda dimensioner för ditt webbläsarfönster för att testa responsivt designade sidor eller skapa en ny förinställning om du inte hittar den som passar dina behov.

35. responsivepx

Precis som resizeMyBrowser, responsivepx, byggd av Remy Sharp, laddar dina sidor i ett fönster där du kan testa bredden och höjden för att avgöra hur bra dina mediefrågor skjuter och var brytpunkterna är i designen.

36. Test av responsiv design

Ett otroligt användbart verktyg av designern och utvecklaren Matt Kersley: ange bara webbadressen till din responsiva webbplats i Responsive Design Testing för att se hur den återges i olika webbläsarstorlekar.

37. Responsinator

Ange en URL och Responsinator visar hur den visas i många vanliga enhetsstorlekar - med hänsynslös roboteffektivitet. Tama Pugsley och Andy Hovey är ansvariga för den här.

38. Responsive.is

En annan enhetsemulator på sidan, Responsive.is, låter dig skriva in en URL och sedan ändra storleken på den mellan en rad olika förinställningar. Den är gjord av teamet bakom den kommande Typecast-appen.

39. Screenqueri.es

Ytterligare ett webbläsardimensionsverktyg, men Screenqueri.es från Mandar Shirke skiljer sig åt genom att ha en omfattande uppsättning förinställningar för mobil och surfplatta, samt ett rutnät och linjaler som gör finmätning så mycket enklare.

40. Aptus

En annan app för testning av webbplatser i flera definierade storlekar, men Aptus är Mac-native. Det är tillgängligt via Mac App Store, och att vara infödd ger extra funktioner som enkla skärmdumpar och offline-support.

41. Broschyr för responsiv design

Victor Coulon har gjort en mycket enkel men effektiv bokmärke; när du aktiverar den på vilken webbsida som helst lägger den till ett verktygsfält som låter dig växla mellan fyra vanliga skärmdimensioner så att du kan se hur din webbplats återges i olika storlekar.

42. Bokmärke för responsiv designtest

Denna bokmärke av Benjamin Keen möjliggör mer anpassning genom att låta dig definiera dina egna enhetsstorlekar, och så många eller få du vill. När den är aktiverad visar den webbplatsen i alla valda storlekar, sida vid sida för enkel jämförelse.

43. Screenfly

Screenfly, av QuirkTools, låter dig testa en webbplats med olika upplösningar på skrivbord, surfplatta, mobil och tv. Skrivbordstestningen är för närvarande begränsad till Safari, medan surfplattan och mobilen har fler alternativ för enheter och webbläsare. TV är begränsat till Opera.

44. Media Query Indicator

Johan Brook erbjuder ett rent CSS-sätt att testa när en mediefråga har utlösts av webbläsaren. Media Query Indicator är ett annat bra verktyg för att testa och spela med designbrytpunkter.

45. Shim

Ett av verktygen som används i redesignen av Boston Globe, affischpojken för RWD-rörelsen, Shim är en Node.js-app som driver en webbsida över flera enheter i samma Wifi-nätverk, vilket gör testning över olika enheter så mycket enklare .

46. ​​Drive-in

Om du inte har en Node.js-server för att köra Shim, har Scott Jehl gjort en enklare version som heter Drive-In som i grunden fungerar på samma sätt men använder PHP, Apache och en .htaccess-fil.

47. Adobe Shadow

Adobe fortsätter sitt arbete med webbteknik med detta fjärrfelsökningsverktyg. Installera Shadow och Chrome-tillägget på Mac eller Windows, plus Shadow-klienten på Android eller iPhone, och du kan dela webbsidor mellan många olika enheter.

48. Opera Mobile Emulator + Remote Debug

Ett enklare sätt att felsöka mobila sidor är att installera Opera och Opera Mobile Emulator och ansluta de två med deras alternativ för fjärrfelsökning. Enkelt och snabbt att installera och har den extra fördelen att testa på mer än WebKit.

Ytterligare inspiration

Vill du få en uppfattning om hur andra gör deras design lyhörda?

49. MediaQueri.es

Om du inte redan har sett det har webbplatsen Mediaqueri.es ett ständigt växande antal webbplatser som har gått över till den responsiva sidan.

50. @RWD

Ethan Marcotte driver ett Twitter-konto som ger de senaste nyheterna, verktygen och utställningarna från RWD-världen.

Denise Jacobs älskar att vara talare, författare, webbdesigntränare och kreativitetsevangelist, medan Peter Gasston är författare till The Book of CSS3 och en veteran webbutvecklare som bloggar på Broken Links.

Gillade detta? Läs dessa!

  • Proffstips för att bygga en mobilwebbplats
  • Topp CSS och JavaScript tekniker
  • Hur man bygger en app
  • De bästa gratis webbteckensnitt för designers
  • Upptäck vad som är nästa för Augmented Reality
  • Ladda ner gratis texturer: hög upplösning och redo att användas nu
Föregående Artikel

5 psykologiska utmaningar med frilans
Nästa Artikel

Hur man laddar ner Instagram-foton: En komplett guide
Rekommenderat För Dig
Kändissidan får den stora bilden på mobilen
Läsa

Kändissidan får den stora bilden på mobilen

Maj 2024
Ord: Paul LloydThe Cut är en webbplat från tidningen New York med foku på mode, könhet, politik, ex och kändi . Inför att packa i en mängd innehåll kunde det in...
Stillebenfotografering: 30 vackra exempel
Läsa

Stillebenfotografering: 30 vackra exempel

Maj 2024
Att perfektionera kompo itionen och bely ningen kon t för att kapa en vacker tillebenbild är verkligen ingen lätt uppgift. Men gör det rätt och tilleben kan fotografera vara e...
6 otroliga designhemligheter du behöver veta
Läsa

6 otroliga designhemligheter du behöver veta

Maj 2024
Den me t populära de ignprogramvaran är full av knep och genvägar om kan på kynda proce er eller ge nya kreativa möjligheter. å här funktionerna fungerar kan vara l&...