Hvad er den ideelle skærmstørrelse til responsivt design?

fra 2020 er der 3, 5 milliarder smartphone-brugere i verden. Det er 45% af den globale befolkning. Fra 2019 fik folk adgang til internettet med 9000+ forskellige enheder. Hver bruger forventer, at hvert websiteebsted, de får adgang til, gengives perfekt på deres mobile enhed. Dette betyder, at websiteebstedsudviklere skal designe websebsteder, der vises på et væld af skærmstørrelser over hele verden.

med andre ord har de brug for et lydhør design.,

men som enhver designer ved, skal udførelse af responsivt design begynde med at vide, hvilke skærmstørrelser man skal designe til. Denne artikel udforsker dette spørgsmål og diskuterer de bedste skrigstørrelser til responsivt design.

Hvad er responsivt Design?

responsivt webebdesign henviser til en designstrategi, der opretter websebsteder, der fungerer godt til mobil -, tablet-og stationære enheder. Websebsteder uden responsivt design risikerer at fremmedgøre et betydeligt antal brugere – 80% af brugerne har hævdet, at de vil afvise websebsteder, der ikke fungerer godt på deres enhed.,

derudover ser Google på “mobilvenlighed” som en parameter til rangering. For at citere Google Centralebmaster Central Blog,

“fra 21.April (2015) udvider vi vores brug af mobilvenlighed som et rangeringssignal. Denne ændring vil påvirke mobilsøgninger på alle sprog over hele verden og vil have en betydelig indflydelse på vores søgeresultater. Derfor vil brugerne finde det lettere at få relevante søgeresultater af høj kvalitet, der er optimeret til deres enheder.”

så hvordan finder man de ideelle responsive skærmstørrelser?,

Image Source

Ifølge den Verdensomspændende skærmopløsning Statistik (Nov 2018 – Nov 2019), de mest almindeligt anvendte opløsninger er:

selvfølgelig betyder vægt på mobilvenlighed ikke, at man opgiver stationære enheder. Som diagrammet nedenfor viser, udgør desktop-enheder stadig en betydelig del af internetforbruget.,

Kilde på Billed –

• Mobil – 52.03%
• Desktop – 45.17%
• Tablet – 2.,8%

Ifølge Microsoft ‘ s dokumentation,

Med et stort antal af enheden mål og skærmstørrelser på tværs af Windows-10 økosystem, snarere end at optimere din UI for hver enhed, anbefales det, at designe til et par vigtige bredde kategorier (også kaldet “breakpoints”):

• Lille (mindre end 640 pixels)
• Medium (641px at 1007px)
• Stort (1008px og større)

på Trods af denne information, så husk at der er ingen standard skærm størrelse til web-design., Afhængigt af arten af hjemmesiden, brugere kan bruge visse enheder, der ikke tilbyder skærmstørrelser og opløsninger nævnt ovenfor. Invester i analytics for at identificere de rigtige skærmstørrelser til webebdesign. Find ud af, hvad din målgruppe mest sandsynligt bruger. Hvis disse enheder ikke overholder ovennævnte opløsning, skal du inkludere dem i blandingen.,

1-Klik-Adgang til Responsive Checker Tool

Bedste Praksis for Implementering af Responsive Design

Det bliver meget lettere at designe en hjemmeside for flere skærmstørrelser med følgende retningslinjer:

• Kender din breakpoints: I responsive design et breakpoint er “point”, hvor et websteds indhold og design vil tilpasse sig på en bestemt måde for at skabe den bedst mulige brugeroplevelse. For at gøre et responsiveebsted lydhør skal designere tilføje et breakpoint, når indholdet ser forkert ud., Afhængigt af antallet af enheder, som siteebstedet justeres til, skal der indstilles flere breakpoints for at sikre, at det er lydhørhed. Se denne artikel om responsive breakpoints for at lære om dem og deres effektivitet i detaljer.
• Opret Fluid design: Fluid design refererer til et designlayout, der kan skifte (udvide og kontrakt) for at passe til enhedens vie .port, den kører på. En fast design layout vil uønsket forvrænge på hver vie .port, at de ikke er justeret til., Arbejde med design, layout ved at bruge % enheder samt max-bredder for at sikre, at layoutet passer mobile enhed viewports uden at den bliver for bred til stationær enhed viewports.
• reducer friktion: dette betyder dybest set, at designet skal være let at bruge på flere enheder. Responsivt design inkluderer ikke kun, hvordan et websiteebsted ser ud, men også hvordan det fungerer med hensyn til tilgængelighed og brugervenlighed. Fokuser især på friktion på små skærme, fordi når skærmstørrelserne falder, webebelementer har mindre plads til at gengive og bliver mere tilbøjelige til at krympe og forvrænge.,
• Design Mobile-First: da friktion er mere tilbøjelig til at forekomme på mindre skærme, skal du designe med en mobil-første tilgang. Det er sværere at indsnævre en desktop layout til en mobil vie .port, mens du gør det omvendte er lettere. Ved design af mobil-først inkluderer designeren det, der er absolut nødvendigt for at give den optimale brugeroplevelse.,

Her er et par måder at gå om med mobile-first design:

1. Prioritere vigtige menupunkter
2. Fjern alle visuelle forstyrrelser
3. Optimere design for tapability – gøre alt for let at trykke på
4. undgå unødvendige former og information felter
5. Fremhæve de vigtigste CTA
6. Fremtrædende tilbyder søge-og filterfunktioner

• Mere funktionalitet, mindre at skrive: Det er klart, at skrive er sværere på mobile enheder, end det er på stationære enheder. Så det giver mening at minimere behovet for at skrive på mobile versioner af websebsteder., Udskift indtastning med bevidst at udnytte enhedsfunktioner som GPS, readingr-kodelæsning, biometrisk ID og lignende. Gør det lettere for brugerne at dele, e-maile eller ringe til relevante numre ved at placere links, der starter de nødvendige funktioner. Husk, at det bedste responsive design indebærer forenkling og eliminering af ubelejlige mobile interaktioner.
• Test, test, test: når en udvikler eller designer kender de bedste skærmstørrelser til responsivt design, gør de arbejdet og opretter et responsivt websiteebsted., For at sikre, at websiteebstedet faktisk gør den måde, det er beregnet til på de enheder, det er bygget til, skal det testes for nøjagtigt det. En nem måde at gøre dette på er at bruge en lydhør designchecker. I stedet for at køre websiteebstedet gennem individuelle enheder med forskellige visningsports, skal du indtaste URL ‘ en i checkeren og se, hvordan den vises på en række af de nyeste enheder med forskellige, ofte anvendte enhedsopløsning. Checkeren, der er linket ovenfor, tilbyder lydhør kontrol på de nyeste mobile enheder som iPhone., Gala .y Note 10, iphone 8 Plus og mere.,selvom responsivt design kan virke vanskeligt at udføre, søger oplysningerne i denne artikel at forenkle denne proces for udviklere og designere. Ved at gøre det, der er skitseret ovenfor, bliver det meget lettere at oprette websebsteder, der glæder sit publikum, uanset hvilken enhed de bruger til at få adgang til dette websiteebsted.

  prøv Responsive Checker gratis