320, 768 ja 1024. Ovatko nämä numerot sinulle mitään?
Ei, se ei ole Da Vinci -koodi, ne ovat pikselien leveydet, joita monet suunnittelijat liittyvät mobiili-, tablet- ja työpöydän leveyksiin.
Ongelmani tällä on se, että matkapuhelin ei ole 320 pikseliä leveä, tabletini ei ole 768 pikseliä leveä ja työpöydän näyttö ei varmasti ole 1024 pikseliä leveä. Siellä on satoja eri näytön kokoisia eri laitteissa, mutta silti ajattelemme reagoivasta web-suunnittelusta 320, 768 ja 1024.
Olen nähnyt monia sivustoja, jotka käyttävät näitä kolmea raja-arvoa niiden malleihin ja yksinkertaisesti luo 3 staattista mallia, jotka sijaitsevat lähimmän leveyden keskellä.
Tämä on parempi kuin vanhanaikainen, staattinen, vain työpöydällä varustettu sivusto, koska se ainakin palvelee yhtä saraketta, yksinkertaistettua versiota mobiililaitteelle ja kosketusystävällinen versio tablet-laitteelle, mutta miksi sitten muut vieraantyyppiset koon muutat ottamatta niitä käyttöön huomioon?
Toki muotoilu toimii edelleen muilla kooilla, mutta mitä tapahtuu, kun sinulla on tabletti, joka on pienempi kuin 768? He saavat mobiilikokemuksen tablet-laitteella! Ja kun katselet sitä kannettavan tietokoneen näytöllä, joka on pienempi kuin 1024? Lähetämme ne vain tabletin ulkoasulle ja nauramaan heitä, koska heillä ei ole yhtä kolmesta näytön koosta, jonka olemme pitäneet kelvollisina.
Kun luot vastaavan asettelun, sinun on aina pyrittävä asettamaan mahdollisimman monta ulottuvuutta prosentteina. Tämä auttaa varmistamaan, että sisältösi kasvaa ja kutistuu tasaisesti eri ruudun koon mukaan ja se tehdään suhteessa siihen laitteeseen, jota sitä katsellaan. Tämä lähestymistapa varmistaa myös, että sisältösi täyttää aina 90% (tai niin paljon kuin määrittelet) näytön sijaan mahdollisesti 50% näytöstä, koska sisältö keskittyy näytön kokoon, joka on muutama pikseli pienempi kuin seuraavaan saatavilla oleva breakpoint.
Kun valitset rikkoutumispisteitä, sinun pitäisi aina tehdä päätöksiä sen mukaan, missä sisältö rikkoutuu, eikä laitteen näytön leveyttä. Sen sijaan, että luot suunnittelun ja muokkaat sitä sopivaksi iPadin näytölle, sinun on selvitettävä, millä leveydellä sisältösi alkaa kamppailla.
Minulla on tapana aloittaa 1400 leveä muotoilu ja hitaasti tehdä selaimesta pienempi, kunnes sisältö rikkoo ulkoasua tai lähestyy sen tekemistä. Se sitten määrittää seuraavan törmäyspisteen. Ei ole väliä onko se 1200, 800 tai 673, jos sisältö vielä toimii, miksi muuttaa ulkoasua?
Tulet huomaamaan, että tulet tekemään outoja raja-arvoja, kuten 477 tai 982, ja että sinulla voi olla 2, 6 tai 10 eri taittopistettä. Tarkoitus on, että sisältö päättää pikemminkin kuin halutut näytön koot, joita haluat katsella.
Kun erilaisten laitteiden ja näytön koon valikoima julkaistaan joka kuukausi, on mahdotonta määrittää houkuttelevien projektien joukkoa tiettyjä raja-arvoja. Totuus on, että vaikka käytämme muuttujaa, kuten ruudun leveyttä, määrittelemme reagoivien ulkoasujen, pyrimme tarjoamaan täydellisen asettelun jokaiseen kokoon, mutta seuraamalla muutamia edellä mainituista vinkkeistä voimme ainakin varmistaa, että sisältö näytetään aina parhaalla mahdollisella tavalla.
Mitä raja-arvoja käytät tyypillisesti? Vältätkö täysin raja-arvoja? Kerro meille kommentit.
Esitetty kuva / pikkukuva, leveä kuormituskuva kautta Shutterstock.