Introducing Google Browser Stoerrelse

Da jeg begyndte at arbejde på Google, jeg besøgte Google Earth teamet, i håb om at finde en 20% projekt om min yndlings Google-produkt. Der mødte jeg Bruno Bowden, der introducerede mig til et problem, jeg havde aldrig tænkt meget om: hvordan man tage browser størrelser i betragtning ved udformningen af en side.

Bruno havde bemærket, at mange mennesker, der besøger "Download Google Earth" side faktisk aldrig hente, selvom, som du kan se, at knappen er temmelig svært at overse:



Han spekulerede på, om et betydeligt antal af brugere kan have deres browservinduer for små til at se på knappen:



At analysere dette, Bruno set på, hvor store folks browservinduer var, da de har besøgt denne side. Hans første centrale idé var at måle ikke hele browservinduet, men blot kunden område - ingen værktøjslinjer, status bar, eller andre krom.

Bruno's anden central idé var at gøre flere ugers side besøgendes browser størrelser i en kontur visualisering:



Brug af denne visualisering, Bruno bekræftet, at omkring 10% af brugerne ikke kunne se på download-knappen uden at rulle, og dermed aldrig mærke til det. 10% lyder måske ikke som en masse, men i denne sammenhæng, det viser sig at betyde et betydeligt antal mennesker, var ikke downloade Google Earth. Ved hjælp af disse data, holdet var i stand til at ændre siden med god virkning.

Bruno og jeg indså, at webdesignere kan drage nytte af disse oplysninger, hvis det kunne gøres mere alment tilgængelige. Vi har bygget en side, der kunne overlejre en DIV med konturen visualisering atop en IFRAME, der indeholder en anden webside:



Dette viste sig at være en god måde at se, hvilke kontroller var og ikke var synlige på typiske browser størrelser. Det eneste problem var, forhindrede overlay DIV musen begivenheder fra at komme til den side IFRAME, så det var ikke muligt at interagere med den side.

For at løse dette, vi delt overlayet DIV i fire:



Hver af de skitserer ovenfor (rød, gul, blå, grøn) repræsenterer en særskilt DIV. Som musemarkøren bevæger sig, ændre størrelse vi og flytte divs til at forlade et lille vindue af tomme plads omkring markøren, og juster baggrund kompenserer for hver DIV at gøre overlay ligne en sammenhængende grafisk. (Vi oprindeligt gjorde dette på et ur, men vi fandt en enklere måde: når musen rører nogen af divs, ændre / flytte alle divs.) Slutresultat: en designer kan klikke og på anden måde interagere med den side med musen , og dermed interagere med webstedet normalt i stedet for gentagne gange at skrive webadresser.

Vi er nu ved at gøre dette værktøj til rådighed for offentligheden på Google Labs. At prøve det, skal du bare besøge browsersize.googlelabs.com og indtast webadressen på en side du gerne vil undersøge. Størrelsen overlay, du ser, er ved hjælp seneste data fra besøgende på google.com, så det bør give dig en ganske god indikation af, hvilke dele af dit UI generelt er synlige, og hvad der ikke er.

Vi ser frem til at modtage dine kommentarer på browser-size-external-feedback!

Af Arthur Blume på vegne af Google Browser Størrelse team