Kurznachrichten

Ressourcen für WebDesigner, Links, Ideen, Gedanken, einfach alles was ich kurz und bündig gern weitergeben mag.

Child Selektoren

das Spiel mit Child-Selektoren
in dieser Slideshow wird die Magie der Child-Selektoren anschaulich und kurz gezeigt. Es zahlt sich aus diese zu nutzen.

statt eine irre Menge an CSS Klassen zu verwenden, einfach :nth-of-type oder :last-child first:child und die Spielerei mit der Darstellung kann beginnen.

benutzerfreundliche Eingabefelder – neue Generation

Zahle ich mit Kreditkarte im WWW bin ich oftmals frustriert.
Einmal muss ich die Leerzeichen zwischen den Ziffernfolgen eingeben, einmal darf ich das nicht.
Angezeigt wird mir dies meist nachdem ich das Formular abgesendet habe….

Mit Label Mask wird ein benutzerfreundlicherer Weg gesucht und vielleicht auch gefunden.

What Labelmask does is inserts formatting hinting after the label, and updates as the user inputs their information. When the user leaves the field the formatting gets applied to the input value itself, Politespace-style.



absolut flexible Navigation

Crazy Responsive Sticky Menu

Diese Navigations oder Menü Lösung passt sich überall an, mal teilt sie sich, mal mal rutscht sie einfach nach Links, mal versteckt sie sich hinter einem MenüButton. Und sie kommt ohne extra eingebundenes Script aus…

Herrlich sieht es aus, doch es ist noch nicht klar erkennbar, ob auch der IE8 sie noch mag und eine zeitlang werd ich den noch berücksichtigen müssen.

mobile Navigations Lösungen

Flex Nav verspricht eine einfache und absolut userfreundliche Navigation auf mobilen Devices.
Flex Nav kann Mega Menüs und Menüs für „Single Pages“.

Flex Nav
Verwendung:

<ul class="flexnav" data-breakpoint="800"> 
<li>...
</li> </ul>


Menu Button irgendwo außerhalb des Navigations HTMLs:

<div class="menu-button">Menu</div>


Das Style nicht vergessen, ich werde es aber integrieren und nicht extra verlinken 🙂

<link href="css/flexnav.css" 
rel="stylesheet" type="text/css" />


Das Script in den HTML Footer

<script type="text/javascript" 
src="js/jquery.flexnav.min.js">
</script>


Vor den /body initialisieren

$(".flexnav").flexNav();


Die weiteren Optionen sind auf der Seite zu finden.



Newsletter Design und Yahoo

Yahoo Mail mag Media Queries nicht. Hier eine Möglichkeit wie man E-Mails auch für Yahoo sowohl für den Desktop wie für mobile Endgeräte gut ausliefern kann.

Newsletter Design und Yahoo Mail

Attribut Selektoren versteht Yahoo nicht, daher ist dies eine wirksame Methode. Jedoch aufpassen, dass man damit nicht einen anderen Mail Client verärgert. Wie immer bleiben Newsletter spannend.





Responsive E-Mail Support

E-Mails und vor allem Newsletter werden immer öfter mobil gelesen. Aber welche Clients und APPs verstehen @media queries.
StyleCampaign liefert eine fantastische Auflistung und in den Kommentaren findet man auch noch Hilfreiches ==> hier.

Fazit: fluid und @media queries oder fix-width und @media queries beides ohne Viewport Angabe und man ist auf der halbwegs sicheren Seite mit seinem Newsletter Layout.