Gratis Tools om Responsive Websites te testen

En dan eindelijk — tijdens de laatste fase in de ontwikkeling van een nieuwe responsive website — wil je graag weten of alle content ‘elastisch’ is. Zijn de afbeeldingen ‘schaalbaar’, is de layout ‘flexibel’? Het testen van responsive websites is een redelijk moeilijke en zeer arbeidsintensieve taak. Het is niet echt handig om je browservenster, elke keer weer, handmatig te moeten aanpassen naar een specifiek vensterbreedte.

In deze fase moeten we er voor zorgen dat onze websites in zoveel mogelijk (mobiele) browsers werken. De responsive websites moeten grondig getest worden om te zien of de Media-queries (breakpoints) correct werken. Dit soort tests op verschillende web browsers en/of desktop apparaten is nogal onpraktisch en voegt veel ontwikkeltijd toe.

In dit artikel wil ik je wijzen op een aantal gratis online Web Apps, Web Extensies en Bookmarklets⁽¹ om je responsive website te kunnen testen op verschillende schermformaten (vooraf gedefinieerd of handmatig ingesteld).

Online Web App’s om responsive websites te testen

responsivepx

responsivepx laadt jouw pagina’s in een venster waarin je de breedte en de hoogte kunt testen. Hierdoor kun je bepalen hoe goed je media queries functioneren en waar de breakpoints zitten in het ontwerp. Gebruik de schuifbalkjes om de breedte en hoogte van de viewport aan te passen om zodoende de exacte breakpoint breedtes (in pixels) te vinden.

Brad Frost’s Ish 2.0

Waarschijnlijk mijn lievelingstool om mijn eigen responsive websites in te bekijken en te testen. De breakpoints in Responsive Web Design zouden het liefst op basis van de layout (design) bepaald moeten worden. Helaas zie je dat de breakpoints vaak worden bepaald door afmetingen van één specifiek apparaat, de Apple iPhone! Ish houdt rekening met deze wens, door de gebruiker van deze tool zelf te laten bepalen hoe groot het venster moet zijn!

Deze tool heeft tevens 4 vaste schermresoluties. Een ‘Random’ stand waar je zelf de breedte kunt bepalen door het venster kleiner of groter te slepen. De ‘Disco’ mode waarbij ad random schermresoluties in elkaar overvloeien (absoluut mijn lievelingsstandje). En .. de ‘Hay!’, deze laatste stand is geïnspireerd op/door Stephen Hay. In deze mode groeit de resolutie langzaam van mobiel naar Xtra Large! De px-naar-em calculator is overigens ook een superhandige toevoeging ,.. by the way!

Web Extensies om responsive websites te testen

Web Developer (Chrome, FireFox en Opera)

De Web Developer extensie voegt diverse web developer tools toe aan jouw ​​browser. De extensie is beschikbaar voor Firefox, Chrome en Opera.

Deze extensie biedt ontwerpers een aantal tools die van pas komen bij het ontwikkelen van responsive en ‘fluid’ websites. De ingebouwde mogelijkheid om je browservenster te verkleinen met één klik op de knop is erg cool. Nieuwe formaat presets kunnen worden opgeslagen en direct gebruikt, tevens voegt deze extensie een werkbalk knop toe aan de browser met verschillende web developer tools.

Responsive Inspector (Chrome)

Responsive Inspector is een eenvoudige Google Chrome-extensie die het bekijken van Media Queries van websites makkelijk maakt. Deze extensie is zeer nuttig bij het ontwikkelen van responsive web layouts. Dit komt omdat de extensie de verschillende MQ’s laat zien die gedefinieerd zijn in de CSS stylesheet(s). Door op een van de gedefinieerde Media Queries te klikken, past het browservenster zich aan naar de desbetreffende breedte van die Media Query.

Daarnaast heeft het ook nog de volgende ingebouwde functies:

• Het nemen en opslaan van screenshots van de gehele bladzijde
• Het bekijken van de CSS codes van de desbetreffende Media Query
• Het delen van screenshots op Behance.net als ‘Work In Progress’

Dimensions Toolkit

De Dimensions Toolkit biedt handige tools voor het testen van jouw responsive website, met aangepaste en standaard breakpoints, aanpasbare afmetingen en nog veel meer.

Dimensions Toolkit werkt zowel met lokale (localhost) als online websites. De gebruiker kan het venster naar een gewenste breedte slepen of door het handmatig invoeren van een specifieke afmeting. Maar je kunt ook kiezen uit een selectie van afmetingen van enkele populaire (mobiele) apparaten. Dimensions Toolkit is zowel beschikbaar als Chrome-extensie en online Web App.

Bookmarklets om responsive websites te testen

Responsive Design bookmarklet (Chrome en FireFox)

Hiermee kun je een web pagina bekijken in meerdere schermformaten en viewports van verschillende apparaten simuleren. Deze bookmarklet kun je uitvoeren op elke pagina (ongeacht de extensie van de web pagina). Deze bookmarklet kun je ook eerst configureren met apparaat-maten waarin jij geïnteresseerd bent en deze vervolgens laten genereren als viewports.

Media Query Bookmarklet (Chrome en Safari)

Een handige tool die je precies laat zien wat de grootte van de viewport is. Deze bookmarklet analyseert de bijbehorende CSS-bestanden van de huidige pagina en laat de Media Query van de bijpassende viewport zien. Sleep de Bookmarklet naar je bladwijzerbalk en hou deze bij de hand voor als deze nodig is.

Bottomline

Er zijn véél meer web tools, extensies en bookmarklets op het internet te vinden om responsive websites te testen. Ik heb een persoonlijke selectie gemaakt met gratis online hulpmiddelen. Maar ondanks het feit dat dit allemaal handige tools zijn, deze hulpmiddelen werken alleen op web browsers. En deze tools moeten ook gezien worden als een nauwkeurige ‘benadering van de werkelijkheid’!

De beste manier om Responsive websites te testen is door gebruik te maken van een ‘DeviceLab’⁽² en een gesynchroniseerd browser test app voor web en mobiel.

Voetnoten:

⁽¹ – Een kleine software toepassing opgeslagen als een bladwijzer in een webbrowser. Elke gebruiker kan bookmarklets gebruiken om de geladen webpagina interactief te manipuleren op welke manier dan ook.
⁽² – Opstelling waar verschillende mobiele apparaten staan opgesteld die werken op zoveel mogelijk verschillende platforms/browsers.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.