Direct e-mail: Realisatie Les 3 HTML en CSS in e-mails Direct e-mail: Realisatie Les 3.

Slides:



Advertisements
Verwante presentaties
Bouw zelf een digitaal visitekaartje
Advertisements

Pagina-instelling.
Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Word 2003 Tips en trucs Door Johan Lammers.
Handboek verzenden van Nieuwsbrief Caribbean.nl 12 september 2012 •Ga naar CMS •Kies Nieuwsbrief Caribbean.nl.
Webrichtlijnen met TYPO3.
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
Les 4 cursus WordPress. Wat gaan we doen (1) 1. Importeren via Word problemen 2. Alle pagina’s en berichten verwijderen, incl prullenbak leegmaken 3.
Online Marketing voor het MBO “SEO, dat kun je zelf!”
W.H. Kaper, AMSTEL-instituut1/16 Website ontwerp met voorbeelden.
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
(c) Marc de Graauw Presentatie XML Marc de Graauw 2 maart 2000.
Wat is het AnySurfer label? Een Belgisch kwaliteitslabel voor toegankelijke websites Bestaat uit een Basislabel en een Pluslabel Basislabel garandeert.
Hoofdstuk 2 Communicatie
HTMLHTML UITLEG & CURSUS. Inleiding HTML: Hyper Text Mark-up Language.
Behind Interactive Media. Agenda 1.Mobiel internet 2.Mobiele content 3.Apps 4.Opleveren.
Het maken van een presentatie
Webdesign.
Base: bewerkingen 2 soorten - Oplopend- Aflopend.
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
Crashcursus HTML en CSS 2013
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
Computers en Visueel Gehandicapten
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Nieuw in LIPS VLUG 2 26 juni 2006 Kristof Brams. Overzicht Vernieuwde editor Printervriendelijke pagina Statistieken Variabele fontgrootte Grootte van.
Mijn eerste Website bouwen
Wauw!!! Google Panda update WAUW !!!!. Google Panda update Plots geen bezoekers en/of omzet meer? In de US had deze update een impact op bijna 12% van.
Looking at Code Size and Performance Kevin Muys.  Hoe efficiënt is C++ vergeleken met C  Hoe beïnvloed C++ het benodigde geheugen  Oplossingen voor.
Geen natuurlijke kleur. Het moet groen,bruin, zandkleurig etc. zijn. Maar geen blauw. Logo en plaatjes van het bedrijf.
WEBBUILDING 07/03/2005 Saartje De Geyter.
Inleiding tot Excel.
Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 5: Tabellen.
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
HTML De basis-elementen.
De basis-elementen Deel 2
Css basics. terminologie Block level element Inline element Css – eigenschap : display : Voorbeeld : display eigenschap en genummerde lijst.
1 Les 08: Formulieren. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 8  Bespreken huiswerk  Presentatie over lesstof  formulieren 
1 Les 07: Tabellen. 2 Agenda van vandaag Front-end development  Toets Hoofdstuk 6  Bespreken huiswerk  Presentatie over lesstof  tabellen  positionering.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
Eindbeoordeling websites Seminarie Webdesign. Technische puntenverdeling Niet online en losse bestanden
Verbeterpunt 1 Tekst heeft slecht contrast met de achtergrond. Tekst omlijnen, maar liefst een logo maken.
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
Maak je website toegankelijk voor alle doelgroepen.
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
Hoofdstuk 2 Communicatie
Gevorderde programmeer Les
Templates in MailChimp (2)
Templates in MailChimp (1)
Direct 3. De DM-cyclus 30/07/2018 Direct 3. De DM-cyclus.
E-Boeken van binnen Of wat zit er in een epub
Het postkantoor van windows
Lectora als ontwikkeltool voor interactieve multimedia programma’s
Direct Uitwerken concept DEM
Ontvangerdata in MailChimp
Hoe maak je een pagina voor een website?
Het aanpassen van Microsoft SharePoint Onlinewebsite
CSS: cascading stylesheets
Welkom :-).
SQL Les 3 23 February 2019.
ASP.NET MVC Views.
JavaScript animatie beweging 1 mei 2016.
SQL Les 4 12 May 2019.
Powershell & HTML.
[Voer de titel van de overtuigende toespraak hier in]
CSS: cascading stylesheets
HTML5 introductie.
Transcript van de presentatie:

Direct e-mail: Realisatie Les 3 HTML en CSS in e-mails Direct e-mail: Realisatie Les 3

HTML Hypertext Markup Language Combinatie van inhoud en opmaak Wat als we zelfde opmaak ook voor andere inhoud willen gebruiken? Personificatie Huisstijl/Herkenbaarheid Onderhoudbaarheid (bijv. nieuw logo) Direct e-mail: Realisatie

Template Het vaste deel wordt een “template” genoemd Inhoud voeg je met MailChimp in Templates worden ook vaak gevuld met bijv. ASP en PHPs Direct e-mail: Realisatie

Vergelijk Content en opmaak door elkaar Content en opmaak gescheiden <html><head><title> HAN - ICA </title></head> <body> <h1> Piet, welkom! </h1> </body> </html> <html><head><title> HAN - <? echo $instituut; ?> </title></head> <body> <h1> <? echo $user; ?>, <? echo $welkomststekst; ?>! </h1> </body> </html> Direct e-mail: Realisatie

Problemen HTML en CSS in e-mail Plaatjes worden niet of pas na druk op knop geladen Achtergrondplaatjes werken vaak niet Veel e-mailprogramma’s geven HTML en CSS beperkter weer dan een webbrowser De verschillen tussen e-mailprogramma’s zijn groot Direct e-mail: Realisatie

Niet weergeven plaatjes Wie is de afzender? Wat is de boodschap? Kan de ontvanger reageren?

Niet weergegeven plaatjes: oplossing Wordt (soms) getoond ipv plaatje (helaas is ondersteuning hier ook weer afhankelijk van het e-mailprogramma) Wordt voorgelezen door screen readers Beschrijft de inhoud of de functie van het plaatje <img src="file.jpg" width="120" height="200" alt="Home" /> <img src="file.jpg" width="120" height="200" alt="iPad3" /> Direct e-mail: Realisatie

Zorg dus dat… Je e-mail goed leesbaar is zonder plaatjes, De afzender duidelijk is zonder plaatjes De ontvanger nog steeds direct kan reageren De boodschap overkomt De layout duidelijk blijft Je onderschriften gebruikt indien nodig Je ALT-attributen gebruikt Je geen essentiële informatie alleen in plaatjes zet! Direct e-mail: Realisatie

CSS-problemen CSS wordt slecht ondersteund, met name CSS positionering Elk e-mailprogramma heeft z’n eigen eigenaardigheden Een bijzonder nuttige site: http://www.campaignmonitor.com/css/ Direct e-mail: Realisatie

Drie manieren van CSS-gebruik Extern (verwijzen naar extern CSS-bestand): werkt bijna nooit <link rel="stylesheet" type="text/css" href="layout.css"> Embedded (in het <head>-deel): werkt soms <style type="text/css"> <!-- h1 { color: #0000ff; } --> </style> Inline (in de betreffende tag): werkt meestal <p style="color: #ff00ff;">De tekst</p> Direct e-mail: Realisatie

Positioneringsprobleem oplossen Gebaseerd op tabellen Ouderwets Vloeken in de kerk voor webdesigners Niet volgens XHTML-standaard Maar het werkt wel Vaak worden tabellen “genest” (tabel in een cel van een andere tabel) Direct e-mail: Realisatie

Gebruik van rowspan en colspan om rijen of kolommen samen te voegen Voorbeeld Gebruik van rowspan en colspan om rijen of kolommen samen te voegen Achtergrond: 1 achtergrondplaatje voor de grote tabel (rood) en 1 voor de binnentabel (blauw) of Verschillende achtergrondplaatjes per cel Combinatie daarvan Direct e-mail: Realisatie

Richtlijnen bij gebruik tabellen Werk met vaste breedte (dus in px, niet in %) Geef de breedte aan in de tabelcellen, niet voor de hele tabel <table border="0" cellpadding="0" cellspacing="0" background="background.gif"> <tr> <td width="150">Tekst 1</td> <td width="400">Tekst 2</td> </tr> </table> Totale breedte max 550-600 px Hoogte preview-pane ong. 300-500 px, zet daar dus belangrijkste info Zet cellpadding en cellspacing altijd op 0 Direct e-mail: Realisatie

De enige manier om het zeker te weten: testen Bruikbaar zonder plaatjes en CSS? Weergave bij verschillende schermgrootte Weergave in verschillende e-mail programma’s Schaalbare tekst -> leesbaarheid Weergave bij kleurenblindheid: http://colorfilter.wickline.org/ Direct e-mail: Realisatie