Webpagina's worden meestal ontworpen om te worden weergegeven op een normaal computer scherm. Er komen echter steeds meer media, te denken valt aan mobiele telefoon, PDA en printer. Met CCS2 is het mogelijk om verschillende stijlen/lay-outs te gebruiken voor verschillende media. W3C onderscheidt 10 media typen: all, aural, braille, embossed, handheld, print, projection, screen, tty en tv.
Bij het printen van een pagina kan bijvoorbeeld een navigatiemenu worden weggelaten of de achtergrondkleur weggelaten. Dit kan door een aparte stylesheet voor de printer toe te voegen waarin alleen de verschillen met de gemeenschappelijke stylesheet staan. In de header van de html-code dient te worden aangegeven dat er een apart stylesheet voor het printen is:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Een andere manier is door code voor media type print in de stylesheet toe te voegen:
@media print {.nav {display: none;}}
Hierbij wordt de class nav niet afgedrukt bij het printen.
Een simpele tutorial is te vinden op Print style sheet tutorial
Binnen W3C worden webstandaarden en richtlijnen ontwikkeld. Dit is een continu proces waarbij jaarlijks nieuwe versies van een aantal standaarden worden gepubliceerd. Dit worden W3C Recommendations genoemd en dat is ook precies wat haar reikwijdte is: aanbevelingen voor de organisaties die browsers ontwikkelen. Een bedrijf als Microsoft kan bij de ontwikkeling van de volgende versie van Internet Explorer zelf beslissen welke standaard zij overneemt en hoe strikt deze wordt toegepast. Microsoft kan extra features toevoegen en er kunnen natuurlijk ook gewoon fouten (bugs) in hun software zitten of andere inconsistenties. Ook kan een typefout in je eigen code door de verschillende browsers anders worden geinterpreteerd. Dit is de reden waarom veel webpagina's er verschillend uitzien in de verschillende browsers.
De meeste browsers zijn forward compatible. Dit houdt in dat de browser ook invoer accepteert die bedoeld is voor nieuwere versies van de browsers, dus tags die de browser nog niet kent. De wijze waarop zij dit doet is door alle niet-herkende XHTML-tags te negeren. Dit is een goede eigenschap maar kan er toe leiden dat een pagina in verschillende versies van bijvoorbeeld Internet Explorer een heel andere layout oplevert.
Tips voor gebruikersvriendelijke, foutarme en onderhoudsvriendelijke websites:
Als het echt niet lukt om de code in daarvoor bedoelde browsers te laten werken dan kun je gebruik maken van zogenaamde hacks en filters.
Een CSS filter is een manier om code wel of niet af te beelden in specifieke browsers.
Door de code:
<!--[if lte IE 6]› <link rel="stylesheet" type="text/css" href="ie5-6.css"> <![endif]-->
wordt de css alleen gebruikt bij internet explorer 5 of 6. "if lte IE 6" staat voor: if less than or equal Internet Explorer versie 6.
Een Hack is een style definitie die gebruik maakt van fouten of eigenaardigheden in sommige browsers.
Zowel filters als hacks dien je bij voorkeur te vermijden aangezien ze het onderhoud van de website sterk vergroten en de code onoverzichtelijker maken. Op het internet zijn tal van filters en hacks te vinden voor alle versies van de diverse browsers.
Op het web zijn ook veel blinden en slechtzienden actief. Blinden hebben de beschikking over speciale software die de tekst in de html-code voorleest. Voor hen is het prettig dat de html-code begint met de belangrijke content en niet met allerlei keuzemenu's. Ook is het voor hen belangrijk dat visuele elementen, zoals afbeeldingen, voorzien is van een ALT tag.
Slechtzienden willen graag de tekengrootte via de browserinstellingen aanpassen. Dit gaat alleen bij relatieve waarden van de font-size opmaak (zoals .em) in plaats van absolute waarden zoals pixels. In het algemeen is het aan te raden de website schaalbaar en flexibel te maken zodat deze goed bruikbaar blijft voor verschillende beeldschermresoluties en instellingen.
Houd ook rekening met personen die je website bekijken met een trage verbinding of waarbij bijvoorbeeld de CSS niet geladen wordt. De website dient ook leesbaar te zijn als de plaatjes en/of CSS afwezig zijn.
W3C heeft speciale Accesibility Guidelines ontwikkeld waaraan je je webpagina's kunt toetsen: W3C Accesibility Guidelines
Zoekmachines werken met verschillende technieken. Sommige zoekmachines zijn gespecialiseerd in een bepaald vakgebied en werken met zelf opgegeven zoektermen. Anderen werken met de populariteit van de websites. De zoekmachine van Google meet dit bijvoorbeeld door het aantal malen dat een website op andere websites wordt vermeld. De webpagina's worden geautomatiseerd geindexeerd door middel van webrobots. Dit zijn programma's die webpagina's downloaden en nuttige informatie verzamelen van de pagina's, zoals woorden en links. De links worden weer aan de webrobot als invoer gegeven om verder te zoeken. De gevonden woorden worden opgeslagen in een gigantische database, die iedere keer geraadpleegd wordt als we een zoekterm intypen. Als je een website verandert kan het dagen tot weken duren voordat de inhoud in de database verwerkt is.
Schrijvers van webpagina's willen hun pagina's graag hoog laten scoren in de zoekresultaten van een zoekmachine om zo meer bezoekers naar hun website te trekken. Dit heet zoekmachine-optimalisatie (Engels: search engine optimization of SEO). De beste manier is het leveren van kwalitatief hoogstaande inhoud met een goede structuur. Hierdoor verwijzen andere webmasters via een link naar deze pagina. Verder dienen belangrijke trefwoorden op de pagina voor te komen. Een pagina voor zoekmachine-optimalisatie dient dit woord dus ook zeker enkele malen te bevatten. Ook de indeling en linkstructuur dient consistent te zijn zodat webrobots snel via links de bijbehorende pagina's kan vinden. Gebruik voor visuele elementen, zoals afbeeldingen, relevante namen en geen nummers of nietszeggende code.
Een recent hulpmiddel om websites te ontwerpen is het zogenaamde grid based design. Hierbij gebruik je een tweedimensionaal rooster (grid) om de inhoud van je pagina te structureren. Het rooster dient als een raamwerk om je tekst en plaatjes op een eenvoudige wijze te organiseren. De populariteit van grid based design is ondermeer af te lezen uit de meer dan 3 miljoen hits die het oplevert in Google.
Een voorbeeld waarbij je het gebruik van een rooster bij het ontwerpen van een website is te vinden op 960.gs. Een soortgelijk voorbeeld vind je hier .
Maak een simpele html en bijbehorende css pagina met een aparte style/layout voor de printer zodat bijvoorbeeld een achtergrondfoto of menublok niet afgedrukt wordt bij het printen.