Yksi tehtävä ajaa web-ammattilaisia ​​hämmennykseen enemmän kuin melkein mihin tahansa muuhun: testauskoe niiden suunnittelu toimii yhtä hyvin monissa selaimissa ja eri laitteissa.

Selainten ja foorumien luettelo, jolla varmistetaan, pysyy pidempään, ja suunnittelijoina hermostemme ovat suhteellisesti lyhyemmät; IE6 todennäköisesti on painajaisia ​​tulevina vuosina!

Silti työmme yhä laajemmassa tilanteessa on yhä tärkeämpää.

Tässä artikkelissa korostetaan tavallisimpia epäiltyjä testattaessa esiintyviä yleisimpiä ongelmia, ja selitetään, miksi taktiikka muuttuu pian. Koko näkökulma yhteensopivuustestaukseen voi muuttua.

Fantastic Five

Selaimen sodan aikana suunnittelijat joutuivat kärsimään jatkuvasta riitelystä Internet Explorerin ja sen kilpailijan välillä (jotkut asiat eivät muutu koskaan). Kääntäjä tuli, kun uudemmat selaimet sitoutuivat tukemaan web-standardeja, mikä vähensi vähitellen Internet Explorerin selainmarkkinoiden hallitsevuutta.

Ajat ovat muuttumassa. Matkaviestintälaitteiden ja uusien renderointimoottoreiden merkitys on lisännyt suunnittelijoiden halua estää tarve testata jokaisen kuviteltavissa olevan laitteen avulla.

Suunnittelijat turvautuvat nyt numeropelien pelaamiseen, yleensä testaamalla työtään viidessä tai kuudessa yleisimmässä selaimessa ja sitten pyytämällä peittoaluetta. Vaikka tämä tuntuu helpolta, se tuo mukanaan muutamia ongelmia, sillä toisin kuin tulostuksessa, yksi koko ei todellakaan sovi kaikkiin.

Selaimen markkinaosuudet. Lähde: Net-Applications.

Vaikka markkinoita hallitsevat viisi selausta, suunnittelijat eivät saa jättää huomiotta oranssia "muita" viipaleita. Vierailijoita muissa selaimissa on vielä majoitettava.

Avain, jolla verkkosivuston ihastuttava muotoilu esitellään tarkasti loppukäyttäjälle, on renderointimoottori. Voisi olettaa, että jos testasit verkkosivun suosituimmalla selaimella jokaiselle Trident-, Gecko-, Commit- ja Presto-renderöintimoottorille, voit jättää turvallisesti muiden laitteiden, jotka jakavat samoja moottoreita, koska olisit käyttänyt suurimman osan käyttäjistä .

Olen yleisesti samaa mieltä siitä, että testaus näissä selaimissa yksinään tarttuu ongelmiin, jotka näkyvät käyttäjälle, mutta testaaminen laajemmalla valikoimalla selaimia, laitteita ja järjestelmiä on sen etuja. On syytä tutkia mahdollisia ongelmia ja päättää, tarvitaanko lisätestejä, jotta vierailijoille saadaan paras mahdollinen kokemus.

Internet Explorerin, Firefoxin, Chromein, Safarin ja Oopperan kuvakkeet.

Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome ja Safari) ja Presto (Opera).


Ristipisteen ulkopuolella

Ilmeinen ongelma näinä päivinä on laite- (tai plug-in) riippuvuus, joka vaikuttaa selaimiin paitsi selaimen tasolla myös renderointitasolla. Applen uskolliset ovat varmasti tietoisia iPhonen ja iPadin Flash-ongelmista - ja koska Adoben ja Apple alkoivat toisiaan, olemme vielä kuulleet siitä.

Vaikka Flash käsittelee sisällön yleistä esittämistä yksinään, kokeilu vain suosituimmilla selaimilla ei välttämättä näytä ongelmia sen kanssa. Vaikka valtavirran tekniikat (sekä avoimet että suljetut) ovat vaarassa syrjäytyä, laajentaminen testipohja voi olla kriittinen.

Flash-käyttöinen verkkosivusto.

Salama tekee selaimen ulkopuolella, mutta ei jokainen selaimella voi käyttää tätä tekniikkaa.

Toinen asia on renderointimoottoreiden versiot . Uusimman ja parhaan selaimen käyttö on avain uusien tekniikoiden hyödyntämiseen, mutta vanhempien versioiden (etenkin Internet Explorerin erilaisten paholaiskartoitettujen versioiden) jatkuva käyttö vaatii, että rajoitamme itsemme myös uusimpien renderöintien lisäksi myös niille, jotka voivat silti toimia ympäristöissä, joissa ohjelmistojen päivittäminen olisi sopimatonta tai mahdotonta.

Vaikka yhteensopivuustilanteessa nykyisissä selaimissa testattaessa ei oteta huomioon vanhoja versioita selaimista, jotka käyttävät renderointimoottoreiden aikaisempia versioita.

Internet Explorer 6.0

Internet Explorer 6.0 käyttää Tridentin työasemaselaimen renderointipalvelimen vanhempaa ja väärennettyä versiota.

Näyttöongelmia voi ilmetä myös, jos laitteen ja alustan välillä on eroja. On sanomattakin selvää, että verkkosivustosi testaaminen erilaisilla matkapuhelimilla ja taskussaturoilla saattaa viedä sinut hulluksi, kun otetaan huomioon, miten erilaiset kaikki voivat näkyä.

Suunnittelu tällaiselle pienelle näytölle voi olla melkoinen tehtävä, varsinkin kun mobiililaitteiden yleissopimukset ovat vielä alkuvaiheessa. Tämä ongelma koskee myös työpöytäympäristöjä. Ei ole harvinaista, että esimerkiksi Windowsin ja Macin Firefox-versioiden välillä esiintyy vähäisiä renderointikysymyksiä, esimerkiksi huolestuttavia ajatuksia.

A List Apartin mobiiliversio.

A List Apart huolehtii niin paljon erilaisista eroista, että sillä on erillinen muotoilu mobiililaitteille.

Toinen avaintekijä, joka saattaa poiketa selaimesta selaimeen, on JavaScript-moottori. Aikaisimmilla päivillä ainoa kysymys JavaScriptista oli käyttää sitä.

Näinä päivinä selaimilla, joilla on sama visuaalinen renderointimoottori, on usein eri JavaScript-moottorit (Chrome ja Safari ovat täydellinen esimerkki). Käyttämällä useita selaimia benchmarking sivustosi kykyä tuottaa nämä upea jQuery käsikirjoitukset on yhtä tärkeää, varsinkin jos suunnittelussa on paljon toimivaa vuorovaikutusta.

Chrome Experiments -sivusto.

Chrome-kokeilut esittelevät Googlen selaimen suorituskykyä.

Ja lopuksi, aihe, joka saa jotkut hurraavat ja muut huokaavat: saavutettavuus! Monien ihmisten silmissä, saavutettavuus ja selaimen tekeminen verkkosivustolla eivät ole yhteydessä toisiinsa. Mutta on syytä huomata, että kun ihmiset vierailevat verkkosivustossasi, niiden esteettömyysohjelmisto saattaa pakottaa heidät käyttämään tietyn selainta, joka tukee tietokoneen näytönlukijaa tai sen esteettömyyttä.

Tällaisissa tapauksissa vähemmistö selaimia voidaan jättää huomiotta kokonaan. Muista, että suunnittelusi pitäisi toimia myös niille ihmisille, joiden tarpeet usein unohdetaan.

Opera-selaimet on rakennettu näytönlukijaan.

Operailla voi olla pieni markkinaosuus, mutta sen äänivalinnat voivat olla hengenpelastaja niille, joilla on erityistarpeita.


Pitkäaikainen hoito

Kun otetaan huomioon kaikki saavutettavuustarpeet, eri JavaScript-moottorit, monipuoliset ongelmat, erimielisyyksien erot, tekniset riippuvuudet, kuten Flash ja mobiili vallankumous, voidaan jättää huomiotta, kuinka paljon testausta tarvitaan. Tutustu kuitenkin kohdeyleisön tarpeisiin nähdäksesi, voisiko nykyisen testaustyön laajentaminen tuottaa pitkän aikavälin tuloksia.

Vietä aikaa kommunikoida kävijöiden kanssa. Ehkäpä voit tehdä kyselyn, jossa kysytään, mihin selaimiin ja laitteisiin he ovat, ja tutki sitten tilastosi nähdäksesi, ovatko he maininnut keinoja parantaa tai laajentaa verkkosivustosi vuorovaikutusta.

Saatat huomata, että tarvitset mobiilisuunnittelua tai ehkä iPhone-sovellus on innostunut tai saatat vain saada lisää vikailmoituksia vähemmistötietokoneille. Palautteen kannustaminen on ensiarvoisen tärkeää suunnittelun evoluutioprosessissa.

Piwik-selaimen tilastojen hallintapaneeli.

Tilastopaketit voivat antaa selkeän käsityksen siitä, mitkä laitteet on käytetty vierailemaan sivustossasi.

Tavoitteiden saavuttaminen yhä laajemmassa mittakaavassa on jokaisen sivuston omistajan harkitsemaan käytettävyyden yhteydessä. Hyvä viestintä luo emotionaalisen yhteyden vierailijoihin; he tuntevat, että heidän etunsa on vahvistettu ja heidän aikansa on hyvin käytetty, ja tämä voi saada napsautuksia asiakkaisiin.

Pysyminen asioiden päälle testausvaiheessa menee siis pidemmälle kuin visuaalisten virheiden korjaaminen. Laajempi testauskenttä voisi johtaa uusia ominaisuuksia ja ainutlaatuisia tapoja navigoida verkkosivuilla. Yksi palkinto voisi olla syvempi sidos sivustosi säännöllisiin kävijöihin ja faneihin.

Käynnistä moottorit

Miten laajennat testausprosessia on tämän artikkelin soveltamisalan ulkopuolella, mutta yksinkertaisin tapa parantaa sivustosi ulkoasua ja käyttökokemusta on varmistaa, että kaikki näyttää näyttävältä näytöltä.

Alla on luettelo monista mobiililaitteiden ja työpöydän selaimista, joiden avulla voit laajentaa horisonttia testiäsi aikana. Vaikka jotkut tekevät suunnittelustasi samanlaisia, näiden selainten pitäisi auttaa sinua selvittämään suoritettavien testien laajuus.

Luodaan lisää selaimia (ja joissakin saattaa jo olla olemassa), joten harkitse myös tulevaisuutta.

Järjestelmäratkaisut, joita yleisesti löytyy alustalaitteista.

Sekä työpöydällä että mobiililaitteilla on laaja valikoima renderointimoottoreita.

Tridentin, Geckon, Webkitin ja Preston kanssa rakennetut selaimet (samoin vanhemmat versiot Tasman, Mozilla ja KHTML) eivät ole tuottaneet muita mallipohjaisia ​​renderointimoottoreita, koska ne ovat hyvin rajoitettuja laitteita, jotka tukevat niitä.

Laitteita ja selaimia, joilla on ainutlaatuisia renderointimoottoreita (teksti, visuaalinen ja mobiili), joita ei ole mainittu tässä, voidaan testata erikseen ja ne voivat mahdollisesti lisätä suunnittelusi yhteensopivuutta.

Suosittelen alla lueteltuja selaimia jokaiselle alustalle. Macintosh-tietokonetta lukuun ottamatta, jotka käyttävät Tasmania, kaikki nämä käyttävät Tridentin renderointimoottoria:

Selaimet, jotka käyttävät Trident- tai Tasman-renderointimoottoria.


Kaikki nämä käyttö Gecko (aikaisemmin Mozilla) työpöydän renderointi moottori:

Gecko-renderointimoottoria käyttävät selaimet.


Kaikki nämä käyttävät Webkit-renderointimoottoria (tai Konquerorin tapauksessa KHTML-haarukka):

Webkit-renderointimoottoria käyttävät selaimet.


Koska Presto on oma alusta, ei ole mikään yllätys, että se rajoittuu Opera-projekteihin:

Selaimet, jotka käyttävät Presto-renderointimoottoria.

Yli sateenkaaren

Ehkä verkkosivustollasi ei ole virheitä. Ehkä se näyttää hyvältä kaikissa tilanteissa. Mutta jos harkitset yhteensopivuusvaatimusten laajaa laajuutta eri alustoilla, enää viisi suurta kuvaa tarkasti verkon käyttäjistä kokonaisuutena.

Jos otat pois vain yhden artikkelin tästä asiasta, ymmärrä, kuinka paljon kulutat enemmän aikaa vierailijoidesi tarpeiden analysoimiseen, sillä tämä auttaa sinua arvioimaan uudelleen testausvaihetta kattavampien skenaarioiden kattavaksi.

Käytä kullekin renderointilaitteelle ylimääräistä aikaa selaimissa, äläkä unohda seuraavia: muita käyttöjärjestelmiä, joilla saattaa olla eroja; muuntyyppiset laitteet (kuten matkapuhelimet), jotka saattavat olla hyvin erilaiset; ainutlaatuiset JavaScript-suorittimet, joilla on vaikutuksia nopeuteen; vanhemmat versiot selaimista; ja yleensä laajempi ulottuvuus, jota tarvitaan koodin kehittyessä ja muuttaa itse verkkoa.

Yhteenveto

Maailmassa, jossa ihmiset ovat halukkaita investoimaan aikaa, työtä ja rahaa tekemään verkkosivustoistaan ​​mahdollisimman ystävällisiä tarjoamalla hakukoneita ja sosiaalisia mediaita varmistaen, että suunnittelusi toimii (pikemminkin pikselin täydellisyyden sijaan - muistaa, verkko ei ole tulostaa) voi olla arvokkaampaa satoja tai tuhansia ihmisiä, jotka käyttävät verkkosivustoasi eri tavoin.

Se varmasti merkitsisi eroa houkuttelevien asiakkaiden ja turhautuneiden "Hi and goodbye" kävijöiden välillä.


Kirjoitettu yksinomaan WDD: lle Alexander Dawson

Miten menetät huolellisesti suunnitelluista malleista niin, että ne toimivat joustavasti? Aiotteko optimoida testaustyösi niin, että se on vähemmän rajoittava? Voisiko sivustossasi kannustaa enemmän kävijän palautetta sen suunnittelusta?