mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-24 10:41: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 cla
|
|||
|
|
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 de
|
|||
|
|
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 -->
|