The Responsinator: Responsive Web Design Preview voor verschillende apparaten

Responsive webdesign is tegenwoordig een rage, vooral omdat HTML 5 en CSS 3 aan populariteit hebben gewonnen. Met responsief ontwerp ontwerpt u in feite uw site voor alle platforms en resoluties, en de website wordt automatisch geschaald zonder het ontwerp te breken volgens de browserbreedte van het scherm apparaat. Daarom moet men tijdens het bouwen van een responsieve website de vloeibaarheid van het ontwerp uitgebreid testen op een reeks populaire schermresoluties. De Responsinator is een eenvoudige webservice die u voorbeelden van uw responsieve website geeft op veel populaire schermresoluties van veelgebruikte apparaten.

Het concept achter The Responsinator is simpel: doe één ding en doe het goed. Bij een bezoek aan de site krijg je een ongecompliceerde, eenvoudige interface te zien met frames voor verschillende apparaten die verticaal worden weergegeven, te beginnen met de iPhone, doorgaan naar een paar Android-resoluties, naar iPad en uiteindelijk stoppen bij Kindle, om veel populaire apparaten te bedekken die er zijn, zowel portret als landschap modi.

Deze frames zijn standaard leeg. U moet de URL invoeren van de site waarvan u een voorbeeld wilt bekijken in het tekstvak linksboven en op GO drukken. De Responsinator gaat vervolgens aan de slag en laat u zien hoe uw site eruit zal zien op al deze platforms en de resultaten zijn behoorlijk indrukwekkend.

Bij onze tests hebben we de uitstekende website voor webontwerpbronnen gebruikt SmashingMagazine dat heeft een moordend responsief ontwerp. Zoals verwacht, toonden alle frames de site overtuigend vergelijkbaar met de manier waarop onze echte testapparaten werden weergegeven. (Klik op de afbeelding hierboven om de volledige versie te zien).

Er is ook een handige Responsinator bookmarklet (aangeboden op hun over pagina) voor de meeste moderne webbrowsers die u kunt slepen en neerzetten op de bladwijzerwerkbalk. Zodra u het daar hebt toegevoegd, bladert u gewoon door websites zoals normaal en klikt u op de bookmarklet wanneer u het ontwerp van een site wilt testen op reactievermogen, om deze automatisch te openen in The Verantwoordelijke.

Kortom, hoewel het u misschien niet de exacte pasvorm voor alle apparaten laat zien, is The Responsinator zeker een handig hulpmiddel voor webontwikkelaars om snel een overzicht te krijgen van hoe hun sites worden weergegeven op mobiele apparaten, terwijl ze voortbouwen op responsief ontwerp principes.

Bezoek The Responsinator