Besser als display: none – Inhalte auf Smartphones richtig ausblenden

Beim responsiven Webdesign geht man üblicherweise von einer HTML-Basis aus, die Anpassungen an die unterschiedlichen Viewportbreiten finden über Media Queries, d.h. über CSS statt. Das Problem dabei ist, dass auf einem klassischen Desktop-Monitor wesentlich mehr Platz zur Verfügung steht, als bei einem klassischen kleinen Smartphone-Screen.

Wenn Inhalte auf einem Smartphone einfach keinen Platz finden, greift man gerne zu display: none, um Inhalte gezielt auf einzelnen Endgerätegruppen auszublenden. Das hat jedoch so seine Nachteile. Wer sagt beispielsweise, dass Nutzer von kleinen Screens bestimmte Informationen nicht brauchen?

Weiterlesen

Für alle Endgeräte optimieren

Optimiert für alle Endgeräte

„optimiert für alle Endgeräte“ las ich gestern in einer Werbung für die digitale Ausgabe einer Printzeitschrift. So etwas liest man häufiger oder umgekehrt stellen Leute oft die Frage: „Wie kann man eine Webseite für alle mobilen Geräte optimieren?“

Weiterlesen

7 Tipps für die Arbeit mit CSS-Shapes

CSS-Shapes ermöglichen es, Inhalte nicht-eckig umfließen zu lassen. Eine Kurzeinführung gibt es hier im Blog, eine ausführlichere Behandlung bietet ein schöner Artikel von maddesigns oder mein Offline-Artikel für die Zeitschrift web & mobile-Developer, der in der Ausgabe 1/2015 erscheint.

Hier hingegen handelt es sich nicht um eine Einführung, stattdessen habe ich ein paar Tipps für die Arbeit mit CSS-Shapes gesammelt. Darunter sind auch Dinge, über die ich bei meinen eigenen Experimenten erst einmal gestolpert bin.

Weiterlesen

CSS: Fehler in Eigenschaften aufspüren

Schnell hat man sich bei einer CSS-Eigenschaft vertippt. Um derartige Fehler aufzuspüren, hilft es schon einmal einen passenden Editor zu verwenden. Ansonsten lassen sich solche Fehler gut im Google Chrome entdecken. Wie das geht, aber auch wann scheinbare Fehler keine Fehler sind, zeige ich in einem Video. Das Video ist ein Ausschnitt aus meinem video2brain-Videotraining CSS debuggen.
Weiterlesen

Videotraining CSS debuggen

Videotraining CSS debuggen

Das Grundprinzip von CSS ist ja eigentlich ganz einfach – aber trotzdem machen Stylesheets oft nicht das, was sie machen sollten. In meinem neuen Videotraining zeige ich, wie man Code untersucht und Fehler aufspürt.

CSS debuggen – Online-Videotraining bei LinkedIn Learning

Laufzeit: 1 Std. 32 min

Weiterlesen

Elemente mit scale() spiegeln

spiegeln mit scale()

CSS3-Transformationen sind eine schöne Sachen. Hinter die Eigenschaft transform schreibt man die gewünschte Operation wie beispielsweise rotate(), um ein Element zu drehen, oder scale(), um ein Element zu vergrößern bzw. zu verkleinern.
Die folgende Zeile

transform: scale(2);

macht ein Element etwa doppelt so groß. Entsprechend wird durch

transform: scale(0.5);

ein Element halb so groß wie ursprünglich.

Worauf man vielleicht nicht sofort kommt: Ein negative Wert bei scale() spiegelt ein Element.

Weiterlesen

Schnelleinführung in CSS3-Shapes

CSS3 Shapes

Mit CSS3-Shapes kann man Elemente nicht eckig umfließen lassen. Und das geht so:

Zuerst einmal braucht man ein Element, das umflossen werden soll. Üblicherweise nimmt man dafür ein nichtrechtickes Element, beispielsweise ein freigestelltes Bild oder ein abgerundetes Foto. Dieses Element muss gefloatet werden.

Weiterlesen

CSS-Quicktipp: Tippfehler bei Selektoren finden

Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und „Element untersuchen“ oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder – bei zusammengesetzte Selektoren – dass die Verschachtelung nicht stimmt.

Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.

Weiterlesen

Halb feststehende Bereiche mit position: sticky

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben – und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit position: fixed positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

Weiterlesen

3 PHP-Bücher zu gewinnen

PHP 5.5 und MySQL 5.6 - Buchcover

Heute, am 25.9.2014, gilt noch der Frühbucher-Rabatt für meinen PHP-Online-Workshop bei akademie.de. Und passend zum Anlass gibts eine Buchverlosung meines PHP-Buchs bei akademie.de.  Drei „PHP 5.5 & MySQL 5.6“-Bücher kann man gewinnen.

Für die Teilnahme müsst ihr das Startdatum des PHP-Online-Workshops bis Montag (29.9.2014) 18 Uhr per E-Mail an workshops@akademie.de senden. Die Gewinner werden per E-Mail von akademie.de benachrichtigt. Viel Glück 🙂

Genauere Info zum Gewinnspiel

Genauere Info zum Workshop