Pikslid vs Ems: kasutajad muudavad fondi suurust

Veebiarendajad armastavad head püha sõda, olgu see siis meie lemmikute JavaScripti raamistike või selliste põhimõtete üle nagu murede eraldamine. Üks, mis on mulle alati huvi pakkunud, on lahing CSS-i üksuste üle, nimelt pikslite ja suhteliste üksuste, näiteks remside ja emside vahel.

Aastaid on enamik veebidisainereid ja arendajaid mõõtnud asju pikslites. Neid on üsna lihtne mõista - üks piksel koodis kaardistab ühe piksli ekraanil või vähemalt vanasti. Kuid pikslid on absoluutne suurus, mis tähendab, et need ei muutu vastavalt kasutaja eelistustele (va brauseri suum, mis võib kõik alistada). See pole juurdepääsetavuse jaoks suurepärane. Sisestage ems ja rems, kaks fondi suuruse suhtelist ühikut, mis pakuvad juurdepääsetavuse eeliseid, mis puuduvad pikslites, kuid väidetavalt puudub nende intuitiivne semantika. Loomulikult on aastate jooksul olnud kümneid ajaveebi postitusi, kus on arutletud ühe või teise lähenemisviisi üle (Ben Fraini “Just Use Pixels” ja Nicolas Hoizey “Inimesed ei muuda oma brauseris vaikimisi 16 pikslist fondi suurust”, kui nimetada vaid mõnda neist) ).

Siin, Interneti-arhiivis, on meil mõlemal pool väljaannet mõned inimesed ja kui tekkis küsimus pikslitelt remsidele ja ems-ile liikumise kohta, polnud meil ühe või teise kohta piisavalt kindlaid tõendeid. Paljud vanad argumendid tuginevad testimata eeldustele; pikseliprobleem eeldab, et peaaegu keegi ei muuda oma brauseri või OS-i fondi suurust, rem / em toetajad aga eeldavad, et paljud inimesed teevad seda. Tundus, et kui me teeme otsuse, mis võib mõjutada meie kasutajate kasutuskogemust, peaks meil olema andmeid selle varundamiseks.

Küsimus oli „Mitu kasutajat sirvib Interneti-arhiivi peamist saiti vaikefondi suurusega, mis pole tavaline väärtus 16 pikslit?” Selle teadmisega teeksime kindlaks, kui palju kasutajaid mõjutaks suuruse määramine suhteliste ühikutega nagu rems / ems .

Allpool kirjeldatud metoodikat kasutades leidsime, et vastus on 3,08% meie kasutajatest. See on üsna suur arv, suurem kui enamik brauserite, nagu Internet Explorer, Edge või Opera Mini, turuosast.

Andmed

Kasutame Google Analyticsit (ehkki oma kasutajate privaatsuse kaitsmiseks tugevalt anonüümseks muudetud), seega otsustasime saata fondi suuruse kohandatud mõõtme kaudu, mis võimaldab mõnusat vaatajaskonna segmenteerimist.

| Suurus | Kasutajate protsent |
| ------- | ---------------- |
| 16 pikslit | 96,92% |
| 20 pikslit | 0,50% |
| 19,2px | 0,42% |
| 25,6 pikslit | 0,23% |
| 17 pikslit | 0,18% |
| 24 pikslit | 0,15% |
| 20,8 pikslit | 0,15% |
| 14,4 pikslit | 0,10% |
| 18 pikslit | 0,10% |
| 18,4 pikslit | 0,08% |
| 18,56 pikslit | 0,07% |
| 14 pikslit | 0,07% |

Nagu näete, on suurused laialt levinud, sealhulgas paar, mis on väiksemad kui 16 pikslit. See oli üllatav, kuna eeldasime, et ainus tegelik kasutusviis on nägemispuudega kasutajad, kes vajavad loetavuse jaoks suuremaid kirjasuurusi. Võimalik, et kasutajad seavad väiksemad suurused, et ekraanile rohkem sisu mahutada, võib-olla sellepärast, et nad kasutavad väikest monitori, või võib see olla tingitud brauserite vaikesätetest, mis pole 16 pikslit.

| Brauser | Kasutajate protsent |
| --------------------------- | ---------------- |
| Chrome (lauaarvuti) | 37,81% |
| Androidi veebivaade | 12,89% |
| Opera Mini | 10,88% |
| Firefox (lauaarvuti) | 9,17% |
| Samsungi Internet | 5,56% |
| Internet Explorer (töölaud) | 5,26% |
| Chrome (mobiil) | 5,16% |
| Androidi brauser | 4,35% |
| Safari (töölaud) | 3,26% |
| UC brauser | 2,35% |
| Ooper (töölaud) | 1,07% |
| Internet Explorer (mobiil) | 0,32% |
| Safari (mobiil / tahvelarvuti) | 0,29% |

Milliseid brausereid need inimesed kasutavad? Mõned siin olevad tulemused vastavad üsna täpselt elanikkonnale (näiteks Desktop Chrome), kuid Androidi Webview, Opera Mini, Samsung Internet ja Desktop IE puhul on ebaproportsionaalselt palju mitte 16 pikslit kasutajaid. Chrome'i ja Safari mobiiliversioon puudub esiviisikus. iOS Safari madalad numbrid on tõenäoliselt fondi suuruse kohandamise nõrga toetamise tagajärg. Eelmisel testimisel ei suutnud ma üldse leida viisi fondi suuruse muutmiseks (OS-i säte ei mõjuta brauserit)!

Kood

Idee on siin üsna lihtne: mul oli vaja välja selgitada, millist suurust brauser kavatseb kasutada ilma autori määratletud stiilideta, ja seada see GA kohandatud mõõtmeks. Kuid me kasutame Bootstrap-i, mis rakendab elemendi põhifondi suurust 62,5% (10 pikslit, kui vaikimisi on 16 pikslit).

Ma kaalusin kahte võimalikku lähenemisviisi:

1. number: arvutage stiil välja juurelemendi põhjal ja seejärel pöörake Bootstrapi 62,5% modifikatsiooni ümber.

const original = window.getComputedStyle (document.documentElement) .fontSize;
konstanumber = parssefloat (originaal, 10);
const unit = original.replace (/ (\ d *. \ d +) | \ d + /, '');
const defaultFontSize = (arv * 1,6) + ühik;

# 2: looge

ja määrake sellele keskmise suurusega fondi suurus, et lähtestada selle vaikeväärtus.

const div = document.createElement ('div');
div.style.fontSize = 'keskmine';
dokument.keha.appendChild (div);
const defaultFontSize = window.getComputedStyle (div) .fontSize;
document.body.removeChild (div);

# 2 näib olevat otsekohesem, kuna see ei sõltu maagilistest numbritest ega matemaatikast, kuid jätab välja kasutajad, kes võivad brauseri / OS-i sätete asemel seada kohandatud kirjasuuruse brauserilaiendite või kohandatud stiililehtede kaudu. See tähendab, et kui käitate seda testi saidil, mille juhts elemendile on juba seatud selgesõnaline piksli suurus (st kirjasuurus: 16 pikslit), võidakse teid sundida seda teed minema.

Arhiivi testi jaoks läksin 1. kohal. Sellel on siiski oma natuke ebamugavusi: Internet Exploreri vanematel versioonidel on ümardamisprobleeme, mille tulemuseks on Bootstrapi 62,5% suuruse fondi suuruse rakendamisel sellised väärtused nagu 9,92 pikslit, mitte 10 pikslit. Selle arvutuse ümberpööramisel saame lõpuks 16 piksli asemel 15,888 pikslit. Valisime GA-s 15,888 pikslise väärtuse jälgimise, kuid käsitlesime neid kasutajate analüüsimisel samaväärsena 16 piksliga.

Kui see kõik kokku pannakse, siis näeb see välja järgmine:

funktsioon setDefaultFontSizeCustomDimension () {
  // Ignoreeri väga vanu brausereid.
  if (! ('aknas' getComputedStyle '))) {
    tagasi;
  }
  // Hankige fondi suurus .
  const original = window.getComputedStyle (document.documentElement) .fontSize;
  // Tühistage Bootstrap CSS-is rakendatud suurus 62,5%.
  const numPixels = parseFloat (originaal, 10);
  const unit = original.replace (/ (\ d * \. \ d +) | \ d + /, '');
  const defaultFontSize = (numPixels * 1.6) + ühik;
  // Meie Analyticsi integreerimine on pisut erinev, kuid siin on viidamiseks standardstiil.
  ga ('set', 'dimension1', defaultFontSize);
}

Redigeerimine: kui teil on küsimus, miks ma ei mõelnud ka brauseri suumimisele, siis seetõttu, et tänapäevased brauserid käsitlevad suumimist, muutes „võrdluspiksli” suurust, muutes mitu reaalset pikslit üks CSS-i piksel kujutab. Nii et suum muudab elemendi suurust reaalsete pikslite osas, kuid jätab selle arvutatud väärtuse CSS-is samaks, mis oli enne, see tähendab, et meie mõõtmised töötavad lihtsalt suurepäraselt.

Sellise võrdluspiksli käitumise tulemusel on JS-is esindatud nii ekraani pikslite tihedus kui ka suumi tase sama väärtusega: window.devicePixelRatio. Mitte-Retina MacBook, mille suum on 200%, võib anda sama seadmePixelRatio väärtuse kui Retina MacBook - 100%, seega ei anna selle jälgimine meile palju teadmisi.

The Takeaway

Pärast seda on meie meeskond läbi viinud mõned kvalitatiivsemad uuringud selle kohta, kuidas kasutajad kipuvad kasutama selliseid funktsioone nagu brauseri suum ja kohandatud kirjasuurused ning praegu on Archive.org enamiku elementide osas üleminek suhtelistele ühikutele.

Ma julgustan teisi ettevõtteid ja mittetulundusühinguid sama testi tegema. Enamiku saitide jaoks on tõesti lihtne seadistada (eriti kui teie juurfondi suurus on juba suhteline) ja see annab selgeid tulemusi, mis aitavad teil kujundada ja arendust otsustada. Kui 2–3% (või rohkem!) Kasutajatest loodab kohandatud kirjasuurusele, peaksite seda teadma, et saaksite seda kasutaja eelistust toetada või teha teadliku otsuse seda mitte toetada. Midagi väiksemat teha on ausalt vastutustundetu, eriti arvestades, et suuremate kirjasuurustega kasutajad võivad neid suurusi kasutada nägemispuude kompenseerimiseks.

Tõenäoliselt on fantaasia loota, et see lõpetab pikslite ja remside / emide vahelise püha sõja. Ma eelistaksin, et veebiprofessionaalid kulutaksid oma aega, selle asemel, et üksteisega vaielda, kogudes tegelikke kasutajaandmeid ja langetades teadlikke otsuseid. Kuid siis jälle, kus on selles lõbu?