Nach etlichen Jahren war es mal wieder so weit. Wir haben eine neuen Unternehmens-Auftritt für uns, ein neues Logo und einen „anderen“ Namen? Marke: Die Marke jado hatten wir bisher mit ja.do kommuniziert, da wir annahmen, dass so unserer Kunden die Domain www.ja.do besser im Kopf haben. Leider lagen wir hier falsch, da viele Besuche […]
Kategorie: Webdesign
Wann ist ein Element im Viewport
Es gibt eine relativ neue Möglichkeit auf einfache Art und Weise zu sehen, ob sich ein Element im Viewport (im sichtbaren Bereich) befindet oder nicht. Es ist sogenannte Vanilla Script also pures JavaScript und benötigt keine externe Bibliothek. Jetzt kann man einfach im CSS eine dementsprechende Animation erzeugen in etwa so: Nun faden die Elemente […]
Starter WordPress Theme von ja.do
Es ist soweit, endlich haben wir mal wieder ein wenig Zeit gefunden, um an unserem Basis-WordPress-Theme weiterzuarbeiten. Die Version 2.1 ist vollendet. So haben wir im Code ordentlich ausgemistet (keine IE11-Hacks mehr) und einige tolle Features hinzugefügt (Gutenberg über SCSS mit laden), Performance und onsite-SEO verbessert und vieles mehr. Weiter Informationen findet ihr auf der […]
Vimeo fullscreen embed CSS
Wenn ihr Vimeo in fluide responsive Designs einbaut, packt WordPress das in einen iFrame der irgendwelche absoluten Standardmaße eingibt. Dieses Code-Snippet im CSS ermöglicht das auf die komplette Breit auszuweiten, wenn Gutenberg aktiviert ist und ihr das Video über den Gutenberg-Block Vimeo eingebunden habt. Hier kommt es aber auf das Seitenverhältnis an! Bitte ansonsten das […]
Eigene Bildgrößen definieren
Für diverse Szenarien gibt es die Möglichkeit eigene Bildgrößen zu definieren. So kann man Preview-Bildchen beispielsweise für die Mobile-Ansicht und die Desktop-Ansicht unterscheiden. Dazu müsst ihr nur ein Snippet in dieser Art in eure functions.php eures WordPress-Themes kopieren und anpassen: So wird das Bild beschnitten und auf diese Größen skaliert. Wenn man die Bilder auf […]
Telefonnummern nur auf mobilen Geräten verlinken
Jeder kennt wahrscheinlich das Problem, das Telefonnummern nur auf mobilen Geräten verlinkt werden soll. jQuery kann hier ein wenig nachhelfen (vorasusgesetzt jQuery ist eingebunden!): So sollte in etwa der HTML Code aussehen: Und dieses Script hier setzt ihr unten bevor der body-Tag geschlossen wird:
SVG Hintergrund Bilder im Internet Explorer
SVG zieht langsam in alle Betriebssystem und deren Browser ein. Leider gibt es wieder mal eine „Unschönheit“ in unserem „Lieblingsbrowser“ Internet Explorer. Die meisten Programme wie AffinityDesign oder Illustrator geben die Breite und Höhe standardmäßig in Prozentwerten aus. Leider mag dies der Internet Explorer nicht sonderlich gern, wenn man diese als Hintergrund Bild in Elemente […]
Dashicons – die Icon-Wunderwaffe von WordPress
WordPress bringt einen Haufen schöner Icons mit, ein wenig versteckt aber sehr gut zu nutzen kann man die, wenn man sie einmal in der functions.php für das Frontend aktiviert: Jetzt muss man im DOM nur noch ein div oder span anlegen und dort zwei Klassen vergeben: Sehr schön gelöst ist hier, dass die Icons als Font […]
λόγος – Das gesprochene Wort!
Woher kommt eigentlich das Wort Logo? Es gibt sehr viele Theorien, wobei ich neulich eine gehört habe, die mir sehr gut gefallen hat. In Wikipedia kann man hier nachlesen, dass Aristoteles das Wort Logos im Sinne von „Definition“ verwendet hat. Heraklit dagegen hat dem „Logo“ die prominente Rolle einer durchwirkenden Gesetzmäßigkeit gegeben. Interessanter finde ich […]
CSS-Transitions mit SVG
Ein leidiges Thema, SVGs als Logo in den Header bauen und dann schöne CSS-Übergänge bei der Farbe über Transitions. Da dies nicht über das „fill“-Attribut gelöst werden kann, muss man hier auf eine andere Lösung zurückgreifen: HTML (stark vereinfacht): CSS:
Google Maps ohne Plugin in Webseite einbinden
Es gibt unzählige Plugins, um Google Maps in eine Webseite einzubinden, da es aber nicht das gab, was wir wollten (Styling selbst bestimmen, eigener Marker mit Verlinkung, etc.) haben wir ein Script zusammengebaut, um all diese Funktionen abzubilden. HINWEIS: Seit 2016 muss man die Maps registrieren und sich bei Google einen API-Schlüssel besorgen. Auch der schmerzhafte […]