Die Komponenten basieren auf HTML5. Das bedeutet für die Entwicklung einer Seite, dass dies dem Browser über den Dokumententyp auch mitgeteilt werden muss:

<!DOCTYPE html>

Unterstützung älterer Browser

Da ältere Browser oft nicht die nötige Unterstützung für moderne Techniken wie CSS3 und HTML5 mit sich bringen, müssen diese unter Zuhilfenahme von Browserweichen und Skripten unterstützt werden. Dies gilt vorallem für den Internet-Explorer der Version 8.

Um dafür die nötige grafische Unterstützung zu erhalten muss bereits das HTML-Grundgerüst angepasst werden:

<!--[if (lte IE 8) ]><html lang="de" class="lte-ie8"><![endif]--> 
<!--[if (gt IE 8)|!(IE)]><!--><html lang="de"><!--<![endif]--> 
 
</html>

Da der Internet-Explorer der Version 8 weder mit den neuen HTML5 Elementen, noch mit den Media-Queries aus CSS3 umzugehen weiß muss ihm dies explizit beigebracht werden. Das erledigen Open-Source Skripte die über sogenannte Content Delivery Networks bezogen werden können:

<!-- HTML5 element and CSS3 media query support for IE8 --> 
<!--[if lte IE 8]> 
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

Mobile Geräte

Um eine einwandfreie Darstellung auf mobilen Geräten zu erhalten sollte das Dokument noch mit dem Meta-Element <small>viewport</small> versehen werden. Es sorgt dafür, dass die Seite beim Öffnen mit einem Zoom-Faktor von 1 dargestellt wird und sich optimal an die Breite des Geräts anpasst:

<meta name="viewport" content="width=device-width, initial-scale=1">

Accessibility

Oft werden Formulare oder Ähnliches in Web-Anwendungen verwendet. Um deren Verwendung für Unterstützungstechnologien zu verbessern kann das Attribut role="application" angewendet werden:

<body role="application">...
<!-- oder -->
<div role="application">...

Basis-Template

Für den Einstieg kann dieses Basis-Template verwendet werden. Es beinhaltet bereits alle erforderlichen Verknüpfungen und Einstellungen. Einfach den Quelltext in eine HTML-Datei kopieren und ggf. die Pfade zu den Stylesheets und Skripen anpassen:

<!DOCTYPE html> 
<!--[if (lte IE 8) ]><html lang="de-DE" class="no-js lte-ie8"><![endif]--> 
<!--[if (gt IE 8)|!(IE)]><!--><html class="no-js" lang="de"><!--<![endif]--> 
  <head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Telekom Komponenten</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Place favicon.ico and apple-touch-icon(s) in the root directory --> 

    <!-- Telekom Components CSS --> 
    <link type="text/css" rel="stylesheet" href="css/components.min.css" /> 

    <!-- HTML5 element and CSS3 media query support for IE8 --> 
    <!--[if lte IE 8]> 
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
  </head> 
  <body> 
    <p>Lorem ipsum...<p> 
                
    <!-- jQuery from CDN --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
                
    <!-- Telekom Components JS --> 
    <script type="text/javascript" src="js/components.min.js"></script> 
  </body> 
</html>