Archive for the ‘Webdesign’ Category

Onze browser testing setup in detail uitgelegd

Sunday, 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:

Nieuwe webdesign app

Tuesday, April 24th, 2007

De gasten van Panic doen meestal geen half werk als ze een applicatie bouwen en deze nieuwe ziet er wel bijzonder lekker uit.

Panic lanceerde onlangs “Coda“, een webdesign applicatie, die wel op Dreamweaver lijkt, maar dan zonder alle overbodige brol. Een “lean, mean codingmachine” als het ware.

Even testen deze week.

Later meer.

Groen op geel

Tuesday, April 10th, 2007

Het besluit van een studie uitgevoerd door Dr. Lauren F. V. Scharff in 1997 (!) is de makkelijkst leesbare tekst/achtergrond combinatie groene tekst op een gele achtergrond.

Jawel, dames en heren: u leest het goed: groene tekst op een gele achtergrond.

Een klein citaat uit het onderzoek:

From these results, one can say that contrast affects legibility, but unfortunately, it does not seem to be as simple as high contrast being better than low contrast. In the main experiment, GN/Y had the fastest RT’s, and in the control experiment, medium gray, and dark gray had the fastest RT’s. In neither experiment did the BK/W condition show the fastest RT’s. These results show that these participants had faster response times when more median contrasts were used. These results supported Powell (1990), who suggested avoiding sharp contrasts, but did not fully support Rivlen et al (1990), who suggested maintaining high contrast.

Gelukkig is de schrijver toch genuanceerd in zijn conclusies:

However, the significant interactions highlight the fact that there is no one color combination, font type, or word style to use, but rather all conditions affect one another.

Een gesprek van 2 minuten met een grafisch vormgever had die mens dezelfde resultaten en conclusies opgeleverd.

“You can’t tell anbody anything. They have to see for themselves.” ‘k Moet heel erg dringend de naam van die amerikaanse filosoof eens opzoeken die dat zinnetje heeft bedacht. De laatste tijd krijg ik veel te veel de gelegenheid hem te citeren.

Nieuwe WordPress Theme

Thursday, March 22nd, 2007

Voila se.

Een eerste nieuwe WordPress theme uit de Netlash stal. Gebaseerd op de huidige Netlash site.

Nog een klein beetje “tweaken” en ‘t is perfect.

Deze WordPress theme wordt later op het jaar vrijgegeven.

Technorati , , ,

Nieuwe WP theme op komst.

Tuesday, February 20th, 2007

Binnen Netlash zijn we als miertjes (tu tu tu tu) aan’t werk om de vormgeving van de huidige (ouwe) Netlash site te vertalen naar een WordPress theme.

Het huidige ontwerp is al een paar jaar oud (een dinosaurus in webtermen dus) en het nieuwe ontwerp vordert aardig. Tijd dus dachten we om de oude vormgeving “vrij te geven”.

Ook deze blog krijgt een nieuw jasje.

Zet in uw agenda alvast een vette cirkel rond 1 mei.

Links/rechts uitlijnen vs. centreren?

Tuesday, February 20th, 2007

De laatste paar dagen vraag ik me af waarom het heden ten dage “bon ton” is om je site te centreren in het browservenster. Een “trend” is het niet want iedereen doet het.

We doen het zelf ook.

Wat niet wegneemt dat ik me nog steeds afvraag waarom. Ok, het verschil in schermafmetingen opvangen is een goeie reden. Een soort “cross screen compatibility”. Je site staat altijd netjes in het midden.

Leuk is dat. Hiep hoi.

Les één in grafische vormgeving leerde me dat de saaiste plaats om iets in een vlak te zetten het midden is. Het is te “stabiel”. Stabiel is niet interessant. Stabiel trekt de aandacht niet.

Een ding is wel heel duidelijk: de nieuwe Netlash site zal niet in het midden van je browservenster staan. Vanwege niet interessant.