Tipps zur Webseitengestaltung - BlogAls Ergänzung zu den „Tipps zur Webseitengestaltung“, werden in diesem Blog einzelne Themen detaillierter erläutert.https://www.kaempf-nk.de/webseitengestaltung/image/fb-logo.png2016-01-04T10:23:00+00:00Harry Kämpfhttps://www.kaempf-nk.de/webseitengestaltung/ueber-mich.htmlkontakt@kaempf-nk.dehttps://www.kaempf-nk.de/webseitengestaltung/Multiline Autocomplete-Box mit jQuery und jQuery-UIhttps://www.kaempf-nk.de/webseitengestaltung/blog/jquery-multiline-autocomplete.html2016-01-04T10:23:00+00:00Beispiel einer mehrzeiligen Autocomplete-Box basierend auf jQuery-UIAlternativen zu Javascript-Hinweis auf veralteten Browserhttps://www.kaempf-nk.de/webseitengestaltung/blog/hinweis-veralteter-browser.html2015-11-17T19:33:00+00:00Es muss nicht immer ein Javascript sein, um auf veraltete Browser hinzuweisen. Gehen Sie alternative Wege!Application Cache löschenhttps://www.kaempf-nk.de/webseitengestaltung/blog/application-cache-loeschen.html2015-10-19T20:57:00+00:00Wie kann ich den Application Cache leeren, löschen oder aktualisieren? Hier finden Sie die Antwort.Application Cache als Mittel zur Performancesteigerunghttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-application-cache.html2015-05-27T20:12:00+00:00Nutzen Sie den Application Cache, um die Performance Ihrer Webseiten zu steigern und sie offline verfügbar zu machen.Ist Ihre Website mobile friendly?https://www.kaempf-nk.de/webseitengestaltung/blog/mobile-friendly-website.html2015-04-07T20:20:00+00:00Prüfen Sie anhand weniger Kriterien, ob Ihre Website mobile friendly und somit zukunftssicher gestaltet ist.Die verschiedenen Methoden, um Web-Fonts einzubindenhttps://www.kaempf-nk.de/webseitengestaltung/blog/wie-webfonts-einbinden.html2015-03-24T19:10:00+00:00Auflistung von Pro und Contra zu den verschiedenen Methoden, Web-Fonts einzubinden.Eigene Icon-Webfonts erstellen und einbindenhttps://www.kaempf-nk.de/webseitengestaltung/blog/eigene-icon-webfonts-erstellen.html2015-02-22T19:17:00+00:00Anleitung zur Erstellung eines individuellen Icon-Webfont-Satzes, um Ladevolumen zu reduzieren.Mehrsprachige Webseiten erstellenhttps://www.kaempf-nk.de/webseitengestaltung/blog/mehrsprachige-webseiten-erstellen.html2015-01-27T19:17:00+00:00Gegenüberstellung der Vor- und Nachteile einer automatischen Übersetzung im Vergleich zur vollwertigen Übersetzung in eine andere SprachversionHeader scrollbar / fixiert am oberen Fensterrandhttps://www.kaempf-nk.de/webseitengestaltung/blog/header-scroll-und-fix.html2015-01-02T10:59:00+00:00Beispiel eines scrollbaren Headers, der am oberen Rand des Browserfensters fest stehen bleibt.Security-Betrachtung zu localStoragehttps://www.kaempf-nk.de/webseitengestaltung/blog/html5-localstorage-security.html2014-11-19T20:48:00+00:00Bei Verwendung von localStorage sind auch Security-Aspekte zu berücksichtigen. Erfahren Sie hier, worauf es dabei ankommt.Verwendung von localStorage - praktisches Beispielhttps://www.kaempf-nk.de/webseitengestaltung/blog/html5-localstorage-in-der-praxis.html2014-10-21T19:24:00+00:00Anwendung von localStorage in modernen Webapplikationen - Schritt für Schritt erläutert.Verwendung von localStorage - die Theoriehttps://www.kaempf-nk.de/webseitengestaltung/blog/html5-localstorage-die-theorie.html2014-10-05T17:55:00+00:00Wozu dient localStorage in modernen Webapplikationen und wofür ist er geeignet?YouTube-Video w3c valide als iframe in html5-WebSite einbindenhttps://www.kaempf-nk.de/webseitengestaltung/blog/youtube-w3c-valide-html5-iframe.html2014-09-03T16:45:00+00:00Anleitung zum w3c validen Einbinden von youTube-Videos als iframe in html5-WebSeiten.Bildschirmaktionen als Video aufnehmenhttps://www.kaempf-nk.de/webseitengestaltung/blog/bildschirm-als-video-aufnehmen.html2014-07-12T19:15:00+00:00Anleitung zur Erstellung von Video-Tutorials (Aufnahme von Bildschirmaktionen mit einem Recorder)Verwendung von relativen Schriftgrößenhttps://www.kaempf-nk.de/webseitengestaltung/blog/css-relative-schriftgroessen.html2014-05-05T19:15:00+00:00Geben Sie Ihrer Website durch relative Maßangaben und Schriftarten die Möglichkeit einer flexiblen Darstellung auf verschiedene Endgeräten.Fester Header / Footer - Webseite scrollbar mit CSShttps://www.kaempf-nk.de/webseitengestaltung/blog/header-footer-fest-css-variante-2.html2014-03-29T10:18:00+00:00Das Beispiel zeigt, wie Sie eine Webseite mit feststehendem Header und Footer erstellen können. Der Rollbalken erstreckt sich über die gesamte Webseite.Fester Header / Footer - Content scrollbar mit CSShttps://www.kaempf-nk.de/webseitengestaltung/blog/header-footer-fest-css-variante-1.html2014-03-23T10:59:00+00:00Dieses Beispiel zeigt, wie Sie eine Webseite mit feststehendem Header und Footer erstellen können. Rollbalken befinden sich nur am Contentbereich.Favicons und Touch-Icons optimal einbindenhttps://www.kaempf-nk.de/webseitengestaltung/blog/favicon-touch-icon-einbinden.html2014-02-18T19:17:00+00:00Anleitung zum Einbinden von Favicons und Touch-Icons in die eigene Website (performanceoptimiert und mit minimalem Overhead).Windows-Kacheln konfigurieren mit der browserconfig.xmlhttps://www.kaempf-nk.de/webseitengestaltung/blog/ie-browserconfig-xml.html2014-01-27T19:05:00+00:00Infos zu Nutzen und Aufbau einer browserconfig.xml, um Kacheln zum Anheften an der Windows-Startseite zu konfigurieren.Virtuelle Entwicklungsumgebung, um neue Features zu testenhttps://www.kaempf-nk.de/webseitengestaltung/blog/virtuelle-entwicklungsumgebung.html2014-01-14T19:27:00+00:00Anleitung zum Aufbau einer virtuellen Entwicklungsumgebung auf Basis der VirtualBox portable.Valide GZIP Kompression für statische Webseitenhttps://www.kaempf-nk.de/webseitengestaltung/blog/gzip-kompressor-valide.html2013-12-16T19:58:00+00:00Lösungsbeispiel: Einfache Kompression von statischen Webseiten mit PHP, falls eine serverseitige Kompression nicht möglich ist.CSS-Tutorial: Kombination von before mit hover und backgroundhttps://www.kaempf-nk.de/webseitengestaltung/blog/css-hover-before-background.html2013-12-03T19:05:00+00:00Das Tutorial zeigt, wie durch die Kombination von before, hover und background recht ansprechende Menüleisten erstellt werden können.Placeholder-Attribut in alten Browsern (z.B. IE 6-9) ermöglichenhttps://www.kaempf-nk.de/webseitengestaltung/blog/placeholder-ie6-ie7-ie8-ie9.html2013-10-20T11:04:00+00:00Cross-Browser-Support für das HTML5-Placeholder-Attribut. Hier werden die verschiedenen Möglichkeiten vorgestellt und Sie erhalten die passenden Anleitung.Effektives Verschleiern / Verstecken von Email-Adressenhttps://www.kaempf-nk.de/webseitengestaltung/blog/emailadresse-verstecken.html2013-09-02T19:44:00+00:00Mit diesem Online-Tool können Sie einfach und effektiv Ihre Emailadresse auf Webseiten verschleiern bzw. verstecken.jQuery optimieren bzw. individuell anpassenhttps://www.kaempf-nk.de/webseitengestaltung/blog/jquery-optimieren-individuell-anpassen.html2013-06-18T19:44:00+00:00Kompilieren Sie Ihr eigenes jQuery, um die Performance Ihrer Webseiten zu optimieren und das Übertragungsvolumen zu minimieren.Zwei Klicks für mehr Datenschutz - performanceoptimierthttps://www.kaempf-nk.de/webseitengestaltung/blog/2-klicks-mehr-datenschutz-performance.html2013-05-27T16:15:00+00:00Zwei-Klick-Lösungen für mehr Datenschutz sind weit verbreitet. Hier finden Sie eine performanceoptimierte Version, die volle Funktionalität bietet.Touch Events richtig anwendenhttps://www.kaempf-nk.de/webseitengestaltung/blog/touch-events-richtig-anwenden.html2013-05-08T21:23:00+00:00Touch-Events in Verbindung mit Mouse-Events können Probleme bereiten, z.B. doppelte Aktionen. Dies lässt sich aber vermeiden. Hier finden Sie die Lösung.Erfahrungsbericht: Umstellung Website auf responsive Webdesignhttps://www.kaempf-nk.de/webseitengestaltung/blog/responsive-webdesign-erfahrungen.html2013-04-17T21:11:00+00:00Worin lagen die Schwerpunkte der Umstellung meiner Website auf responsive Webdesign? Worauf habe ich besonders geachtet? Welche Probleme galt es zu lösen?Responsive Webdesign - Was sind die Hauptmerkmale?https://www.kaempf-nk.de/webseitengestaltung/blog/responsive-webdesign.html2013-04-01T16:14:00+00:00Was ist responsive Webdesign? Wie kann durch den mobile first Ansatz das Datenvolumen sinnvoll gesteuert werden? Hier finden Sie die passenden Antworten.Separate mobile Website oder responsive Webdesign?https://www.kaempf-nk.de/webseitengestaltung/blog/mobile-website-oder-responsive-webdesign.html2013-03-24T15:45:00+00:00Separate mobile Website vs. responsive Webdesign: Hier werden die Vor- und Nachteile gegenübergestellt. Welche Lösung hat wo Ihre Vorteile?Drei Arten, um einen Hintergrund-Verlauf per CSS zu erzeugenhttps://www.kaempf-nk.de/webseitengestaltung/blog/hintergrund-verlauf-css.html2013-03-12T20:09:00+00:00Hintergrund-Verläufe (Gradienten) können auf verschiedene Arten erzeugt werden. Hier werden die am Weitesten verbreiteten Techniken kurz vorgestellt.Scriptbeispiel: Social Button - w3c valide für HTML5 Websitehttps://www.kaempf-nk.de/webseitengestaltung/blog/social-button-w3c-valide.html2013-02-23T21:22:00+00:00Anhand dieses Scriptbeispiels (Erläuterung und Download) können Sie die üblichen social Button valide und codeoptimiert in eine HTML5-Webseite integrieren.Was sind strukturierte Daten und wozu dienen sie?https://www.kaempf-nk.de/webseitengestaltung/blog/strukturierte-daten.html2013-01-31T20:20:00+00:00Durch strukturierte Daten kann man seiner Website ein Mehr an Informationen geben. Hier erfahren Sie die Hintergründe und erhalten die passende Anleitung.Unterschied zwischen mobilen Websites und mobilen Appshttps://www.kaempf-nk.de/webseitengestaltung/blog/mobile-website-app-unterschied.html2013-01-10T19:45:00+00:00Kurz erläutert: Worin liegt der Unterschied zwischen mobilen Websites und mobilen Apps? Für welchen Anwendungsfall eignet sich welche Version an Besten?HTML5 Grundgerüst - mit Anbindung an soziale Netzwerke (W3C-valide)https://www.kaempf-nk.de/webseitengestaltung/blog/html5-grundgeruest-valide-w3c.html2012-11-22T20:44:00+00:00W3C valides HTML5-Grundgerüst zum Download mit Anbindung an die sozialen Netzwerke (Facebook, Twitter, Google+) und IE6+ Support.HTML5 und CSS3 für ältere Browser ermöglichen über Feature Detectionhttps://www.kaempf-nk.de/webseitengestaltung/blog/html5-feature-detection-modernizr.html2012-11-02T11:20:00+00:00Durch Feature Detection können Sie für ältere Browser fehlende HTML5 oder CSS3-Funktionalitäten gezielt ermöglichen. Hier finden Sie die passende Anleitung.Sitemap.xml - sinnvoll oder nutzlos?https://www.kaempf-nk.de/webseitengestaltung/blog/sitemap-xml-vorteil.html2012-10-06T16:44:00+00:00Wozu dient die Sitemap.xml? Welche Vorteile bringt eine Sitemap.xml und welche Grundbestandteile gehören zu ihr? Hier finden Sie die passenden Antworten.Facebook: gefällt mir Angaben entfernen bzw. verbergenhttps://www.kaempf-nk.de/webseitengestaltung/blog/facebook-gefaellt-mir-aus-chronik-entfernen.html2012-08-26T12:47:00+00:00„gefällt mir“ Angaben aus der Chronik (Timeline) entfernen bzw. verbergen. Hier finden Sie die passende Anleitung.Performancegewinn durch paralleles Download, z.B. über ein CDN (Content Distribution Network)https://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-durch-cdn.html2012-06-03T18:22:00+00:00Erfahren Sie hier, wie durch paralleles Laden häufig genutzter Scripte über ein CDN (Content Distribution Network) spürbare Performancegewinne möglich sind.Performancegewinn durch Inline Grafikenhttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-inline-grafik.html2012-05-02T19:48:00+00:00Durch das direkte Einbetten von Grafiken in eine Webseite lässt sich gezielt die Anzahl der Requests verringern. Hier finden Sie eine kurze Anleitung.Was sind Geo-Tags und wozu dienen sie?https://www.kaempf-nk.de/webseitengestaltung/blog/geo-tags.html2012-04-18T21:08:00+00:00Geo-Tags helfen Suchmaschinen, Ihre Webseiten lokal zuzuordnen. Hier werden die wesentlichen Geo-Tags vorgestellt und einige Anwendungsbeispiele gegeben.SEO - Wie vermeide ich doppelten Content?https://www.kaempf-nk.de/webseitengestaltung/blog/seo-doppelten-content-vermeiden.html2012-01-25T21:04:00+00:00Doppelter Content führt zur Abwertung der Webseiten bei Suchmaschinen. Hier erfahren Sie, wie man mit einfachen Mitteln das Problem lösen kann.Wie kann ich die Klickrate auf meinen Webseiten erhöhen?https://www.kaempf-nk.de/webseitengestaltung/blog/seo-klickrate-erhoehen.html2012-01-12T20:03:00+00:00Erhöhen Sie die Klickrate auf Ihren Webseiten durch den perfekten Link und die passende Beschreibung. Hier erhalten Sie die notwendigen Hintergrundinfos.Praktische Beispiele: Umleitung auf mobile Webseitenhttps://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-umleitung.html2011-12-28T16:54:00+00:00Praktische Beispiele (PHP, ASP, .htaccess) zur automatischen Umleitung auf mobile Webseiten - durch Auswertung des Browser-User-Agents (zum freien Download)Erstellung einer individuellen 404 Fehlerseitehttps://www.kaempf-nk.de/webseitengestaltung/blog/individuelle-404-fehlerseite.html2011-12-13T20:20:00+00:00Eine individuelle 404 Fehlerseite gehört zu jedem ordentlichen Webauftritt. Hier erfahren Sie, wie man solch eine Webseite gestaltet und konfiguriert.Performancegewinn durch Minimierung der DOM Manipulationenhttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-javascript-dom-manipulation.html2011-11-10T18:55:00+00:00Manipulationen am DOM (Document Object Model) sind häufig Ursache für geringe Webseiten-Performance. Hier erfahren Sie, wie man die Verluste begrenzen kann.Texte suchmaschinenfreundlich gestaltenhttps://www.kaempf-nk.de/webseitengestaltung/blog/suchmaschinenfreundliche-texte.html2011-10-26T19:13:00+00:00Verfassen Sie Ihre Texte suchmaschinenfreundlich. Hier werden Ihnen die wesentlichen Aspekte, die zu berücksichtigen sind, kurz erläutert.Suchmaschinenoptimierung (SEO) - die wichtigsten on-page Faktorenhttps://www.kaempf-nk.de/webseitengestaltung/blog/seo-on-page-faktoren.html2011-10-12T20:10:00+00:00Suchmaschinenoptimierung (SEO) ist ein wesentlicher Bestandteil der Websitegestaltung. Hier werden Ihnen die wesentlichen on-page Faktoren kurz vorgestellt.Richtige Bildformate im Web - GIF, JPG oder PNG?https://www.kaempf-nk.de/webseitengestaltung/blog/richtige-bildformate-im-web.html2011-08-02T18:27:00+00:00Vergleich der im Web üblichen Bildformate GIF, JPG und PNG mit ihren Vor- und Nachteilen. Welches Bildformat kommt wann zur Anwendung?Facebook „gefällt mit“-Button W3C-valide für XHTML-stricthttps://www.kaempf-nk.de/webseitengestaltung/blog/facebook-like-button-w3c-valide.html2011-07-21T20:40:00+00:00Anleitung, um einen W3C-validen „gefällt mit“-Button für den DOCTYPE XHTML-strict zu erstellen.Berechnung der Spezifität von Stylesheet-Informationenhttps://www.kaempf-nk.de/webseitengestaltung/blog/rangfolge-von-stylesheets.html2011-05-30T19:59:00+00:00Durch Berechnung der Spezifität kann ermittelt werden, an welchem Selektor ein Stylesheet hinterlegt werden muss, damit der gewünschte Effekt eintritt.Performancegewinn durch Content-Komprimierung (gzip) am Apache-Webserverhttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-durch-gzip.html2011-05-12T20:47:00+00:00Anleitung zur Komprimierung (gzip) statischer Inhalte - z.B. html, css, js am Apache-Webserver. Daraus ergibt sich ein signifikanter Performancegewinn.Performancegewinn durch die Reduzierung der http-Requestshttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-durch-reduzierung-requests.html2011-04-12T20:54:00+00:00Optimierung der Webseiten durch Reduzierung der http-Requests und Festlegung deren idealer Reihenfolge.Erstellung von mobilen Webseiten - Fazit und Zusammenfassunghttps://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-erstellen.html2011-03-23T19:43:00+00:00Zusammenfassung der Besonderheiten auf die geachtet werden muss, wenn man Webseiten für mobile Geräte erstellen bzw. optimieren möchte.Unterscheidung: Wann wird die mobile oder die herkömmliche Version einer Webseite angezeigt?https://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-unterscheidung.html2011-03-08T19:59:00+00:00Wie kann man es steuern, in Abhängigkeit des Endgerätes die mobile oder die herkömmliche Version einer Webseite anzuzeigen? Die Antwort finden Sie hier.Was muss innerhalb einer Webseite angepasst werden, um sie für mobile Geräte zu optimieren?https://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-anpassung.html2011-02-17T20:35:00+00:00Erläuterung der Anpassungen, die innerhalb einer Webseite notwendig sind, um sie für mobile Geräte vorzubereiten und zu optimieren.Optimierung von Webseiten für mobile Gerätehttps://www.kaempf-nk.de/webseitengestaltung/blog/mobile-webseiten-optimierung.html2011-02-02T19:47:00+00:00Was ist bei der Optimierung von mobilen Webseiten zu beachten? Hier beginnt eine lose Folge, in der die Besonderheiten mobiler Webseiten erläutert werden.Performancegewinn durch CSS-Spriteshttps://www.kaempf-nk.de/webseitengestaltung/blog/performance-gewinn-durch-css-sprites.html2011-01-19T19:57:00+00:00Einsatz von CSS-Sprites zur Minimierung von http-Requests und somit zur Steigerung der Performance.Veröffentlichung von lokal erstellten Webseitenhttps://www.kaempf-nk.de/webseitengestaltung/blog/webseite-veroeffentlichen.html2011-01-06T15:54:00+00:00Erläuterung: Wie kann man Webseiten, die man lokal auf seinem Rechner erstellt hat, auf einem Webserver veröffentlichen.Button mit hover-Effekt und nur einer Bilddateihttps://www.kaempf-nk.de/webseitengestaltung/blog/hover-button-ohne-nachladen.html2010-12-27T14:48:00+00:00Anleitung zur Erstellung eines hover-Effektes für einen Button mit nur einem Bild, d.h. Nachladen einer zweiten Bilddatei.Sichere php.ini Einstellungenhttps://www.kaempf-nk.de/webseitengestaltung/blog/sichere-php-ini.html2010-12-11T16:41:00+00:00Auflistung und Erläuterung der wesentlichen php.ini Einstellungen, die für einen sicheren Betrieb von PHP auf einem Webserver notwendig sind.CSS mit HTML verbindenhttps://www.kaempf-nk.de/webseitengestaltung/blog/einbinden-von-css.html2010-12-02T20:11:00+00:00Erläuterung der Varianten, um CSS (Cascading Style Sheets) in HTML einzubindenDivision - Höhe 100% browserunabhängig mit CSShttps://www.kaempf-nk.de/webseitengestaltung/blog/div-hoehe-100-css.html2010-11-20T16:28:00+00:00Beispiel für die browserunabhängige Darstellung einer Division mit einer Höhe von 100% durch CSSFormatierung von Listenhttps://www.kaempf-nk.de/webseitengestaltung/blog/formatierung-von-listen.html2010-11-07T16:06:00+00:00Erläuterung der unterschiedlichen Gestaltungsmöglichkeiten von Listenpunkten in AufzählungenPHP: Prüfung von Formular-Variablenhttps://www.kaempf-nk.de/webseitengestaltung/blog/pruefung-von-variablen.html2010-10-24T18:03:00+00:00Sichere Prüfung der übergebenen Formular-Variablen durch einen Filter-Layer in PHP.PHP: Vorteile von Bind-Variablenhttps://www.kaempf-nk.de/webseitengestaltung/blog/vorteile-bind-variablen.html2010-10-17T21:34:00+00:00Erläuterung der Vorteile von Bind-Variablen und deren Anwendung beim Zugriff auf Datenbanken.Formulare: Verwendung von POST und GEThttps://www.kaempf-nk.de/webseitengestaltung/blog/verwendung-post-get.html2010-10-01T22:16:00+00:00Erläuterung: Was ist der Unterschied zwischen der POST- und GET-Methode und in welcher Situation verwendet man welche VarianteKodierung von Webseiten in UTF-8 Formathttps://www.kaempf-nk.de/webseitengestaltung/blog/kodierung-in-utf8.html2010-09-05T20:10:00+00:00Anleitung zur korrekten Kodierung von Webseiten in UTF-8 Format - sowohl für Webseiten, als auch für Datenbanken.