Som i 2020, det er 3,5 milliarder kroner smartphone-brukere i verden. Det er 45% av den globale bestanden. Som i 2019, folk får tilgang til internett med 9000+ distinkte enheter. Hver brukeren forventer at hver nettside tilgang de vil yte perfekt på sine mobile enheter. Dette betyr at nettstedet utviklere å designe nettsteder som vises på et mangfold av skjermstørrelser over hele verden.
med andre ord, de trenger en responsiv design.,
Men som hver designer vet, utføring av responsive design har til å begynne med å vite hvilke skjermstørrelser til å designe for. Denne artikkelen utforsker dette spørsmålet og drøfter de beste skrik størrelser for responsive design.
Hva er Responsive Design?
Responsiv web design refererer til en design strategi som skaper nettsteder som fungerer godt for mobil, nettbrett og stasjonære enheter. Nettsteder uten responsive design risikerer å støte fra seg et betydelig antall brukere – 80% av brukerne har hevdet at de vil avvise nettsteder som ikke fungerer godt på egen enhet.,
i Tillegg, Google ser på «mobile-vennlighet» som en parameter for rangering. For å sitere Google Webmaster Central Blogg,
«Starter 21. April (2015), vi skal utvide vår bruk av mobil-vennlighet som en rangering signal. Denne endringen vil påvirke mobile søk på alle språk i hele verden og vil ha en betydelig innvirkning på våre resultater. Derfor, brukere vil finne det lettere å få relevante og av høy kvalitet søkeresultater som er optimalisert for sine enheter.»
Så, hvordan kan man finne den ideelle responsiv skjerm-størrelser?,
Merk: for Å forstå hvorfor responsive design er integrert i nettstedet suksess, må man forstå den store og stadig økende arten av enheten fragmentering. Last ned vår E-Bok på enheten fragmentering å få den nyeste informasjonen på dette fenomenet.,
Bilde Kilde
i Henhold til den Verdensomspennende skjermoppløsning Statistikk (Nov 2018 – Nov 2019), den mest brukte vedtak er:
Gratis Responsive Test på Brukte Oppløsninger
Prøv å teste responsen av ditt nettsted på ekte enheter.
selvfølgelig, vekt på mobil-vennlighet betyr ikke at man forlater stasjonære enheter. Som figuren nedenfor viser, stasjonære enheter fortsatt utgjør en betydelig del av internett-bruk.,
Bilde Kilde
- Mobile – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
Ifølge Microsofts dokumentasjon,
Med et stort antall av enheten mål og skjermstørrelser på tvers av Windows-10 økosystem, snarere enn å optimalisere din UI for hver enhet, anbefaler vi å designe for et par viktige bredde kategorier (også kalt «stoppunkter»):
- Små (mindre enn 640)
- Medium (641px å 1007px)
- Large (1008px og større)
til Tross for denne informasjonen, må du huske at det er ingen standard skjerm størrelse for web-design., Avhengig av arten av nettstedet, men brukere kan bruke noen enheter som ikke tilbyr skjermstørrelser og oppløsninger som er nevnt ovenfor. Å identifisere riktig størrelse for web design, web investere i analytics. Finn ut hva målgruppen din er mest sannsynlig å bruke. Hvis disse enhetene ikke forholde seg til de nevnte oppløsning, for så å inkludere dem i blandingen.,
1-klikks Tilgang til Responsiv Kontrolløren Verktøyet
Beste Praksis for Gjennomføring av Responsive Design
Det blir mye enklere å lage en nettside for flere skjermstørrelser med følgende retningslinjer:
- Kjenner dine svake punktene: I responsive design, et stoppunkt er det «punktet» der en nettstedets innhold og utforming vil tilpasse seg på en bestemt måte for å gi best mulig brukeropplevelse. For å lage et nettsted responsiv, designere må legge til et stoppunkt når innholdet ser ut forskjøvet., Avhengig av antall enheter nettstedet blir justert til, flere brytningspunkter har å bli sett å sikre at det er respons. Se denne artikkelen på rask stoppunkter for å lære mer om dem og deres effektivitet i detalj.
- Opprett Væske Design: Væske design refererer til en design layout som kan endre (utvide og kontrakt) for å passe enheten viewport den kjører på. Et fast design layout vil undesirably forvrenge på hver viewport at de ikke er justert i forhold til., Arbeid på design-oppsett ved å bruke % – enheter, samt maks-bredder for å sikre at oppsettet passer mobile enheten viewports uten å bli for bredt på skrivebordet enheten viewports.
- Reduser Friksjon: Dette utgangspunktet betyr at utformingen skal være lett å bruke på flere enheter. Responsive design er ikke bare ta med hvordan et nettsted ser ut, men også hvordan det fungerer i forhold til tilgjengelighet og brukervennlighet. Å fokusere spesielt på små-tv med friksjon, fordi som skjermstørrelser redusere, web-elementer har mindre plass til å gjengi og bli mer sannsynlig å rykke ut og forvrenge.,
- Design, Mobil-Første: Siden friksjon er mer sannsynlig å skje på mindre skjermer, design med en mobil-første tilnærming. Det er vanskeligere å begrense skrivebordet layout for en mobil vindu mens du gjør det motsatte er enklere. Når du utformer mobile-første, designer omfatter det som er absolutt nødvendig for å gi en optimal brukeropplevelse.,
Her er noen måter å gå rundt med mobile-first design:
- Prioritere viktige meny-alternativer
- Fjern alle visuelle distraksjoner
- Optimalisere design for tapability – gjør alt for lett å trykke
- Eliminere unødvendige skjemaer og informasjon felter
- Markere den viktigste CTA
- Fremtredende tilbyr search og filter funksjoner
- Mer funksjonalitet, mindre å skrive: Tydeligvis er det å skrive er vanskeligere på mobile enheter enn på stasjonære enheter. Så det er fornuftig å minimere behovet for å skrive på mobil-versjoner av nettsteder., Bytt å skrive med bevisst å utnytte funksjoner på enheten, for eksempel GPS, QR-kode-leser, biometrisk ID, og lignende. Gjøre det enklere for brukerne å dele, e-post, eller ring relevante tall ved å plassere linker som starter nødvendige funksjoner. Husk at det beste responsive design innebærer å forenkle og fjerne upraktisk mobile interaksjoner.
- Test, test, test: Når en utvikler eller designer vet den beste skjermen størrelser for responsive design, de gjøre arbeidet og skape en responsiv nettside., Imidlertid, for å sikre at nettstedet faktisk gjør den måten det er ment å på enhetene som det har vært bygget for, er det behov for å bli testet for akkurat det. En enkel måte å gjøre dette på er å bruke en responsiv design checker. I stedet for å kjøre nettstedet gjennom individuelle enheter med forskjellige viewports, skriver du inn URL-adressen til den checker og se hvordan det ser ut på et utvalg av de nyeste enhetene på ulike, ofte brukte enheten oppløsning. Brikken knyttet ovenfor tilbyr responsive å sjekke om de nyeste mobile enheter, for eksempel iPhone X, Galaxy Note 10, iPhone 8 Pluss, og mer.,
Mens responsiv design kan virke vanskelig å gjennomføre, informasjonen i denne artikkelen søker å forenkle denne prosessen for utviklere og designere. Ved å gjøre det som er skissert ovenfor, blir det mye enklere å lage nettsteder som glede sitt publikum, uavhengig av hvilken enhet de bruker for å få tilgang til nettstedet.
Prøv Responsive Checker for Gratis