1

Onderwerp: Responsive design tools

Hebben jullie nog goede tools voor het testen van adaptieve layouts? Ik ken de volgende, maar wellicht weten jullie nog een paar andere of betere smile

2 Laatst bewerkt door Mathias Bynens (01-08-2011 09:48:55)

Re: Responsive design tools

http://mattkersley.com/responsive/

In Opera kan je trouwens de venster-afmetingen in de titelbalk tonen: http://www.opera.com/support/kb/view/303/

3

Re: Responsive design tools

There is actually a pretty decent roundup of current *everything* in repsonsive design, including tools, at http://www.smashingmagazine.com/2011/07 … rategies/.

Funny that testing in actual devices doesn't get the attention it deserves.

By lack of devices, the iOS, Android and Blackberry SDKs/emulators are indispensable.

4

Re: Responsive design tools

Hier is nog een aardig lijstje met tools:

http://sixrevisions.com/tools/responsive-web-design/

5 Laatst bewerkt door Mallory van Achterberg (04-08-2011 11:00:20)

Re: Responsive design tools

Funny that testing in actual devices doesn't get the attention it deserves.

Mss dachten ze dat mensen dat al weten... maar wie is rijk genoeg om al die dingen te kopen alleen voor testing?  Ikke niet.


*o lieve EDIT knop, how I've missed you!

6

Re: Responsive design tools

Een bekend euvel van browsers op (in ieder geval) OSX is dat je ze niet heel smal kunt maken. Het chrome wordt dan wel smaller, maar een deel valt gewoon buiten beeld (viewport van bijvoorbeeld 400 pixels breed en chrome van 200 met "overflow: hidden" werkt niet lekker). Op te lossen door een Fluid app te maken. Die kun je wel heel smal maken, zonder dit euvel tegen te komen.

7

Re: Responsive design tools

Dit is ook een prima artikel over testen met emulatoren: http://www.456bereastreet.com/archive/2 … _hardware/

8

Re: Responsive design tools

Heeft iemand nog ervaring met: http://www.browserstack.com/
De proef periode uitgeprobeerd, en het ziet er aardig uit.

9

Re: Responsive design tools

Ik heb de laatste tijd naar http://www.responsive.is zitten kijken en dat is wel okay om de 'standaard' breakpoints te zien/testen.

Feitelijk testen op mobiele devices blijft altijd lastig, ook al hebben we hier de luxe dat we de meest gangbare dingen wel hebben liggen (iPad, iPhone, diverse Android apparaten, Android tablet).

Ik was ook benieuwd hoe Open Device Labs zich zouden ontwikkelen, maar ik hoor daar zelf erg weinig van.

10

Re: Responsive design tools

Je zal ook nooit op alle apparaten kunnen testen, maar de statistieken kunnen wel handig zijn bij het bepalen ervan:
http://gs.statcounter.com/#mobile_resol … 201301-bar
http://gs.statcounter.com/#mobile_brows … 201301-bar

Wij hebben dan ook wel de meest gangbare apparaten, alleen de met wat verouderde apparaten zit je dan mee, en zeker met de oudere Android en iOS browsers.

Onderstaande Chrome extension is ook handig, als je tijdens het resizen de resolutie wil weten, maar ook om snel te testen:
https://chrome.google.com/webstore/deta … ilcgefonfh

En nog een:
http://quirktools.com/screenfly/

11

Re: Responsive design tools

de oudere Android versies (plus browsers) blijven altijd wel apart moet ik zeggen.

Mijn HTC Desire Z heeft een resolutie van 480x800, maar als je window.innerWidth checkt geeft ie 320 aan ... Da's dus leuk afvangen met mediaqueries. En dat soort dingen zie je niet op desktop wink

Screenfly werkt inderdaad erg handig, mits ie goed ge-updatet blijft qua tablets/telefoons etc.

Ik zal die extensie ook 's checken, al is het maar voor pseudo resoluties checken smile