från och med 2020 finns det 3,5 miljarder smartphone-användare i världen. Det är 45 procent av den globala befolkningen. Från och med 2019 kom människor åt internet med 9000 + olika enheter. Varje användare förväntar sig att varje webbplats de kommer åt kommer att göra perfekt på sin mobila enhet. Detta innebär att webbplatsutvecklare måste utforma webbplatser som visas på en mängd skärmstorlekar över hela världen.
med andra ord behöver de en responsiv design.,
men som varje designer vet, måste köra lyhörd design börja med att veta vilka skärmstorlekar att designa för. Denna artikel utforskar denna fråga och diskuterar de bästa scream storlekar för lyhörd design.
Vad är responsiv Design?
responsiv webbdesign avser en designstrategi som skapar webbplatser som fungerar bra för Mobila enheter, surfplattor och stationära enheter. Webbplatser utan responsive design riskerar att alienera ett betydande antal användare-80% av användarna har hävdat att de kommer att avvisa webbplatser som inte fungerar bra på sin enhet.,
dessutom ser Google på ”mobilvänlighet” som en parameter för rankning. För att citera Google Webmaster Central blogg,
”Från och med april 21 (2015), Vi kommer att utöka vår användning av mobilvänlighet som en rankingsignal. Denna förändring kommer att påverka mobila sökningar på alla språk över hela världen och kommer att ha en betydande inverkan på våra sökresultat. Följaktligen, användare kommer att finna det lättare att få relevanta, högkvalitativa sökresultat som är optimerade för sina enheter.”
så, hur hittar man de perfekta responsiva skärmstorlekarna?,
Obs! För att förstå varför responsiv design är integrerad i webbplatsens framgång måste man förstå den stora och ständigt ökande karaktären av enhetsfragmentering. Ladda ner vår e-bok på enheten fragmentering för att få den senaste informationen om detta fenomen.,
Bildkälla
enligt den globala Skärmupplösningsstatistiken (Nov 2018 – Nov 2019) är de vanligaste upplösningarna:
gratis responsivt Test på vanliga upplösningar
prova att testa responsiviteten på din webbplats på riktiga enheter.
naturligtvis betyder inte betoning på mobilvänlighet att man överger stationära enheter. Som diagrammet nedan visar utgör stationära enheter fortfarande en betydande del av Internetanvändningen.,
Bildkälla
- Mobile – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
enligt Microsofts dokumentation,
med ett stort antal enhetsmål och skärmstorlekar över Windows 10-ekosystemet, i stället för att optimera ditt användargränssnitt för varje enhet, rekommenderar vi att du designar för några nyckelbreddskategorier (även kallade ”brytpunkter”):
- liten (mindre än 640px)
- Medium (641px till 1007px)
- stor (1008px och större)
trots denna information, kom ihåg att det inte finns någon standard skärmstorlek för webbdesign., Beroende på vilken typ av webbplats, användare kan använda vissa enheter som inte erbjuder skärmstorlekar och upplösningar som nämns ovan. För att identifiera rätt skärmstorlekar för webbdesign, investera i analytics. Ta reda på vad din målgrupp är mest sannolikt att använda. Om dessa enheter inte följer den ovan nämnda upplösningen, inkludera dem i blandningen.,
1-Click Access to Responsive Checker Tool
Best Practices for Implementing Responsive Design
det blir mycket lättare att designa en webbplats för flera skärmstorlekar med följande riktlinjer:
- Känn dina brytpunkter: i responsiv design är en brytpunkt den ”punkt” där en webbplats innehåll och design kommer att anpassa sig på ett visst sätt för att ge bästa möjliga användarupplevelse. För att göra en webbplats lyhörd måste designers lägga till en brytpunkt när innehållet ser feljusterat ut., Beroende på antalet enheter som webbplatsen är inriktad på, måste flera brytpunkter ställas in för att säkerställa att det är lyhördhet. Se den här artikeln om responsiva brytpunkter för att lära sig om dem och deras effektivitet i detalj.
- skapa Fluid Designs: Fluid design refererar till en designlayout som kan flytta (expandera och kontraktera) för att passa den visningsenhet som den körs på. En fast design layout kommer oönskat snedvrida på varje visnings som de inte är anpassade till., Arbeta med designlayouter genom att använda % – enheter samt max-bredder för att säkerställa att layouten passar mobila enheter utan att bli för bred på stationära enheter.
- minska friktionen: detta innebär i princip att konstruktionen måste vara lätt att använda på flera enheter. Responsive design inkluderar inte bara vad en webbplats ser ut, men också hur den fungerar när det gäller tillgänglighet och användbarhet. Fokusera särskilt på liten skärm friktion, eftersom skärmstorlekar minskar, webbelement har mindre utrymme att göra och blir mer benägna att förvränga och snedvrida.,
- Design Mobile-först: eftersom friktion är mer sannolikt att uppstå på mindre skärmar, design med en mobil-första tillvägagångssätt. Det är svårare att begränsa en skrivbordslayout för en mobil visnings medan du gör det omvända är lättare. Vid utformning av mobil-först innehåller designern vad som är absolut nödvändigt för att ge den optimala användarupplevelsen.,
Här är några sätt att gå om med mobil-första design:
- prioritera viktiga menyalternativ
- ta bort alla visuella distraktioner
- optimera design för tapabilitet – gör allt enkelt att knacka
- eliminera onödiga former och informationsfält
- markera Huvud CTA
- erbjuder framträdande Sök-och filterfunktioner
- mer funktionalitet, mindre att skriva: självklart är det svårare att skriva på mobila enheter än det är på stationära enheter. Så det är vettigt att minimera behovet av att skriva på mobila versioner av webbplatser., Byt ut att skriva med medvetet utnyttja enhetsfunktioner som GPS, QR-kodläsning, Biometriskt ID och liknande. Gör det lättare för användare att dela, e-post eller ringa relevanta nummer genom att placera länkar som startar de nödvändiga funktionerna. Tänk på att den bästa responsiva designen innebär att förenkla och eliminera obekväma mobila interaktioner.
- Test, test, test: när en utvecklare eller designer vet de bästa skärmstorlekar för lyhörd design, de gör arbetet och skapa en lyhörd webbplats., Men för att säkerställa att webbplatsen faktiskt gör hur den är tänkt att på de enheter som den har byggts för, måste den testas för exakt det. Ett enkelt sätt att göra detta är att använda en lyhörd design checker. Istället för att köra webbplatsen via enskilda enheter med olika visningsport, ange webbadressen i checker och se hur det visas på en mängd olika senaste enheter på olika, ofta använda enhetsupplösning. Checker länkade ovan erbjuder lyhörd kontroll på de senaste mobila enheter som iPhone X, Galaxy Note 10, iPhone 8 Plus, och mer.,
medan responsiv design kan tyckas svår att utföra, syftar informationen i den här artikeln till att förenkla denna process för utvecklare och designers. Genom att göra vad som beskrivs ovan blir det mycket lättare att skapa webbplatser som behaga sin publik, oavsett vilken enhet de använder för att komma åt den webbplatsen.
prova Responsive Checker gratis