Suuri työpöytäkuva
720 pikselin vähimmäiskorkeus täyttää lähes koko näytön. Rajaa säiliö ja vertaa kuvan ja tekstin kahden palstan asettelua. Tarkista sizes ja puhelimen rajaus: tiedoston pakkaus ei korjaa sommittelua.
Perusteelliset käytännön oppaat
Responsiivisen ulkoasun epäjohdonmukaisuuksien tutkiminen
Arvioi otsikot, palstat, välit ja valokuvat lukutehtävien kautta: testausmenetelmä leveille näytöille, puhelimille ja jokaiselle kielelle.
Päivitetty :
Näppäimistön näppäimiä, joissa on useita merkistöjä. Dokumentaarinen taustakuva; se ei esitä Alexis Roux ZG:n toimeksiantoa tai laitteistoa. © Alexander-design · Lähde · CC0. Kokoa muutettu ja muunnettu WebP-muotoon; rajattu näyttö.
Missä ulkoasu estää lukemisen tai toiminnon suorittamisen?
Ylivuodon puuttuminen ei takaa tasapainoista sommittelua. Valtava otsikko, kolme korttia neljässä palstassa tai suuri kuva voivat peittää hyödyllisen tiedon. Yhdistä virhe CSS-sääntöön, korjaa komponentti ja testaa kaikki sitä käyttävät sivut. Ehdotetut leveydet ovat työmatriisi, eivät yleinen standardi.
Laadi matriisi
Sisällytä etusivu, osasto, pitkä tietosivu, hakutulokset, lomake ja työkalu. Kokeile 320, 390, 768, 1024, 1440 ja 1920 CSS-pikseliä sekä muuta leveyttä niiden välillä. Lisää pisimmät otsikot ja kaikki kirjoitusjärjestelmät: taittopisteiden välinen virhe voi jäädä kuvista huomaamatta.
Tutki tyylien kaskadi
Kirjaa selaimen työkaluista laskettu fonttikoko, riviväli, leveys, padding, margin ja vähimmäiskorkeus. Selvitä voittava sääntö ja tarkkuus. Yleinen h2-korjaus ei välttämättä vaikuta tarkempaan valitsimeen. Tarkista komponentin muunnelmat.
Tasapainota lukeminen
Vertaa otsikkoa johdantoon, väliotsikoihin ja korttitekstiin. Tarkista rivittyminen ja toiminnon sijainti. Rajaa koot ja sovita rivivälit kirjoitusjärjestelmään. Poista kiinteät korkeudet, jotka jättävät tyhjää lyhyen tekstin yhteyteen tai leikkaavat pitkän käännöksen.
Testaa palstat
Tutki kolmen, neljän ja viiden kortin ryhmät oikealla sisällöllä. Siirry yhteen palstaan ennen kappaleiden ahtautumista. Testaa pitkät osoitteet ja kentät. Säilytä selkeä paikallinen vieritys kaksiulotteisissa taulukoissa.
Tarkista valokuvat
Mittaa laatikko ja kuvasuhde sekä currentSrc ja siirretyt tavut. sizes kuvaa käytettyä tilaa: puoli sivua ei ole koko näyttö. Varmista olennaisen kohteen säilyminen rajauksessa, tilan varaavat mitat ja ensimmäisen näkymän alapuolisten kuvien viivästetty lataus.
Toista zoom ja vuorovaikutus
Testaa lukeminen 200 prosentin ja uudelleenasettuminen 400 prosentin zoomilla sopivalla näytöllä. Käy valikot, kysymykset ja kentät läpi näppäimistöllä. Tarkista kohdistus ja järjestys. Arabiassa tutki tasaus, suuntakuvakkeet ja latinalaiset merkkijonot. Tallenna tulokset osoitteen, kielen ja leveyden mukaan.
Tilanteet ja päätökset
Tyypillisiä tilanteita tarkistuksen suunnitteluun. Ne eivät kuvaa toteutettuja toimeksiantoja tai todellisia havaintoja.
Kolme korttia neljässä palstassa
Neljäs palsta jää tyhjäksi ja kappaleet ahtaiksi. Sovita ruudukko ja testaa kolme, neljä ja viisi kohdetta pisimmillä venäjän- ja suomenkielisillä otsikoilla.
Visuaalisesti oikea lomake
Kiinteä banneri voi peittää kohdistuksen tai virhe näkyä kaukana kentästä. Testaa virhe ja palautuminen näppäimistöllä. Tasaus ei todista toiminnon onnistumista.
Säilytettävä näyttö
- URL, kieli, CSS-leveys, zoom, selain ja paneelin tila.
- Virheen kuvakaappaus ja vastuulliset lasketut säännöt.
- Vertailukelpoinen kuva korjauksen jälkeen ja toiminnon tulos.
- Uudelleen testatut pohjat ja käännökset; jäljellä olevat viat erillään vahvistetuista korjauksista.
Viralliset lähteet
Aiheeseen liittyvät protokollat
Tarkistukset ennen johtopäätöstä
- Säilyvätkö sarakkeet ja välit johdonmukaisina suodatetussa kortissa, pitkässä käännetyssä otsikossa ja virheellisessä lomakkeessa?
- Sopiiko selaimen valitsema kuvatiedosto esitettyyn leveyteen lataamatta suurinta versiota tarpeettomasti?
- Voiko zoomauksella ja näppäimistöllä lukea ja toimia ilman kiinteän elementin alle piiloutuvaa tekstiä?
Usein kysytyt kysymykset
Taittopiste jokaiselle puhelimelle?
Valitse pisteet sisällön toimivuuden mukaan. Laitemallit täydentävät matriisia eivätkä oikeuta sääntöjen mielivaltaista lisäämistä.
Riittääkö 16 pikseliä aina?
Ei. Fontti, kontrasti, riviväli, rivin pituus ja zoom vaikuttavat yhdessä. Testaa oikea teksti ja sen lukijat.
Voiko lohkon piilottaa puhelimessa?
Vain jos tarvittava tieto säilyy saatavilla. Vertailun tai lomakkeen järjestäminen uudelleen on usein parempi kuin selitysten poistaminen.
Miksi jokainen kieli?
Pituus, kirjoitusjärjestelmä, rivittyminen ja suunta muuttuvat. Ranskankielinen pohja voi rikkoutua suomenkielisestä otsikosta tai arabian sisään tulevasta latinalaisesta osoitteesta.