Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
Direct e-mail: Realisatie Les 3
HTML en CSS in s Direct Realisatie Les 3
2
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 Realisatie
3
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 Realisatie
4
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 Realisatie
5
Problemen HTML en CSS in e-mail
Plaatjes worden niet of pas na druk op knop geladen Achtergrondplaatjes werken vaak niet Veel programma’s geven HTML en CSS beperkter weer dan een webbrowser De verschillen tussen programma’s zijn groot Direct Realisatie
6
Niet weergeven plaatjes
Wie is de afzender? Wat is de boodschap? Kan de ontvanger reageren?
7
Niet weergegeven plaatjes: oplossing
Wordt (soms) getoond ipv plaatje (helaas is ondersteuning hier ook weer afhankelijk van het programma) 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 Realisatie
8
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 Realisatie
9
CSS-problemen CSS wordt slecht ondersteund, met name CSS positionering
Elk programma heeft z’n eigen eigenaardigheden Een bijzonder nuttige site: Direct Realisatie
10
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 Realisatie
11
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 Realisatie
12
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 Realisatie
13
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 px Hoogte preview-pane ong px, zet daar dus belangrijkste info Zet cellpadding en cellspacing altijd op 0 Direct Realisatie
14
De enige manier om het zeker te weten: testen
Bruikbaar zonder plaatjes en CSS? Weergave bij verschillende schermgrootte Weergave in verschillende programma’s Schaalbare tekst -> leesbaarheid Weergave bij kleurenblindheid: Direct Realisatie
Verwante presentaties
