Mobiele Navigatie

En dan eindelijk — tijdens de laatste fase in de ontwikkeling van de nieuwe responsive website — komen we aan bij het punt dat de content ‘elastisch’ is, de afbeeldingen zijn ‘schaalbaar’ en de layout is ‘flexibel’. Nu moeten we er dus voor zorgen dat onze site in zoveel mogelijk (mobiele) browsers werkt en zal de website grondig getest moeten worden om te zien of de Media-queries (bijv. breakpoints) correct werken.

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 wijzigen naar een bepaalde afmeting (breedte en hoogte). Dit soort tests op verschillende web browsers en/of desktop apparaten is nogal onpraktisch en voegt veel ontwikkeltijd toe.

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

Online Web App’s

Responsive Design Testing

Deze online Web App is voor iedereen die een snelle en gemakkelijke manier zoekt om hun responsive website te testen in meerdere scherm breedtes tegelijkertijd. Matt Kersley’s web app is eigenlijk een iframe-gebaseerde online tool. Voer de URL van uw website in en test het in verschillende vooraf vastgelegde schermresoluties tegelijk, of bekijk ze in de juiste afmetingen van bepaalde mobiele apparaten.

RWD-testing-Matt-Kersley

Responsive Design Testing

responsivepx

responsivepx laadt uw pagina’s in een venster waarin u de breedte en de hoogte kunt testen om te bepalen hoe goed uw media queries functioneren en waar de breakpoints zitten in het ontwerp. Voer de url van uw site in — lokaal of online — en gebruik de schuifbalkjes om de breedte en hoogte van de viewport aan te passen om zodoende de exacte breakpoint breedtes (in pixels) te vinden.

reponsivepx

responsivepx

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 en niet bepaald door een specifiek apparaat! 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 u 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!’ (geïnspireerd op/door Stephen Hay) mode waarbij de resolutie langzaam van mobiel naar Xtra Large groeit! De px-naar-em calculator is overigens ook een superhandige toevoeging ,.. by the way!

Ish

Ish 2.0

Web Extensies

Web Developer (Chrome, FireFox en Opera)

De Web Developer extensie voegt diverse web developer tools toe aan uw ​​browser. De extensie is beschikbaar voor FirefoxChrome 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 uw 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. Het is zeer nuttig bij het ontwikkelen van responsive web layouts omdat de extensie de verschillende MQ’s laat zien die gedefinieerd zijn in de CSS stylesheet(s). Als u vervolgens op een van de gedefinieerde Media Queries klikt, past het browservenster zich aan de breedte aan van de desbetreffende 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 uw 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 de site controleren door het venster naar een gewenste breedte te slepen, of het handmatig invoeren van een specifieke breedte/hoogte of te kiezen uit een selectie van afmetingen van enkele populaire (mobiele) apparaten. Dimensions Toolkit is zowel beschikbaar als Chrome-extensie en online Web App.

Bookmarklets

Responsive Design bookmarklet (Chrome en FireFox)

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

Responsive Design bookmarklet

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 uw bladwijzerbalk en hou deze bij de hand voor als deze nodig is.

MQ Bookmarklet

Conclusie

Er zijn nog véél meer handige web tools, extensies en bookmarklets op het internet te vinden om uw responsive website te testen, maar ik heb hier slechts 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 moeten slechts 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’(2 en een gesynchroniseerd browser test app voor web en mobiel (ik gebruik hiervoor GhostLab).

Voetnoten:

(1 – Een kleine software toepassing opgeslagen als een bladwijzer in een webbrowser, die doorgaans een gebruiker kan gebruiken om de geladen webpagina interaktief te manipuleren op welke manier dan ook.
(2 – Opstelling waar verschillende mobiele apparaten staan opgesteld die werken op zoveel mogelijk verschillende platforms/browsers.

Deel dit Bericht:

Categorie: webdesign | Tags: ,

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

2 Reacties

Peter, 3 jaar geleden | Beantwoorden

Bij mij wordt nergens mijn website responsive weergeven, de website wordt alleen maar in een groter of kleiner vakje gestopt. Dit terwijl de website er anders uit ziet als de resolutie veranderd.

Jan Rajtoral, 3 jaar geleden | Beantwoorden

Hoi Peter!

.. dat is raar? Je weet zeker dat je website ook daadwerkelijk responsive is? Want wat het meerendeel van deze tools doet, is je website tonen in een <iframe> (zie ook Wiki voor meer info).

Maw. je website wordt gewoonweg getoond in verschillende beeldschermresoluties, dus als “de website er anders uit ziet als de resolutie veranderd”.

Wat is de URL van je website, misschien dat ik even naar de codes kan kijken ..?

Ciao!

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Leerschoon M/V

Colofon