Skjul billeder på din mobil

I en digital tidsalder, hvor mobilbrug dominerer, er det essentielt at kunne tilpasse indholdet, så det ser optimalt ud på alle enheder. Dette gælder især for e-mails, hvor det førstehåndsindtryk kan være afgørende. Mange ønsker at vise et specifikt billede til mobilbrugere og et andet til desktopbrugere. Mens det er relativt ligetil at få desktopbilledet til at forsvinde på mobilen, kan det være en udfordring at opnå det omvendte. Denne guide vil dykke ned i, hvordan du præcist kan styre, hvilke billeder dine modtagere ser, baseret på deres enhed.

Forståelse af Responsivt Design

Responsivt design handler om at skabe websites og e-mails, der automatisk tilpasser sig forskellige skærmstørrelser. Dette opnås primært gennem CSS (Cascading Style Sheets). Ved at bruge medieforespørgsler (media queries) kan vi anvende forskellige stilarter afhængigt af skærmens bredde, højde, opløsning og andre egenskaber. I konteksten af e-mailmarketing er dette værktøj uvurderligt for at sikre en ensartet og positiv brugeroplevelse.

CSS til Billedkontrol

Den CSS, du har angivet, er et glimrende udgangspunkt. Lad os nedbryde den og se, hvordan den kan bruges til at opnå det ønskede resultat:

@media screen and (max-width: 600px) { .img-max { width: 100% !important; max-width: 100% !important; height: auto !important; } .max-width { max-width: 100% !important; } .mobile-wrapper { width: 85% !important; max-width: 85% !important; } .mobile-padding { padding-left: 5% !important; padding-right: 5% !important; } /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */ .mobile-hide { display: none !important; } .mobile-show { display: block !important; } }

Her ser vi flere vigtige klasser:

• .mobile-hide: Denne klasse er designet til at skjule elementer på mobile enheder. Ved at sætte display: none !important; sikrer vi, at elementer med denne klasse ikke vises på skærme med en bredde på 600 pixels eller mindre.
• .mobile-show: Omvendt er denne klasse designet til at vise elementer på mobile enheder. Ved at sætte display: block !important; sikrer vi, at elementer med denne klasse vises, når skærmbredden er 600 pixels eller mindre.

Implementering i HTML

For at implementere dette i din e-mail, skal du anvende disse klasser på dine billeder. Lad os antage, at du har to billeder: et til desktop (lad os kalde det desktop-image.jpg) og et til mobil (lad os kalde det mobile-image.jpg).

Eksempel på HTML-struktur

Her er et eksempel på, hvordan du kan strukturere din HTML for at opnå dette:

<!-- Billede til Desktop (skjult på mobil) --> <img src="desktop-image.jpg" alt="Desktop Billede" class="mobile-hide"> <!-- Billede til Mobil (vist på mobil, skjult på desktop) --> <img src="mobile-image.jpg" alt="Mobil Billede" class="mobile-show">

I dette simple eksempel vil <img src="desktop-image.jpg" ...> blive skjult på mobile enheder på grund af klassen .mobile-hide. Samtidig vil <img src="mobile-image.jpg" ...> blive vist på mobile enheder på grund af klassen .mobile-show.

Udfordringen: At skjule på Desktop

Du nævner specifikt, at du har fået desktopbilledet til at forsvinde på mobilen, men at du er usikker på, hvordan du får mobilbilledet til at forsvinde på desktop. Den nuværende CSS, du har angivet, håndterer kun tilpasninger for skærme under 600 pixels bredde. For at skjule et element på desktop, skal vi definere en regel for skærme, der er større end en bestemt bredde.

Udvidelse af Medieforespørgslerne

Vi kan udvide din eksisterende CSS til at inkludere en regel for desktopvisning. En almindelig praksis er at definere stilarter for mobile først (mobile-first approach) og derefter tilføje stilarter for større skærme. Alternativt kan vi beholde din nuværende struktur og tilføje en regel for større skærme.

Lad os antage, at den standardvisning, du ønsker for desktop, er, at det mobile billede er skjult. Så skal vi tilføje en regel, der specifikt skjuler elementer med klassen .mobile-show, når skærmen er bredere end 600 pixels.

Opdateret CSS

@media screen and (max-width: 600px) { .img-max { width: 100% !important; max-width: 100% !important; height: auto !important; } .max-width { max-width: 100% !important; } .mobile-wrapper { width: 85% !important; max-width: 85% !important; } .mobile-padding { padding-left: 5% !important; padding-right: 5% !important; } /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */ .mobile-hide { display: none !important; } .mobile-show { display: block !important; } } /* Tilføj denne regel for at skjule .mobile-show på desktop */ @media screen and (min-width: 601px) { .mobile-show { display: none !important; } /* Sørg for at desktop billedet vises som standard */ .mobile-hide { display: block !important; /* Eller hvad end standard visning skal være */ } }

Med denne tilføjelse:

• Elementer med klassen .mobile-hide vil blive skjult på skærme under 600px.
• Elementer med klassen .mobile-show vil blive vist på skærme under 600px.
• Elementer med klassen .mobile-show vil blive skjult på skærme over 600px.
• Vi har også sikret, at .mobile-hide vises som standard på desktop, hvilket er den forventede adfærd.

En mere Robust Løsning: Separate Klasser

Selvom ovenstående virker, kan det blive mere overskueligt at definere separate klasser for henholdsvis mobil og desktop-visning. Dette giver klarhed og reducerer risikoen for konflikter.

Definering af Klasser

• .desktop-only: Skjuler elementet på mobile enheder.
• .mobile-only: Skjuler elementet på desktop.

Opdateret CSS med Separate Klasser

/* Standard visning (typisk desktop) */ .mobile-only { display: none; } /* Medieforespørgsel for mobile enheder */ @media screen and (max-width: 600px) { .desktop-only { display: none !important; } .mobile-only { display: block !important; /* Eller inline-block, flex osv. afhængigt af elementet */ } } /* Tilføj eventuelt specifikke stilarter for desktop her, hvis nødvendigt */ @media screen and (min-width: 601px) { .desktop-only { display: block !important; /* Eller hvad end standard visning skal være */ } }

Opdateret HTML med Separate Klasser

<!-- Billede til Desktop (skjult på mobil) --> <img src="desktop-image.jpg" alt="Desktop Billede" class="desktop-only"> <!-- Billede til Mobil (vist på mobil, skjult på desktop) --> <img src="mobile-image.jpg" alt="Mobil Billede" class="mobile-only">

Denne metode er generelt at foretrække, da den er mere eksplicit og lettere at vedligeholde. Den desktop-only klasse sikrer, at billedet kun vises på større skærme, mens mobile-only klassen sikrer, at billedet kun vises på mindre skærme.

Vigtige Overvejelser for E-mails

E-mail Klient Kompatibilitet

Det er vigtigt at bemærke, at ikke alle e-mail klienter understøtter alle CSS-funktioner lige godt. Specielt ældre versioner af Outlook kan have begrænsninger. Generelt er display: none; dog en meget velunderstøttet egenskab. Det er altid en god idé at teste dine e-mails i forskellige klienter (f.eks. Gmail, Outlook, Apple Mail, samt på forskellige mobile enheder) ved hjælp af værktøjer som Litmus eller Email on Acid.

Billedoptimering

Når du viser forskellige billeder til forskellige enheder, skal du sørge for, at begge billeder er optimeret til web. Store billedfiler kan forsinke indlæsningstiden, især på mobile netværk. Brug komprimerede filformater som JPG eller PNG, og overvej webp-formatet, hvis det understøttes af e-mail klienten.

Alt-tekst

Husk altid at inkludere meningsfuld alt-tekst til dine billeder. Dette er vigtigt for tilgængelighed (for brugere med skærmlæsere) og for situationer, hvor billederne ikke indlæses.

Conditional Logic i E-mail Platforme

Nogle e-mail marketing platforme tilbyder indbygget funktionalitet til at vise eller skjule indhold baseret på enhedstype. Undersøg din platforms muligheder, da dette kan være en endnu nemmere løsning end ren CSS.

Test, Test, Test!

Som nævnt tidligere er test afgørende. Før du sender din e-mail ud til din liste, skal du sende en test-e-mail til dig selv og åbne den på forskellige enheder og e-mail klienter. Tjek visuelt, om de korrekte billeder vises og skjules som forventet.

Tabel: CSS Klasser til Billedkontrol

Ofte Stillede Spørgsmål (FAQ)

Hvordan kan jeg skjule et billede på alle mobile enheder?

Du kan bruge CSS-klassen .mobile-hide (som defineret i den første CSS-blok) eller .desktop-only (som defineret i den anden CSS-blok) på dit billede-tag. Sørg for, at den tilhørende CSS er inkluderet i din e-mail.

Hvordan kan jeg vise et billede kun på mobile enheder?

Brug CSS-klassen .mobile-show (fra den første blok) eller .mobile-only (fra den anden blok) på dit billede-tag. Den mobile-only klasse er ofte mere robust.

Hvad er den bedste bredde for medieforespørgsler?

600 pixels er en almindelig grænse, men du kan justere den baseret på dine specifikke designbehov. Nogle bruger 768 pixels som en grænse for tablets.

Hvor skal jeg placere min CSS?

CSS'en skal placeres inden for <style></style> tags i <head> sektionen af din HTML-e-mail. Nogle e-mail klienter kræver dog, at CSS placeres inline på hvert element, men medieforespørgsler fungerer bedst i <head> sektionen.

Hvorfor virker min CSS ikke i Outlook?

Ældre versioner af Outlook (især dem, der bruger Microsoft Word som rendering engine) har begrænset understøttelse af moderne CSS, herunder medieforespørgsler. Det er ofte nødvendigt at bruge VML (Vector Markup Language) for at opnå responsive effekter i disse klienter, hvilket gør processen mere kompleks. Test grundigt!

Konklusion

At styre billedvisning baseret på enhedstype er en kraftfuld teknik til at forbedre brugeroplevelsen i dine e-mails. Ved at anvende de korrekte CSS-medieforespørgsler og klasser kan du sikre, at dine modtagere altid ser det mest relevante billede. Den mest pålidelige metode involverer at definere separate klasser som .desktop-only og .mobile-only. Husk altid at teste dine implementeringer grundigt på tværs af forskellige enheder og e-mail klienter for at garantere optimal visning.

Hvis du vil læse andre artikler, der ligner Skjul billeder på din mobil, kan du besøge kategorien Mobil.