vuodesta 2020 maailmassa on 3,5 miljardia älypuhelimen käyttäjää. Se on 45 prosenttia maailman väestöstä. Vuodesta 2019 lähtien ihmiset pääsivät internetiin 9000+ erillisillä laitteilla. Jokainen käyttäjä odottaa, että jokainen sivusto he käyttää kostan täydellisesti mobiililaitteilla. Tämä tarkoittaa, että verkkosivujen kehittäjien on suunniteltava verkkosivustoja, jotka näkyvät lukuisilla näyttökooilla eri puolilla maailmaa.
eli ne tarvitsevat reagoivan rakenteen.,
Mutta kuten jokainen suunnittelija tietää, suorittamista reagoiva suunnittelu on aluksi tietää, mitkä näytön koot suunnittelu. Tässä artikkelissa tarkastellaan tätä kysymystä ja käsitellään paras scream koot reagoiva muotoilu.
mikä on reagoiva muotoilu?
responsiivinen web-suunnittelu viittaa suunnittelustrategiaan, joka luo hyvin toimivia verkkosivustoja mobiili -, tabletti-ja työpöytälaitteille. Sivustot ilman reagoiva suunnittelu vieraannuttaa merkittävä määrä käyttäjiä – 80% käyttäjistä ovat väittäneet, että he hylkäävät sivustoja, jotka eivät toimi hyvin omilla laitteillaan.,
lisäksi Google tarkastelee ”mobiiliystävällisyyttä” rankingin parametrina. Lainaus Google Webmaster Central Blog,
”Alkaa 21 huhtikuu (2015), laajennamme meidän käyttää mobiili-ystävällisyys ranking signaali. Tämä muutos vaikuttaa mobiilihakuihin kaikilla kielillä maailmanlaajuisesti ja vaikuttaa merkittävästi hakutuloksiimme. Näin ollen käyttäjien on helpompi saada merkityksellisiä, laadukkaita hakutuloksia, jotka ovat optimoitu niiden laitteita.”
niin, miten löytää ihanteellinen reagoiva näytön koot?,
huomaa: ymmärtääkseen, miksi reagoiva muotoilu on olennainen osa sivuston menestystä, on ymmärrettävä laitteen sirpaloitumisen laaja ja alati kasvava luonne. Lataa e-kirja laitteen pirstaleisuudesta saadaksesi uusimmat tiedot tästä ilmiöstä.,
Kuvan Lähde
Mukaan Maailmanlaajuisesti Näytön Resoluutio Tilastot (Marraskuu 2018 – Nov 2019), yleisimmin käytetty päätöslauselmat ovat:
Ilmainen Reagoiva Testi on Yleisesti Käytetty Päätöslauselmat
Yritä testata reagointikykyä sivuston todellisia laitteita.
mobiiliystävällisyyden korostaminen ei tietenkään tarkoita, että työpöytälaitteista luopuisi. Kuten alla oleva kaavio osoittaa, pöytäkoneiden muodostavat vielä melkoisen osan Internetin käytöstä.,
Kuvan Lähde
- Mobiili – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
Microsoftin Mukaan asiakirjat,
valtava määrä laitteen tavoitteet ja näytön kokoa koko Windows 10 ekosysteemi, sen sijaan, optimoimalla UI kunkin laitteen, suosittelemme suunnittelu muutamia keskeisiä leveys luokat (kutsutaan myös ”raja-arvot”):
- Pieni (pienempi kuin 640px)
- Medium (641px että 1007px)
- Suuri (1008px ja suurempi)
Vaikka näitä tietoja, muista, että ei-standardi näytön koko web design., Sivuston luonteesta riippuen käyttäjät saattavat käyttää tiettyjä laitteita, jotka eivät tarjoa edellä mainittuja näytön kokoja ja resoluutioita. Jos haluat tunnistaa web-suunnittelun oikeat näyttökoot, investoi analytiikkaan. Selvitä, mitä kohdeyleisösi todennäköisimmin käyttää. Jos nämä laitteet eivät noudata edellä mainittu resoluutio, sitten sisällyttää ne sekoitetaan.,
1-Click Pääsy Reagoiva Checker Työkalu
Parhaat Käytännöt Reagoiva Suunnittelu
Se tulee paljon helpompi suunnitella sivuston useita näytön kokoa seuraavien ohjeiden mukaisesti:
- Tietää teidän raja-arvot: reagoiva suunnittelu, breakpoint on ”kohta”, jossa sivuston sisältö ja muotoilu mukautuu tietyllä tavalla voidakseen tarjota parhaan mahdollisen käyttökokemuksen. Jotta verkkosivusto reagoisi, suunnittelijoiden on lisättävä keskeytyspiste, kun sisältö näyttää väärältä., Riippuen siitä, kuinka monta laitetta sivusto on kohdistettu, useita keskeytyspisteitä on asetettava sen reagointikyvyn varmistamiseksi. Katso tämä artikkeli reagoiva breakpoints oppia niistä ja niiden tehokkuutta yksityiskohtaisesti.
- Luoda Nestettä Mallit: Nesteen suunnittelu viittaa design layout, joka voi siirtää (laajentaa, ja sopimus) sopivaksi device-viewport se on käynnissä. Kiinteä suunnittelu asettelu ei aiheettomasti vääristää jokaisen näköalapaikan, että ne eivät ole linjassa., Työskennellä suunnittelu asetteluja käyttämällä % yksiköt sekä max-widths varmistaa, että asettelu sopii mobiililaitteen näkymiä muuttumatta liian leveä työpöydälle laitteen viewports.
- vähentää kitkaa: tämä tarkoittaa käytännössä sitä, että rakenteen on oltava helppokäyttöinen useilla laitteilla. Responsiivinen muotoilu ei sisällä vain sitä, miltä sivusto näyttää, vaan myös sitä, miten se toimii esteettömyyden ja käytettävyyden suhteen. Keskitytään erityisesti pieni-näyttö kitkaa, koska kun näytön koko pienenee, web elementtejä on vähemmän tilaa tehdä ja tulee todennäköisesti muokkaamaan ja vääristää.,
- Design Mobile-First: koska kitkaa esiintyy todennäköisemmin pienemmillä näytöillä, muotoilu mobiilialustalla. On vaikeampaa kaventaa työpöydän asettelua mobiilinäkymään, kun taas kääntöpuoli on helpompaa. Mobile-firstiä suunniteltaessa suunnittelija sisältää sen, mikä on ehdottoman välttämätöntä optimaalisen käyttökokemuksen tarjoamiseksi.,
Tässä on muutamia tapoja, joilla voit mennä noin kanssa mobiili-ensimmäinen design:
- Priorisoida tärkeitä valikon vaihtoehtoja
- Poista kaikki visuaalisia häiriötekijöitä
- Optimoida suunnittelu tapability – tehdä kaiken helposti hyödyntää
- Poistaa tarpeettomia lomakkeita ja lisätietoja-kentät
- Korosta tärkein CTA
- Näkyvästi tarjoavat haku ja suodatin toiminnot
- Enemmän toimintoja, vähemmän kirjoittamalla: On selvää, kirjoittaminen on vaikeampaa mobiililaitteissa kuin se on työpöydällä laitteissa. On siis järkevää minimoida tarve kirjoittaa verkkosivustojen mobiiliversioihin., Korvaa kirjoittaminen tietoisesti hyödyntämällä laitteen toimintoja, kuten GPS, QR-koodin lukeminen, biometrinen tunnus ja vastaavat. Helpottaa käyttäjien jakaa, sähköposti, tai soittaa asiaankuuluvia numeroita asettamalla linkkejä, jotka käynnistävät tarvittavat toiminnot. Muista, että paras reagoiva suunnittelu edellyttää yksinkertaistamista ja poistaa epämukavia mobiili vuorovaikutusta.
- – Testi, testi, testi: Kun kehittäjä tai suunnittelija tietää parhaiten näytön kokoa, reagoiva suunnittelu, he tehdä työtä ja luoda reagoiva sivuston., Kuitenkin, varmistaa, että sivusto todella tekee, miten se on tarkoitus laitteissa se on rakennettu, se on testattu juuri, että. Helppo tapa tehdä tämä on käyttää reagoiva design checker. Sen sijaan käynnissä sivuston kautta yksittäisten laitteiden eri näkymäikkunoissa, kirjoita URL-osoite tarkistus ja nähdä, miten se näyttää erilaisia uusimpia laitteita eri, usein käytetään laitteen resoluutio. Checker liittyvät edellä tarjoaa reagoiva tarkistaa uusimmat mobiililaitteet, kuten iPhone X, Galaxy Note 10, iPhone 8 Plus, ja enemmän.,
Vaikka reagoiva suunnittelu voi tuntua vaikea toteuttaa, tiedot tässä artikkelissa pyritään yksinkertaistamaan tätä prosessia kehittäjät ja suunnittelijat. Tekemällä edellä kuvatun, on paljon helpompaa luoda verkkosivustoja, jotka miellyttävät sen yleisöä riippumatta laitteesta, jota he käyttävät päästäkseen kyseiselle verkkosivustolle.
kokeile responsiivista tarkistinta ilmaiseksi