Rätta mig på ämnet "responsiv webbdesign"

Permalänk
Medlem

Rätta mig på ämnet "responsiv webbdesign"

Hej,

jag bygger min första hemsida och har lagt ut ett jobb till freelancare kring att få hemsidan responsiv då jag inte kan det och jag tror inte heller jag förstår det helt. Jag har läst en del tips, bloggar osv men alla har ju lite olika förslag.

Jag fick ett förslag från en freelancare. Jag gillar honom men får inte ihop hans val av brytpunkter. Han föreslår:

"There are 4 main breaking point.
First for mobile: 767px
Second for tablet: 991px
Third for mini desktop: 1440px
Forth for large desktop: 1920px and above"

Men jag hittade en bra hemsida som sammanställt Sveriges mest använda upplösningar från en massa hemsidor. De senaste 12 månaderna ser det ut som bilden .

Hur skulle ni lägga era brytpunkter utifrån sammanställningen? Fokus bör ju verkligen vara på mobiler nu för tiden, men även desktops. För mig är tablets inte lika viktigt.

Jag har någon tanke att ta snittet för varje kategori och lägga brytpunkten där. Alternativt lägga brytpunkterna precis vid största upplösningen för varje kategori = i mitt huvud blir det säkrast för att alla ska se okej ut. Finns det något bättre tankesätt?

MVH/Flamur

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem

De breakpoints han rekommenderar är rätt lika de som Bootstrap använder så de är nog inte helt tagna ur luften.

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Visa signatur

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Permalänk
Medlem

Typiskt webdesigner att anta att folk kör just deras sida i fullscreen
Samma med zoom och fonter.

Permalänk
Skrivet av Svensktiger:

Typiskt webdesigner att anta att folk kör just deras sida i fullscreen
Samma med zoom och fonter.

Är inte poängen med responsiv design att man utgår från bredden på fönstret (inte skärmen!) och väljer en lämplig design för sidan baserat på denna?

Permalänk
Medlem
Skrivet av Det Otroliga Åbäket:

Är inte poängen med responsiv design att man utgår från bredden på fönstret (inte skärmen!) och väljer en lämplig design för sidan baserat på denna?

Ja det är fönster-storlek man utgår från, inte skärmupplösning.

Visa signatur

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Permalänk
Medlem
Skrivet av Svensktiger:

Typiskt webdesigner att anta att folk kör just deras sida i fullscreen
Samma med zoom och fonter.

Vad menar du? 🤔

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem
Skrivet av Zajin:

De breakpoints han rekommenderar är rätt lika de som Bootstrap använder så de är nog inte helt tagna ur luften.

https://getbootstrap.com/docs/5.0/layout/breakpoints/

tusen tack för en bra sida att läsa på mer.

Men om man kollar deras förslag så stämmer dom ju inte med de upplösningar som vi i Sverige använder. Hur tokigt blir det? Borde man inte i praktiken bara kolla på statistiken och utgå från det när man sätter brytpunkterna? Och varför specifika pixels och inte bara, t.ex. 600? Då träffar man ju alla upplösningar under det så att säga... jag förstår inte. Är det någon vetenskap bakom eller är det bara godtyckligt så att säga?

PS. jag är total novis, så förstår om det blir närmast tramsiga frågor för er som kan det.

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem
Skrivet av flamur:

Vad menar du? 🤔

Att designa efter "breakpoints" som motsvarar fullscreen även på rätt höga upplösningar.
När sidan i själva verket bör se bra ut på allt över en viss min bredd.

Permalänk
Medlem

Fast det är väl skärmens storlek i cm/tum som är intressant, inte hur tätt dina pixlar sitter?

Moderna telefoner har sjukt hög upplösning. Vill du ha desktop på deras 5 tum?

Visa signatur

Processor: Motorola 68000 | Klockfrekvens: 7,09 Mhz (PAL) | Minne: 256 kB ROM / 512 kB RAM | Bussbredd: 24 bit | Joystick: Tac2 | Operativsystem: Amiga OS 1.3

Permalänk
Medlem
Skrivet av talonmas:

Fast det är väl skärmens storlek i cm/tum som är intressant, inte hur tätt dina pixlar sitter?

Moderna telefoner har sjukt hög upplösning. Vill du ha desktop på deras 5 tum?

CSS-pixlar är inte samma som fysiska pixlar. De definieras som 1/96-dels tum.

Permalänk
Medlem
Skrivet av cfj:

CSS-pixlar är inte samma som fysiska pixlar. De definieras som 1/96-dels tum.

Aha, det förklarar en del. Tack för info

Visa signatur

Processor: Motorola 68000 | Klockfrekvens: 7,09 Mhz (PAL) | Minne: 256 kB ROM / 512 kB RAM | Bussbredd: 24 bit | Joystick: Tac2 | Operativsystem: Amiga OS 1.3

Permalänk
Medlem
Skrivet av Svensktiger:

Att designa efter "breakpoints" som motsvarar fullscreen även på rätt höga upplösningar.
När sidan i själva verket bör se bra ut på allt över en viss min bredd.

hehe du menar säkert något väldigt smart på ämnet, men du använder för få ord för att jag som inte är insatt ska förstå. Tack för svaret iaf 😇

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem

Men är det någon som vet om min teori om att göra ett snitt av alla populära upplösningar och sedan göra breaking points utifrån det skulle funka? Eller blir det heltokigt?

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem
Skrivet av flamur:

Men är det någon som vet om min teori om att göra ett snitt av alla populära upplösningar och sedan göra breaking points utifrån det skulle funka? Eller blir det heltokigt?

Ja det blir antagligen tokigt.
Du bör inte utgå från skärmupplösningen, utan från storleken på det fönster i vilket saker visas. Vilket nästan alltid är mindre än skärmupplösningen.

Permalänk
Medlem
Skrivet av Erik_T:

Ja det blir antagligen tokigt.
Du bör inte utgå från skärmupplösningen, utan från storleken på det fönster i vilket saker visas. Vilket nästan alltid är mindre än skärmupplösningen.

Okej tusen tack för svaret. Då gör jag så att jag låter han utgå från sina egna brytpunkter så hoppas jag det blir bra även i mobil. Förstår dock inte varför lägsta brytpunkten skulle vara 767px när mobiler har mindre skärmar. Men det kanske blir snyggt i praktiken. Jag får livetesta mycket sen istället

Visa signatur

Primära datorn: Acer Swift 5 (i7)|Skärm: BenQ BL3200PT|Tillbehör: Logitech MX Master 3|Logitech Illuminated K810|HDD-docka 16TB

Permalänk
Medlem
Skrivet av flamur:

Okej tusen tack för svaret. Då gör jag så att jag låter han utgå från sina egna brytpunkter så hoppas jag det blir bra även i mobil. Förstår dock inte varför lägsta brytpunkten skulle vara 767px när mobiler har mindre skärmar. Men det kanske blir snyggt i praktiken. Jag får livetesta mycket sen istället

Det är ju (förhoppningsvis) inte en helt statisk design inom breakpointsen utan snarare en fråga om vilken layout man visar inom vissa spann.

Permalänk
Medlem

Jag jobbar som webbdesigner och använder 1920x1080 eller 768x1024 eller kanske annan upplösning för bilder. I vissa fall behöver jag använda en annan upplösning för t.ex. ikoner.
När hemsidan är klar går jag igenom hela projektet och granskar då båda desktop och mobil versionen, och då KANSKE dycker upp vissa saker på mobile versionen som behöver redigeras!

Dock använder jag mig av https://tinypng.com/ för att minska bild storlek (t.ex. en bild är 900 kb, blir typ 78 kb), storlek är viktig då den antingen minskar eller ökar hemsidans laddnings hastighet!