Serie: Webdesign-Tipps

Kategorie: Serie: Webdesign-Tipps

30. Januar 2016 // Webdesign-Tipps 10: CSS / multiple Klassen

Die Option, zur Gestaltung eines Elements auch mehrere CSS-Klassen verwenden zu können, erfreut sich leider keiner besonderen Bekanntheit. Dabei bietet diese, wie das folgende Beispiel zeigt, eine ideale Möglichkeit, eleganteren, kleineren und damit auch besser wartbaren Code zu schreiben.

Panikraum im Bundeskanzleramt

Zur Verdeutlichung ein Beispiel aus dem Leben. Stellen Sie sich ein Gebäude vor. Was hat ein Gebäude immer? In der Regel Wände, Türen, mehrere Fenster und ein Dach:

Gebäude { Wände; Türen; Fenster; Dach; }

Stellen wir uns weiter eine Jugendstilvilla am Bochumer Bergbaumuseum und das Bundeskanzleramt in Berlin vor. Das sind beides Gebäude, die abgrundtiefe architektonische Hässlichkeit des Bundeskanzleramtes gegenüber einer gepflegten Jugendstilvilla lassen wir hier einmal außen vor. Weiterlesen

13. Juni 2015 // Webdesign-Tipps 9: WordPress-Editor generiert unerwünschte Zeilenumbrüche

Letzten Samstag Abend, während einer Zugfahrt zur Party nach Bochum, habe ich ein paar aktuelle und auch ältere Artikel meines Webdesign-Blogs hier gegen gelesen. Da ich natürlich keinen PC mitschleppe nutzte ich dazu mein Android-Handy und den dort installierten Chrome-Browser.

Mir sind dabei drei Dinge aufgefallen: erstens lädt das Handy die Seiten meist nur, wenn der Zug in einen Bahnhof einfährt, das muss wohl am Netzanbieter liegen. Zweitens durchkämmen immer mehr merkwürdige, ungepflegte Leute die Züge auf der Suche nach Pfandflaschen und Drittens – wesentlich gravierender: in praktisch jedem meiner Artikel finden sich ein oder zwei Zeilenumbrüche, wo eigentlich keine sein sollten.

Auf einem Smartphone fallen diese eher auf als am PC, vor dem ich normalerweise sitze, da es hier durch das schmale Display insgesamt wesentlich mehr Zeilenumbrüche gibt.

Dieses Problem hatte ich bereits im Artikel „WordPress 4.2 ohne Link-Titel“ vom 25. April angesprochen, es ist mir seit langem bekannt, aber ich konnte nie herausfinden, was die Ursache dafür ist.

Ob es an der vorgerückten Stunde, den ein oder zwei „gepflegten“ Bieren oder an den aufdringlichen Pfandflaschensammlern lag, die gierig auf meine fast leere Bierdose schielten, kann ich nicht mehr sagen – jedenfalls hat mich der Umstand dermaßen geärgert, dass ich mir schwor, gleich am nächsten Tag diesen „Augiasstall“ endlich auszumisten – kostete es, was es wolle und so möge es noch so lange dauern. Weiterlesen

18. April 2015 // Webdesign-Tipps 8: CSS / div auf Restbreite setzen

Kürzlich hatte ich ein kleines, aber fieses CSS-Problemchen in Zusammenhang mit „Responsive Webdesign“, dessen Lösung ich heute vorstellen möchte. Im Impressum einer Praxishomepage werden die gesetzlichen Pflichtangaben meist als zwei Spalten dargestellt. Das Ergebnis sollte wiefolgt aussehen:

Pflichtangaben Impressum
Der zuerst verwendete CSS-Code lautet:

.wrapper { width:100%; }
.wrapper .spalte-1 { float:left; width:40%; max-width:160px; }
.wrapper .spalte-2 { float:left; width:60%; }

Das Problem dabei ist die Angabe max-width bei .spalte-1. Diese soll verhindern, dass die erste Spalte zu breit wird und der Context mit Spalte 2 dann nicht mehr erkennbar ist. Weiterlesen

25. März 2015 // Webdesign-Tipps 7: Silbentrennung im Browser

Im Mai 2014 hatte ich im Rahmen des Artikels „Schlechtes Deutsch“ bereits einmal die Worttrennung nach Silben angesprochen. Bisher war eine solche Trennung für mich hinsichtlich Responsive Webdesign tabu, da man ja nie sagen kann, wie breit der Textbereich letztlich ist.

Kürzlich wurde mir bei einem Ausflug zu anderen Webseiten bewusst, dass schlaue Köpfen inzwischen eine Möglichkeit ersonnen haben, die Worttrennung per „Stylesheet“ zu automatisieren. Diese praktische Funktion steht in modernen Bowsern über die CSS3-Eigenschaft „hyphens“ zur Verfügung.

In den Beispielen im Netz wird der Code meist wiefolgt angewendet:

body { -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Von dieser „globalen“ Lösung nahm ich allerdings relativ schnell Abstand, da die Silbentrennung für body bei jeder Textstelle einer Webseite erfolgt, also auch z.B. für alle Überschriften. In meinem Webdesign-Blog beispielsweise würde dann die Titelzeile „Web & Webdesign Blog“ uU als „Web & Web- design Blog“ getrennt, was ich aber vermeiden möchte. Weiterlesen

20. Dezember 2014 // Webdesign-Tipps 6: Typo3 / Speaking URL wird nicht übernommen

Heute mal außer der Reihe ein Tipp für Typo3. Dieses CMS ist eigentlich nicht mein Thema, bevorzuge für eigene Projekte Joomla, in diesem Falle war / bin ich im Kundenauftrag innerhalb von Typo3 unterwegs und über einen ärgerlichen Umstand gestolpert, dessen Lösung andere vielleicht auch interessiert.

Typo3 unterstützt selbstverständlich, wie jedes ordentliche Content Management System, die Einrichtung von „Speaking URLs“, d.h. statt index.php?p=123 wird eine Seite unter z.B. biographie-old-shatterhand.html angesprochen, damit die Suchmaschinen passende Keywords schon innerhalb der URL finden.

Fakten

Fakt 1: Typo3, zumindest in der mir vorliegenden Version, bringt diese Funktion nicht von Hause aus mit sondern selbige müssen über eine „Extension“ (deutsch: „Erweiterung“) namens „RealURL“ nachgerüstet werden. Erst, wenn diese Extension unter „Kategorie Frontend“ installiert und korrekt eingerichtet wurde, steht über

Liste >> Seite aus wählen >> „Seiteneigenschaften bearbeiten“

unter dem Reiter „Allgemein“ der Abschnitt „Speaking URL path segment“ bereit. Hier ein Screenshot nach erfolgreicher Installation: Weiterlesen

3. Mai 2014 // Webdesign-Tipps 5: Dropdown

Das Leben könnte so schön sein, wenn es nicht immer irgendjemanden gäbe, der einem garantiert in die Suppe spuckt. Im Layout zweier neuer Kunden setzte ich ursprünglich ein recht praktisches, handliches Dropdown-Menü ein, welches auf allen Geräten, die ich besitze und allen gängigen Auflösungen auch wunderbar funktioniert.

Als Spielverderber stellten sich allerdings im Nachhinein die Geräte der Firma mit dem Apfel heraus; aus mir immer noch nicht ganz erklärlichen Gründen öffnet sich das Dropdown-Menü dort nicht… Weiterlesen

30. August 2013 // Webdesign-Tipps 4: Radiobuttons und Checkboxen mit CSS formatieren

Irgendwie habe ich das Gefühl, dass so ziemlich alle gängigen Browser mit Radiobuttons und Checkboxen auf Kriegsfuß stehen. Diese werden von Browser zu Browser anders positioniert und so gut wie nie so, dass diese zum Text passen. Hier zur Verdeutlichung der Problematik ein Ausschnitt aus meiner Seite im Vorher/Nachher-Vergleich:

Radiobuttons unformatiert / mit CSS formatiert
Manche mag der Versatz nach links und oben nicht stören, mich aber schon. Deshalb stelle heute für alle, die auch Wert auf ein schönes Schriftbild legen, meine Lösung des Problems in CSS vor, welche ich bei meinem Kostenrechner verwendet habe.

Zur Klarstellung: mir geht es hier nicht um das „tunen“ der Elemente, z.B. Änderung der Farbe oder andere Spielereien, mir geht es um die korrekte Positionierung vor dem Text, sodass sich der Button oder die Checkbox schön in das Textbild einfügt und das Formular nicht „zusammengefrickelt“ aussieht.

Weiterlesen

9. Juni 2013 // Webdesign-Tipps 3: Größenanpassung bei Texteingabeboxen steuern

Seit geraumer Zeit sehen mehr oder weniger alle Browser* die Möglichkeit vor, dass der Benutzer die Größe einer Texteingabe-Box selbst bestimmen kann. Erkennbar ist dies an einer kleinen, schraffierten Ecke rechts unten im Textfeld, siehe das folgende Bild:

Resize-Feld in Textarea
Diese Fläche lässt sich mit der Maus „anfassen“ und die Breite sowie Höhe der Textbox durch Ziehen verändern. Eigentlich ist das eine schöne Sache, statt mühsam innerhalb oft winziger Textboxen seine Mitteilungen zu tippen bringt man damit die Box einfach auf die gewünschte Größe, um übersichtlich schreiben und korrigieren zu können. Weiterlesen