Schlagwort-Archive: CSS

Responsive Webdesign mit CSS3 Media Queries

Den folgenden Artikel habe ich ursprünglich als „UX-Newsletter“ für meine Kollegen in der Firma geschrieben, weswegen er sich „etwas“ von dem üblichen Kram unterscheidet, den ich hier sonst so poste. Es geht darum, dass immer mehr Menschen das Internet nicht mehr ausschließlich zu Hause am Rechner, son­dern auch unterwegs auf ihrem Smartphone, Tablet oder Laptop nutzen und – *surprise* – man diese Entwicklung als Webdesigner & -entwickler bei der Umsetzung von Webprojekten berücksichtigen sollte. Vielleicht wird es also hier in naher Zukunft auch ein mobiloptimiertes Layout geben. Wer weiß?

Wer sich bis jetzt nicht angesprochen gefühlt hat, braucht an dieser Stelle also nicht weiterzulesen. Aber vielleicht liest hier ja trotzdem jemand mit, der in einer ähnlichen Branche arbeitet und damit was anfangen kann. Wenn nicht: Bald gibt’s bestimmt wieder was anderes!

Was ist Responsive Webdesign?

Unter dem Begriff „Responsive Webdesign“ versteht man die Optimierung von Webseiten für unter­schied­liche Geräte und Bildschirmauflösungen. Durch den Einsatz von flexiblen Inhalten und flexiblem Layout kann das Design auf den Nutzer und dessen Anforderungen reagieren und ihm so die beste User Experience bieten.

Im Umkehrschluss heißt das aber auch, dass das Anbieten einer Mobil-Version für alle mobilen Endgeräte nicht zwangsläufig eine Verbesserung der User-Experience darstellt. Eine für hohe Auflösungen optimierte Webseite kann auf einem Tablet-PC mitunter besser funktionieren, als eine für Smartphones optimierte Mobil-Version.

Mögliche Vor- und Nachteile

Vorteile:

  • Bessere Bedienbarkeit (z.B. durch Optimierung für Touch-Displays)
  • Bessere Lesbarkeit
  • Schnellere Ladezeiten auf mobilen Geräten (durch Anpassung der Grafiken an kleinere Displays)
  • Mehr Gestaltungsmöglichkeiten auf großen Screens
  • Variable Inhalte und Informations-Architektur für unterschiedliche Geräte
  • Verbesserte User Experience

Weiterlesen

Veröffentlicht unter Technik, Web, Webdesign | Verschlagwortet mit , , , | 1 Kommentar

HTML / CSS: Bullet-Farbe von HTML-Listen ändern

Für die wenigen unter euch, die jemals vor dem Problem stehen werden, die Farbe der Aufzählungszeichen einer HTML-Liste mittels CSS unabhängig von der Textfarbe ändern zu müssen und dabei nicht auf ein Hintergrundbild zurückgreifen wollen, so geht’s:

HTML:
<ul>
  <li><span>Listenpunkt #1</span></li>
  <li><span>Listenpunkt #2</span></li>
  <li><span>Listenpunkt #3</span></li>
</ul>

CSS:
li {color: green;}
li span {color: black;}

Ergebnis:

Ja stimmt, zusätzliches, überflüssiges Markup ist nicht besonders elegant. Funktioniert dafür aber auch mit dem IE7 – im Gegensatz zu einer etwaigen li:before-Lösung.

Veröffentlicht unter Technik, Web, Webdesign | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Spaß im CSS-Code

Was passiert, wenn Webentwickler Langeweile haben, hat csshumor.com zu Tage gefördert. Zum Beispiel sowas hier:

.vodka { position: absolute; }
.michael.jackson { background-color: black; }
.danny.devito { max-height: 0; width: 100%; }
.kids-these-days { -webkit-perspective: none; }
#me + #you { margin: 0; }

Man kann auch eigene Codeschnipsel einreichen. Lustig, nicht?

(via)

Veröffentlicht unter Quatsch und Kurioses, Technik, Web | Verschlagwortet mit | Hinterlasse einen Kommentar