50 bruikbare responsieve webdesign-tools voor ontwerpers
De afgelopen paar dagen hebben we u enkele van de beste WordPress- en Joomla-responsieve thema's laten zien die u kunt downloaden en gebruiken op uw site. Vandaag gaan we je geven het gereedschap. We bestaan uit frameworks, services en downloadbare scripts en denken dat ze een grote hulp zullen zijn als het gaat om responsieve webontwikkeling.
Om het gemakkelijker te maken om de volledige lijst met hulpprogramma's te doorlopen, hebben we deze in de volgende secties onderverdeeld:
- Grid & Frameworks
- Sketch Sheets & Wireframes
- JavaScript en jQuery-plug-ins
- Testen & Voorvertonen
- sliders
- anderen
Grid & Frameworks
[Terug naar boven]
Columnal
Columnal is een Pulp + Pixels-project, dat is geleend van cssgrid.net, terwijl enkele code-inspiraties zijn overgenomen van 960.gs. Columnal helpt u veel in uw responsieve webontwerp, door uw rasters flexibel te maken om dynamisch te veranderen wanneer het formaat van het browservenster wordt gewijzigd.
Skelet
Skeleton is een eenvoudig en krachtig CSS-framework dat vooral door ontwikkelaars en ontwerpers geliefd is vanwege de eenvoud en efficiëntie. Er is hier geen zwaar gebruik met Javascript, alleen goede en pure CSS met schone documentatie.
LessFramework 4
Less Framework is min of meer een raamwerk in naam van de maker. Het is een adaptief CSS-rastersysteem op basis van inline CSS-mediaquery's, waardoor de ontwikkeling van responsieve websites veel eenvoudiger wordt.
Semantic Grid System
Semantic Grid System wordt gebruikt om responsieve grid-indelingen te ontwerpen. Het maakt gebruik van vooraf verwerkte CSS-uitbreidingen zoals LESS, SCSS of Stylus om maximale efficiëntie te leveren. U kunt kolom- en gootbreedten selecteren, het aantal kolommen kiezen en schakelen tussen pixels en percentages.
Golden Grid-systeem
Golden Grid System is een fluid-grid-systeem dat dient als startpunt voor uw responsieve webdesign. Hiermee kan de website goed uitziende pagina's van 240 tot 2560 px weergeven.
320 en hoger
320 en Up is een CSS-media-vragenlijst, die dient als startsjabloon voor uw responsieve ontwerp. Het volgt een volledig omgekeerde benadering dan de verschillende andere beschikbare verwarmingsplaten.
Inuit.css
Inuit.css is een CSS-framework, dat uiterst gemakkelijk te gebruiken is, zelfs voor beginners. Het heeft een minimalistische benadering, dus je moet alleen dingen doen die nodig zijn, maar indien nodig kan het ook worden uitgebreid met een handvol plug-ins beschikbaar.
gridless
Gridless is een standaard voor het creëren van responsieve en cross-browser websites met prachtige typografie. Deze tool richt zich op de progressieve ontwikkeling van een project en dient als startpunt voor elk ontwerp.
1140 CSS-raster
1140 CSS Grid is een geweldig CSS rastersysteem ontworpen door Melbourne ontwerper Andy Taylor, waarmee uw ontwerp perfect past op 1140px voor grote monitoren en uw vloeiende lay-out zich naadloos aanpast aan andere kleinere resoluties met heel weinig extra werk.
1KBCSSGrid
1KB CSS Grid ontworpen door Tyler Tate, is een eenvoudige en lichtgewicht CSS Grid-generator. Hiermee kunt u het aantal kolommen, de kolombreedte en de breedte van de goot instellen en kunt u een downloadbare CSS voor uw websiterooster krijgen.
bootstrap
Bootstrap, gemaakt en onderhouden door Mark Otto en Jacob Thornton op Twitter, is een uitstekende set elementen van de gebruikersinterface, lay-outs en JavaScript-tools die u gratis kunt downloaden en gebruiken in uw webontwerpprojecten.
Fluid Grid Calculator
Met deze eenvoudige tool kunt u snel de CSS van uw websiteontwerp voor het vloeistofraster pakken.
Vloeiende roosters
Fluid Grid is een eenvoudig maar nuttig raamwerk voor een flexibel raster, dat responsieve lay-outs creëert op basis van 6, 7, 8, 9, 10, 12 of 16 kolommen.
Flurid
Flurid is een eenvoudig en zeer nuttig cross-browser CSS-rasterwerkschema met maximaal 16 kolommen. En bovendien worden pixels niet in marges verborgen.
Gridset
Gridset is een hulpmiddel voor het maken van rasters van elk type, zoals kolomvormig, asymmetrisch, vast, verhouding, samengestelde, responsieve en meer. Deze tool van Mark Boulton is nog steeds in bèta, maar blijkt veelbelovend te zijn. En heb ik al gezegd, het gebruik ervan is net zo eenvoudig als het insluiten van een link.
Gridpak
Gridpak is een online responsieve netwerkgenerator, waar het aantal kolommen, opvulling en goot kan worden gewijzigd en aangepaste onderbrekingspunten kunnen worden toegevoegd. De CSS wordt gegenereerd door de tool en klaar gemaakt om te downloaden. Het biedt ook PNG-rastersjablonen, die kunnen worden gebruikt voor ontwerpdoeleinden in Photoshop.
SimpleGrid
SimpleGrid, ontwikkeld door Michael Kuhn, is een zeer eenvoudig en eenvoudig CSS-framework voor het maken van oneindige grid-gebaseerde lay-outs. Standaard is SimpleGrid voorbereid voor 4 verschillende reeksen schermformaten.
Susy
Susy van Oddbird is vergelijkbaar met het Semantic Grid System. Het gebruikt geen extra markup of andere speciale klassen, maar is alleen bedoeld voor de gebruikers van Saas en de bijbehorende Compass.
Tiny Fluid Grid
Tiny Fluid Grid is een geweldige web-app, die u kan helpen bij het op een interactieve manier bepalen van het rastersysteem van uw website. U kunt het aantal kolommen, het rugmarge-percentage, de minimale en maximale breedte van de lay-out van uw website instellen en een downloadbare CSS ervoor krijgen.
Variabel rastersysteem
Variable Grid System is ontworpen en ontwikkeld door SprySoft en is gebaseerd op het 960 Grid-systeem. Hiermee kunnen ontwikkelaars en ontwerpers het aangepaste raster genereren en vervolgens het bijbehorende CSS-bestand downloaden op basis van dat raster.
Sketch Sheets & Wireframes
[Terug naar boven]
Responsive Web Design Sketch Sheets
Deze tool is handig bij het in kaart brengen van de plaatsingen van verschillende elementen in de lay-out van uw website op verschillende apparaten. Met behulp van dit apparaat kunt u een idee vormen van waar u de benodigde elementen van een website kunt plaatsen voor verschillende schermformaten en resoluties.
Responsieve wireframes
Responsive Wireframes is een experimenteel hulpmiddel gemaakt door James Mellers van Adobe. Het is gebouwd met alleen HTML en CSS (er zijn geen afbeeldingen of JS gebruikt) die u kunt gebruiken om te visualiseren hoe uw responsieve ontwerp eruit zou zien op de werkelijke browsers van verschillende desktops en mobiele apparaten.
StyleTiles
Style Tiles biedt u een manier om een idee te krijgen van hoe een website eruit zou zien, onafhankelijk van de ingewikkelde stijlen die in het spel komen. Het biedt u de mogelijkheid voor een perfect reagerende ontwerpworkflow en ook voor het integreren van klantfeedbacks.
JavaScript en jQuery-plug-ins
[Terug naar boven]
Adapt.Js
Adapt.js is een Javascript-oplossing en een uitstekend alternatief voor de CSS-mediaquery's. Het gebruik van @media-benadering is een goede gewoonte, maar dit werkt niet voor alle browsers. Nathan Smith, de maker van 960 Grid System, heeft Adapt.js uitgegeven, een zeer lichtgewicht javascript-bibliotheek om dit probleem op te lossen.
Isotoop
Isotoop is een geweldige plug-in voor jQuery, wat erg handig blijkt te zijn bij het ontwerpen van een responsief ontwerp. Het helpt niet alleen om de elementen van een pagina opnieuw in te delen wanneer het formaat van het browservenster wordt gewijzigd of de schermgrootte is kleiner, maar het helpt ook om die elementen te filteren.
Metselwerk
Metselwerk is een uitstekende plug-in voor jQuery, die wordt gebruikt om dynamische en adaptieve lay-outs te maken. Deze plug-in helpt bij het herschikken van de elementen in uw responsieve ontwerp, zodat ze beter kunnen passen in de open plekken op het raster.
Respond.js
Respond.js is een snel en lichtgewicht (3 Kb geminimaliseerd en 1 Kb gzipped) script, waarvan het hoofddoel is om responsief webontwerp mogelijk te maken voor diegene die de CSS3 Media Queries niet ondersteunen, zoals IE-browsers.
TinyNav.js
TinyNav.js is een kleine en lichtgewicht jQuery-plug-in, slechts 362 bytes, die grote navigatielijsten omzet in kleine vervolgkeuzemenu's voor kleinere schermen.
Wookmark jQuery-plug-in
Wookmark is een jQuery-plug-in die de grootte van het browservenster detecteert en de elementen van de pagina automatisch in kolommen rangschikt. Je kunt ook een live voorbeeld bekijken onderaan de pagina zelf.
Testen & Voorvertonen
[Terug naar boven]
ProtoFluid
ProtoFluid is een webgebaseerd hulpprogramma voor prototypen waarmee u de prototypen van uw website in verschillende schermformaten en resoluties kunt testen. Typ gewoon de URL, selecteer het apparaat (of aangepaste dimensies) en druk op lancering. Omdat het een webgebaseerd hulpmiddel is, kunt u hiermee ook andere extensies gebruiken, zoals FireBug.
Responsive.Is
Responsive.Is is gemaakt door TypeCast, een ander browser-emulator-tool, die u kunt gebruiken om uw responsieve ontwerp te testen. Typ gewoon een URL in en deze wijzigt automatisch de grootte ervan, afhankelijk van het apparaat dat u kiest.
Responsivepx.Com
ResponsivePx is een geweldig hulpmiddel om uw responsieve website-ontwerp te testen. Het belangrijkste kenmerk dat het van anderen onderscheidt, is de mogelijkheid om de grootte van de website pixel voor pixel te wijzigen. Met deze geweldige functie kunt u de onderbrekingspunten identificeren en ook testen hoe de CSS-mediaquery's op uw site werken.
Responsive Web Design Testing Tool
Een geweldige testtool, waarmee u uw responsieve website in verschillende schermformaten tegelijkertijd op één scherm kunt bekijken, terwijl u ze zelf ontwerpt of ontwerpt. Ik vind deze tool vooral leuk omdat alle schermresoluties naast elkaar worden weergegeven, waardoor het debuggen eenvoudiger wordt.
ReView.Js
ReView is een dynamisch viewport-systeem, ontwikkeld in pure JavaScript, dat u een fantastische kijkervaring biedt voor uw responsieve webdesign.
Screenfly
Screenfly van QuirkTools is een geweldige tool waarmee je je responsieve website kunt bekijken op verschillende apparaten: Desktop, Tablet, Mobiel en TV. Het heeft ook opties om scrollen in of uit te schakelen of zelfs om het scherm te draaien.
Screenqueri.es
Screenqueri.es is een pixel-perfect responsief ontwerptesttool. Voer gewoon een websiteadres in dat u wilt controleren en deze tool voert de website in verschillende schermformaten weer, afhankelijk van het apparaat. U kunt het formaat pixel voor pixel handmatig aanpassen om de breekpunten te identificeren.
De Responsant
Test uw site op verschillende apparaten, van een iPhone en iPad, tot een Kindle en op Android op de Responsinator. Het toont ook uw site zowel in staande als in liggende modus. Ik vind deze tool veel leuker vanwege de contouren van de apparaten die op de pagina worden weergegeven, wat meer betekenis geeft aan het hele proces.
sliders
[Terug naar boven]
Bosbes
Blueberry is een fantastische open source jQuery-afbeeldingsschuifregelaar, die speciaal is geschreven voor vloeiende of responsieve lay-outs.
Elastislide
Wilt u een carrousel die zich automatisch aanpast aan de schermgrootte wanneer het formaat van het browservenster wordt gewijzigd of wanneer u zich op een kleiner scherm bevindt? Elastislide is de meest geschikte jQuery-plug-in voor uw behoeften.
Responsieve CSS3-schuifregelaar
Dit is een pure responsieve CSS3-schuif die met gemak aan elke schermgrootte en schermresolutie kan worden aangepast. Het leuke van deze schuifregelaar is dat de pijlen in de doos terechtkomen wanneer de schermgrootte van het apparaat klein genoeg is. Geen JavaScript nodig.
ResponsiveSlides.Js
ResponsiveSlides.Js is een zeer eenvoudige en extreem lichte (slechts 1Kb) jQuery-plug-in die een responsieve schuifregelaar maakt met ongeordende lijsten. Het werkt op een breed scala aan browsers, ook op IE6 en hoger.
anderen
[Terug naar boven]
Adaptieve afbeeldingen
Adaptieve afbeeldingen is een online hulpmiddel voor responsief webontwerp, dat de schermgrootte van de bezoekers detecteert en die opnieuw geschaalde afbeeldingen maakt, in cache zet en levert, op basis van de schermgrootte en resolutie.
FitText.Js
FitText.js is een kleine tool voor javascript, waarmee tekst en koppen automatisch van grootte kunnen worden veranderd wanneer het formaat van het browservenster wordt gewijzigd. Geen zorgen meer over de tekstgrootte komt niet overeen met deze tool aan boord.
FitVid.Js
Wilt u de ingesloten video's herschalen wanneer het formaat van het browservenster wordt gewijzigd of het apparaat een kleinere resolutie heeft? FitVid.Js kan u helpen dit te bereiken. Het is een lichtgewicht, eenvoudige, gemakkelijk te gebruiken jQuery-plug-in die wordt gebruikt om video's met ingesloten media te maken.
Retina-afbeeldingen
Retina Images is een geweldige JavaScript-oplossing, die automatisch @ 2X grotere afbeeldingen met een hoge resolutie zal weergeven wanneer deze worden bekeken op een retina-display. Het enige dat u hoeft te doen, is een versie met hoge resolutie van elke afzonderlijke afbeelding plaatsen en de rest beheren.
Naadloos reactief foto-raster
Seamless Responsive Photo Grid geeft de afbeeldingen rand-tot-rand in de browser weer, zonder gaten tussen afbeeldingen in. De foto's zijn betegeld en ze lopen van links naar rechts over de hele pagina in kolommen. Het aantal kolommen wordt dienovereenkomstig aangepast naarmate het formaat van het browservenster wordt gewijzigd.
SlabText
SlabText is een jQuery-plug-in of -tool van Brian McAllister op basis van het slabText-algoritme, dat de koppen in rijen verdeelt voordat het formaat van elke rij wordt gewijzigd om de beschikbare ruimte te vullen. Het is vrij gelijkaardig aan de FitText.Js plug-in in actie.
Zurb - ResponsiveTables
Heb je je ooit afgevraagd hoe om te gaan met de big data-tabellen in responsief ontwerp? Zurb, een CSS / JS-combinatie geeft je het antwoord; het neemt de gegevenstabellen en past ze aan zodat ze de responsieve lay-out niet breken op kleinere schermapparaten.
Categorizr
Categorizr is een heel klein PHP-script, dat uw bezoekers een meer gerichte webervaring biedt. Hiermee kunt u apparaatspecifieke ontwerpen voor tablet, tv, mobiel of desktop leveren.
Media Query-bladwijzer
Mediaquery-bladwijzer toont u de grootte van het huidige kijkvenster en welke media-query daarvoor is afgevuurd.
De responsieve rekenmachine
De Responsieve Calculator is een zeer eenvoudige online tool die u kan helpen om pixels om te zetten in percentages tijdens het ontwerpen van uw responsieve website.
Naar boven Volgende week
In de tweede week van deze serie zullen we je tutorials brinding geven die je echt in Responsive Web Design (RWD) zullen brengen.
Mis het niet.
