Geen achtergrond in nieuwsbrief HTML

[maarud]

Ik probeer een nieuwsbrief te maken.. lukt allemaal hartstikke prima, het is ook heel simpel en de HTML werkt perfect als je gewoon naar de pagina surft. Verstuur ik de nieuwsbrief echter met Enormail of your mailing list provider dan komt hij vertekent aan. Op de voorbeeldpagina's (voordat je de nieuwsbrief verstuurd) zien ze er prachtig uit, maar als ik hem open in gmail zie ik geen achtergrond.

Eerst heb ik het als <img></> ingevoegd. Dit had als resultaat dat éérst de achtergrond kwam, en daaronder de tekst. De tekst moet óp de achtergrond komen (dmv divjes is tekst gepositioneerd die precies in denkwolkjes enzo komt op de achtergrond). Dit ziet er overigens wel goed uit in FF.

Toen heb ik een body element in CSS gemaakt met een background-image url () enzo, dat ziet er ook goed uit in FF, en ook in de voorbeeldjes van enormail en dergelijk, maar niet in gmail (gewoon geen plaatje, wel tekst).

een externe css document werkt ook niet, een DIV wrapper met dat als background-image werkt ook niet (wel in de voorbeelden, maar niet in gmail).

Hoe krijg ik in hemelsnaam dat plaatje als achtergrond in gmail? ligt het aan gmail of aan mijn code? De coe is prima in browsers, maar misschien hebben mailclients andere soort code nodig ivm veiligheid ofzoiets?

[ Voor 4% gewijzigd door maarud op 11-05-2011 13:45 ]

[RobIII]

Sowieso is HTML mail ellende; je hebt met een shitload aan mailclients (Outlook, Thunderbird, Hotmail, Gmail en ga zo maar door) te maken en elke mailclient heeft zo z'n eigen ideeën over wat er wel en/of niet ondersteund wordt.

In dit geval "ligt het aan GMail"; althans: AFAIK ondersteunen zij (terecht IMHO BTW) geen achtergronden. En dan ben je vlug klaar. Ik zou als ik jou was gewoon de grootste gemene deler ondersteunen qua features en 't daar bij laten. Of een partij in de arm nemen die gespecialiseerd is in deze materie. En hou 't sowieso bij "HTML 3.2" features; liever bijvoorbeeld een table en <font> tag dan CSS. Dat werkt vaak veel beter.

maarud schreef op woensdag 11 mei 2011 @ 13:39:
ligt het aan gmail of aan mijn code?

Zo'n vraag is natuurlijk prima zelf te beantwoorden: probeer eens een andere mailclient voordat je 'm stelt En anders kun je nog altijd zelf initiatief nemen voor je een topic opent: [google=gmail background image] >> eerste hit. Voila. Rocket science.

quote: http://groundwire.org/sup...css-and-email-newsletters

Don't use background images. Gmail, among others, will ignore any url() attribute in an inline style, and the simple background= tag attribute. You can use background colors if you wish (bgcolor tag attribute or background-color: css statement).

[ Voor 66% gewijzigd door RobIII op 11-05-2011 13:52 ]

[Verwijderd]

Misschien dat je eerst even moet leren wat er wel en niet kan in HTML e-mails, want (zelfs zonder de code te zien) zie ik al 4 fouten die op elke website worden vermeld.

Leesvoer:
- http://www.email-standards.org/
- http://www.campaignmonitor.com/css/
- http://www.mailchimp.com/resources/

P.S. het feit dat je hier deze vraag stelt betekend dat je totaal geen onderzoek hebt gedaan naar HTML in e-mail clients... Google is je grootste vriend

[maarud]

Sodeknetters, gmail ondersteunt zowat niets Geen wonder dat het neit werkt.
Toch werken andere nieuwsbrieven vaak wel, wat is hun geheim dan?
aaah, na wat lezen over HTML in e-mail moet ik dus tabellen gaan gebruiken... Leuk

edit: aaah, close! de divjes werken nog niet (allemaal position:absolute en alles staat nu door elkaar) maar ik heb in ieder geval een achtergrond.

edit2: ffuuuu, position:absolute gaat schijnbaar ook niet werken... ik moet dat hele ding dus opdelen in rijen en cellen, leuk! NOT

[ Voor 38% gewijzigd door maarud op 11-05-2011 14:06 ]

[maarud]

Heb hem nu helemaal volgestouwd met tabellen... nu gaat het idd goed. Bedankt voor de sites, terminal13!

[Bosmonster]

Achtergronden in e-mail zijn inderdaad een no-go. Microsoft vond het met een van de laatste Outlooks ook een goed idee om de Word-renderer te gaan gebruiken ipv IE-renderer voor het weergeven van e-mail. Dat is ook een kleine ramp en ondersteunt bijvoorbeeld geen achtergrond-afbeeldingen.

Samengevat wil je e-mails zo simpel mogelijk maken. Het is niet voor niets dat veel nieuwsbrieven van webshops er maar voor kiezen hun complete nieuwsbrief als een berg plaatjes te versturen, zoals Dynabyte: http://a.1y.nl/s/v.php?eHp3VzZEYEVuQWFUOFk7X0pxY0l2USYyVTU=

[Verwijderd]

@Bosmonster: Ik hoop dat je weet dat een hoop spamfilters dit soort mailtjes blokkeren, omdat er teveel afbeeldingen in zitten en te weinig tekst?

Over het algemeen moet je dezelfde denkwijze gebruiken als voor normale websites (qua SEO), dus netjes tekst als tekst neerzetten en afbeeldingen als afbeeldingen.

Het enige verschil is dat je (vaak) een zeer complexe structuur van tabellen nodig hebt om de e-mail er in alle clients goed uit te laten zien. En hiermee kun je het verschil zien tussen een hobbyist en een professional.

En dit staan dan zelfs nog helemaal los van hoe de nieuwsbrief wordt verstuurd, maar bij het gebruik van een systemen als MailChimp en CampaignManager zit dat wel goed. (Ik zal maar niet mijn eigen systeem promoten )

[Bosmonster]

Verwijderd schreef op donderdag 12 mei 2011 @ 09:47:
@Bosmonster: Ik hoop dat je weet dat een hoop spamfilters dit soort mailtjes blokkeren, omdat er teveel afbeeldingen in zitten en te weinig tekst?

Dit soort nieuwsbrieven komen door goede spamfilters gewoon heen.

Overigens wilde ik niet deze methode promoten, maar als je in weinig tijd een compleet custom nieuwsbrief wilt ontwerpen zonder restricties op allerlei platformen, dan is dit wel een prima manier. Het hangt vooral erg af van het type e-mail dat je wilt versturen. Is het een inhoudelijke nieuwsbrief met veel tekst, of juist een heel grafische nieuwsbrief met praktisch geen tekst?

Nog een voorbeeldje: http://www.informatique.nl/nieuwsbrief/

[ Voor 4% gewijzigd door Bosmonster op 12-05-2011 10:06 ]