mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-27 20:21:56 +01:00
577 lines
81 KiB
Plaintext
577 lines
81 KiB
Plaintext
<!DOCTYPE html>
|
||
<html class="no-js" lang="de">
|
||
<head itemscope itemtype="http://schema.org/WebSite">
|
||
<meta itemprop="name" content="IONOS Digital Guide"/>
|
||
<script src="//cdn.ionos.de/dgsg/9c2134ba72b4/499e488bab80/launch-59f3a3c442fa.min.js" async></script>
|
||
|
||
<meta charset="utf-8">
|
||
<!--
|
||
This website is powered by TYPO3 - inspiring people to share!
|
||
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
|
||
TYPO3 is copyright 1998-2019 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
|
||
Information and contribution at https://typo3.org/
|
||
-->
|
||
|
||
<base href="https://www.ionos.de/digitalguide/">
|
||
|
||
|
||
<meta name="generator" content="TYPO3 CMS">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="meta-category" content="Digitalguide">
|
||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
<meta name="robots" content="index,follow">
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" href="typo3temp/assets/compressed/font-awesome.min-16763240fc890660a683fd382c643748.css.gzip?1623400527" media="all">
|
||
<link rel="stylesheet" type="text/css" href="typo3temp/assets/compressed/merged-50eba2929050d23ffa9de5d76e337404-9430a3f9729923257874f10202cc0e98.css.gzip?1623400527" media="all">
|
||
|
||
|
||
<script src="typo3temp/assets/compressed/merged-88cbc9fc0fa19a2e7aaff8f17a7c02b8-996a42b5be465ee1014ed8448c533683.js.gzip?1556264996" type="text/javascript"></script>
|
||
<script src="typo3temp/assets/compressed/merged-d0580966fa3fdcb24cd859cca41e48e1-9f3558cdebe635075bc140b60ba8b5ae.js.gzip?1623401425" type="text/javascript"></script>
|
||
|
||
|
||
<link rel="stylesheet" type="text/css" media="all" href="https://www.ionos.de/digitalguide/typo3conf/ext/ratgeberportal/Resources/Public/Css/cookie-styling-dark-bottom.css" />
|
||
<link rel="shortcut icon" href="/favicon.ico" /><link rel="canonical" href="https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/"><link rel="alternate" hreflang="de" href="https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/"><link rel="alternate" hreflang="de-DE" href="https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/"><link rel="alternate" hreflang="en-GB" href="https://www.ionos.co.uk/digitalguide/websites/web-design/how-to-create-the-perfect-style-guide-for-your-website/"><link rel="alternate" hreflang="es" href="https://www.ionos.es/digitalguide/paginas-web/diseno-web/la-guia-de-estilo-perfecta-para-paginas-web/"><link rel="alternate" hreflang="es-ES" href="https://www.ionos.es/digitalguide/paginas-web/diseno-web/la-guia-de-estilo-perfecta-para-paginas-web/"><link rel="alternate" hreflang="en" href="https://www.ionos.com/digitalguide/websites/web-design/how-to-create-the-perfect-style-guide-for-your-website/"><link rel="alternate" hreflang="en-US" href="https://www.ionos.com/digitalguide/websites/web-design/how-to-create-the-perfect-style-guide-for-your-website/"><link rel="alternate" hreflang="en-CA" href="https://www.ionos.ca/digitalguide/websites/web-design/how-to-create-the-perfect-style-guide-for-your-website/"><link rel="alternate" hreflang="fr" href="https://www.ionos.fr/digitalguide/sites-internet/web-design/les-guides-de-style-ou-style-guides-pour-site-web/"><link rel="alternate" hreflang="fr-FR" href="https://www.ionos.fr/digitalguide/sites-internet/web-design/les-guides-de-style-ou-style-guides-pour-site-web/"><link rel="alternate" hreflang="es-MX" href="https://www.ionos.mx/digitalguide/paginas-web/diseno-web/la-guia-de-estilo-perfecta-para-paginas-web/"><link rel="alternate" hreflang="it-IT" href="https://www.ionos.it/digitalguide/siti-web/web-design/creare-le-linee-guida-perfette-per-un-sito-web/"><link rel="alternate" hreflang="de-AT" href="https://www.ionos.at/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/">
|
||
<title>Den perfekten Styleguide für eine Website erstellen - IONOS</title>
|
||
<meta name="description" content="Ein guter Styleguide ist für jedes größere Webprojekt unerlässlich. Lesen Sie hier, wie Sie einen Styleguide erstellen und warum dies so wichtig ist." />
|
||
|
||
<meta property="og:title" content="Der Styleguide – ein ausführliches Designkonzept für Ihre Website">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:image" content="https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Stage_Visual/webdesign-stage-t.jpg">
|
||
<meta property="og:url" content="https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/">
|
||
<meta property="og:site_name" content="IONOS Digitalguide">
|
||
<meta property="og:description" content="Ein guter Styleguide ist für jedes größere Webprojekt unerlässlich. Lesen Sie hier, wie Sie einen Styleguide erstellen und warum dies so wichtig ist.">
|
||
<meta property="og:locale" content="de_DE">
|
||
<script type="text/javascript">
|
||
var cookieContent = '';
|
||
var params = document.location.search;
|
||
|
||
if (params.indexOf('ac') != -1) {
|
||
var regExp = new RegExp(/ac=([a-z0-9.]*)/i);
|
||
var matches = params.match(regExp);
|
||
|
||
if (matches != null && matches.length > 0) {
|
||
cookieContent = matches[1];
|
||
}
|
||
}
|
||
else {
|
||
var referrer = document.referrer;
|
||
var cookieValueSearchEngine = 'OM.PU.PUo50K361684T7073a';
|
||
var cookieValueOther = 'OM.PU.PUd12K41336T7073a';
|
||
|
||
if (referrer != '') {
|
||
var re = new RegExp(/^http[s]?:\/\/(www\.)?(google|bing|yahoo|duckduckgo|ecosia|ask.com|t-online|myway|qwant|such.web.de|gmx.net|startpage.com|msn.com|yandex)/i);
|
||
var matches = referrer.match(re);
|
||
|
||
cookieContent = (matches != null && matches.length > 0) ? cookieValueSearchEngine : cookieValueOther;
|
||
}
|
||
}
|
||
var cookieName = 'ac-euepostclick-de';
|
||
if(document.cookie.indexOf(cookieName) == -1 && cookieContent != '') {
|
||
var thirtyDaysFromNow = Date.now() + (86400000 * 90);
|
||
var expiresDate = new Date(thirtyDaysFromNow).toUTCString();
|
||
var cookieSettings = '; expires=' + expiresDate + '; path=/';
|
||
document.cookie = cookieName + '=' + cookieContent + cookieSettings;
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="see-drop page-1368">
|
||
|
||
|
||
<div id="wrapper">
|
||
|
||
|
||
<header id="header"><div class="header-holder"><div class="container"><div class="logo"><a href="/digitalguide/"><span class="text">Digital Guide</span><div class="img-logo rb"><img src="fileadmin/templates/images/ionos_logo.svg" alt="IONOS"></div></a></div><nav id="nav"><a href="#" class="nav-opener"><span></span></a><div class="nav-drop"><div class="nav-wrap"><ul id="navigation" class="navigation"><li class="inner-drop-active "><a href="websites/">Websites</a><div class="inner-drop"><div class="container"><ul><li ><a href="websites/webseiten-erstellen/" title="Webseiten erstellen">Webseiten erstellen</a></li><li ><a href="websites/webdesign/" title="Webdesign">Webdesign</a></li><li ><a href="websites/web-entwicklung/" title="Web-Entwicklung">Web-Entwicklung</a></li><li ><a href="websites/online-recht/" title="Online-Recht">Online-Recht</a></li></ul></div></div></li><li ><a href="hosting/">Hosting</a><div class="inner-drop hidden-drop"><div class="container"><ul><li ><a href="hosting/cms/" title="CMS">CMS</a></li><li ><a href="hosting/blogs/" title="Blogs">Blogs</a></li><li ><a href="hosting/hosting-technik/" title="Hosting-Technik">Hosting-Technik</a></li></ul></div></div></li><li ><a href="server/">Server</a><div class="inner-drop hidden-drop"><div class="container"><ul><li ><a href="server/knowhow/" title="KnowHow">KnowHow</a></li><li ><a href="server/konfiguration/" title="Konfiguration">Konfiguration</a></li><li ><a href="server/sicherheit/" title="Sicherheit">Sicherheit</a></li><li ><a href="server/tools/" title="Tools">Tools</a></li></ul></div></div></li><li ><a href="domains/">Domains</a><div class="inner-drop hidden-drop"><div class="container"><ul><li ><a href="domains/domainendungen/" title="Domainendungen">Domainendungen</a></li><li ><a href="domains/domainverwaltung/" title="Domainverwaltung">Domainverwaltung</a></li><li ><a href="domains/domain-news/" title="Domain-News">Domain-News</a></li><li ><a href="domains/domaintipps/" title="Domaintipps">Domaintipps</a></li></ul></div></div></li><li ><a href="online-marketing/">Online Marketing</a><div class="inner-drop hidden-drop"><div class="container"><ul><li ><a href="online-marketing/verkaufen-im-internet/" title="Verkaufen im Internet">Verkaufen im Internet</a></li><li ><a href="online-marketing/suchmaschinenmarketing/" title="Suchmaschinenmarketing">Suchmaschinenmarketing</a></li><li ><a href="online-marketing/social-media/" title="Social Media">Social Media</a></li><li ><a href="online-marketing/web-analyse/" title="Web-Analyse">Web-Analyse</a></li></ul></div></div></li><li ><a href="e-mail/">E-Mail</a><div class="inner-drop hidden-drop"><div class="container"><ul><li ><a href="e-mail/e-mail-marketing/" title="E-Mail Marketing">E-Mail Marketing</a></li><li ><a href="e-mail/e-mail-sicherheit/" title="E-Mail Sicherheit">E-Mail Sicherheit</a></li><li ><a href="e-mail/e-mail-technik/" title="E-Mail Technik">E-Mail Technik</a></li></ul></div></div></li><li><a href="https://www.ionos.de">IONOS Produkte</a><div class="inner-drop hidden-drop"><div class="container"><ul id="second-navigation" class="second-navigation"><li class="has-drop-down level2"><a title="domain">Domain</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/domains/domain-registrieren?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Freie Domains registrieren</a></li><li class="level"><a href="https://www.ionos.de/domains/domain-check?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Domain Check</a></li><li class="level"><a href="https://www.ionos.de/tools/whois-domainabfrage?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Whois Domain Abfrage</a></li><li class="level"><a href="https://www.ionos.de/domains/domain-umzug?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Domain umziehen</a></li><li class="level"><a href="https://www.ionos.de/domains/kostenlose-domain?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Kostenlose Domain</a></li></ul></div></div></li><li class="has-drop-down level2"><a title="mail">Mail</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/office-loesungen/eigene-email-adresse?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Eigene E-Mail Adresse erstellen</a></li></ul></div></div></li><li class="has-drop-down level2"><a title="server">Server</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/cloud/cloud-server?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Cloud Server</a></li><li class="level"><a href="https://www.ionos.de/server/vps?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Virtual Server Cloud</a></li><li class="level"><a href="https://www.ionos.de/server/dedicated-server?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Dedicated Server</a></li><li class="level"><a href="https://www.ionos.de/enterprise-cloud?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Enterprise Cloud</a></li></ul></div></div></li><li class="has-drop-down level2"><a title="sicherheit">Sicherheit</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/sicherheit/ssl-zertifikat?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">SSL Zertifikate</a></li><li class="level"><a href="https://www.ionos.de/tools/ssl-check?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">SSL Check</a></li></ul></div></div></li><li class="has-drop-down level2"><a title="homepagewebhosting">Homepage & Webhosting</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/websites/homepage-erstellen?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Homepage erstellen</a></li><li class="level"><a href="https://www.ionos.de/eshop-loesungen/onlineshop-erstellen?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Online Shop erstellen</a></li><li class="level"><a href="https://www.ionos.de/websites/homepage-baukasten?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Homepage Baukasten</a></li><li><a href="https://www.ionos.de/hosting/webhosting?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Webhosting</a></li><li class="level"><a href="https://www.ionos.de/hosting/linux-hosting?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Linux Hosting</a></li><li class="level"><a href="https://www.ionos.de/hosting/windows-hosting?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Windows Hosting</a></li><li><a href="https://www.ionos.de/hosting/wordpress-hosting?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">WordPress Hosting </a></li><li class="level"><a href="https://www.ionos.de/hosting/webspace?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Webspace</a></li></ul></div></div></li><li class="has-drop-down level2"><a title="tools">Tools</a><div class="level3"><div class="container"><ul><li><a href="https://www.ionos.de/tools/website-check?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Website Check</a></li><li class="level"><a href="https://www.ionos.de/tools/seo-check?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">SEO Check</a></li><li class="level"><a href="https://www.ionos.de/tools/ip-adresse?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">IP-Check</a></li><li class="level"><a href="https://www.ionos.de/tools/favicon-generator?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Favicon Generator</a></li><li class="level"><a href="https://www.ionos.de/tools/logo-erstellen?ac=OM.PU.PUo50K360567T7073a" class="has-drop-down-c">Logo-Generator</a></li><li class="level"><a href="https://phishing-contact.ionos.de/de/" class="has-drop-down-c">Validierungs-Service</a></li></ul></div></div></li></ul></div></div></li></ul></div></div></nav><div class="header-info"><ul class="list-inline list-links"><li><div class="dropdown search-box"><a href="#" class="search-opener dropdown-toggle" data-toggle="dropdown"><span class="icon-search"></span></a><div class="search-drop dropdown-menu"><form class="search-form" action="suche/" method="post"><fieldset><div class="form-group"><input class="form-control" type="search" placeholder="Ihr Suchbegriff" name="search"><button type="submit"><span class="icon-search"></span></button></div></fieldset></form></div></div></li><li class="sub-drop-opener dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||
IONOS Produkte</a><div class="sub-drop-wrap dropdown-menu"><div class="container"><div class="row"><div class="col-sm-3"><strong class="sub-head">
|
||
|
||
Domain
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/domains/domain-registrieren?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Freie Domains registrieren</strong><p> Wunsch-Domains registrieren</p></a></li><li><a href="https://www.ionos.de/domains/domain-check?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Domain Check</strong><p>Kostenloser Verfügbarkeitscheck</p></a></li><li><a href="https://www.ionos.de/tools/whois-domainabfrage?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Whois Domain Abfrage</strong><p>Whois Informationen für Domains (.com, .net, .org)</p></a></li><li><a href="https://www.ionos.de/domains/domain-umzug?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Domain umziehen</strong><p>Einfacher Umzug in 3 Schritten</p></a></li><li><a href="https://www.ionos.de/domains/kostenlose-domain?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Kostenlose Domain</strong></a></li></ul><strong class="sub-head">
|
||
|
||
Office
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/office-loesungen/microsoft-office?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Microsoft 365</strong><p> Das komplette Office für Ihr Büro</p></a></li></ul></div><div class="col-sm-3"><strong class="sub-head">
|
||
|
||
|
||
Server
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/cloud/cloud-server?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Cloud Server</strong><p> Top-Performance, Flexibilität & Kostenkontrolle</p></a></li><li><a href="https://www.ionos.de/server/vps?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Virtual Server Cloud</strong><p>Leistungsstarker VPS durch Cloud Technologie</p></a></li><li><a href="https://www.ionos.de/server/dedicated-server?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Dedicated Server</strong><p>Dedizierte Hardware mit vollem Root-Zugriff
|
||
</p></a></li><li><a href="https://www.ionos.de/enterprise-cloud?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Enterprise Cloud</strong><p>Individuell konfigurierbare, hoch skalierende IaaS Cloud</p></a></li></ul><strong class="sub-head">
|
||
|
||
Sicherheit
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/sicherheit/ssl-zertifikat?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">SSL Zertifikate</strong><p> Schutz durch https Verschlüsselung</p></a></li><li><a href="https://www.ionos.de/tools/ssl-check?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">SSL Check</strong><p>Kostenlose Überprüfung Ihres SSL Zertifikats</p></a></li></ul></div><div class="col-sm-3"><strong class="sub-head">
|
||
|
||
Homepage & Webhosting
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/websites/homepage-erstellen?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Homepage erstellen</strong><p> Gestalten Sie Ihre eigene Website</p></a></li><li><a href="https://www.ionos.de/eshop-loesungen/onlineshop-erstellen?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Online Shop erstellen</strong><p>Eigenen Webshop erstellen und online verkaufen</p></a></li><li><a href="https://www.ionos.de/websites/homepage-baukasten?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Homepage Baukasten</strong><p>Websites aufbauen mit System</p></a></li><li><a href="https://www.ionos.de/hosting/webhosting?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Webhosting</strong><p> Perfekte Entwicklungsumgebung für Profis</p></a></li><li><a href="https://www.ionos.de/hosting/linux-hosting?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Linux Hosting</strong><p> Ideale Wahl für Apache, PHP und MySQL</p></a></li><li><a href="https://www.ionos.de/hosting/windows-hosting?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Windows Hosting</strong><p> Professionelles Windows-Hosting</p></a></li><li><a href="https://www.ionos.de/hosting/wordpress-hosting?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">WordPress Hosting</strong><p> Professionelles WordPress-Hosting</p></a></li><li><a href="https://www.ionos.de/hosting/webspace?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Webspace</strong><p> Speicherplatz für Ihre Webprojekte</p></a></li></ul><strong class="sub-head">
|
||
|
||
Mail
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/office-loesungen/eigene-email-adresse?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Eigene E-Mail Adresse erstellen</strong><p> E-Mail-Adressen mit eigener .de Domain</p></a></li></ul></div><div class="col-sm-3"><strong class="sub-head">
|
||
|
||
Tools
|
||
|
||
|
||
</strong><ul class="sub-menu-list list-unstyled"><li><a href="https://www.ionos.de/tools/website-check?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Website Check</strong><p> Kostenlose Online Analyse Ihrer Homepage</p></a></li><li><a href="https://www.ionos.de/tools/seo-check?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">SEO Check</strong><p>Ist Ihre Website suchmaschinentauglich?</p></a></li><li><a href="https://www.ionos.de/tools/ip-adresse?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">IP-Check</strong><p>Eigene IP im Check ermitteln</p></a></li><li><a href="https://www.ionos.de/tools/favicon-generator?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Favicon Generator</strong><p> Erstellen Sie Ihr Favicon kostenlos online</p></a></li><li><a href="https://www.ionos.de/tools/logo-erstellen?ac=OM.PU.PUo50K360567T7073a"><strong class="sub-title">Logo Generator</strong><p> Erstellen Sie online ein Logo für Ihre Firma </p></a></li><li><a href="https://phishing-contact.ionos.de/de/"><strong class="sub-title">Validierungs-Service</strong><p> Echtheit einer IONOS E-Mail prüfen </p></a></li></ul></div></div></div></div></li></ul></div></div></div></header>
|
||
<main id="main">
|
||
<script type="application/ld+json">{ "@context": "http://schema.org","@type": "BreadcrumbList", "itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/www.ionos.de","name":"IONOS"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/www.ionos.de\/digitalguide","name":"Digitalguide"}},{"@type":"ListItem","position":3,"item":{"@id":"websites\/","name":"Websites"}},{"@type":"ListItem","position":4,"item":{"@id":"websites\/webdesign\/","name":"Webdesign"}},{"@type":"ListItem","position":5,"item":{"@id":"websites\/webdesign\/den-perfekten-styleguide-fuer-eine-website-erstellen\/","name":"Den perfekten Styleguide f\u00fcr eine Website erstellen"}}]}</script><nav class="breadcrumbs"><div class="container"><ol class="list-inline"><li><a href="/" title="IONOS" itemprop="item">IONOS</a></li><li><a href="" title="Digitalguide" itemprop="item"><span itemprop="name">Digitalguide</span></a></li><li><a href="websites/" title="Websites" itemprop="item"><span itemprop="name">Websites</span></a></li><li><a href="websites/webdesign/" title="Webdesign" itemprop="item"><span itemprop="name">Webdesign</span></a></li><li><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" title="Den perfekten Styleguide für eine Website erstellen" itemprop="item"><span itemprop="name">Den perfekten Styleguide für eine Website erstellen</span></a></li></ol></div></nav>
|
||
<div class="main-container">
|
||
<div class="container meta-holder"><div class="row"><div class="col-sm-8"><div class="article-meta"><ul class="list-inline meta"><li><time datetime=" 2018-01-04"><span class="icon-clock-o"></span> 04.01.18</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><ul class="list-inline list-info"><li><div class="star-rating"><div class="star-rating__text"><span class="text-info"
|
||
data-role="ratingsWording"
|
||
data-default="Wie gefällt Ihnen der Artikel?"
|
||
data-thanks="Vielen Dank für Ihre Bewertung!">
|
||
Wie gefällt Ihnen der Artikel?
|
||
</span><span class="star-rating__average" title="Durchschnittliche Bewertung"
|
||
data-role="ratingsAverage">
|
||
5
|
||
</span></div><div class="star-rating__wrap"><input class="star-rating__input" id="star-rating-5" type="radio" name="ratingtop" value="5"
|
||
data-role="ratingStarInput5"><label class="star-rating__ico" for="star-rating-5" data-role="star" data-amount="5"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-4" type="radio" name="ratingtop" value="4"
|
||
data-role="ratingStarInput4"><label class="star-rating__ico" for="star-rating-4" data-role="star" data-amount="4"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-3" type="radio" name="ratingtop" value="3"
|
||
data-role="ratingStarInput3"><label class="star-rating__ico" for="star-rating-3" data-role="star" data-amount="3"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-2" type="radio" name="ratingtop" value="2"
|
||
data-role="ratingStarInput2"><label class="star-rating__ico" for="star-rating-2" data-role="star" data-amount="2"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-1" type="radio" name="ratingtop" value="1"
|
||
data-role="ratingStarInput1"><label class="star-rating__ico" for="star-rating-1" data-role="star" data-amount="1"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label></div><div class="star-rating__amount" data-role="ratingTotalAmount"
|
||
title="Anzahl der Bewertungen">3
|
||
</div><div class="clearfix"></div></div><script type="application/ld+json">
|
||
{
|
||
"@context": "http://schema.org/",
|
||
"@type": "Article",
|
||
"headline": "Den perfekten Styleguide f\u00fcr eine Website erstellen",
|
||
"description": "Ein guter Styleguide ist f\u00fcr jedes gr\u00f6\u00dfere Webprojekt unerl\u00e4sslich. Lesen Sie hier, wie Sie einen Styleguide erstellen und warum dies so wichtig ist.",
|
||
"datePublished": "2016-11-09",
|
||
"dateModified": "2021-06-21",
|
||
"mainEntityOfPage": {
|
||
"@type": "WebPage",
|
||
"url": "https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/"
|
||
},
|
||
"image": {
|
||
"@type": "ImageObject",
|
||
"url": "https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Stage_Visual/webdesign-stage-t.jpg",
|
||
"width": 1200,
|
||
"height": 630
|
||
},
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "1&1 IONOS SE",
|
||
"logo": {
|
||
"@type": "ImageObject",
|
||
"url": "https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Logos/logo.jpg"
|
||
}
|
||
},
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "1&1 IONOS SE",
|
||
"url": "https://www.ionos.de/digitalguide/",
|
||
"logo": {
|
||
"@type": "ImageObject",
|
||
"url": "https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Logos/logo.jpg"
|
||
}
|
||
}
|
||
}
|
||
</script></li><li><ul class="list-inline social-networks"><li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/&text=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></li></ul></div></div></div></div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="container two-columns ">
|
||
<div class="row">
|
||
<!--TYPO3SEARCH_begin-->
|
||
|
||
<div class="col-sm-8" id="content"><div class="content-block"><div class="aligncenter visual-img hidden-xs"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/7/b/csm_webdesign-stage-t_1cae6342d0.jpg" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/7/b/csm_webdesign-stage-t_23057f8823.jpg' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Stage_Visual/webdesign-stage-t.jpg'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Stage_Visual/webdesign-stage-t.jpg" alt="Den perfekten Styleguide für eine Website erstellen" title="Den perfekten Styleguide für eine Website erstellen"></picture></div><div id="c30902" class="frame frame-default frame-type-header frame-layout-0"><header><h1 class="blue">Der Styleguide – ein ausführliches Designkonzept für Ihre Website</h1></header></div><div id="c30903"><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Der Wiedererkennungswert und eine einheitliche Präsentation sind praktisch das Alpha und das Omega der Website-Gestaltung. Das ist meist auch kein Problem, solange man allein an einem Projekt arbeitet. Bei größer angelegten Webprojekten – beispielsweise beim Erstellen bzw. Bearbeiten einer Unternehmenswebsite – arbeiten häufig jedoch mehrere Teams an der Gestaltung und Pflege einer Website. Die Lösung bei solchen Arbeitsumgebungen bietet ein Styleguide. Doch was verbirgt sich konkret hinter dem Begriff? Und wie kann man <strong>schnell und einfach einen Styleguide erstellen</strong> und was sollte man darin thematisieren?</p></div></div></div><div id="c96068" class="frame frame-default frame-type-list frame-layout-0"><div class="tx-toc"><div id="toc" class="toc content-table smoothscroll
|
||
numbers
|
||
|
||
|
||
|
||
togglestyle"><div id="toctitle" class="opener"><strong class="h3">Inhaltsverzeichnis</strong><span class="toctoggle"><a href="#" id="togglelinkStyle"></a></span></div><ol class="ordered-list list-content toclist hierarchy"><li class="toclevel-2"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30904"><span class="toctext" data-slug="was-ist-ein-styleguide-">Was ist ein Styleguide?</span></a></li><li class="toclevel-2"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30905"><span class="toctext" data-slug="warum-ist-ein-styleguide-so-wichtig-">Warum ist ein Styleguide so wichtig?</span></a></li><li class="toclevel-2"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30906"><span class="toctext" data-slug="den-idealen-styleguide-erstellen">Den idealen Styleguide erstellen</span></a><ol class="ordered-list"><li class="toclevel-3"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30907"><span class="toctext" data-slug="die-zielgruppe-analysieren-und-die-unternehmensphilosophie-festhalten">Die Zielgruppe analysieren und die Unternehmensphilosophie festhalten </span></a></li><li class="toclevel-3"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30907"><span class="toctext" data-slug="wording-farbgebung-und-schriftarten-definieren">Wording, Farbgebung und Schriftarten definieren</span></a></li><li class="toclevel-3"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30907"><span class="toctext" data-slug="auch-die-details-muss-der-styleguide-klaren">Auch die Details muss der Styleguide klären</span></a></li></ol></li><li class="toclevel-2"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30908"><span class="toctext" data-slug="styleguide-beispiele-so-geht-es-richtig">Styleguide-Beispiele: So geht es richtig</span></a></li><li class="toclevel-2"><a href="websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/#c30912"><span class="toctext" data-slug="einhalten-und-aktualisieren">Einhalten und Aktualisieren</span></a></li></ol></div></div></div><div id="c30904"><h2 class="blue">Was ist ein Styleguide?</h2><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Ein Styleguide bezeichnet im <a href="online-marketing/verkaufen-im-internet/traditionelles-marketing-vs-onlinemarketing/" class="internal-link">Onlinemarketing</a> den <strong>Leitfaden für die einheitliche Gestaltung von Online-Auftritten</strong>. Dazu gehören neben der eigenen Website auch die Accounts in den sozialen Netzwerken und Apps. Ein Styleguide hängt somit eng mit dem <strong>Corporate Design</strong> und der Corporate Identity eines Unternehmens zusammen. Er sorgt dafür, dass die visuelle Identität des Unternehmens auch im Netz sofort erkennbar ist. Der Styleguide ist notwendig, um Unternehmen in sämtlichen Kommunikationskanälen – ob in sozialen Medien, E-Mails, auf der eigenen Website oder in anderen Veröffentlichungen – als Einheit zu präsentieren. Er bietet Richtlinien für alle Mitarbeiter, wie das Unternehmen grafisch und textuell dargestellt werden soll, damit die (potenziellen) Kunden es sofort zuordnen können.
|
||
</p><p>Somit umfasst ein digitaler Styleguide für Websites weit mehr als nur das Logo und die Gestaltung des Firmenschriftzugs: Er legt neben den zu verwendenden <strong>Schriften und Farben</strong> auch die <strong>Bildgestaltung</strong> oder die Anordnung von Elementen fest und enthält Angaben zur <strong>Tonalität der Texte</strong>. Wird er befolgt, vermittelt die Website ein einheitliches Bild – auch wenn unterschiedliche Webdesigner für die einzelnen Bereiche der Website verantwortlich sind. </p></div></div></div><div id="c30905"><h2 class="blue">Warum ist ein Styleguide so wichtig?</h2><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Die Verantwortlichen eines Unternehmens stehen früher oder später vor der Frage, wie die Website die Firma am besten widerspiegelt – und wie Seitenbesucher die Website sofort richtig zuordnen können. Die Antworten auf diese Frage fließen dann in den Styleguide ein – er fasst das Erarbeitete zusammen und bildet die Grundlage für die Gestaltung der Website. Ein Styleguide ist wichtig, da nur mit seiner Hilfe die Website <strong>zielgruppengerecht </strong>und einheitlich gestaltet werden kann. Dadurch ist die eigene Brand im Internet schnell erkennbar. Eine ideal konzipierte Website sorgt zudem dafür, dass sich die Besucher leichter mit der Brand oder der Marke identifizieren können und sie vielleicht sogar weiterempfehlen.
|
||
</p><p>Darüber hinaus vermittelt eine einheitlich gestaltete Website <strong>Professionalität und Seriosität</strong>. Kunden oder Nutzer fühlen sich angesprochen und bleiben länger auf der Seite. </p></div></div></div><div id="c30906"><h2 class="blue">Den idealen Styleguide erstellen</h2><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Um einen guten Styleguide aufzubauen, ist es unabdingbar, sich zunächst Gedanken über die Zielgruppe der Website zu machen. <strong>Ein Beispiel:</strong> Ein Finanzdienstleister würde seine Kunden niemals mit „du“ ansprechen oder anschreiben. In diesem Dienstleistungssektor prägt das förmlichere und seriösere „Sie“ die Anrede. Das lässt sich von der Face-to-Face-Kommunikation auch auf den Content der Website übertragen: Wird in der Branche größtenteils das „Sie“ verwendet, sollte man auf der Website genauso vorgehen und dies im Styleguide ausdrücklich festhalten. Ist hingegen ein Portal für Jugendliche geplant, wirkt eine Anrede mit „Sie“ eher spießig, was die Hauptzielgruppe abschrecken könnte. Sie fühlt sich nicht angesprochen und sucht sich ein anderes Portal. </p></div></div></div><div id="c30907"><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><h3>Die Zielgruppe analysieren und die Unternehmensphilosophie festhalten </h3><p>Bei der Erstellung eines Styleguides muss die Unternehmensphilosophie bzw. die Corporate Identity ebenso berücksichtigt werden wie die angepeilte Zielgruppe. Um diese zu ermitteln, sind <strong>umfangreiche Datenerhebungen und -analysen</strong> notwendig: Es gilt, Alter, Geschlecht, Bildungshintergrund, Lebensumstände und Interessen der Zielgruppe so genau wie möglich zu definieren. Nur wer seinen Kunden bzw. Leser kennt, kann auch zielgruppengerechte Websites mit entsprechendem Content erstellen. Ebenso sollte der Styleguide die <strong>Unternehmensphilosophie sowie Ziele und das Wording</strong> beschreiben: Für was steht das Unternehmen und welche Worte können bzw. sollen primär auf der Website verwendet werden, um Kunden und Lesern die eigenen Ideale zu vermitteln?
|
||
</p><h3>Wording, Farbgebung und Schriftarten definieren</h3><p>Das Unternehmensbild und die Daten über die Zielgruppe sollten dann auch in die Vorgaben zur Websitegestaltung einfließen. Um den Wiedererkennungswert zu erhöhen, greifen die meisten Websites beispielsweise die Farben des Firmenlogos auf. Aber auch die Zielgruppe beeinflusst die Farbgebung: So weisen Websites, die sich an ein jugendliches Publikum richten, meist eine auffälligere <strong>Farbgebung</strong> auf als Websites für eine ältere Zielgruppe. Letztere bevorzugt meist ein schlichteres Design mit gedeckten Farben. Häufig kann man bei einer jungen Zielgruppe mit unüblichen <strong>Schriftarten</strong> Interesse wecken, während ein klassischer Stil wiederum für Seriosität steht. Wichtiger als solche Überlegungen sollte aber stets die Lesbarkeit sein: Denn eine ausgefallene Schriftart, die nur schwer lesbar ist, wird auch jüngere Websitebesucher abschrecken.
|
||
</p><p>Der Styleguides sollte zudem Angaben darüber enthalten, <strong>welche Farben, Worte, Icons usw. auf keinen Fall benutzt werden sollen</strong>. Einige negativ konnotierte Reizworte können beim Leser beispielsweise Assoziationen wecken, von denen sich die Website bzw. das dahinterstehende Unternehmen distanzieren möchte. Gleiches bei der Farbgebung und Grafiken: Welche Farbkombinationen sind unerwünscht? Welche Bildinhalte sollten vermieden werden?
|
||
</p><p>Solche Richtlinien zu unerwünschten Inhalten gehören auch in einen guten Styleguide.
|
||
</p><h3>Auch die Details muss der Styleguide klären</h3><p>Je genauer die Vorgaben sind, desto weniger kosten- und zeitintensive Nachbearbeitungen sind später notwendig. Der Styleguide sollte die<strong> Richtlinien daher so detailliert wie möglich festhalten</strong>: Die Farben sollten z. B. deutlich mit Hex-Codes, RGB-Werten und zugehöriger Abbildung definiert werden. Durch eine kurze Beschreibung lässt sich schnell erklären, wie die vorgesehenen Farben auf den Betrachter wirken. Außerdem muss stets deutlich sein, welche Farben für welche Elemente vorgesehen sind. Dementsprechend muss man für Icons, Button-Elemente, Banner oder Logos festlegen, wo sie platziert werden und welche Farben sie enthalten dürfen.
|
||
</p><p>Eine <strong>grafische Übersicht</strong> ist hierbei oft übersichtlicher als eine Erklärung nur über Text. In solch einer Grafik kann man auch Angaben zur Spaltenbreite und Zeilenhöhe machen; so sieht der Designer direkt, wie das Ganze auf der fertig gestalteten Seite ungefähr aussehen soll. Auch Größenangaben zu den Bildern, Icons und dem Logo sind sinnvoll.
|
||
</p><p>Genauso sollte den vorgeschriebenen Schriftarten ein Verwendungszweck und eine bestimmte Schriftgröße zugewiesen werden: Wo und wie darf man welche Schriftart nutzen? Idealerweise enthält der Styleguide auch direkt <strong>Beispiele für die Verwendung</strong> (die verdeutlichen, welche Schriftart man für die Hauptüberschrift wählt, welche für die Zwischenüberschriften und welche im Fließtext). Ebenso sollten Angaben zum Zeilenabstand, dem Einzug und den Abständen zwischen den einzelnen Seitenelementen enthalten sein.</p></div></div></div><div id="c30908"><h2 class="blue">Styleguide-Beispiele: So geht es richtig</h2><div class="text-row ce-textpic ce-center ce-below"><div class="ce-bodytext"><p>Wie aber sieht ein fertiger Styleguide für Websites schließlich aus? Einige Beispiele sind frei online verfügbar – so etwa die Styleguides der <a href="https://styleguide.bundesregierung.de/Webs/SG/DE/Homepage/home_node.html?__site=SG" title="Styleguide der Bundesregierung" target="_blank" class="external-link-new-window">deutschen Bundesregierung</a> und des <a href="https://www.mozilla.org/en-US/styleguide/" title="Styleguide von Mozilla" target="_blank" class="external-link-new-window">Mozilla-Konzerns</a>. Da die Styleguides selbst als Website vorliegen, kann man sich durch die verschiedenen Kapitel klicken und einen Eindruck gewinnen, wie genau die jeweiligen Richtlinien aussehen.
|
||
</p><p>Die <strong>Guideline der Bundesregierung</strong> differenziert zunächst zwischen Print- und Onlinemedien. Bei den Ausführungen zu Onlinemedien kann man sich detailliert durch alle Vorgaben für die Webanwendung, die mobile Anwendung sowie für soziale Medien klicken. Im Abschnitt „Basiselemente“ findet man Informationen zu den Schriften, Bildern, Icons und Farben. Unter „Gestaltungsprinzipien“ werden Vorgaben für den Seitenaufbau gemacht oder die unterschiedlichen Navigationsebenen erläutert. Jeder Unterpunkt bietet beispielhaft Grafiken, Fonts, Logos und Icons, die die Vorgaben illustrieren.</p></div><div class="aligncenter ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure><a href="fileadmin/DigitalGuide/Screenshots/bundesregierung-styleguide.png" data-lightbox="12283" data-title="Screenshot vom Online-Styleguide der Bundesregierung mit Farbpalette und Farbwerten"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/e/3/csm_bundesregierung-styleguide_f1dccad10e.png" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/e/3/csm_bundesregierung-styleguide_8ec92cebb6.png' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Screenshots/bundesregierung-styleguide.png'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Screenshots/bundesregierung-styleguide.png" alt="Screenshot vom Online-Styleguide der Bundesregierung mit Farbpalette und Farbwerten" title="Screenshot vom Online-Styleguide der Bundesregierung mit Farbpalette und Farbwerten"></picture></a><figcaption class="img-caption">Angaben zur Farbverwendung im Styleguide der Bundesregierung. Quelle: © Bundesregierung, https://styleguide.bundesregierung.de/Webs/SG/DE/OnlineMedien/Webanwendung/Basiselemente/Farben/farben_node.html</figcaption></figure></div></div></div></div></div></div></div><div id="c30910"><div class="text-row ce-textpic ce-center ce-below"><div class="ce-bodytext"><p>Ähnlich umfangreich wie der Styleguide der Bundesregierung ist der digitale <strong>Styleguide von Mozilla</strong>: Sehr gut bebildert wird hier beispielsweise das Logo und dessen richtige Verwendung erläutert. So sieht man auch gleich, wie sich das aktuelle Logo von dem der Vorgängerversionen unterscheidet (benutzt werden darf aber nur das aktuelle). Weniger streng sind die Richtlinien zur Farbdarstellung der Wortmarke „Mozilla“. Diese darf – je nach restlichem Design – in jeder deckenden Farbe dargestellt werden. Unerwünscht sind jedoch beispielsweise regenbogenartige Farbverläufe.</p></div><div class="aligncenter ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure><a href="fileadmin/DigitalGuide/Screenshots/mozilla-styleguide.png" data-lightbox="12284" data-title="Screenshot des Mozilla-Styleguides mit Richtlinien zum Branding und zur Wortmarke"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/3/3/csm_mozilla-styleguide_82711a813a.png" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/3/3/csm_mozilla-styleguide_248338de24.png' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Screenshots/mozilla-styleguide.png'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Screenshots/mozilla-styleguide.png" alt="Screenshot des Mozilla-Styleguides mit Richtlinien zum Branding und zur Wortmarke" title="Screenshot des Mozilla-Styleguides mit Richtlinien zum Branding und zur Wortmarke"></picture></a><figcaption class="img-caption">Mozillas Styleguide-Vorgaben zur Verwendung der Wortmarke. Quelle: © Mozilla, https://www.mozilla.org/en-US/styleguide/identity/mozilla/branding/</figcaption></figure></div></div></div></div></div></div></div><div id="c30911"><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Beide Beispiele verdeutlichen, dass für einen hilfreichen Styleguide gar nicht viel Text notwendig ist: Für die meisten Guides reichen <strong>kurze Beschreibungen und gute Illustrationen</strong>. Wichtig ist vor allem eine <strong>logische Struktur</strong>: Bei Mozilla funktioniert die Navigation über eine Menüstruktur am linken Seitenrand. Kapitelweise klickt man sich auch im Styleguide der Bundesregierung jeweils von einer Überkategorie (etwa „Basiselemente“) bis zu konkreten Fallbeispielen durch.
|
||
</p><p>Natürlich hat nicht jedes Unternehmen die Möglichkeit, für den Styleguide eine eigene Website zu schalten. In der Regel reicht <strong>ein gut strukturiertes Handbuch </strong>– etwa im PDF-Format – völlig aus. Dies kann man den jeweiligen Webdesignern dann vorab zur Ansicht geben, bevor sie sich an die Arbeit machen.
|
||
</p><p>Die folgende Tabelle fasst noch einmal die wichtigsten Punkte zusammen, die in jedem guten Styleguide geklärt werden sollte</p><table cellpadding="0" cellspacing="0" class="contenttable responsive ui-responsive"><tbody><tr><td width="307"><p><strong>Bereiche des Styleguides</strong></p></td><td width="307"><p><strong>Zentrale Fragen</strong></p></td></tr><tr><td width="307"><p>Grundsätzliche Gestaltungsprinzipien</p></td><td width="307"><p>Wofür steht das Unternehmen? Was sind die Ziele der Website? Welche Gestaltungsprinzipien unterstreichen die Unternehmensphilosophie?</p></td></tr><tr><td width="307"><p>Zielgruppe/Personas</p></td><td width="307"><p>Wen soll die Website erreichen? Wie setzt sich die Zielgruppe zusammen? Was sind deren Vorlieben, Wünsche, Interessen?</p></td></tr><tr><td width="307"><p>Tonalität und Wording</p></td><td width="307"><p>Wie sollen Kunden/Leser/Besucher angesprochen werden? Welche Reizwörter sind tabu bzw. sollen benutzt werden?</p></td></tr><tr><td width="307"><p>Logo und Wortmarke</p></td><td width="307"><p>Wie sehen Logo und Wortmarke aus? Wann, wie und wo soll/darf/muss es verwendet werden?</p></td></tr><tr><td width="307"><p>Grundstruktur der Website</p></td><td width="307"><p>Wie soll die Website aufgebaut sein? Wie breit sind die Spalten und wie hoch die Zeilen? Wie sollen Elemente angeordnet werden? Welche Menüstruktur soll gegeben sein? </p></td></tr><tr><td width="307"><p> Farben</p></td><td width="307"><p>Welche Farben unterstreichen die Intention der Website und sprechen die Zielgruppe an? Wie setzen sich die RGB-Werte und Hex-Codes zusammen? </p></td></tr><tr><td width="307"><p>Schriftarten</p></td><td width="307"><p>Welche Schriftarten sollen für welche Texte und Elemente benutzt werden? Wie groß soll die Schrift jeweils sein und welche Farbe darf sie haben?</p></td></tr><tr><td width="307"><p>Icons</p></td><td width="307"><p>Welche Icons sollen benutzt werden? Wo sollen diese gesetzt werden und was bedeuten sie?</p></td></tr><tr><td width="307"><p>Content</p></td><td width="307"><p>Welcher Content soll die fertige Website füllen? Wie soll dieser grafisch, textuell bzw. multimedial umgesetzt werden?</p></td></tr></tbody></table></div></div></div><div id="c30912"><h2 class="blue">Einhalten und Aktualisieren</h2><div class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Ist der Styleguide erstellt, muss er<strong> auch bei Aktualisierungen und Überarbeitungen der Website </strong>berücksichtigt werden. Nur so ist auch langfristig die Einheitlichkeit in allen Kommunikationskanälen gewährleistet. Uniformität ist essenziell für das Branding. Das heißt allerdings nicht, dass sich der Styleguide eines Unternehmens niemals verändern darf. Vielmehr sollte er regelmäßig überprüft werden: Sind die Designs noch aktuell, die Schriftarten noch zeitgemäß? Könnte das Logo ein Upgrade vertragen? Das Beispiel Mozilla zeigt, dass sich Logos im Lauf der Zeit durchaus verändern dürfen, ja sogar müssen. Schließlich kann sich auch der Geschmack der Zielgruppe wandeln. Für einen Webauftritt ist es daher wichtig, zwar der im Styleguide definierten Einheitlichkeit treu zu bleiben, aber dennoch mit der Zeit zu gehen und die Vorgaben up to date zu halten.</p></div></div></div><div class="info-box orange"><div id="c74121"><div class="headline h2 blue title"><i class="fa fa-lightbulb-o"></i> Tipp</div><div class=" ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Haben Sie schon Ihr eigenes Logo? Mit dem <a href="https://www.ionos.de/tools/logo-erstellen?ac=OM.PU.PUo50K361684T7073a" title="IONOS Logo Generator" target="_blank" class="external-link-new-window">IONOS Logo Generator</a> können Sie kostenlos Ihr Eigenes kreieren! </p></div></div></div></div><div class="article-meta"><ul class="list-inline meta"><li><time datetime=" 2018-01-04"><span class="icon-clock-o"></span> 04.01.18</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><ul class="list-inline list-info"><li><div class="star-rating"><div class="star-rating__text"><span class="text-info"
|
||
data-role="ratingsWording"
|
||
data-default="Wie gefällt Ihnen der Artikel?"
|
||
data-thanks="Vielen Dank für Ihre Bewertung!">
|
||
Wie gefällt Ihnen der Artikel?
|
||
</span><span class="star-rating__average" title="Durchschnittliche Bewertung"
|
||
data-role="ratingsAverage">
|
||
5
|
||
</span></div><div class="star-rating__wrap"><input class="star-rating__input" id="star-rating-5" type="radio" name="ratingbottom" value="5"
|
||
data-role="ratingStarInput5"><label class="star-rating__ico" for="star-rating-5" data-role="star" data-amount="5"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-4" type="radio" name="ratingbottom" value="4"
|
||
data-role="ratingStarInput4"><label class="star-rating__ico" for="star-rating-4" data-role="star" data-amount="4"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-3" type="radio" name="ratingbottom" value="3"
|
||
data-role="ratingStarInput3"><label class="star-rating__ico" for="star-rating-3" data-role="star" data-amount="3"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-2" type="radio" name="ratingbottom" value="2"
|
||
data-role="ratingStarInput2"><label class="star-rating__ico" for="star-rating-2" data-role="star" data-amount="2"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-rating__input" id="star-rating-1" type="radio" name="ratingbottom" value="1"
|
||
data-role="ratingStarInput1"><label class="star-rating__ico" for="star-rating-1" data-role="star" data-amount="1"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label></div><div class="star-rating__amount" data-role="ratingTotalAmount"
|
||
title="Anzahl der Bewertungen">3
|
||
</div><div class="clearfix"></div></div></li><li><ul class="list-inline social-networks"><li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/&text=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/den-perfekten-styleguide-fuer-eine-website-erstellen/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></li></ul></div><ul class="metatags-list list-inline list-unstyled"><li><a title="Tutorials" href="tags/tutorials/">Tutorials</a></li><li><a title="Bildbearbeitung" href="tags/bildbearbeitung/">Bildbearbeitung</a></li><li><a title="Bilder" href="tags/bilder/">Bilder</a></li></ul></div><div class="gcsOptin" data-gcs-optin-opts="{"text":{"headline":"Newsletter","subheadline":"Jetzt Newsletter abonnieren und kostenloses Whitepaper „Online-Marketing für lokale Anbieter“ sichern! "},"id":"447c180c9d9d6e25d3e68059482a18400e739114335e033b625cf38a3e0c9fc3","host":"digitalguide.ionos.de","https":true,"skipKnownUser":true,"callback":""}"></div><section class="container related-articles"><strong class="h3 text-center">Ähnliche Artikel</strong><div class="row post-holder"><div class="col-sm-4"><article class="info-post"><div class="img-holder"><a title="Webdesign Trends" href="websites/webdesign/webdesign-trends/"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/d/2/csm_website-trends-t_592a398b30.jpg" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/d/2/csm_website-trends-t_6042b26f8e.jpg' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Teaser/website-trends-t.jpg'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Teaser/website-trends-t.jpg" alt="Webdesign Trends" title="Webdesign Trends"></picture></a></div><h2 class="blue"><a title="11 Webdesign-Trends für das Jahr 2021" href="websites/webdesign/webdesign-trends/">11 Webdesign-Trends für das Jahr 2021</a></h2><ul class="list-inline meta"><li><time datetime="2021-05-10"><span class="icon-clock-o"></span> 10.05.2021</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><p>
|
||
Webdesigner werden im Jahr 2021 größtenteils dort weitermachen, wo sie 2020 schon ihr Hauptaugenmerk hatten: bei der Nutzerfreundlichkeit. Dabei liegt die Herausforderung hauptsächlich darin, interaktive Komponenten und 3D- bzw. VR-/AR-Effekte möglichst natürlich im eigenen Projekt unterzubringen. Wir verraten Ihnen anhand von 11 Trends, wie sich das Webdesign 2021 weiterentwickeln wird.
|
||
</p><div class="social-block"><ul class="list-inline social-networks"><li><a target="_blank" href='https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trends/' class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trends/&text=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trends/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trends/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trends/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></div></article></div><div class="col-sm-4"><article class="info-post"><div class="img-holder"><a title="Webdesign-Trend: One-Page-Design" href="websites/webdesign/webdesign-trend-one-page-design/"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/3/b/csm_one-pager-t_8fe8f83261.jpg" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/3/b/csm_one-pager-t_e28f3b68a6.jpg' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Teaser/one-pager-t.jpg'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Teaser/one-pager-t.jpg" alt="Webdesign-Trend: One-Page-Design" title="Webdesign-Trend: One-Page-Design"></picture></a></div><h2 class="blue"><a title="One-Page-Design: Alles andere als einseitig" href="websites/webdesign/webdesign-trend-one-page-design/">One-Page-Design: Alles andere als einseitig</a></h2><ul class="list-inline meta"><li><time datetime="2016-10-10"><span class="icon-clock-o"></span> 10.10.2016</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><p>
|
||
Der sogenannte One-Pager ist der neue Trend im Webdesign: Immer mehr Unternehmen bevorzugen für die Präsentation von Produkten, Kampagnen oder Projekten Websites im Single-Page-Design. Auf einer einzigen HTML-Seite navigiert sich der Nutzer durch Scrollen und andere Navigationselemente durch den Content. Die minimalistischen Websites setzen auf Storytelling und schaffen ein intuitives...
|
||
</p><div class="social-block"><ul class="list-inline social-networks"><li><a target="_blank" href='https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trend-one-page-design/' class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trend-one-page-design/&text=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trend-one-page-design/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trend-one-page-design/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/webdesign-trend-one-page-design/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></div></article></div><div class="col-sm-4"><article class="info-post"><div class="img-holder"><a title="Ein Logo erstellen: Tipps und geeignete Software" href="websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/b/3/csm_logo-design-t_4c4c5b76f8.jpg" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/b/3/csm_logo-design-t_eef5423b80.jpg' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Teaser/logo-design-t.jpg'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Teaser/logo-design-t.jpg" alt="Ein Logo erstellen: Tipps und geeignete Software" title="Ein Logo erstellen: Tipps und geeignete Software"></picture></a></div><h2 class="blue"><a title="Ein professionelles Logo erstellen: Tipps fürs Logo-Design" href="websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/">Ein professionelles Logo erstellen: Tipps fürs Logo-Design</a></h2><ul class="list-inline meta"><li><time datetime="2018-01-12"><span class="icon-clock-o"></span> 12.01.2018</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><p>
|
||
Ein Logo ist das Aushängeschild eines Unternehmens oder einer Marke: Es symbolisiert die Corporate Identity und führt beim Zielpublikum im besten Fall zu positiven Assoziationen. Jede Marke und jedes Unternehmen sollte deshalb über ein passendes Logo verfügen. Um ein Logo zu entwerfen, benötigen Sie nicht zwangsläufig herausragende Bildbearbeitungskenntnisse – obwohl Ihnen diese hilfreich beim...
|
||
</p><div class="social-block"><ul class="list-inline social-networks"><li><a target="_blank" href='https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/' class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/&text=https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></div></article></div><div class="col-sm-4"><article class="info-post"><div class="img-holder"><a title="Wie sieht ein gutes Logo aus? Studie gibt Aufschluss" href="websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="fileadmin/_processed_/2/5/csm_brand-t_a7a2b4e26d.jpg" media="(max-width: 767px)"><source srcset='fileadmin/_processed_/2/5/csm_brand-t_8246673112.jpg' media="(max-width: 1023px)"><source srcset='fileadmin/DigitalGuide/Teaser/brand-t.jpg'><!--[if IE 9]></video><![endif]--><img src="fileadmin/DigitalGuide/Teaser/brand-t.jpg" alt="Wie sieht ein gutes Logo aus? Studie gibt Aufschluss" title="Wie sieht ein gutes Logo aus? Studie gibt Aufschluss"></picture></a></div><h2 class="blue"><a title="Markenbildung: So wirkungsvoll sind die bekanntesten Logos" href="websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/">Markenbildung: So wirkungsvoll sind die bekanntesten Logos</a></h2><ul class="list-inline meta"><li><time datetime="2018-01-12"><span class="icon-clock-o"></span> 12.01.2018</time></li><li><a href="websites/webdesign/">Webdesign</a></li></ul><p>
|
||
Wir sind ständig umgeben von Marken-Logos. Doch wie genau schauen wir uns die Grafiken wirklich an? Die Studie „Branded in Memory“ hat den Test gemacht: Wie gut kann man ein bekanntes Logo aus der Erinnerung aufmalen? Über 150 Männer und Frauen, Jung und Alt, haben es versucht und teilweise sehr krude Ergebnisse abgeliefert. Großer Gewinner: Einfache Strukturen und starke Farben. Erfahren Sie,...
|
||
</p><div class="social-block"><ul class="list-inline social-networks"><li><a target="_blank" href='https://www.facebook.com/sharer/sharer.php?u=https://www.ionos.de/digitalguide/websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/' class="facebook"><span class="icon-facebook"></span></a></li><li><a target="_blank" href="https://twitter.com/intent/tweet?source=https://www.ionos.de/digitalguide/websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/&text=https://www.ionos.de/digitalguide/websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/%20%23DigitalGuide" class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank" href="https://www.xing.com/spi/shares/new?url=https://www.ionos.de/digitalguide/websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/" class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.ionos.de/digitalguide/websites/webdesign/wie-sieht-ein-gutes-logo-aus-studie-gibt-aufschluss/" class="linkedin"><span class="icon-linkedin"></span></a></li></ul></div></article></div></div></section><div class="category-description"></div></div>
|
||
|
||
|
||
|
||
<!--TYPO3SEARCH_end-->
|
||
|
||
<div class="col-sm-4" id="sidebar">
|
||
|
||
|
||
|
||
<div id="c336411" class="frame frame-default frame-type-shortcut frame-layout-0"><div id="c326624" class="frame frame-default frame-type-html frame-layout-0"><div class="sidebar-sticky-box"><h3>Passende Produkte</h3><div class="row"><div class="col-xs-12 sidebar-sticky-box-inhalt"><div class="col-xs-4"><img alt="IONOS Website erstellen lassen" src="https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Product_Icons/mywebsite-services.svg"></div><div class="sidebar-sticky-box-text" class="col-xs-8">Website erstellen lassen</div></div></div><button class="btn btn-primary btn-block button-dg" type="button" target="_blank" onclick="websiteSBSitecat();window.open('https://www.ionos.de/websites/homepage-erstellen-lassen?ac=OM.PU.PUo50K361638T7073a')" role="button">Zu den Tarifen <span class="icon-triangle-right"></span></button></div><script type="text/javascript">function websiteSBSitecat(){if (typeof window.s === "object" && typeof window.s.apl === "function" && typeof window.s.t === "function"){s.events2=s.apl(s.events2, "event114", ",", 1);s.t(s);}}</script></div></div>
|
||
|
||
|
||
|
||
|
||
|
||
<div id="c226547" class="frame frame-default frame-type-html frame-layout-0"><div class="corona-box"><h3>#IThelps - CoronaVirus.de</h3><div class="row"><div class="col-xs-12 sidebar-sticky-box-inhalt"><div class="col-xs-4"><img alt="Coronavirus.de" src="https://www.ionos.de/startupguide/fileadmin/StartupGuide/Allgemein/covid_logo_blue.svg"></div><div class="col-xs-8">Informationen für Gründer, Startups & Unternehmen während der Corona-Krise.</div></div></div><br /><button class="btn btn-primary btn-block button-dg" type="button" target="_blank" onclick="window.open('https://ionos.ly/z7u')" role="button">Jetzt informieren <span class="icon-triangle-right"></span></button></div><style>
|
||
.corona-box {
|
||
margin-bottom: 20px;
|
||
padding: 15px 25px 25px;
|
||
border: 1px solid #ddd;
|
||
border-top-color: rgb(221, 221, 221);
|
||
border-top-style: solid;
|
||
border-top-width: 1px;
|
||
height: 250px;
|
||
background: #fff;
|
||
border-radius: 3px;
|
||
border-top: 3px solid #003d8d;
|
||
transition: top 0.5s ease-out;
|
||
top: 0px;
|
||
}
|
||
</style></div>
|
||
|
||
|
||
|
||
<div class="gcsOptin" data-gcs-optin-opts="{"text":{"headline":"Newsletter","subheadline":"anmelden und gratis Online-Marketing Whitepaper sichern."},"id":"7ccf889c34fccd13c4832d521089fa029f34e139a885c62a0bde339604ee7a6a","host":"digitalguide.ionos.de","https":true,"skipKnownUser":true,"callback":""}"></div>
|
||
<div class="side-block open-close" id="popular-articles"><h3 class="opener" data-responsive-accordion="1023">
|
||
Beliebte Artikel
|
||
<span class="iconCloseOpen "></span></h3><div class="container-info-blog slide"><div class="info-blog"><h4 class="h5 blue"><a title="Domaintypen" href="domains/domainendungen/domaintypen/">Domaintypen
|
||
<p class=shabstract>Worin liegt der Unterschied zwischen Top-Level-Domain und Second-Level-Domain? Wir erklären die wichtigsten Domainarten...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a title="Wie kauft man eine Domain?" href="domains/domaintipps/wie-kauft-man-eine-domain/">Wie kauft man eine Domain?
|
||
<p class=shabstract>Eine Schritt für Schritt Anleitung zur Wunschadresse...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a title="Die eigene E-Mail-Domain" href="e-mail/e-mail-technik/gute-gruende-fuer-die-eigene-e-mail-domain/">Die eigene E-Mail-Domain
|
||
<p class=shabstract>Erfahren Sie, wie sie sich in wenigen Schritten eine eigene E-Mail-Adresse mit persönlicher Domain sichern...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a title="Domain-Wert ermitteln" href="domains/domaintipps/domain-wert-ermitteln/">Domain-Wert ermitteln
|
||
<p class=shabstract>So finden Sie heraus, wie viel Ihre Domain wert ist...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a title="Mit Domains Geld verdienen?" href="domains/domain-news/kann-man-mit-domains-geld-verdienen/">Mit Domains Geld verdienen?
|
||
<p class=shabstract>im Domain-Handel lassen sich hohe Gewinne erzielen. Was muss man genau tun, um eine Domain zu verkaufen...</p></a></h4></div></div></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="mobile-box"></div>
|
||
<div class="container info-aside"></div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer id="footer">
|
||
<div class="container footer-frame">
|
||
<ul class="list-inline social-networks contact">
|
||
|
||
<li><a href="http://ionos.ly/IONOS_FB_DE" class="facebook" target="_blank"><span class="icon-facebook"></span></a></li>
|
||
|
||
|
||
<li><a href="http://ionos.ly/IONOS_TW_DE" class="twitter" target="_blank"><span class="icon-twitter"></span></a></li>
|
||
|
||
|
||
|
||
<li><a href="https://ionos.ly/IONOS_YT_DE" class="youtube" target="_blank"><img src="fileadmin/templates/images/youtube.png" width="28" height="28" alt="youtube"></a></li>
|
||
|
||
|
||
<li><a href="http://ionos.ly/IONOS_IN" class="linkedin" target="_blank"><span class="icon-linkedin"></span></a></li>
|
||
|
||
|
||
|
||
<li><a href="rss-feeds/rss-digitalguide/feed.rss" class="rss-feed" style="background:#ffffff" target="_blank"><img src="fileadmin/rss-feed.png" width="28" height="28" alt="rss-feed"></a></li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-holder">
|
||
<div class="container">
|
||
<ul class="list-inline list-footer"><li class="footer-nav-item"><a href="https://www.ionos.de/unternehmen" class="footer-nav-link" target="_blank">Unternehmen</a></li><li class="footer-nav-item"><a href="https://jobs.ionos.de" class="footer-nav-link" target="_blank">Jobs</a></li><li class="footer-nav-item"><a href="https://www.ionos.de/newsroom" class="footer-nav-link" target="_blank">Newsroom</a></li><li class="footer-nav-item"><a href="https://www.ionos.de/hilfe" class="footer-nav-link" target="_blank">Hilfe-Center</a></li><li class="footer-nav-item"><a href="https://www.ionos.de/terms-gtc/terms" class="footer-nav-link" target="_blank">AGB</a></li><li class="footer-nav-item"><a href="https://www.ionos.de/terms-gtc/terms-privacy" class="footer-nav-link" target="_blank">Datenschutz</a></li><li class="footer-nav-item"><a href="https://www.ionos.de/impressum" class="footer-nav-link" target="_blank">Impressum</a></li><li class="footer-nav-item"><span class="copyright">© 2021 <a href="https://www.ionos.de" title="1&1 IONOS" target="_blank">1&1 IONOS SE</a></span></li></ul>
|
||
</div>
|
||
</div>
|
||
<a href="#wrapper" class="btn btn-top" style="display: block; opacity: 1;"><span class="icon-angle-up"></span></a>
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.cookieconsent_options = {
|
||
learnMore: 'Mehr Informationen.',
|
||
dismiss: 'OK',
|
||
message: 'Wir verwenden Cookies, um Ihnen ein optimales Nutzererlebnis zu bieten, auf Sie zugeschnittene Werbung zu generieren und Social Media einzubinden. Nutzen Sie unsere Website oder Dienste weiter, stimmen Sie der Verwendung zu.',
|
||
link: 'https://www.ionos.de/cookies',
|
||
|
||
};
|
||
</script>
|
||
|
||
|
||
<div id="bio_ep">
|
||
<div id="c146243" class="frame frame-default frame-type-html frame-layout-0"><div class="popup-header"><img src="fileadmin/templates/images/ionos_logo.svg" alt="IONOS" width="50" height="50"></div><br/><h2 class="exit-intent" style="padding-left: 120px;">Auf dem Laufenden bleiben?</h2><div class="exit-sub" style="padding-left: 120px;">Jetzt für unseren Newsletter anmelden und gratis Online-Marketing Whitepaper für lokale Anbieter sichern! </div><!--<div class="exit-sub exit-sub-offer"></div>--><div class="exit-sub sub-sub"></div><div class="gcsOptin" data-gcs-optin-opts="{"id":"447c180c9d9d6e25d3e68059482a18400e739114335e033b625cf38a3e0c9fc3","host":"digitalguide.1und1.de","https":true}"></div><style>
|
||
#bio_ep {
|
||
background-image: url(./fileadmin/user_upload/Stage_Domain.png);
|
||
}
|
||
</style></div>
|
||
|
||
</div>
|
||
<script src="typo3temp/assets/compressed/merged-66313f97a7a8b6f1d24cd68a5a67f7cb-554e9bec02d4479a3bb6acb67cf2244b.js.gzip?1623400527" type="text/javascript"></script>
|
||
<script src="typo3temp/assets/compressed/merged-8413098447d0d9b0ded1f467ac28750a-08cfc4ea9984f3c06e3a032bc445ffeb.js.gzip?1623400527" type="text/javascript"></script>
|
||
<script src="https://digitalguide.ionos.de/js/frontend.js" type="text/javascript"></script>
|
||
|
||
<script type="text/javascript">_satellite.pageBottom();</script><div class="tx-cisositecatalyst">
|
||
|
||
<!-- SiteCatalyst code version: H.20.3. Copyright 1997-2009 Omniture, Inc. More info available at http://www.omniture.com -->
|
||
<script type="text/javascript">var s_account="iaglive";</script>
|
||
<script type="text/javascript" src="typo3conf/ext/ciso_sitecatalyst/Resources/Public/JavaScript/utm.js"></script>
|
||
|
||
<script language="JavaScript" type="text/javascript">
|
||
function onRequest(data) {
|
||
s.server = "";
|
||
s.visitorNamespace = "1und1internetag";
|
||
s.thisHost = window.location.host;
|
||
s.currencyCode = "EUR";
|
||
s.charSet = "UTF-8";
|
||
s.trackDownloadLinks = true;
|
||
s.trackExternalLinks = true;
|
||
s.trackInlineStats = true;
|
||
s.linkDownloadFileTypes = "exe,zip,wav,mp3,mov,mpg,avi,wmv,pdf,doc,docx,xls,xlsx,ppt,pptx";
|
||
s.linkInternalFilters = "javascript:,.1und1.de,.1und1.at,.1and1.com,.1and1.ca,.1and1.co.uk,.1and1.es,.1and1.fr,.1and1.pl,.1and1.it,.1und1.info,.1and1.mx,.gmx.de,.web.de,united.domain,cinetic.de,schlund.de,.ionos.ca,.ionos.de,.ionos.at,.ionos.es,.ionos.fr,.ionos.it,.ionos.mx,.ionos.co.uk,.ionos.com,"+s.thisHost;
|
||
s.linkLeaveQueryString = false;
|
||
s.linkTrackVars = "None";
|
||
s.linkTrackEvents = "None";
|
||
s.usePlugins = true;
|
||
s.prop11 = "New contract shop";
|
||
s.eVar13 = "New contract shop";
|
||
s.channel = "digitalguide";
|
||
var cookieName = "ac-euepostclick-de";
|
||
var searchString = document.location.search;
|
||
// removing the '?' at the beginning
|
||
if (searchString.length > 0) {
|
||
searchString = searchString.substring(1);
|
||
}
|
||
var searchStringParts = searchString.split('&');
|
||
var actionCode = '';
|
||
for (var i=0, j=searchStringParts.length; i<j; i++) {
|
||
if (searchStringParts[i].search('ac') != -1) {
|
||
// getting the value by removing the 'ac=' at the beginning
|
||
actionCode = searchStringParts[i].substring(3);
|
||
}
|
||
}
|
||
|
||
// if the actionCode is not in the URL check for the cookie
|
||
if (typeof $.cookie != "undefined" && actionCode == '' && typeof $.cookie(cookieName) != "undefined") {
|
||
actionCode = $.cookie(cookieName);
|
||
}
|
||
|
||
if (actionCode != '') {
|
||
s.campaign = s.eVar23 = actionCode;
|
||
}
|
||
s.prop1 = "websites_webdesign_den-perfekten-styleguide-fuer-eine-website-erstellen";
|
||
s.prop5 = "dg-websites";
|
||
s.prop6 = "dg-de";
|
||
s.prop7 = "www.ionos.de";
|
||
s.prop17 = "de";
|
||
s.prop23 = window.navigator.userAgent;
|
||
s.eVar1 = "digitalguide";
|
||
s.eVar2 = "websites_webdesign_den-perfekten-styleguide-fuer-eine-website-erstellen";
|
||
var currentDate = new Date();
|
||
var day = currentDate.getDate();
|
||
var formattedDay = day <= 9 ? "0" + day : day;
|
||
var month = currentDate.getMonth();
|
||
var formattedMonth = month <= 8 ? "0" + (month + 1) : (month + 1);
|
||
var year = currentDate.getFullYear();
|
||
var hours = currentDate.getHours();
|
||
var formattedHours = hours <= 9 ? "0" + (hours) : hours;
|
||
var minutes = currentDate.getMinutes();
|
||
var formattedMinutes = minutes <= 9 ? "0" + (minutes) : minutes;
|
||
|
||
var timeStamp = formattedDay + "/" + formattedMonth + "/" + year + "-" + formattedHours + ":" + formattedMinutes;
|
||
s.eVar3 = timeStamp;
|
||
s.eVar6 = "dg-websites";
|
||
s.eVar7 = "dg-de";
|
||
s.eVar45 = "de";
|
||
}
|
||
$(window).ready(function() {
|
||
|
||
window.setTimeout(function(){
|
||
if (typeof window.PrivacyConsent !== "undefined")
|
||
{
|
||
// we use the available variable defined by Adpbe DTM script
|
||
if (typeof window.privacyConsentInstance === "undefined") {
|
||
window.privacyConsentInstance = new PrivacyConsent({ whitelist: true });
|
||
}
|
||
|
||
window.privacyConsentInstance.invoke(
|
||
function() {
|
||
var existingScriptElement = document.getElementsByTagName("script")[0];
|
||
var scriptElement = document.createElement("script");
|
||
scriptElement.type = "text/javascript";
|
||
scriptElement.src = "typo3conf/ext/ciso_sitecatalyst/Resources/Public/JavaScript/s_code.js";
|
||
scriptElement.onload = function() {
|
||
onRequest();
|
||
|
||
var s_code=s.t();
|
||
if (s_code) document.write(s_code);
|
||
};
|
||
existingScriptElement.parentNode.insertBefore(scriptElement, existingScriptElement);
|
||
},
|
||
PrivacyConsentEnum.STATISTICS,
|
||
this,
|
||
true
|
||
);
|
||
|
||
window.privacyConsentInstance.initialize();
|
||
} else {
|
||
// send the tracking for the page
|
||
onRequest();
|
||
|
||
var s_code=s.t();
|
||
if (s_code) document.write(s_code);
|
||
}
|
||
|
||
}, 2000);
|
||
|
||
});
|
||
</script>
|
||
<!-- End SiteCatalyst code version: H.20.3. -->
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
var page = 'Den perfekten Styleguide für eine Website erstellen';
|
||
var pageId = '3';
|
||
var application = 'T3.DG.DE';
|
||
</script>
|
||
<script type="text/javascript" src="typo3conf/ext/ciso_tracking/Resources/Public/Scripts/performance/browser.js"></script>
|
||
|
||
<script type="text/javascript" src="typo3conf/ext/ciso_tracking/Resources/Public/Scripts/performance/rum.js"></script>
|
||
|
||
|
||
<script type="text/javascript">
|
||
UNOUNO = window.UNOUNO || {};
|
||
UNOUNO.tracking = UNOUNO.tracking || {};
|
||
|
||
|
||
UNOUNO.tracking.genericTracking = function(siteCatalystParams, type, name, optFullSet) {
|
||
/*
|
||
use this API to track specific events independend from page related tracking
|
||
uses cases for this can be tracking a survey, a clicked link or search related tracking
|
||
*/
|
||
|
||
/*
|
||
here is one code example of how to track events with SiteCatalyst
|
||
UNOUNO.tracking.genericTracking makes it possible to use a standardized API for all kinds of such tracking codes
|
||
|
||
Example (original code):
|
||
|
||
var s=s_gi('iagdev');
|
||
s.linkTrackVars='events,products';
|
||
s.linkTrackEvents='event7,event8,event9,event10,event11,event12';
|
||
s.events='event7,event8,event9,event10,event11,event12';
|
||
s.products=";;;;event7=25|event8=75|event9=100|event10=0|event11=1";
|
||
s.tl(this,'o','Linkname');
|
||
|
||
Standardized UNOUNO.tracking.genericTracking example:
|
||
|
||
UNOUNO.tracking.genericTracking({
|
||
|
||
events: 'event7,event8,event9,event10,event11,event12',
|
||
|
||
products: ';;;;event7=25|event8=75|event9=100|event10=0|event11=1'
|
||
|
||
});
|
||
|
||
See wiki for complete API: http://wiki.intranet.1and1.com/bin/view/UE/SitecatalystTracking#Tracking_Events
|
||
|
||
*/
|
||
|
||
var s, key, linkTrackVars, linkTrackEvents;
|
||
|
||
if (typeof s_gi !== 'undefined' && typeof s_account !== 'undefined') {
|
||
|
||
// s_account is triggered by tag manager script and has values iagdev or iaglive
|
||
|
||
s = s_gi(s_account);
|
||
|
||
// generate linkTrackVars based on siteCatalystParams
|
||
|
||
linkTrackVars = '';
|
||
/* transactionId */
|
||
|
||
if ((typeof siteCatalystParams["list2"] != "undefined" && siteCatalystParams["list2"].indexOf("chat-angenommen") == 0 || typeof siteCatalystParams["prop60"] != "undefined" && siteCatalystParams["prop60"].indexOf("ct.btn.MobileZubehoerShop") > -1) && typeof siteCatalystParams["eVar35"] == "undefined"){
|
||
siteCatalystParams["eVar35"] = UNOUNO.tracking.transactionId;
|
||
}
|
||
|
||
for (key in siteCatalystParams) {
|
||
|
||
if (siteCatalystParams.hasOwnProperty(key)) {
|
||
|
||
linkTrackVars = linkTrackVars + key + ',';
|
||
|
||
if (key === 'events') {
|
||
|
||
// if the special param events is used, generate an additionally linkTrackEvents property
|
||
|
||
linkTrackEvents = siteCatalystParams[key];
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
if (linkTrackVars !== '') {
|
||
|
||
// remove trailing comma
|
||
|
||
linkTrackVars = linkTrackVars.substr(0, linkTrackVars.length - 1);
|
||
|
||
// server time in every request
|
||
linkTrackVars += ",eVar3";
|
||
|
||
// copy generated linkTrackVars and optional linkTrackEvents to the s object
|
||
s.linkTrackVars = linkTrackVars;
|
||
|
||
if (linkTrackEvents) {
|
||
|
||
s.linkTrackEvents = linkTrackEvents;
|
||
|
||
}
|
||
|
||
// clone all siteCatalystParams to s object
|
||
|
||
for (key in siteCatalystParams) {
|
||
|
||
if (siteCatalystParams.hasOwnProperty(key)) {
|
||
|
||
s[key] = siteCatalystParams[key];
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// finally send SiteCatalyst tracking request with type and name or their defaults
|
||
|
||
if(optFullSet == true){
|
||
s.t(this, type || 'o', name || 'generic-tracking');
|
||
}
|
||
else{
|
||
s.tl(this, type || 'o', name || 'generic-tracking');
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<!-- cached statically on: 25-06-21 06:26 -->
|
||
<!-- expires on: 25-06-21 08:26 --> |