50 fantastiske værktøjer til responsivt webdesign

Forfatter: Monica Porter
Oprettelsesdato: 17 Marts 2021
Opdateringsdato: 17 Kan 2024
Anonim
50 fantastiske værktøjer til responsivt webdesign - Kreativ
50 fantastiske værktøjer til responsivt webdesign - Kreativ

Indhold

Som introduceret / opfundet af Ethan Marcotte i både sin artikel "Responsive Web Design" såvel som hans bedst sælgende bog, har man brug for tre elementer for at gøre et websted lydhørt:

  1. Et fleksibelt / flydende gitter
  2. Responsive billeder
  3. Medieforespørgsler

Der er masser af andre gode artikler, der dækker motiver, koncepter og teknikker vedrørende responsivt webdesign, så vi holder fokus i denne artikel på nogle topværktøjer, der hjælper dig med at blive ansvarlig lydhør.

Værktøjer til start

Før du begynder med at opbygge dit websted, er det bedst at skitsere, hvordan elementerne på siden vil tilpasse sig de forskellige browserstørrelser på de forskellige enheder, som de vil blive set på, og undgå den afbrydelse, der ofte kommer fra at tænke primært på desktop-designet og resten af ​​de responsive iterationer som en eftertanke (se især Stephanie (Sullivan) Rewis 'kommentar).

01. Responsive webdesign skitseark

Dette sæt responsive skitseark af Jeremy P Alford er et godt udgangspunkt for at begynde at kortlægge, hvordan sidesektionerne vil skifte i forskellige opløsninger.


02. Skitsebog for responsivt design

Hvis du foretrækker at opbevare alle dine skitser ét sted, kan du overveje denne trådbundne bog med 50 responsive skitseark fra App Sketchbook-firmaet.

03. Responsive trådrammer

En af vanskelighederne ved at opbygge responsive websteder er at bruge wireframes til at vise, hvordan det responsive design fungerer. James Mellers fra Adobe har sammensat dette eksperimentelle værktøj til at vise, hvordan lydhør wireframing af komplekse layouts kan fungere.


04. Layoutmønstre til flere enheder

Når du planlægger et responsivt design, er det nyttigt at se, hvordan andre mennesker har nærmet sig det før dig, så Luke Wroblewskis Multi-Device Layout Patterns, der viser populære mønstre med links til eksempler, er et godt sted at starte.

05. Stilfliser

Samanatha Warren Style Tiles foreslår en ny teknik til design i den lydhøre alder; snarere end designmockups med fast bredde er disse som farveprøver eller moodboards, der viser den generelle designtilgang uden at gå i detaljer.

Værktøjer til et fleksibelt / flydende gitter

Som nævnt tidligere er den første komponent, der er nødvendig til responsivt design, et fleksibelt / fluidnet.Følgende er allerede forudbyggede: du skal bare downloade dem, så er du hurtigt på vej til et mere responsivt sted.


06. Golden Grid System

Joni Korpi, som også udviklede Less Framework, har for nylig frigivet denne nye version af et pålideligt netsystem til responsivt design. Anses som "foldning", da det let tilpasser sig fra 16 til otte til fire kolonner, og Golden Grid System har også et lille browseroverlay, der udsætter risten på dine sider til test.

07. Foldy960

De talentfulde herrer hos Paravel, Inc. har frigivet det modificerede 960.gs-gitter, som de bruger som grundlag for deres lydhøre projekter.

08. SimpleGrid

SimpleGrid af Conor Muirhead blev bygget med lydhørhed bagt ind, så det er nemt at komme i gang med dit responsive webstedsprojekt.

09. CSS-gitteret på 1140 px

Et andet godt responsivt gittersystem er 1140px CSS Grid af Melbourne-designer Andy Taylor, som går fra en bred desktopopløsning ned til mobil.

10. Kolonnesystem CSS

Columnal grid-systemet, oprettet af Pulp + Pixels aka creative director Nick Gorsline, er baseret på 1140px-gittersystemet, men med nogle ekstra godbidder såsom et designsæt med skitseark og wireframing-skabeloner samt CSS-fejlfindingsstile.

11. Semantisk netsystem

Forbehandlede CSS-udvidelser som Sass og LESS bliver mere og mere populære, og Tyler Tates semantiske netsystem bruger dem til maksimal effekt i dette netsystem, der hævder at bruge ingen unødvendige klasser eller elementer. Læs mere på coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Ligesom det semantiske netsystem oprettede Oddbirds SUSY et netsystem, der ikke bruger nogen ekstra markering eller specielle klasser, men SUSY er kun rettet mod brugere af Sass (og dets udvidelse, Compass).

13. Gridpak

Gridpak af Erskine Design er en af ​​de nyeste responsive netgeneratorer rundt omkring. Det giver dig mulighed for at indstille dine kolonner og tagrender til et antal breakpoints og derefter udgive CSS-, JavaScript- og PNG-filer, så hele dit team arbejder fra samme startpunkt.

14. Gridsæt

Der er stadig et lille mysterium over Gridset, da det på det tidspunkt, jeg skriver dette, faktisk ikke er frigivet endnu. Men værktøjet fra Mark Boulton Design lover skræddersyede, ikke-receptpligtige netsystemer og en måde at gemme og administrere dine net på nettet.

15. Et bedre Photoshop-gitter til RWD

Elliot Jay Stocks foreslår at opgive den gamle 960px de facto gitterstandard og arbejde fra en 1000px base i stedet, hvilket gør alle procentvise beregninger lettere at arbejde med. Hvis du er enig, har han lavet en PSD, som du kan begynde at arbejde med.

16. Flydende gitre

Hvis dit design er højt specialiseret, og du har brug for at oprette dit eget brugerdefinerede gitter, kan du gøre det med .net Awards strålende nytilkomne nominerede Harry Roberts 'flydende gitterberegner.

17. Responsiv lommeregner

En anden pixel-til-procent-regnemaskine, men denne af Stu Robson går et skridt videre end andre ved at generere alle CSS-reglerne for dig, hvilket betyder at du bare kan kopiere og indsætte dem i dine stilarter.

Værktøjer til lydhør billeder (og tekst)

En anden vigtig komponent i responsivt webdesign er flydende billeder. Mens teknikken til at opnå flydende billeder er ligetil, synes optimering af ydeevne og sidebelastning for forskellige enheder at være en af ​​de største udfordringer inden for responsivt webdesign. Her er nogle ressourcer til at nærme sig problemet.

18. Responsive billeder

Filament Group udtænkte en måde at sende et billede i passende størrelse baseret på skærmopløsning. Dette eksperiment med mobil-første billeder, der skaleres responsivt og ansvarligt, kræver at have to billeder i forskellige størrelser til reference.

19. Adaptive billeder

Matt Wilcox hentede inspiration fra Responsive Images-værktøjet til at oprette Adaptive Images, der bruger PHP og lidt JavaScript til at servere passende billeder til brugerens enhed uden at kræve ekstra markering.

20. Sencha.io Src (tidligere Tinysrc)

Sencha leverer en skytjeneste, der sender optimerede versioner af hostede billeder til størrelsen på den enhed, der anmoder om dem. For at finde ud af, hvordan du bruger det, se docs.sencha.com/io/src/.

21. FitText

Endnu en perle fra Paravel, Inc er FitText.js, et jQuery-plug-in for at gøre overskriftens webtype lydhør over for designet og enheden. For detaljer se trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Brian McAllister's slabText er inspireret af FitText og SlabType-algoritmen og er et jQuery-plug-in, der fremstiller dristige tekstblokke, der ændrer størrelsen på respons, mens de holder sig til en defineret bredde.

Værktøjer til medieforespørgsler

Nu hvor du har en idé om, hvordan dit layout vil ændre sig for forskellige enheder, et flydende gitter og flydende billeder, har du brug for medieforespørgsler for at skifte sidens elementer til en tilstand af lydhørhed.

23. Respond.js

Det eneste problem med responsivt design er, at browsere, der ikke kan læse medieforespørgsler, bliver efterladt. Dette er muligvis ikke et problem med din målgruppe, men det er stadig en god praksis at imødekomme brugere i ældre browsere. Respond.js af Scott Jehl understøtter kun egenskaber min-bredde og maks-bredde.

For mere se filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js af Wouter van der Graaf gør det muligt for ældre versioner af IE og andre browsere effektivt at teste og anvende alle slags medieforespørgsler.

25. Adapt.js

Nathan Smith, forfatter af det originale 960.gs-gittersystem, har skrevet Adapt.js, et script, der registrerer browserdimensioner og kun serverer de krævede stilark - som medieforespørgsler, men uden medieforespørgsler, hvilket betyder, at det også fungerer i ældre browsere.

26. Kategorizr

Dette er enhedsdetektering, der nærmes sig fra den modsatte vinkel - Brett Jankords Categorizr-script antager, at enheder er mobile, medmindre andet detekteres som desktop eller tablet, så du kan levere ressourcer til browsere på en sympatisk måde.

Responsivt design (og mobil) kedelplader

I ånden af ​​en effektiv responsiv arbejdsgang letter kedelplader processen med at flytte design til browseren hurtigere end senere. De fleste af disse kedelplader kombinerer det bedste af ovennævnte værktøjer i en pæn pakke: et fleksibelt gitter forbedret med scripts, mens de første implementerer de mobile filosofier, der er indholdsmæssige.

27. 320 og op

Andy Clarke's 320 and Up er en mobil-første kogeplade, der integreres med mange andre moderne webdesignværktøjer, såsom LESS og Bootstrap (se # 30). Det er en let og smidig måde at få et websted i gang hurtigt. Tjek også vores interview med Andy, hvor han fortæller os mere om den nye version.

28. Gitterfri

Gridless er en HTML5- og CSS3-kedelplade, der kan tjene som grundlag for dine lydhøre design med fokus på typografi og indbygget kompatibilitet mellem browsere.

29. Skelet

I modsætning til de to foregående kogeplader, hvis udgangspunkt er med den mindste opløsning, er Skeleton-udviklingssættet, oprettet af Dave Gamache, baseret på 960.gs-gittersystemet og skaleres ned til mobil. Skeleton kan også prale af en fantastisk stilramme for udviklere at bygge stilarter oven på.

30. Bootstrap

Bootstrap er bygget af Twitter og nu med open source, og er en ramme og en række komponenter til hurtigt at få et websted online, og fra og med version to fungerer alle dets kernedele responsivt.

Plugins, shims og polyfills

Selvom moderne browsere og software har tendens til at være klar til lydhør, er vi undertiden nødt til at bruge ekstra værktøjer til at give en ensartet oplevelse.

31. Responsivt plugin

Marios Lublinski har skrevet et WordPress-plug-in, der lover at gøre ethvert nuværende WP-tema til et lydhørt. Hvordan dette fungerer ved jeg endnu ikke, da det ikke er blevet frigivet i skrivende stund, men hvis det lever op til sit løfte, bør det være meget nyttigt.

32. vælte

Håndtering af indholdsoverløb fungerer godt på desktopbrowsere, men ældre mobilbrowsere håndterer det inkonsekvent. Overthrow-polyfyldningen fra den flittige Filament Group tilføjer konsekvent yndefuld nedbrydning på tværs af enheder og sørger for, at alle mobilbrugere får den bedst mulige oplevelse.

33. Medietabel

Marco Pegoraros jQuery-plugin, MediaTable, arbejder med Respond.js for at hjælpe dig med at komme rundt om problemet med, hvordan du viser store datatabeller på enheder med lille skærm, hvilket gør responsive kolonner og tilføjer en vis / skjul-skift, hvor det er passende.

"Test, test: 1-2-3 ..."

Et andet aspekt af den responsive arbejdsgang er at kende dine målenheder og opløsninger og derefter teste dem.

34. resizeMyBrowser

resizeMyBrowser af frontend-udvikler Chen Luo har flere forudindstillede dimensioner til dit browservindue til at teste responsivt designede sider eller oprette en ny forudindstilling, hvis du ikke kan finde den, der passer til dine behov.

35. responsivepx

Ligesom resizeMyBrowser, responsivepx, bygget af Remy Sharp, indlæser dine sider i et vindue, hvor du kan teste bredden og højden for at bestemme, hvor godt dine medieforespørgsler skyder, og hvor breakpoints er i designet.

36. Test af responsivt design

Et utroligt nyttigt værktøj af designeren og udvikleren Matt Kersley: Indtast blot URL'en på dit responsive websted i Responsive Design Testing for at se, hvordan det gengives i forskellige browserstørrelser.

37. Responsinatoren

Indtast en URL, og Responsinator viser dig, hvordan den vises i mange almindelige enhedsstørrelser - med hensynsløs roboteffektivitet. Tama Pugsley og Andy Hovey er ansvarlige for denne.

38. Responsive.is

En anden enhedsemulator på siden, Responsive.is, giver dig mulighed for at skrive en URL og derefter ændre størrelsen på den mellem en række forskellige forudindstillinger. Det er lavet af holdet bag den kommende Typecast-app.

39. Screenqueri.es

Endnu et browserdimensionsværktøj, men Screenqueri.es fra Mandar Shirke adskiller sig ved at have et omfattende sæt af mobil- og tablet-forudindstillinger samt et gitter og linealer, der gør finmåling så meget lettere.

40. Aptus

En anden app til test af websteder i flere definerede størrelser, men Aptus er Mac-native. Det er tilgængeligt via Mac App Store, og det at være hjemmehørende bringer ekstra funktioner som nemme skærmbilleder og offline support.

41. Brochure om responsivt design

Victor Coulon har lavet en meget enkel, men effektiv bogmærke; når du aktiverer den på en hvilken som helst webside, tilføjer den en værktøjslinje, der lader dig skifte mellem fire almindelige skærmdimensioner, så du kan se, hvordan dit websted gengives i forskellige størrelser.

42. Bogmærke med responsivt design, test

Denne bogmærke af Benjamin Keen giver mulighed for mere tilpasning ved at lade dig definere dine egne enhedsstørrelser og så mange eller få som du vil. Når den er aktiveret, vises stedet på alle de valgte størrelser side om side for nem sammenligning.

43. Screenfly

Screenfly fra QuirkTools giver dig mulighed for at teste et websted med forskellige opløsninger på desktop, tablet, mobil og tv. Desktoptesten er i øjeblikket begrænset til Safari, mens tablet og mobil har flere muligheder for enheder og browsere. Tv er begrænset til Opera.

44. Media Query Indicator

Johan Brook tilbyder en ren CSS-måde at teste, hvornår en medieforespørgsel er udløst af browseren. Media Query Indicator er et andet godt værktøj til test og leg med designbrudpunkter.

45. Shim

Et af de værktøjer, der bruges i redesignet af Boston Globe, plakatdrengen til RWD-bevægelsen, Shim er en Node.js-app, der kører en webside på tværs af flere enheder på det samme Wifi-netværk, hvilket gør testning på tværs af enheder meget lettere. .

46. ​​Drive-In

Hvis du ikke har en Node.js-server til at køre Shim, har Scott Jehl lavet en enklere version kaldet Drive-In, der fungerer på samme måde, men bruger PHP, Apache og en .htaccess-fil.

47. Adobe Shadow

Adobe fortsætter deres skub i webteknologier med dette fjernfejlfindingsværktøj. Installer Shadow og Chrome-udvidelsen på Mac eller Windows plus Shadow-klienten på Android eller iPhone, og du kan dele websider mellem mange forskellige enheder.

48. Opera Mobile Emulator + Fjernbetjening

En nemmere måde at debugge mobilsider på er at installere Opera og Opera Mobile Emulator og forbinde de to med deres Remote Debug-mulighed. Enkel og hurtig at opsætte og har den ekstra fordel ved at teste på mere end WebKit.

Yderligere inspiration

Vil du få en idé om, hvordan andre gør deres design lydhør?

49. MediaQueri.es

Hvis du ikke allerede har set det, har webstedet Mediaqueri.es et stadigt voksende antal sider, der er gået over til den responsive side.

50. @RWD

Ethan Marcotte kører en Twitter-konto, der bringer de seneste nyheder, værktøjer og showcases fra RWD's verden.

Denise Jacobs elsker at være taler, forfatter, webdesigner og kreativitetsevangelist, mens Peter Gasston er forfatter til The Book of CSS3 og en veteran webudvikler, der blogger på Broken Links.

Kan du lide dette? Læs disse!

  • Pro-tip til opbygning af et mobilwebsted
  • Top CSS og JavaScript teknikker
  • Sådan bygger du en app
  • De bedste gratis webskrifttyper til designere
  • Oplev hvad der er næste for Augmented Reality
  • Download gratis teksturer: høj opløsning og klar til brug nu
Tidligere Artikel.

De bedste OL-annoncer i 2016
Næste Artikel

Minimalistisk webstedsdesign: 12 smukke eksempler
Anbefalede
9 af de bedste monogramlogoer, der nogensinde er lavet
Opdage

9 af de bedste monogramlogoer, der nogensinde er lavet

Kan 2024
De bed te monogramlogoer er å effektive, at du må ke ikke engang bevid t har bemærket, at de overhovedet er monogrammer. Det traditionelle monogram - normalt nogen initialer vævet ...
De bedste videoredigeringsapps i 2021
Opdage

De bedste videoredigeringsapps i 2021

Kan 2024
I di e dage er de bed te videoredigering app ikke kun rettet mod fagfolk, der arbejder i tv- og filmindu trien. De er og å et godt valg til forretning brug, YouTube- kabere, påvirkere af oci...
Sådan oprettes visuelt sprog gennem typografi
Opdage

Sådan oprettes visuelt sprog gennem typografi

Kan 2024
Form er lig med funktion, og det ændrer ig ikke bare fordi vi har at gøre med tek t.Typografi er æ tetikken bag det krevne ord, kun ten at få din tek t til at tjene et formål,...