Frontend-utvecklare - vilken skärmbredd?↔️

Tjo igen!

Jag har en rätt så öppen och allmän fråga om skärmbredd när det kommer till frontend-utveckling. Jag frågar för jag blir smått förvirrad över dessa två webbplatser som pratar om de vanligaste skärmupplösningarna för mobiltelefoner:

https://www.statista.com/statistics/1445438/leading-mobile-sc...
https://gs.statcounter.com/screen-resolution-stats/mobile/wor...

Båda verkar hamna på någonstans runt 400px skärmbredd. Men sedan tittade jag på mina två Android-telefoner, en billig OnePlus och en 5-lax Xiaomi mobil för några år sedan. Förstnämnda har skärmbredd på 720px och andra runt 1000px och i designfiler jag fått från nuvarande Uppdragsgivare så användes en iPhone X med en skärmbredd på cirka 1100px.

Dessa är ju flera gånger ifrån cirka 400px skärmbredd? Samtidigt så jag i båda länkarna om att "Övriga mobilupplösningar" motsvarar cirka 25-35 % av alla mobilupplösningar och frågan är då om det är dessa som utgör de mer "moderna" skärmupplösningarna hos mobiler idag?🤔

Mina två mobiler är ju inom "budget"-prisklassen och dyrare bör ju per automatik antingen ha lika hög skärmbredd eller ännu högre som exempelvis iPhone med sina cirka 1100px skärmbredd och cirka 2000px skärmhöjd? Jag är dessutom inte en flitig mobilanvändare så jag har ont om erfarenhet att experimentera med responsiv design trots att hela frontend-utvecklingen för det mesta bygger på "Mobile first" designtänk?🤣

Hursomhelst funderar jag på att utgå från 400px skärmbredd och ta det från där. Eller finns någon annan rekommendation vad för startpunkt i form av brytningspunkt(er) för mobiltelefoner att utgå ifrån? Webbplatsen jag utvecklar just nu så är det med 100 % säkerhet att dess primära slutanvändare kommer att använda mobiltelefoner (inte surfplattor) för att ta del av webbplatsen, och frontend-utveckling är som tidigare sagt min akilleshäl än så länge som fullstack-utvecklare på nyutexaminerad juniornivå.

Mvh,
WKF.

Tack för svaret!

Tänker du på "Responsive Mobile Design" som finns i bland annat FireFox? Återger den då samma rendering i den upplösningen likt mobila webbläsarappar skulle göra i liknande upplösningar (t.ex. FireFox på PC vs FireFox app på Android) eller kan det finnas avvikelser här så att återgivningen inte blir till 100 %? Just med hur den renderar padding, margin och flex-/grid-beteendet är vad som kan vara oroväckande då det är sådant som oftast förstör ens tänkta utseende.

Mvh,
WKF.

Tack så mycket för svaren igen!

Med annan rendering size, syftar du på pixels per inches hos mobiltelefoner? Tänker du på breakpoints här från Bootstrap?: https://getbootstrap.com/docs/5.0/layout/breakpoints/ Jag använder Tailwind och det tycks köra på lite högre breakpoints: https://tailwindcss.com/docs/responsive-design (Bootstrap sm ≥576px vs Tailwind sm ≥640px). Detta är ju en hel del mycket högre än 400px som jag funderade på och även över det världsliga snittet. Det verkar som om dessa brytpunkter utgår från rätt så "moderna" mobilskärmar då?

Jag använder Tailwind så jag får gratis nollställning tack vare det! Det är också halva anledningen till att jag kör Tailwind: så slipper jag bråka med att hitta den perfekta normaliserings-CSS-filen innan jag börjar min CSS. Och vill jag ha någon CSS som är mer komplex än vad Tailwind erbjuder så kan jag bara inkludera en ytterligare CSS-fil.

Aha, ja, det låter sannolikt då. I detta sammanhang är det med 100 % säkerhet att slutanvändarna kommer att vara köpstarka personer bosatta i Sverige eller åtminstone med likartad konsumtionsförmåga som den gemene medelinkomstsvensken. Då låter runt 500px som max-width storlek lämpligt då denna webbplats är tänkt att vara mobilexklusiv?🤔

Det jag tänker är att bestämma mig för en min-width och max-width för diverse containers, först den huvudsakliga containern för innehållet och sedan blir det varierande beroende på innehållet inuti den huvudsakliga containern. Å ena sidan vill jag inte orsaka exakt samma utseende vilket kanske blir knas på vissa unika mobilskärmar så min-width och max-width ger då lite flexibilitet? Sedan får jag använda flex-wrap smart så inte t.ex. fyra items gör att bara det fjärde hamnar på ny rad utan att det då blir två per rad. Då blir det alltså en div med två divs där två items finns inuti vardera div och yttre div är den med flex-wrap?🤔

Mvh,
WKF.

Tack så mycket för de data!

Jag kommer att utgå från 360px min-width då och en max-width för bredden av en iPhone X för den delen av webbplatsen som är 100 % tänkt att besökas och användas mobilt. Och så får jag ta ett samtal med min Uppdragsgivaren och för- och nackdelarna med dessa val och komma fram till överenskommelse om slutgiltiga skärmbredder för mobila enheter.

Mvh,
WKF.

InDesign-filer med inkluderade "Documents fonts" och vissa av "Links"-filerna.

Jag funderar på att hjälpa grafikern att lära sig grundläggande Figma, är ju inte så mycket mer än drag n' drop och att betrakta allt som Frames!

Mvh,
WKF.

Tack återigen för svaret!

Nuvarande pågående Uppdragsgivare är ett tvåmannabolag i form av ett "familjeföretag". Trots alla mina inlägg om det pågående uppdraget så är denna Uppdragsgivare mycket flexibel och mycket öppen för mina (förändrings)förslag då jag uppfattar det som att de har stort förtroende för mig och respekterar min (begränsade(?)) professionella IT-kompetens.

Uppdragsgivaren blev mycket nöjd med mitt examensarbete från mitt tvååriga Webbutvecklingsprogram sedan ett par månader tillbaka så något värde tillför jag trots allt åt Uppdragsgivaren annars hade jag inte fått detta monetära uppdrag i efterhand. Jag säger detta för jag är fullt medveten om att på internet finns det synpunkter på att tacka ja till IT-uppdrag från icke-IT-insatta bolagskunder.

Jag har med 100 % självmedvetenhet valt att "balansera på slak lina" där jag tänker "löpa linan ut" och än så länge är "balansen" mer eller mindre perfekt!

Än så länge har jag bara arbetat med JPG, PNG, GIF, men inga SVG-filer då jag har sagt att SVG-filer - i egenskap av vektorgrafik - kan utgöra säkerhetsrisker (tänker på faktumet att WordPress "out of the box" ej tillåter uppladdning av SVG-filer utan där krävs det insticksmoduler i efterhand) då skadlig kod kan bakas in i SVG-filerna.

Jag är medveten om att en fysisk pixel på en enhet inte nödvändigtvis är lika stor som en fysisk pixel på en annan enhet, t.ex. 32" 1080p vs 24" 1080p bildskärmar varav ppi-konceptet. Under det skarpa testkörandet av webbappen från i fredags så såg jag att på fyra olika mobilenheter så såg webbappen tillräckligt bra ut rent "pixelmässigt" talat!

Mvh,
WKF.