Netlash Designers

In theorie is ontwerpen voor het web redelijk straightforward: je maakt je ontwerpen in een grafisch programnma, schrijft je code in een teksteditor, en bekijkt je website in de browser.

Met het huidige browserlandschap kan je zo’n claim moeilijk maken. Als we kijken naar de graded browser support van Yahoo zien we maar liefst 5 verschillende operating systems en 7 browsers. Hoe test je je websites nu op een praktische manier op al deze verschillende configuraties?

Ten eerste heb ik voor mijn testing setup de configuraties die het minst voorkomen eruit gehaald:

Zoals je kan zien ontbreken er 2 vakjes die wel op de huidige Yahoo! GBS staan, namelijk support voor Safari 3.2 op Mac OS 10.4 en support voor IE6 op Windows 2000.

De reden dat je deze veilig kan weghalen is eenvoudig: deze browsers zijn in de praktijk net hetzelfde als hun equivalent op het iets nieuwere besturingssysteem (respectievelijk Mac OS Leopard en Windows XP).

Dat maakt de zaken alvast iets gemakkelijker: nu zijn er nog maar 3 operating systems om op te testen.

Ik werk op een Macbook Pro met volgende browsers op geïnstalleerd: Firefox 2, Firefox 3, Opera (laatste versie) en Safari (3). Dus dan hebben we al 4 van de 13 browsers:

Als je geen Mac hebt is je beste optie om Safari 3 en Google Chrome te downloaden voor PC. Als je website perfect werkt op deze browsers, is de kans erg groot dat deze ook perfect werkt op Mac. Deze browsers draaien namelijk allebei op de open source rendering engine Webkit.

Ik ga niemand tegenhouden om een Mac te kopen, maar begrijp dat dat niet voor iedereen een optie is ^)_(^

Nu heb je een aantal opties om Windows te testen. Indien je een zware Mac hebt (minstens een recente Mac Pro) kan je software als VMWare Fusion, Parallels Desktop of VirtualBox (gratis) gebruiken om je Windowsomgeving te virtualiseren.

Die laatste software mag dan wel gratis zijn, een Windowslicentie is dat niet. Je zit sowieso met de kost van 3 OS licenties: eentje voor je Mac, en dan een Windows XP en een Windows Vista licentie.

Virtualisatie is de gemakkelijkste manier, maar wel een manier die een stevige computer verreist. Ik weet dat er genoeg mensen zijn die virtuele machines draaien op hun Macbook, maar ik verzeker je dat als je tegelijk Photoshop, enkele browsers, een developmentomgeving en dan nog eens gevirtualiseerde Windows Vista draait dat je computerje dan wel serieus begint te zweten.

Ik heb geen zware Mac, wat nu?

Als je geen zware Mac hebt, heb je een fysieke Windowsmachine nodig.

Indien je zo’n machine hebt staan, moet je dan nog eens een nieuwe keuze maken (ja, het is ingewikkeld hoor!): remote of niet?

• Optie 1: je zet je Windowsbak ergens in je bureau, zorgt dat die verbinding heeft met het netwerk, en connecteert naar de Windowsbak via Remote Desktop
• Optie 2: je zet je Windowsbak naast je Mac, hangt er een tweede scherm aan, en deelt je muis en keyboard via Synergy

Dan moet je eigenlijk nog eens een keuze maken, namelijk: multiboot of niet?

Je kan ofwel één Windows OS naar keuze (XP of Vista) installeren en dan op die WindowsPC virtualisatiesoftware draaien. Microsoft biedt een aantal images aan van zowel Windows XP als Windows Vista (zie VPC testing images). Het voordeel is dat je in een “propere” omgeving een browser draait: geen geknoei met MultipleIE of IETester.

Ook hier geldt de voorwaarde dat je PC snel genoeg is om virtualizatiesoftware te draaien. Zware PCs zijn wel een stukje goedkoper dan Macs.

De andere optie is dat je twee operating systems op 1 systeem installeert: bij het opstarten wordt je dan gevraagd welk operating systeem je wil opstarten. Als je voor deze optie kiest heb je 1 groot voordeel, namelijk dat je niet moet knoeien met virtualisatie. Alles draait snel en zoals het zou moeten.

Het grote nadeel van een multiboot setup vind je in het volgende stuk.

IE6, IE7 en IE8 naast elkaar draaien

IE6, IE7 en IE8 naast elkaar draaien gaat niet. Microsoft weet dit en heeft een tool gemaakt die Expression Web Superpreview for Internet Explorer heet.

Ik heb het zelf nog niet getest, en wel om volgende redenen:

Expression Web SuperPreview shows your web pages rendered in Internet Explorer 6 and either Internet Explorer 7 or 8, depending on which version you have installed on your machine.

Ik heb IE6, IE7 én IE8 nodig.

You can also display PHP and ASPX pages in SuperPreview.

Euhm, ok, kan ik niet ALLE soorten pagina’s weergeven?

Maar goed, dit is de oplossing niet. Een klassieke oplossing die vele mensen gebruiken is MultipleIE. In theorie lijkt dit een hele mooie oplossing: je installeert de browserversies die je nodig hebt, en je bent vertrokken.

Op de homepage staat echter:

Multiple IE is no longer maintained and there are no plans to continue maintaining it! Thanks and good luck!

Ik kan niet op software vertrouwen die niet verder ontwikkeld wordt. Plus, dit helpt niet echt op Vista. Microsoft zelf raadt het gebruik van MultipleIE af (zie Pete L.)

There are applications out there that will put IE4/5/6/7/8 on the same machine and let you switch between the different versions of IE, but there are a couple of problems with this. I typically describe this type of situation as a Frankenbuild. Any time you start messing with Windows core components, and changing OS level DLL’s, you’re setting yourself up for heartache. You also don’t know if you’re replacing the whole set, or just a subset of the DLLs. For example, if you’ve got IE8 installed on the box, and you put the IE6 rendering engine in, you have the IE6 rendering engine, the IE8 JavaScript engine and the IE8 networking stack. Hmm, no real customer is ever going to see that. You never know what the tool is replacing, if it’s the whole IE stack, or just the components.

IEtester valt in dezelfde lijn. Niet gebruiken dus.

Hoe kan ik dan wél IE6, IE7 en IE8 naast elkaar draaien?

Het juiste antwoord is: dit gaat niet. Ofwel wissel je tussen virtual machines; ofwel tussen fysieke apparaten, ofwel tussen operating systems (multiboot). Alles heeft zijn voor –en nadelen: sommige setups zijn duurder, sommige zijn trager, etc.

Bases covered

Dit is hoe ik werk:

• Ik heb een Macbook Pro, die staat links op een verhoogje
• Daaraan hangt een extern Apple scherm
• Onder mijn bureau staat een Windowsbak, multiboot Vista en XP
• Ik deel muis en keyboard via Synergy

Voordelen:

• Het werkt heel snel: je moet je muis maar naar de andere kant bewegen en je zit “op het andere scherm”. Het werkt even vlot als op 2 schermen werken.
• Aangezien je 2 aparte computers hebt en dus geen virtualisatie, heeft je Mac eigenlijk niets van performancelast en kan je rustig door Photoshoppen zonder vertragingen
• Je covert de meest gebruikte combinaties: IE8 (met IE7 compability view) op Windows Vista, en IE6 op Windows XP.

Nadelen

• Je gebruikt 2 keer zoveel stroom, want er draaien 2 computers en 2 schermen
• Synergy is open source software, je kan er niet vanuit gaan dat dit bijvoorbeeld nog gaat werken op bvb. Windows 7
• Je moet je keyboard nog wel aansluiten om in te loggen op de systemen: een klein ongemak aan het begin van de dag
• Je mist een aantal combinaties, zoals IE7 op Windows XP; maar je kan er vanuit gaan dat dit min of meer hetzelfde rendert als IE7 op Vista

Al bij al ben ik heel tevreden met mijn setup: een aanrader voor iedereen. We hebben bij Netlash besloten elke ontwerper met deze setup te laten werken. Dinsdag kwamen de nieuwe schermen aan. Superb!

/happy designers

Toevoegingen 4 juni ‘09:

• IE6, IE7 en IE8 VMWare fusion images
• Draai gemakkelijk meerder versies van Firefox naast elkaar met MultiFirefox

This entry was posted on Sunday, May 31st, 2009 at 14:48 and is filed under Webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.