Hjælp til salg (Ikke internet)

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Fri, 24 May 2013 13:55:01 GMT

Teddy Carlsen:

Jeg har forstået at det er dette Michael forsøger at opnå: Eksempel

Teddy

- Lader du det ligge oppe til andre, eller skal jeg smide en test side op? Hvis der nu skule være en med samme problem, som jeg havde. Kan se der er nogle der abonnere på svar, så det kan jo være der lige pludselig kom en forbi.

Mvh. Michael

Svar: Responsive "fuld brede" baggrunde

Jacob Lauritzen — Wed, 22 May 2013 19:11:19 GMT

Michael Bay Sørensen:

Jacob Lauritzen:
Hvis filstørrelse er et problem kan du jo med fordel gøre brug af media-queries og forskellige billeder, sådan så skærme med fx 1366 x 768 henter billedet i samme størrelse, og derved optimerer load-tider på 2 måder; den skal ikke hente ubrugelige bytes, og den skal ikke bruge processor-kraft på at nedskalere billedet.

Ja lige præcis. Det havde jeg faktisk også tænkt mig at gøre helt individuel til "alle" opløsninger. Således at mobile brugere ikke loader et billede i så høj en opløsning.

Mit problem bestod faktisk egentlig i denne "fulde bredde" som der ikke gjorde som jeg mente den sku. Det skalerede mærkeligt med mine forsøg, men Teddy gjorde et fantastisk arbejde.

... men tusind tak for at gøre mig opmærksom på det :)

Det lyder godt - held og lykke med det!

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Wed, 22 May 2013 19:06:05 GMT

Jacob Lauritzen:
Hvis filstørrelse er et problem kan du jo med fordel gøre brug af media-queries og forskellige billeder, sådan så skærme med fx 1366 x 768 henter billedet i samme størrelse, og derved optimerer load-tider på 2 måder; den skal ikke hente ubrugelige bytes, og den skal ikke bruge processor-kraft på at nedskalere billedet.

Ja lige præcis. Det havde jeg faktisk også tænkt mig at gøre helt individuel til "alle" opløsninger. Således at mobile brugere ikke loader et billede i så høj en opløsning.

Mit problem bestod faktisk egentlig i denne "fulde bredde" som der ikke gjorde som jeg mente den sku. Det skalerede mærkeligt med mine forsøg, men Teddy gjorde et fantastisk arbejde.

... men tusind tak for at gøre mig opmærksom på det :)

Svar: Responsive "fuld brede" baggrunde

Jacob Lauritzen — Wed, 22 May 2013 18:58:33 GMT

Hvis filstørrelse er et problem kan du jo med fordel gøre brug af media-queries og forskellige billeder, sådan så skærme med fx 1366 x 768 henter billedet i samme størrelse, og derved optimerer load-tider på 2 måder; den skal ikke hente ubrugelige bytes, og den skal ikke bruge processor-kraft på at nedskalere billedet.

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Wed, 22 May 2013 18:22:29 GMT

Teddy Carlsen:

Jeg har lavet mit eksempel om, med det billed der er 2560*1600px og fuld kompression i JPG og det giver en filstørrelse på 235 kb. alt efter hvor megt grafik der ellers er på siden så er det ok.

Men på en retina skærm vil det blive strukket, men det kan formegentligt ikke ses.

235 kb er liiiiiige 100 for meget. Faktisk vil det være endnu federe hvis den kom under 100, men det er jo ønske tænkning! :-)

Det skal jeg nok sidde og lege med.

Du skal hvert fald ha' mange tusinde tak. Jeg tror du nailede den!

Jeg har tjekket på:

Mobil:
iphone 4g
iphone 5g
android (samsung galaxy s3)
windows phone (lumia et eller andet)
nokia n9

Desktop:
pc - windows 7 full hd
pc - linux 1376 x 768
mac 13" retina - 1680 x 1050

Tablet:
Apple Ipad 4th generation retina - 2048 x 1536

... og her ser det PERFEKT ud. Den skalere op og ned i frugterne, men det kommer man ikke så tydeligt til at kunne se. Der kommer en masse indhold over, med en gennemsigtig "div"

Mange tusind tak (igen, hehe) - det hjalp mig MEGET!

De bedste hilsner

Michael Bay Sørensen

Svar: Responsive "fuld brede" baggrunde

Teddy Carlsen — Tue, 21 May 2013 19:43:05 GMT

Media queries er ikke en silver bullit, slet ikke når udviklingen går i retning af mobiler og tablets med høj opløsning.

Som det er nu kan man ikke se forskel på en mobil en tablet hvis de begge er i fuld hd med media queries.

Udgangspunktet for responsivt design har været at mobiler havde den mindste opløsning, tablets lidt større og computere den største, men virkligheden ser bare noget anderledes ud.

Den eneste løsning der er på det problem er at lave querys ud fra PPI, men det er der ikke support på endnu.

Men opløsnings ræset vil se en ende, da det på et tidspunkt ikke er muligt at se forskel med det menneskelige øje. Det giver ikke meget mening at have en 2K telefon, eller TV for den sags skyld selvom fabrikanterne gerne vil pushe de høje opløsninger. Det handler mest om at det er der "slaget" står lige nu, men jeg tror ikke det er noget slutbrugere vil betale for.

Det er lidt som 3D, til hjemmebrug, det var det hotteste for nogle år siden, nu bliver det ikke markedsført ret meget mere.

Teddy

Svar: Responsive "fuld brede" baggrunde

Jens Andersen — Tue, 21 May 2013 17:08:40 GMT

Michael Bay Sørensen:
Metoden så baggrunden ALTID er "ligned" (fixed?) til både top, bund og side. Ingen scroll, og så skal den tilpasse sig i forhold til størrelsen på skærmopløsning. Jeg er klar over at det sikkert kan give nogle problemer på mobilen, eller hvad?

Du kan jo vælge at ændre billedet med media queries, sådan at det ændrer størrelse i forhold til det aktuelle medie det ses på. På den måde vil det tage kortere tid at load'e hjemmesiden på mobiltelefoner, tablets og mindre skærme på PC'ere.

Billedet vil dog afhængig af kvalitet, stadig tage lang tid at load'e hvis det er stort.

Jeg ville nok vælge at lade være med at have et stort baggrundsbillede og så have noget grafisk baggrund, der kan gentage sig i css, sådan at det ikke tager tid at load'e.

I øvrigt synes jeg ikke det er mange responsive hjemmesider, der har et stort baggrundsbillede, de fleste har bare noget kontur.

Man kan forøvrigt også lægge flere baggrundsbilleder ind i det samme tag og placere dem forskelligt, sådan at de altid er hvor de skal være...

mvh Jens Andersen

Svar: Responsive "fuld brede" baggrunde

Teddy Carlsen — Tue, 21 May 2013 16:32:17 GMT

Ja det er fil størelsen jeg mener.

PNG er ikke det der giver det bedste resultat i forhold til størrelse og kvalitet.

Jeg har lavet mit eksempel om, med det billed der er 2560*1600px og fuld kompression i JPG og det giver en filstørrelse på 235 kb. alt efter hvor megt grafik der ellers er på siden så er det ok.

Men på en retina skærm vil det blive strukket, men det kan formegentligt ikke ses.

Teddy

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Tue, 21 May 2013 16:13:04 GMT

Ahh... Teddy, Det kan være du mener filstørrelsen? :) Men det er ikke det "store problem"

Jeg prøver at optimere størrelsen på billederne bagefter. Der er nogle fantastiske værktøjer på internettet, der kan reducere filstørrelsen på billeder med op til 70%, næsten uden at miste kvalitet. (... og uden at røre ved opløsningen)

http://compresspng.com/

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Tue, 21 May 2013 16:10:55 GMT

Teddy Carlsen:

De billeder du har lagt op er så rektangulære, og det er godt, da de så ikke bliver så forvrængede. Men størelsen er et problem.

Hmm. Lige nu er de jo bare skaleret op. Sådan så man har det samme i alle sider, hvis du forstår. At størrelsen på billedet, er lidt anderledes er vel ikke et stort problem?

Jeg mener. Det gør jo ikke noget at på f.eks. Retina enheder, så læser den det store billeder, som ser ud som den gør (skaleret op, og helt til kanten)
Så på f.eks. enheder med en opløsning på 1024x768 læser billedet som er på 1024x768. Eller det kan være det er en dum idé?

Mvh. Michael

Svar: Responsive "fuld brede" baggrunde

Teddy Carlsen — Tue, 21 May 2013 15:31:42 GMT

Ja, jeg mener selvfølgelig over

De billeder du har lagt op er så rektangulære, og det er godt, da de så ikke bliver så forvrængede. Men størelsen er et problem.

Teddy

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Tue, 21 May 2013 15:09:01 GMT

Teddy Carlsen:
Hvis en side loader på under 2 sek. opfattes den som værende langsom.

Vi er enige om at 2 sekunder er langsom for en hjemmeside. Den skal helst være i ms, men jeg læser det som om du mener alt under 2 sekunder er langsomt. Du mener vel over her, gør du ikke?

Svar: Responsive "fuld brede" baggrunde

Michael Bay Sørensen — Tue, 21 May 2013 15:07:21 GMT

Teddy Carlsen:

Jeg har forstået at det er dette Michael forsøger at opnå: Eksempel

Teddy

Jeg tror faktisk den er LIGE der!

Nu har jeg haft en travl dag her efter pinsen, så jeg har ikke fået tid til at teste noget af det i har skrevet. Men jeg har hurtig lagt billederne op i forskellige opløsninger. Tager hjem fra kontoret her om en halv time, også kigger jeg på det i aften.

http://www.mbstech.dk/test/

Mvh. Michael

Svar: Responsive "fuld brede" baggrunde

Teddy Carlsen — Tue, 21 May 2013 10:49:24 GMT

Det kan hjælpe noget, men man kan stadig komme til at hente et 1920 pixel bredt billede til en telefon hvis den køre fuld HD.

Så der er stadig brug for at billedet fylder så lidt som muligt, hvis det er på en retina skærm vil et stort billed også blive loadet med forsinkelse hvis det fylder meget.

Hvis en side loader på under 2 sek. opfattes den som værende langsom.

Teddy

Svar: Responsive "fuld brede" baggrunde

Mikael Boel Laursen — Tue, 21 May 2013 10:38:41 GMT

Teddy Carlsen:

Det forstår jeg ikke, med en fixed baggrund og cover er baggrunden fyldt ud og er på samme sted, og det resterende indhold scroller henover??

Hvis du har flere div efter hinanden, med hver sin baggrund som man kan scrolle til, er det ikke nødvendigt at bruge fixed, det er kun nødvendigt hvis der er scrollbar på den pågældene div??

Har du ikke et eksempel??

Det er en del af designet, som skal ses for at forstås. Jeg kan dog desværre ikke vise dig et eksempel endnu, men det kan være du falder over siden en dag, når den smides online.

Teddy Carlsen:
Nu har han jo et meget specifikt problem, og er faret vild i forskellige løsninger, så endnu en som ikke hjælper ham er ikke så smart tværtimod.

Igen, der er flere måder at opnå hvad han efterlyser. At min løsning ikke ramte plet, er så bare ærgeligt.