display: none

Ja da. Indholdet af en display:none div overføres til klienten/browseren, som derefter kan vælge at slå display til igen.

Skal du spare på overførte bytes, skal du fra serversiden sørge for at det ikke bliver sendt med.

men hvad ville du gøre, hvis du havde noget du ville slå fra som ikke skal ses på en mobil? vi taler om responsivt design ikke separat mobil version.

display none er netop en dårlig funktion i den sammenhæng hvis den alligevel loader indholdet.

Skal det være responsivt, så har du ikke andre muligheder. Hvis du vælger ikke at sende f.eks. en desktop-menu til klienten ved mobilstørrelser, så er det ikke længere en responsiv side, så er det to forskellige sider.

Men der er altså heller ikke noget negativt, performance-mæssigt, ved at sende det ekstra data. Det er jo kun HTML, som fylder forsvindende lidt, og browseren bruger ikke regnekraft på at rendere elementer der er display: none;

Det eneste problem er, at søgerobotter som Google læser display:none'et indhold, så den kan opfatte det som dobbeltindhold og give dig værre rating. Det betyder dog ikke noget for navigation, som det som regel er. Men hvis du kan bruge CSS til at lave et element om til mobiludgaven i stedet for at skjule det og vise et andet, er det bedre.

det er rigtigt.

mit eksempel var også pivringe, nu jeg lige kigger igen.

jeg har 10 billeder på forsiden som primært trækker tænder i forhold til undersider og på mobilsiden har jeg kun behov for et af de billeder. men mobile enheder loader jo alligevel alle selvom de bare er sat til display none.

billederne er ikke en del af designet som sådan men blot billeder der trækkes ud af databasen..

hvad mener du med det sidste?

"Men hvis du kan bruge CSS til at lave et element om til mobiludgaven i stedet for at skjule det og vise et andet, er det bedre" ?

jeg vil ikke oplyse urls men jeg har altså stødt på en hjemmeside som har et responsivt design, men på en anden måde. urls på hele siden er altid det samme, men selve kildekoderne er tydeligvis lavet om. så om ser det på desktop/mobil er adressen den samme, men kildekoden er optimeret til enheden man kigger fra.

selve stien til mobil-css'en vises ikke på desktop versionens kildekode og omvendt.  hvordan kan det stå til ?

device detection på serveren - så kan man servere markup og indhold efter behov.

Du kan angive et srcset på dine image tags der angiver hvornår hvilke billeder skal loades. Så kan du angive et meget mindre billede eller måske endda et blankt billede på mindre devices.

Supporten er god: http://caniuse.com/#search=srcset

IE support - polyfill her: https://github.com/scottjehl/picturefill

Alternativt, ajax indhold ind udfra nogle js media queries.

rolchau det fungerer ikke... eller det fungerer nok men ikke for mig. jeg har flere tusind billeder og dem kan jeg ikke sidde og redigere og gemme så der er lille mellem og stor :) De alle har en standard størrelse.

jeg glukker lige på device detection

Hvis du arbejder med fx .NET eller PHP ville du kunne lave et komponent, der resizer dine billeder efter behov - og hvis du evt kigger på begrebet lazyloading vil du kunne scripte dig ud af kun at loade synlige billeder.

Fik aldrig lazyloading til at virke og arbejder hverken med .net eller php, men smid gerne svar keysersoze. du var til god hjælp !

svar