Onze browser testing setup in detail uitgelegd

May 31st, 2009

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:

Wolf Gbs

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:

Wolf Gbs

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

Wolf Gbs

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!

Setup

/happy designers

Toevoegingen 4 juni ‘09:

Webdesign subtrend: hyper lighting

February 20th, 2008

Ik had het al even in de mot maar nu lijnt ie zich toch duidelijker af: een webdesign subtrend die ik stiekem de naam “hyper lighting” gegeven heb. In een zotte bui durf ik ook wel eens de naam “A New Hope” laten vallen.

Stiekem durf ik mij wel bezondigen aan een potje trendspotten. In’t geniep zo… Weet u wel.

Voorbeelden? Hier, hier en hier. Maar ook hier. En vooral hier.

U nog iets gezien dat onder dit labeltje past?

Technorati , , ,

Creatie op papier

February 19th, 2008

Even verder borduren op het vorige berichtje: creatie op papier, uitvoering op computer.

Wat ik daar eigenlijk mee bedoel: maak je ideeën concreet in een schets op een blaadje papier, maak ze zichtbaar, geef ze een vorm laat ze gerust een rondje op de vuist gaan in die papieren ring. In deze stap bestaan er geen goeie of slechte ideeën, het enige doel is ze uit je hoofd te krijgen en zichtbaar te maken, zodat je ze kunt ZIEN. Je een ontwerp voorstellen is nog altijd iets compleet anders dan het effectief zien.

Er moeten eerst X (0 < X < 20) aantal ruwe versies van een grafisch ontwerp of logo of illustratie of website gemaakt worden voor je er één, maximum twee een stap verder neemt. Tot brakens toe werd het er op school ingehamerd, waarom vergeet een mens het toch steeds? Ha, misschien omdat het er werd ingehamerd, tot brakens toe, natuurlijk.

De computer komt er pas op het eind aan te pas, als je één schets — voor echt — gaat uitwerken.

Technorati ,

Niet vergeten

February 9th, 2008

Creatie op papier, uitvoering op computer.

Zeg dit 100 keer hardop en hang het op een papiertje boven je bed.

Het kleur van het jaar

January 10th, 2008

Zag ik deze nacht op het laatavondjournaal plots “PANTONE® 18-3943 BLUE IRIS” in de achtergrond opduiken?

Of was het mijn verbeelding die mij parten speelde?

Technorati , , ,

deredactie.be

January 8th, 2008

Een dikke proficiat aan de VRT voor het nieuwe jasje van de nieuwsdiensten. Dat gaat zeer zeker de juiste richting uit. Een bedenking misschien: de vormgeving op de website komt nog ietwat slordig over. Er is nog teveel een mix aanwezig van grafische elementen die niet op elkaar afgestemd zijn:

  • balkjes die wel / niet uitsteken
  • titelbalk achtergronden met / zonder schaduw
  • onafgewerkte elementen zoals de banner bovenaan
  • witruimte wordt niet goed / consequent gebruikt

Misschien iets te vroeg de website moeten opleveren?

Eén regel uit de web-etiquette is in ieder geval volledig gevolgt: “publish early”. Nu nog zien of ze de “update often” ook gesnapt hebben. Laten we ze nog een aantal maand geven om dit concept wat beter te laten rijpen.

Technorati , , ,

Kleur trends bekennen 2008

January 5th, 2008

Altijd leutig om zo rond deze tijd van het jaar de voorspellingen voor het komende jaar te lezen. Dit tijdsfragment aan de start van een nieuw jaar leent er zich uiteraard wel toe: een beetje retrospectie en evaluatie over het voorbije jaar brengt al snel de vraag met zich mee wat “het” volgend jaar zal worden. Er worden bijzonder weinig trend voorspellingen gedaan in maand juli of augustus.

Deze kon ik echt niet laten passeren: de mensen bij Pantone stellen hét kleur voor 2008 voor: “PANTONE® 18-3943 BLUE IRIS”.

PANTONE 18-3943 Blue Iris, een prachtig, evenwichtig blauw-paars, dé kleur voor het jaar 2008. Een combinatie van de stabiele en kalmerende aspecten van blauw met de mystieke en spirituele kwaliteiten van paars. Blue Iris voldoet aan de behoefte van geborgenheid in een steeds complexere wereld, het paarse accent voegt een vleugje mysterie en spanning toe.

In’t engelsch heb je zo’n fantastiese uitdrukking: “Put your money where your mouth is” — ik zoek nog steeds naar een passende nederlandse vertaling, “Steek je geld in je mond” klopt niet echt, maar ik wijk af. Kijk, Pantone als je het lef hebt om zo’n voorspellingen te doen, maak er dan tenminste een “self fulfilling prophecy” van: DOE ER IETS MEE. Gebruik het bijvoorbeeld ergens op jullie site of zo?

Misschien een geval van “Do as I say, don’t do as i do.”?

Technorati , , , ,

Color management in webdesign

June 29th, 2007

De nieuwe Safari (voorlopig nog beta) heeft – als eerste op de markt – support voor deftig color management ingebouwd. Safari is volledig conform de Versie 4 ICC Specificaties. Geruchten gaan de ronde dat de volgende versie van FireFox ook de ICC 4 specs zou ondersteunen. Men kan maar hopen dat Microsoft IE dat ook zal doen.

Update: link naar testpagina aangepast.

Het ICC (International Color Consortium) stelt een HTML pagina ter beschikking om je browser te testen of ie de ICC 4 standaard wel ondersteund.

Een goeie evolutie zou ik zeggen, maar wel één die zijn implicaties zal hebben op het ontwerpen van een website. Alle beeldmateriaal dat op een site gebruikt wordt zal moeten voorzien zijn van een kleurprofiel. Waar je als webdesigner tegenwoordig exclusief in sRGB kunt (moet) werken, zul je in de nabij toekomst misschien wat meer bewegingsvrijheid hebben.

En dan zie je het natuurlijk alweer aankomen: IE zal kleurprofielen natuurlijk weer net iets anders interpreteren dan Safari of FireFox (of omgekeerd). Of zoiets.

Technorati , , , , ,

Brockmann remix

May 1st, 2007

Ik kan nog steeds bijzonder genieten van de Josef Muller Brockmann remix. Schitterend.

Ik loop me nu wel een hele tijd af te vragen van wie die muziek is (dat zal waarschijnlijk ook wel een remix zijn van iets)? Iemand enig idee?

Technorati Tags: ,

DaimlerChrysler Design Navigator

May 1st, 2007

Bijzonder interessant stukje web gevonden: tekst, uitleg & downloads over het visuele aspect van de communicatie van DaimlerChrysler.

Zeer uitvoerig — sommigen zouden zelfs zeggen: “Ad nauseam” — en uitermate grondig wordt het gebruik van lettertypes, logo’s, illustraties, foto’s, rastersysteem enz. uit de doeken gedaan. Fascinerend vind ik dat.

Persoonlijk vond het gedeelte over de “horizontale as” bijzonder interessant. Afhankelijk van gekozen formaat wordt op een bepaalde hoogte het formaat in 2 verdeeld (volgens een proportie die afhankt van het basis formaat. Het bovenste gedeelte wordt bv. voorbehouden voor het logo. Het onderste gedeelte krijgt dan tekst toegewezen.

Brockmann is nooit veraf.

Wat een beetje tegenvalt is de stiefmoederlijke behandeling van het Internet gedeelte. Blijkbaar is dat spitstechnologie bij DaimlerChrysler, want het is enkel toegankelijk voor interne gebruikers…