SMACCS – Refactoring CSS for Maintainability

When you reach a point in your project where CSS changes become something nobody dares to do, it might be the right time for some refactoring to gain maintainability.

Getting rid of those (random and way too many) !important’s and selectors from hell (.header.in-footer h2 a .actually_sidebar .link.red.final span) what I like to call them instead of adding more of them to circumnavigate possible side-effects.

Maintaining legacy CSS is no fun, time-consuming, and error-prone. Even less funny is doing major frontend-refactorings when you never can be sure what you might destroy on the way without directly recognizing.

Weiterlesen

Frontend Frameworks VS Handcrafted UI

Modern web user interfaces often are single-page applications (SPAs), written in JavaScript, based on frameworks like React, Angular or vue.js. But what is rendered in the browser is still good old HTML and CSS. Therefore, even in times of SPAs, as at the beginning of the web, markup for wrapping the actual content must be written (HTML). As well as there have to be rules for how the contents are positioned and styled (CSS).

Weiterlesen

Responsiveness revisited

Spricht man im Web-Kontext über moderne Fronend-Entwicklung (wie wir auf unserem ersten Lightning WEB @night – Event), kommt man um Responsiveness nicht herum. Seit Jahren nicht. Doch nur, weil der Begriff uns schon lange begleitet, heißt das nicht, dass wir ihn auch alle (auf die gleiche Art und Weise) verstanden haben. Es gibt unzählige Definitionen – und ich möchte nicht noch eine weitere, unvollständige hinzufügen. (Und eine richtige, umfassende Definition kann ich wohl leider auch nicht liefern.) Daher soll es im Folgenden um das grundlegende Verständnis dafür gehen, was Responsiveness im Web eigentlich ist / bedeutet / möchte.

Denn nur wer verstanden hat, was die Ziele responsiven (Web-)Designs sind, kann für die eigenen Bedürfnisse / die eigene Website fundierte und zukuftssichere Entscheidungen treffen.

Weiterlesen

Vom Zähmen der CSS-Monster

Wer schon einmal die komplexen Tiefen des Backends verlassen musste, um im vermeintlich einfacheren Frontend eines Projektes das Bunte und Spielerische anzupassen, wünscht sich meist schnell zurück zu den dokumentierten Funktionen, übersichtlichen Modulen und standardisierten Codezeilen. Nämlich genau dann, wenn man die völlig chaotischen und total überladenen CSS-Dateien – von mir auch liebevoll CSS-Monster genannt – zu Gesicht bekommt. Meist traut man sich kaum die 1000+ Zeilen auch nur schief anzusehen, weil man schon im vornherein weiß, dass jede noch so winzige Änderung das schlafende Monster wecken und das Design zerstören kann. Doch woher kommen diese Monster und wie kann man sie vermeiden?

In diesem Artikel möchte ich die Ursachen von CSS-Monstern erklären und Ihnen vier Punkte zur Vermeidung eben dieser vorstellen.
Weiterlesen

ExtJS Theming: Eine Anwendung, 100 Gesichter

In der Frontendentwicklung ist es nicht unüblich, eine Anwendung in verschiedener Art in Erscheinung treten zu lassen. Ob für die Abgrenzung mehrerer Brands voneinander, den Verkauf einer Software mit spezifischen Designanpassungen für den Käufer (etwa für einen Online-Shop), oder zur Durchführung von A/B-Tests mit unterschiedlich gestylten Frontendkomponenten – es gibt eine Vielzahl von Gelegenheiten, bei denen es Sinn macht, eine Anwendung mit unterschiedlichen Gestaltungen in anderen Gewändern zu zeigen.

Hier möchte man selbstverständlich in den wenigsten Fällen das komplette Frontend neu schreiben. Dabei können bereits kleinere Änderungen, etwa eine Anpassung der verwendeten Farben, das Aussehen der Anwendung grundlegend ändern.

Im Folgenden möchte ich zeigen, wie man durch den Einsatz von Themes die eigene Anwendung mit relativ geringem Aufwand in neuem Glanz präsentieren kann. Weiterlesen

Responsive Design (technisches HowTo)

Was ist eigentlich Responsive Design und warum kommt man derzeit kaum noch darum herum? Welche Probleme kann man damit lösen und wie funktioniert das Alles technisch?

Auch wenn die heute eingesetzten Webtechnologien alle noch nicht besonders alt sind, ändern sich die Anforderungen und Möglichkeiten doch beinahe täglich. Transparente Bilder, Hovereffekte, Schatten und Farbverläufe sind Standard. Mittlerweile unterstützt (fast) jeder Browser JavaScript, CSS ist bei Versionspunkt 3, HTML gar bei Version 5 angelangt. Sogar der Internet-Explorer verursacht immer weniger Schmerzen und ist spätestens seit Version 9 wieder mit von der Partie.

Einige Probleme bleiben aber trotz aller Änderungen bestehen… Ich erinnere mich noch sehr gut an die Diskussionen, ob eine Website nur für 640×480 optimiert sein muss, oder ob man gar 800×600 voraussetzen kann. Darüber oder darunter gab es im Prinzip nicht viel. Mittlerweile ist es – was die Auflösungen angeht – deutlich vielfältiger und damit schwieriger geworden. Von Retina-Displays mit einer Auflösung von 2880×1800 Pixeln und mehr bis zum Smartphone mit teilweise nur 240×340 Pixeln soll die Homepage-/Webapp nicht nur „gerade so lesbar“ sein, sondern auch etwas hermachen. Eine Obergrenze ist noch nicht erreicht. Das Stichwort heißt Responsive Design. In diesem Artikel möchte ich mich mit diesem aktuellen Problem der Webentwicklung beschäftigen und aufzeigen, wie man mit diesem umgehen kann.

Weiterlesen

Agiles CSS

Bei Mayflower wird agil entwickelt. In erster Linie bedeutet dies für den Kunden, dass wir auf geänderte Anforderungen schnell reagieren können.
Schnell reagieren zu können heißt auch, neue oder geänderte Anforderungen so schnell wie möglich umzusetzen.
Dafür muss der Code so aufgebaut sein, dass man mit minimalen Aufwand Änderungen durchführen kann.
In PHP nutzen wir dafür entsprechende Abstraktionen und Kappselungen.

Aber wie schaut das Ganze im Frontend aus, insbesondere in CSS Dateien?
Was, wenn der Kunde das Blau aus dem vorgegebenen Farbschema eine Nuance dunkler haben möchte?
Weiterlesen

YAML – Yet Another Multicolumn Layout

What is YAML? YAML is a framework to develop flexible layouts based on (X)HTML and CSS. In my opinion the best features of YAML are that it is flexible and easy accessible and not to forget that it is compatible with many browsers. Furthermore, it gives you maximal freedom concerning design. You can work with ‚any order columns‘ and the stylesheet drafts are very functionally arranged. The separators and backgrounds of columns can be designed without including any graphics. The subtemplates are suited to build multifunctionally applicable, flexible and nested grid modules.

Which browsers are supported? On Windows Internet Explorer 5.0 up to 7.0 is supported, on Linux Konquerer 3.3+, Galeon 1.3+, Epiphany 1.4.8+ and Lynx. Macintosh OS Safari 1.0.3+ and Camino 0.6+. And across operating systems Firefox 1.0+, Mozilla Suite 1.7.1+, SeaMonkey 1.0+, Netscape 8.0+ and Opera 6+ . As you see, quite a lot!

What is meant by: accessibility and web standards? The XHTML code and the stylesheets are of course valid. Many browsers are supported, as you just have read before. YAML abandons layout tables because it arranges its columns arbitraryly to get best performance with screenreaders and search engines. As a result you achieve more flexibility as to the layout and print arrangement and the rendering gets faster.
As to accessibility YAML has a so-called skip-link-navigation which means that screenreaders can get the relevant contents faster.

What’s the principle method of practice? YAML is working with the top-down principle, from the general approach to special solutions. Therefore an across browser, fully functional, modular constructed basic layout is available. The web designer,however, has to modify it and optimize the XHTML and CSS code and needs to remove all elements from the layout which are not necessary.

What layouts can you build with YAML? You can design layouts with one to three columns both with fixed or flexible widths. Or you can just construct flexible grid modules with subtemplates. The column system can get nearly arbitrary expanded so there is the possibility to design grid modules. HOWEVER; YAML is NOT a ready layout which you can take and that’s it: You have to adapt it to your needs and optimize it, that is delete all unnecessary elements otherwise it affects the performance.
The architecture of the XHTML and the CSS structure of the basic modules guaruantees independence from the constitution of later integrated contents. The enclosure of the basic elements in separate div-containers protects the correct positioning of the elements no matter how the later usage of the containers will be.

How much does YAML cost? Well, YAML has been licensed under creative commons attribution 2.0 (CC-A 2.0) since version 2.2 and permits the free use of the framework for non-commercial and commercial use provided the name of the author and a backlink to the project homepage remains in the footer or the imprint. Alternatively, there are also 2 commercial-license models to buy YAML.

What version is YAML? YAML is permanently developed further. Since 2008-05-24 the version 3.0.5 has been available. If you separate your own source code from the basic YAML source code you can easily update to the current version.

Where do you get YAML? You can download YAML at Dirk Jesse´s homepage: http://www.yaml.de.

Designers who blog

On the search for some inspiration regarding CSS & Co., I came across „Designers Who Blog“, a weblog showcasing blogs from various designers including screenshots of the frontpage of their blog. Designers Who Blog describes itself as: „Designers who Blog: Design, Illustration, Photography, Web, Advertising, Branding …“

Thanks to Patrick Breitenbach from werbeblogger.de for this link.

More CSS stuff is available at CSS reboot. We missed the deadline of May, 1st…