8 Belangrijke ontwerptools om het verkeer naar uw website te maximaliseren |

Volgens een onderzoek van de Wereldbank heeft ongeveer 75 procent van de mensen over de hele wereld toegang tot mobiele apparaten. CNET meldt dat abonnementen op mobiele communicatiediensten zijn gegroeid van 1 miljard in 2000 tot meer dan 6 miljard in 2012. Vanwege de snelle uitbreiding van het gebruik van mobiele telefoons, is het nu belangrijker dan ooit dat websites op meerdere platforms werken. Gebruik deze acht hulpprogramma's om uw responsieve webontwerp te verbeteren en het aantal mensen te maximaliseren dat uw sites kan bekijken en doorklikken.

8. Adobe Edge Inspect

Met Adobe Edge Inspect, dat is geüpdatet en uitgebracht in 2013 met een nieuwe branding waarmee het is gekoppeld aan Creative Cloud, kunt u een voorbeeld van uw webontwerpen bekijken om te zien hoe ze eruitzien op verschillende platforms. De belangrijkste attractie van Edge is de mogelijkheid om u tijd te besparen door in realtime wijzigingen op verschillende platforms te zien.

Met deze tool kunt u uw computer en mobiele apparaten synchroniseren. Door dit te doen, kunt u tegelijkertijd het webontwerp op meerdere platforms bekijken en inspecteren. Ook als u wijzigingen aanbrengt in het webontwerp en het probleem oplost, wordt uw werk meteen weergegeven op uw apparaat, zolang u werkt met Java-, CSS- en HTML-codering.

7. Skelet

Deze bedrijfsbundel van CSS-bestanden maakt een naadloze website-ontwikkeling mogelijk die er elegant uitziet, of deze nu wordt weergegeven op een desktopmonitor of een klein gloeiend scherm in uw hand. Beschouwd als een eenvoudig te gebruiken boilerplate voor responsief webontwerp, heeft Skeleton de toepasselijke naam omdat het een raamwerk creëert dat zich uitbreidt en samentrekt volgens de grootte van het apparaat van de gebruiker. Hoewel het basisontwerpelementen bevat, is het flexibel genoeg om ontwerpers in staat te stellen om meer verfijnde stijlen aan te brengen.

6. Responsive Wireframe

Responsive Wireframe, gefactureerd als een experimenteel hulpmiddel dat gebruik maakt van responsieve webontwerptechnieken, gebruikt HTML / CSS om een ​​overlay-raster te bieden waarmee u bureaublad- en mobiele weergaven van uw ontwerp kunt zien. Het idee met deze tool is om het eenvoudig te maken om in de browser te ontwerpen. Hoewel sommige ontwerpers beweren dat deze wireframes de creativiteit verslaan, zeggen anderen dat het een snelle en eenvoudige manier is om ontwerpen te maken die op verschillende platforms werken. Als u deze tool gebruikt, bespaart u tijd doordat u ontwerpen test met behulp van de responsieve wireframes om te zien hoe ze eruit zien op laptops, desktops en mobiele apparaten.

5. Stijltegels

Beter dan een moodboard, maar minder statisch dan een echte mockup, stelt Style Tiles ontwerpers in staat om klanten verschillende websitelay-outs te laten zien. Door de tegels weer te geven, vermijden ontwerpers dat ze meerdere voltooide versies moeten maken.

Deze cascading tiles tonen ontwerpen zonder ze op een apparaat aan te passen, waardoor ze een eenvoudige manier zijn om ontwerpen te maken en deze met klanten te delen, rekening houdend met de vele overwegingen met responsief ontwerp. Met andere woorden, deze benadering geeft ontwerpers de vrijheid van dimensionale beperkingen. Een zusterproduct van Style Tiles, "Component Style Guide" biedt advies over het nemen van uw ontwerp en het laten werken op verschillende platforms, zoals de iPhone en de nieuwe Blackberry 10-smartphone.

4. De Responsieve Calculator

Met behulp van percentages geeft deze calculator u de gegevens die u nodig hebt om een ​​PSD-ontwerp om te zetten in een element voor uw responsieve webproject. U voert zes velden in en klikt vervolgens op 'Vraag verzenden'. Kies randen, marges en opvulling op uw PSD met deze rekenmachine.

3. Wookmark

Dit is een jQuery-plug-in die de componenten van een webpagina overneemt en in kolommen plaatst. De kolomlay-out is gebaseerd op de grootte van het browservenster. Deze handige tool is een uitstekende manier om een ​​site te laten reageren op verschillende schermformaten.

2. ProtoFluid

Omdat het een voordeel heeft omdat het op het web is, maakt dit hulpmiddel het eenvoudig om mock-ups van uw ontwerp met verschillende resoluties en dimensies te bekijken. Geniet van het gebruik van Firebug wanneer u uw HTML, CSS, JS en andere elementen op problemen controleert. Toetsenbordsnelkoppelingen, een snelle omschakeling tussen verschillende weergaven en een schone code zorgen voor snelheid terwijl u deze tool gebruikt om te testen hoe goed uw ontwerp eruit ziet op verschillende schermformaten, waaronder Nexus, iPhone en iPad.

1. Fundering

Dit front-end framework biedt de mogelijkheid om slimmer en sneller te coderen. Een van de functies waarmee u met deze tool begint, is ontwerpen voor kleine schermen. Terwijl u werkt aan het uitbouwen van uw ontwerp voor grotere schermen, helpt Foundation u de ontwerpelementen op te voeren. Bovendien biedt deze tool coole HTML-sjablonen waarmee u snel kunt beginnen met het ontwerp van de site.

Profiteer van het flexibele raster van dit hulpmiddel, de responsieve lay-outs en de snelle productie van prototypen. De doeltreffendheid en geloofwaardigheid van Foundation is te zien in de lijst met sites die het gebruiken, waaronder National Geographic, Pixar en Los Alamos National Laboratories.

Wat zijn de grootste uitdagingen voor u als u uw responsieve webontwerp maximaliseert? Welke hulpmiddelen hebben u het meest geholpen?

[Afbeeldingen via]