måndag 22 februari 2016

Hur länge kan man fila på en knapp?

Den här texten handlar om knappar. Nej, inte sådana som du har på jackan, utan knappar i webbshoppen.

Det hela började för ett år sedan, när jag inledde arbetet med att mobilanpassa Silvergrejs webbshop. Jag läste på om javascript för menyer och stylesheets som anpassar sig efter skärmbredd. Jag studerade hur andra webbshoppar såg ut i mobilen och vilka menylösningar de hade. Efter många dagars utvecklingsarbete hade jag både mobilanpassade menyer och en sida som möblerades om beroende på skärmens bredd. Fantastiskt, nästan färdig alltså? Men nej, den existerande layouten funkade dåligt på mobil. Knappar, menyer och skrivfält var för små för att klickas på med fingret på en pytteliten mobilskärm, trots mobilanpassningen.

Eftersom jag nu behövde mecka med layouten bestämde jag mig för att samtidigt piffa till looken, trots att det ibland känns det som att jag knappt har hunnit lansera en ny look innan jag börjar knåpa på nästa ;-) Typsnitten kändes lite off, så jag började leta alternativ på Google Fonts. Där började den stora beslutsångesten.

Många typsnitt som såg bra ut i storlek 18 visade sig vara kassa i storlek 14, eller inte alls funka i fetstil. Andra hade otydliga åäö eller visade sig vara jobbiga att läsa i brödtext. Bokstäverna fick inte vara för breda och inte för smala. Inte för kantigt och torrt, men ändå lite proffsigt. Helst ville jag ha något som inte alla andra har, och olika typsnitt för rubriker/menyer och text. Det var många parametrar som skulle stämma samtidigt. Jag hittade till slut ett par typsnitt som jag gillade, och valde dem i min utvecklingsversion. Detta var för över ett halvår sedan.

Jag ljusade även upp färgerna, bort med den "textila" bakgrundsbilden och de gultonade partierna (förutom i de nya mobil-menyerna). En stramare ikon för kundkorgen, ljusare knappar, ljusare grön färg. Större text, mer luft i menyerna. Och förresten, satt inte texten i sök-knappen lite ocentrerad i höjdled med det nya typsnittet? Några pixlar uppåt blev bättre.

Under hösten fick utvecklingen vila, eftersom jag hade fullt upp med annat. När jag efter nyår återvände till layoutandet kändes de valda typsnitten lite för mycket som cirkus, och något skavde fortfarande med knapparna. Okej, nya typsnitt. "Alla" använder Open Sans, men det finns kanske en anledning till det. Jag kapitulerade och satte Open Sans i brödtexten. Rubriker, knappar och menyer fick Trebuchet, som är Silvergrejs "signum" (samma som i logotypen).

Så knapparna. Hmm, det kanske går att centrera texten ännu bättre? Och vänta nu, det går ju faktiskt att göra textfältet och knappen precis lika höga, det blir ju mycket snyggare! Och en högre knapp och högre textfält blir lättare att använda på mobilen. Men nu hamnade texten för långt upp igen. Fila fila.

Men alltså, ser inte Trebuchet lite suddigt ut på vanlig skärm? På min mac med HIDPI-skärm ser det snajsigt ut, men på vanliga datorn är det faktiskt ganska kasst. Suck. Fram med Google Fonts igen. Den här då? Nej, den blev jättekonstig i fetstil. Eller den här? Nunito. Hmm, om jag alltid ser till att texten är minst 16 punkter hög när den är i fetstil så ser det faktiskt väldigt bra ut. Fast den är lite lägre än både Open Sans och Trebuchet, så texten i knappar och menyer behöver göras lite större. Såja, detta blir bra. Bara någon pixel lägre än tidigare.

Och nu får jag mecka ett varv till med knapparna eftersom texten hamnade fel igen... Så, finfint! Perfekt! Åh, vad bra det ser ut i Firefox! Nu ska jag kolla Chrome, Safari, Edge och Internet Explorer. Gaah, attans IE rendrerar texten någon pixel annorlunda i höjdled.

Näe, nu får det faktiskt vara. Jag skulle kunna lägga till ett undantag och justera texten annorlunda för IE, men enligt statistiken från Google Analytics är det endast några få procent av besökarna som använder IE. Jag. Orkar. Inte. Där går min gräns för hur länge jag kan fila på en knapp :-)