50 fantastische tools voor responsive webdesign

Schrijver: Monica Porter
Datum Van Creatie: 17 Maart 2021
Updatedatum: 17 Kunnen 2024
Anonim
The World’s Largest Battery Isn’t What You Think
Video: The World’s Largest Battery Isn’t What You Think

Inhoud

Zoals geïntroduceerd / bedacht door Ethan Marcotte in zowel zijn artikel "Responsive Web Design" als zijn best verkochte boek, heeft men drie elementen nodig om een ​​site responsive te maken:

  1. Een flexibel / vloeiend rooster
  2. Responsieve afbeeldingen
  3. Mediaquery's

Er zijn tal van andere geweldige artikelen die motieven, concepten en technieken met betrekking tot responsive webdesign behandelen, dus we zullen de focus van dit artikel houden op enkele van de beste tools die u zullen helpen om verantwoord te reageren.

Hulpmiddelen om te beginnen

Voordat u begint met het bouwen van uw site, is het het beste om te schetsen hoe de elementen op de pagina zich zullen aanpassen aan de verschillende browsergroottes van de verschillende apparaten waarop ze zullen worden bekeken, en om de verbroken verbinding te vermijden die vaak voortkomt uit het primair nadenken over het desktopontwerp en de rest van de responsieve iteraties als een bijzaak (zie vooral de opmerking van Stephanie (Sullivan) Rewis).

01. Responsive Web Design Sketch Sheets

Deze set responsieve schetsbladen, door Jeremy P Alford, is een goed startpunt om in kaart te brengen hoe de paginasecties in verschillende resoluties zullen verschuiven.


02. Responsive Design Sketchbook

Als je al je schetsen liever op één plek bewaart, kun je dit met draad gebonden boek met 50 responsieve schetsbladen van het bedrijf App Sketchbook overwegen.

03. Responsieve wireframes

Een van de moeilijkheden bij het bouwen van responsieve websites is het gebruik van wireframes om te laten zien hoe het responsieve ontwerp zal werken. James Mellers van Adobe heeft deze experimentele tool samengesteld om te laten zien hoe responsive wireframing van complexe lay-outs kan werken.


04. Opmaakpatronen voor meerdere apparaten

Bij het plannen van een responsief ontwerp is het handig om te zien hoe andere mensen het eerder hebben benaderd, dus Luke Wroblewski's Multi-Device Layout Patterns, met populaire patronen met links naar voorbeelden, is een geweldige plek om te beginnen.

05. Stijltegels

De Style Tiles van Samanatha Warren stellen een nieuwe techniek voor voor design in het responsieve tijdperk; in plaats van mockups met een vaste breedte, zijn dit als stalen of moodboards die de algemene ontwerpaanpak laten zien zonder in detail te treden.

Hulpmiddelen voor een flexibel / vloeibaar rooster

Zoals eerder vermeld, is de eerste component die nodig is voor responsief ontwerp een flexibel / vloeibaar raster.De volgende zijn al kant-en-klaar: u hoeft ze alleen maar te downloaden en u bent snel op weg naar een meer responsieve site.


06. Gouden rastersysteem

Joni Korpi, die ook Less Framework heeft ontwikkeld, heeft onlangs deze nieuwe versie van een betrouwbaar rastersysteem voor responsive design uitgebracht. Het Golden Grid-systeem wordt als "vouwen" beschouwd, aangezien het gemakkelijk kan worden aangepast van 16, tot 8, tot 4 kolommen, en het beschikt ook over een kleine browseroverlay die het raster op uw pagina's blootlegt om te testen.

07. Foldy960

De getalenteerde heren van Paravel, Inc. hebben het gemodificeerde 960.gs-raster uitgebracht dat ze gebruiken als basis voor hun responsieve projecten.

08. SimpleGrid

SimpleGrid, door Conor Muirhead, is gebouwd met een ingebakken reactievermogen, dus het is gemakkelijk om aan de slag te gaan met uw responsieve websiteproject.

09. Het 1140px CSS-raster

Een ander geweldig responsief rastersysteem is het 1140px CSS Grid van de ontwerper Andy Taylor uit Melbourne, dat van een brede desktopresolutie naar mobiel gaat.

10. Kolomvormig CSS-rastersysteem

Het Columnal-rastersysteem, gemaakt door Pulp + Pixels alias creatief directeur Nick Gorsline, is gebaseerd op het 1140px rastersysteem, maar met wat extra goodies zoals een ontwerpkit met schetsbladen en wireframing-sjablonen, evenals CSS-foutopsporingsstijlen.

11. Semantisch rastersysteem

Vooraf verwerkte CSS-extensies zoals Sass en LESS worden steeds populairder en het Semantic-rastersysteem van Tyler Tate gebruikt ze maximaal in dit rastersysteem dat beweert geen onnodige klassen of elementen te gebruiken. Lees meer op coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Net als het semantische rastersysteem creëerde Oddbird's SUSY een rastersysteem dat geen extra markup of speciale klassen gebruikt, maar SUSY is alleen gericht op gebruikers van Sass (en de extensie, Compass).

13. Gridpak

Gridpak, door Erskine Design, is een van de nieuwste responsieve netgeneratoren die er zijn. Het stelt je in staat om je kolommen en goten op een aantal breekpunten in te stellen en vervolgens CSS-, JavaScript- en PNG-bestanden uit te voeren, zodat je hele team vanuit hetzelfde startpunt werkt.

14. Roosterset

Er hangt nog steeds een vleugje mysterie over Gridset, want op het moment dat ik dit schrijf, is het nog niet echt vrijgegeven. Maar de tool van Mark Boulton Design belooft op maat gemaakte, niet-prescriptieve rastersystemen en een manier om uw rasters online op te slaan en te beheren.

15. Een beter Photoshop-raster voor RWD

Elliot Jay Stocks stelt voor om af te zien van de oude 960px de facto grid-standaard en in plaats daarvan te werken vanuit een 1000px-basis, waardoor alle percentageberekeningen gemakkelijker zijn om mee te werken. Als je het ermee eens bent, heeft hij een PSD gemaakt waarmee je aan de slag kunt.

16. Vloeistofroosters

Als uw ontwerp zeer gespecialiseerd is en u uw eigen aangepaste raster moet maken, kunt u dat doen met de .net Awards briljante nieuwkomer-genomineerde Harry Roberts ‘fluid grid calculator’.

17. Responsieve rekenmachine

Nog een pixel naar percentagescalculator, maar deze van Stu Robson gaat een stap verder dan andere door alle CSS-regels voor je te genereren, wat betekent dat je ze gewoon kunt kopiëren en in je stylesheets kunt plakken.

Tools voor responsieve afbeeldingen (en tekst)

Een ander cruciaal onderdeel van responsive webdesign zijn vloeiende afbeeldingen. Hoewel de techniek voor het verkrijgen van vloeiende afbeeldingen eenvoudig is, lijkt het optimaliseren van de prestaties en het laden van pagina's voor verschillende apparaten een van de grootste uitdagingen bij responsive webdesign. Hier zijn enkele bronnen om het probleem te benaderen.

18. Responsieve afbeeldingen

De Filament Group bedacht een manier om een ​​afbeelding van het juiste formaat te verzenden op basis van de schermresolutie. Dit experiment met afbeeldingen die eerst mobiel zijn en die responsief en verantwoord schalen, vraagt ​​om twee afbeeldingen van verschillende formaten om naar te verwijzen.

19. Adaptieve afbeeldingen

Matt Wilcox haalde inspiratie uit de Responsive Images-tool om Adaptive Images te maken, die PHP en een beetje JavaScript gebruikt om de juiste afbeeldingen op het apparaat van de gebruiker te zetten zonder dat er extra opmaak nodig is.

20. Sencha.io Src (voorheen Tinysrc)

Sencha biedt een cloudservice die geoptimaliseerde versies van gehoste afbeeldingen verzendt voor de grootte van het apparaat dat ze opvraagt. Zie docs.sencha.com/io/src/ voor meer informatie over het gebruik ervan.

21. FitText

Nog een ander juweeltje van Paravel, Inc is FitText.js, een jQuery-plug-in om het webtype van de kop te laten reageren op het ontwerp en het apparaat. Zie trentwalton.com/2011/05/10/fit-to-scale/ voor meer informatie.

22. slabText

Geïnspireerd door FitText en het SlabType-algoritme, is Brian McAllister's slabText een jQuery-plug-in die vetgedrukte tekstblokken maakt die responsief worden aangepast met behoud van een gedefinieerde breedte.

Tools voor mediaquery's

Nu u een idee heeft van hoe uw lay-out zal veranderen voor verschillende apparaten, een vloeiend raster en vloeiende afbeeldingen, heeft u mediaquery's nodig om de pagina-elementen in een staat van responsiviteit te brengen.

23. Reageren.js

Het enige probleem met responsief ontwerp is dat browsers die geen mediaquery's kunnen lezen, achterblijven. Dit is misschien geen probleem met uw doelgroep, maar het is nog steeds een goede gewoonte om gebruikers met oudere browsers tegemoet te komen. Respond.js, door Scott Jehl, ondersteunt alleen de eigenschappen min-breedte en max-breedte.

Zie filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ voor meer informatie.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, door Wouter van der Graaf, stelt oudere versies van IE en andere browsers in staat om allerlei soorten mediaquery's effectief te testen en toe te passen.

25. Adapt.js

Nathan Smith, auteur van het originele 960.gs-rastersysteem, heeft Adapt.js geschreven, een script dat browserafmetingen detecteert en alleen de vereiste stylesheets weergeeft - zoals mediaquery's maar zonder mediaquery's, wat betekent dat het ook in oudere browsers werkt.

26. Categorizr

Dit is apparaatdetectie benaderd vanuit de tegenovergestelde hoek - het Categorizr-script van Brett Jankord gaat ervan uit dat apparaten mobiel zijn, tenzij anders gedetecteerd als desktop of tablet, waardoor je op een sympathieke manier bronnen aan browsers kunt leveren.

Responsive design (en mobiele) boilerplates

In de geest van een efficiënte, responsieve workflow vergemakkelijken boilerplates het proces om ontwerpen eerder dan later naar de browser te verplaatsen. De meeste van deze boilerplates combineren het beste van de hierboven genoemde tools in één handig pakket: een flexibel raster uitgebreid met scripts, terwijl de mobile first, content-out filosofieën worden geïmplementeerd.

27. 320 en hoger

De 320 en hoger van Andy Clarke is een boilerplate voor mobiel, die kan worden geïntegreerd met veel andere moderne webontwerptools, zoals LESS en Bootstrap (zie # 30). Het is een lichte en flexibele manier om een ​​site snel aan de praat te krijgen. Bekijk ook ons ​​interview met Andy, waarin hij ons meer vertelt over de nieuwe versie.

28. Roosterloos

Gridless is een HTML5- en CSS3-boilerplate die kan dienen als basis voor uw responsieve ontwerpen, met de nadruk op typografie en ingebouwde compatibiliteit tussen browsers.

29. Skelet

In tegenstelling tot de vorige twee standaardplaten, waarvan het startpunt is met de kleinste resolutie, is de Skeleton-ontwikkelingskit, gemaakt door Dave Gamache, gebaseerd op het 960.gs-rastersysteem en kan het worden geschaald naar mobiel. Skeleton heeft ook een geweldig stijlraamwerk voor ontwikkelaars om er stijlen bovenop te bouwen.

30. Bootstrap

Bootstrap, gebouwd door Twitter en nu open source, is een raamwerk en een reeks componenten om snel een site online te krijgen, en vanaf versie twee werken alle kernonderdelen responsief.

Plug-ins, shims en polyfills

Hoewel moderne browsers en software de neiging hebben om responsief te zijn, moeten we soms extra tools gebruiken om een ​​consistente ervaring te bieden.

31. Responsieve plug-in

Marios Lublinski heeft een WordPress-plug-in geschreven die belooft elk huidig ​​WP-thema om te zetten in een responsief thema. Hoe dit werkt weet ik nog niet, aangezien het op het moment van schrijven nog niet is vrijgegeven, maar als het zijn belofte nakomt, zou het erg nuttig moeten zijn.

32. Omverwerping

Het afhandelen van inhoudoverloop werkt goed op desktopbrowsers, maar oudere mobiele browsers verwerken het inconsistent. De Overthrow-polyfill van de ijverige Filament Group voegt een consistente, sierlijke degradatie toe aan alle apparaten, zodat alle mobiele gebruikers de best mogelijke ervaring krijgen.

33. MediaTable

De jQuery-plug-in van Marco Pegoraro, MediaTable, werkt samen met Respond.js om u te helpen het probleem te omzeilen van het weergeven van grote gegevenstabellen op apparaten met een klein scherm, het maken van responsieve kolommen en het toevoegen van een toon / verberg-schakelaar waar nodig.

"Testen, testen: 1-2-3 ..."

Een ander aspect van de responsieve workflow is om uw doelapparaten en resoluties te kennen en deze vervolgens te testen.

34. resizeMyBrowser

resizeMyBrowser, door frontend-ontwikkelaar Chen Luo, heeft verschillende vooraf ingestelde afmetingen voor uw browservenster om responsief ontworpen pagina's te testen of om een ​​nieuwe voorinstelling te maken als u de voorinstelling niet kunt vinden die aan uw behoeften voldoet.

35. responsivepx

Net zoals resizeMyBrowser, laadt responsivepx, gebouwd door Remy Sharp, uw pagina's in een venster waarin u de breedte en hoogte kunt testen om te bepalen hoe goed uw mediaquery's worden geactiveerd en waar de breekpunten in het ontwerp zijn.

36. Responsieve ontwerptesten

Een ongelooflijk handige tool van ontwerper en ontwikkelaar Matt Kersley: voer gewoon de URL van uw responsieve site in Responsive Design Testing in om te zien hoe deze wordt weergegeven in verschillende browserformaten.

37. De verantwoordelijke

Voer een URL in en The Responsinator zal u laten zien hoe deze wordt weergegeven in veel gangbare apparaatformaten - met meedogenloze robotachtige efficiëntie. Tama Pugsley en Andy Hovey zijn verantwoordelijk voor deze.

38. Responsive.is

Een andere in-page apparaatemulator, Responsive.is, laat je een URL typen en vervolgens snel de grootte aanpassen tussen een reeks verschillende voorinstellingen. Het is gemaakt door het team achter de aanstaande Typecast-app.

39. Screenqueri.es

Nog een hulpmiddel voor browserafmetingen, maar Screenqueri.es van Mandar Shirke onderscheidt zich door een uitgebreide set voorinstellingen voor mobiele apparaten en tablets, evenals een raster en linialen die fijne metingen zo veel gemakkelijker maken.

40. Aptus

Een andere app voor het testen van sites met meerdere gedefinieerde formaten, maar Aptus is Mac-native. Het is verkrijgbaar via de Mac App Store, en het feit dat het native is, brengt extra functies met zich mee, zoals eenvoudige schermafbeeldingen en offline ondersteuning.

41. Bookmarklet voor responsief ontwerp

Victor Coulon heeft een heel eenvoudige maar effectieve bookmarklet gemaakt; wanneer u het op een webpagina activeert, wordt er een werkbalk toegevoegd waarmee u kunt schakelen tussen vier algemene schermafmetingen, zodat u kunt zien hoe uw site in verschillende formaten wordt weergegeven.

42. Bookmarklet voor een responsieve ontwerptest

Deze bookmarklet van Benjamin Keen zorgt voor meer maatwerk doordat u uw eigen apparaatgroottes kunt definiëren, en zo veel of weinig als u wilt. Indien geactiveerd, toont het de site in alle geselecteerde formaten, naast elkaar voor eenvoudige vergelijking.

43. Screenfly

Met Screenfly van QuirkTools kun je een site testen op verschillende resoluties op desktop, tablet, mobiel en televisie. De desktoptests zijn momenteel beperkt tot Safari, terwijl de tablet en mobiel meer opties hebben voor apparaten en browsers. Televisie is beperkt tot Opera.

44. Indicator voor mediaquery

Johan Brook biedt een pure CSS-manier om te testen wanneer een mediaquery door de browser is geactiveerd. Media Query Indicator is een ander goed hulpmiddel voor het testen van en spelen met breekpunten van het ontwerp.

45. Shim

Een van de tools die wordt gebruikt bij het herontwerp van de Boston Globe, de posterboy van de RWD-beweging, Shim is een Node.js-app die een webpagina op meerdere apparaten op hetzelfde wifi-netwerk uitvoert, waardoor testen op verschillende apparaten veel eenvoudiger wordt .

46. ​​Inrijden

Als je geen Node.js-server hebt om Shim uit te voeren, heeft Scott Jehl een eenvoudigere versie gemaakt, Drive-In genaamd, die in principe op dezelfde manier werkt, maar met PHP, Apache en een .htaccess-bestand.

47. Adobe Shadow

Adobe zet haar push in webtechnologieën voort met deze tool voor foutopsporing op afstand. Installeer Shadow en de Chrome-extensie op Mac of Windows, plus de Shadow-client op Android of iPhone, en u kunt webpagina's delen tussen veel verschillende apparaten.

48. Opera Mobile Emulator + Remote Debug

Een eenvoudigere manier om mobiele pagina's te debuggen, is door Opera en de Opera Mobile Emulator te installeren en de twee te verbinden met hun Remote Debug-optie. Eenvoudig en snel in te stellen, en heeft het extra voordeel dat het op meer dan WebKit kan worden getest.

Verdere inspiratie

Wilt u een idee krijgen van hoe anderen hun ontwerpen responsive maken?

49. MediaQueri.es

Als je het nog niet hebt gezien, heeft de site Mediaqueri.es een steeds groeiend aantal sites die zijn overgestapt naar de responsieve kant.

50. @RWD

Ethan Marcotte heeft een Twitter-account met het laatste nieuws, tools en showcases uit de wereld van RWD.

Denise Jacobs is dol op het zijn van een spreker, auteur, trainer van webdesign en evangelist op het gebied van creativiteit, terwijl Peter Gasston de auteur is van The Book of CSS3 en een ervaren webontwikkelaar die blogt op Broken Links.

Vond dit leuk? Lees deze!

  • Professionele tips voor het bouwen van een mobiele website
  • Top CSS- en JavaScript-technieken
  • Hoe een app te bouwen
  • De beste gratis weblettertypen voor ontwerpers
  • Ontdek wat de toekomst biedt voor Augmented Reality
  • Download gratis texturen: hoge resolutie en nu klaar voor gebruik
Vorig Artikel

Excel-werkmap gemakkelijk vergrendelen
Volgend Artikel

4 tips om een ​​dynamisch karakter te creëren
Interessant Vandaag
Hoe u het beheerderswachtwoord in Windows 8 / 8.1 kunt resetten met CMD
Lees Verder

Hoe u het beheerderswachtwoord in Windows 8 / 8.1 kunt resetten met CMD

Kunnen 2024
U moet overweldigd zijn al u het aanmeldingwachtwoord van Window 8 / 8.1 vergeet. De enige toegang wordt geweigerd en u heeft ook niet van tevoren een wachtwoordherteldikette voorbereid. Rutig aan, no...
De beste Windows 8-hulpprogramma voor wachtwoordherstel
Lees Verder

De beste Windows 8-hulpprogramma voor wachtwoordherstel

Kunnen 2024
"Hallo! Ik heb mijn computer twee weken gehad en ik heb het wachtwoord van de laatte laptop die ik had, gewijzigd en ik kan het me voor mijn leven niet herinneren. I er een manier om het terug te...
Top 6 methoden voor kan geen verbinding maken met deze netwerkfout
Lees Verder

Top 6 methoden voor kan geen verbinding maken met deze netwerkfout

Kunnen 2024
Bijna elke Window 10-gebruiker wordt geconfronteerd met het kan geen verbinding maken met dit netwerk fout af en toe. Toegang tot internet peelt een fundamentele rol in het dagelijke leven van iederee...