Im Buzzwort-Bingo hat beim heutigen Blogpost ‚Responsive Web‘ zugeschlagen.
Nachdem Tablets und Smartphones in sehr kurzer Zeit zur potentiellen Zielgruppe für die meisten Webapplikationen gelten, geistert ‚Responsive Web‘ als Paradigma durch das Web – und meint damit eigentlich nur, dass man jetzt wirklich darauf achten sollte dass Webseiten auch auf kleineren Displaygrößen benutzbar sind. Man tut dem ganzen aber Unrecht wenn man es nur als Mobile-Thema abtut – auch wer ’nur‘ mit dem Desktopbrowser surft kann von den Techniken profitieren.
Kernelement des ganzen sind CSS Media Queries. Diese stellen im Grunde eine Verfeinerung der media-types da, die alle Browser (ausser IE, der kann es ohne Hacks erst ab Version 9) seit Urzeiten unterstützen. mit
@media print {
... CSS für Druckausgabe ...
}
@media screen {
... CSS für Bildschirmausgabe ...
}
… stellen unzählige Angebote bereits Ihre Druckseiten anders dar als die Browseransicht (z.B. andere Schriftgrößen).
Media-Queries gehen noch einen Schritt weiter: Mit ihnen kann man CSS in Abhängigkeit der Fenstergröße, der Bildschirmorientierung (z.B. wenn man das Tablet dreht), des Höhe/Breite Verhältnisses, der Pixeldichte und vielen mehr anpassen. Die Query
@media screen and (max-width: 1024px) {
... css ...
}
definiert z.B. Regeln,die nur dann gelten, wenn das Browserfenster 1024px klein ist und greift auch, sobald der Nutzer das Fenster kleiner zieht. Meistens sieht man so etwas wenn es darum geht Mobilgeräte zu unterstützen, z.B. indem Werbebanner anders angezeigt werden sobald ein Gerät mit bestimmter Pixeldichte und Auflösung auf die Seite kommt. Man muss sich jedoch bewusst sein dass auch ein Desktopbrowser mit den gleichen Eigenschaften gerade die Seite anschauen könnte. Einen eigenen Medientyp für Smartphones oder Tablets gibt es nämlich nicht.
Allerdings sind media-queries in variablen Umgebungen wie dem Desktop-Browser fast praktischer: Da die Fenstergröße hier von sehr groß bis klein variieren kann sollte man als Entwickler auf Skalierbarkeit achten. Das fängt bei Netbooks an, geht zu Nutzern weiter die auch mal ein einzelnes Fenster klein gezogen haben, bis zu der (nicht mal so unpraktischen) Split-View von Windows 8.
Hier kann man mit Media-Queries ohne viel Aufwand auf Größenänderungen reagieren und die Seite anhand des vorhandenen Platzes anpassen. Denkbar wäre es je nach vorhandener Breite z.B. Icons kleiner zu machen, Bereiche nicht mehr nebeneinander, sondern untereinander darzustellen, u.v.m.
Als Demo habe ich mal ein kleines (extrem gestyltes) Szenario erstellt. Zieht man das Result-Fenster kleiner, ändert sich die Icongröße, der Text wird abgeschnitten und nur bei Mouseover angezeigt.
Zwar ist das keine Wunderwaffe für alle Szenarien, gezielt eingesetzt kann man damit aber den vorhandenen Platz oft besser Ausnutzen – ohne massig JavaScript schreiben zu müssen.
NETWAYS Blog
Html Font Awesomeness
Knapp ein Jahr ist der Artikel über CSS Frameworks nun alt. Allerdings gewinnt das Thema immer mehr an Bedeutung. Bootstrap ist mittlerweile in aller Munde und viele Designs im Netzt erinnern an Twitter und Konsorten. JS RIA Designs sind rückläufig und man wendet sich wieder dem klassischen, semantischen Web zu. Soll heißen, manches wird einfacher wenn man sich auf das Html an sich konzentriert, als darauf was ein Framework ausspuckt. Ein Paradekanidat hierfür ist jQuery und eben Bootstrap.
Ein kleines Projekt Namens Font Awesome geht sogar noch einen Schritt weiter und verpackt lästige Icons, welche meistens als Pixel vorliegen in eine Schriftart. Der Vorteil liegt auf der Hand: Klein, skalierbar, einfärbbar und veränderbar mit CSS. Aufbereitet durch handliche CSS Klassen und eingebettet in Bootstrap lassen sich sehr schnelle und sehr schöne Designs bauen:
Natürlich erkauft man sich die Einfachheit mit modernen Technilogien wie z.B. CSS3. Allerdings bleibt das Projekt mit einigen Einschränkungen abwärtskompatibel bis zu IE7. Sehr gut, weiter wollen wir auch nicht mehr runter ;-). Wirklich ein CSS Tool auf das die Welt gewartet hat – Grazie!
Marius Hein
Head of IT Service Management
Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.
Schweizer Messer für CSS
Stylesheets sind eigentlich eine einfache Geschichte. Sie geben einem die Möglichkeit das Design von der eigentlichen Struktur klar zu trennen. Und das dient wiederum der Wartbarkeit der Webseite. Doch die Sache wird schnell kompliziert: Präzise Designs erfordern eine genau Ausrichtung in unterschiedlichen Browsern, deren Interpretation sich oft am Standard vorbei bewegt (Wir sind aber auf dem richtigen Weg). Es werden Browserweichen geschrieben, Normen gemischt, und wilde Floating-Knobeleien ausgedacht daß es im Endeffekt dann doch so aussieht, wie man es ursprünglich wollte – Text- / Customreader, Schriftarten und barrierefreies Layout mal außer Acht gelassen.
Man müsste also den ganzen Tag Definitionen wälzen, Browser Engines debuggen und sich mit Abgesandten des W3 Konsortiums prügeln um all dessen Herr zu werden. Doch Zeitersparnis und Entspannung bringt keine dieser Möglichkeiten mit sich. Mittlerweile manifestieren sich allerdings einige freie CSS Frameworks um genau dieser Lage Herr zu werden oder einfach nur einen Baukasten zum schnellen Layout zu liefern.
Als Basis hierfür dienen sogenannte Reset CSS welche die vordefinierte Formatierung des Browsers zurück setzen um neu zu beginnen (Außen- und Innenabstände, Einrückungen, …). Hier gibt es die großen Klassiker z.B. von Eric Meyer oder auch YUI. Leider bietet YUI keine Unterstützung für HTML5 dafür allerdings ein grundsolides Basis CSS (Damit man nach dem Resetten nicht doch wieder alles formatieren muss ;-)) und Styles zur typografischen Normalisierung von Schriftgrößen um proportional angemessene Schriftvergrößerung zu gewährleisten. Mit YUI können alle diese CSS Techniken im Kontext angewandt werden – Also nur gültig für alle Elemente unterhalb eines bestimmten.
Einige weitere Frameworks setzen hier noch eins drauf und nehmen einem Strukturarbeit bereits ab. BluePrint bietet neben Reset, Base und Typografie Unterstützung für Spaltenorganisation. Perfekt gefloatete Teilbereiche einer Seite können bequem per Klassen konfiguriert werden (Mit dem Nachteil nicht mehr zu wissen was eigentlich im Hintergrund passiert). Reine Tabellen-Hilfen wie 960 Grid System warten mit einer kompletten Planungshilfe für Webseiten auf. So z.B. Sketchbooks und Vorlagen für Inkscape, Gimp oder Illustrator oder Plugins zur Erstellung von Templates aus Photoshop heraus.
Als letztes in meiner Liste sticht HTML5 Boilerplate als Komplettlösung hervor. Neben oben erwähnter CSS Normalisierung erhält man nebst HTML Stub auch HTML5 Korrekturen für ältere Browser, jQuery zum schnellen Prototypen, Build Scripte zum Komprimieren bis hin zur auskonfigurierten .htaccess für unseren Web-Indianer um korrekte Header zu liefern oder entsprechenden Inhalt zu komprimieren.
Je nachdem wie viel man sich abnehmen lassen möchte hat man die Qual der Wahl auf welche Frameworks man setzt. Alle samt eignen sich sehr gut um Anregungen und Fixes für seine täglichen Web-Probleme zu holen. Auch für Dummies, Mockups und Prototypes sind diese Hilfen Ideal. Produktiv muss man sich allerdings entscheiden und sollte genau abwägen was man eigentlich braucht – Denn Geschmäcker sind bekanntlich verschieden…
HTML5 Boilerplate – GridEasy – blueprint – BlueTrip – 906 Grid System – YUI3 – Reset CSS
Marius Hein
Head of IT Service Management
Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.
Weekly Snap: IPMI Sensor v2, Multi-Tech iSMS 1.47, OSDC 20% off & SASS for CSS
24 – 28 January announced two new hardware monitoring plugin and firmware releases, introduced Becky and a SASSy solution for CSS topped off with a special 20% off OSDC tickets.
Jannis found a way to make working with CSS fun with SASS stylesheets. A simple colour change need not consume a day, because SASS uses variables that are much easier to alter. And with the help of a compiler the variables, definitions functions and more, turn magically into CSS. Best of all, if you know CSS there is not much more to learn – check out the homepage to test if for yourself.
Following on, Rebecca our events apprentice introduced herself and her impressions of her first few months on board. Working hard on the OSMC of 2010, helping Manuela with everything from invoicing and program planning to interviewing attendees for live testimonials and marketing presentations streamed live, Becky gladly took on responsibility. So much in fact, that she is now organising Nagios, Puppet and Jasper training courses. With 2 years to go in her apprenticeship, she looks to be on the right path with the right attitude – we look forward to more updates along the way.
Becky continued to forward news of the IPMI sensor monitoring plugin v2 release for Nagios/Icinga. The Thomas Krenn plugin monitors the status of hardware such as fan speed, temperature, voltage, power input and more. To these ends it combines with Nagios or Icinga, FreeIPMI (as of v.0.5.1) and Gawk. The plugin is available for free download, with more information on Thomas Krenn’s wiki and exchange.nagios.org or available through special announcement and user mailing lists.
On the topic of hardware monitoring, Martin announced Multi-Tech iSMS’ new firmware 1.47 and plugin. Multi-Tech iSMS‚ new release brings new bug fixes and the ability to enter SIM card PINs in the web interface, removing the need to deactivate them in advance. View the changelog or download the firmware from Multitech. The updated monitoring plugin is available at www.netways.org.
Manuela reminded us to book before 28 Feb and save 20% on the Open Source Data Center Conference. Alongside high calibre presentations the 3rd OSDC will feature Puppet and Jasper workshops on the conference eve. To be sure you know what to expect, she threw in 2 videos of speeches from 2010 on Monitoring with Icinga (Bernd Erk) and Java Monitoring and Troubleshooting (Rainer Jung). And if one event isn’t enough, Manuela also offered an OSMC + OSDC special that saves up to €400. Register now and we’ll see you on 6 -7 April in Nuremberg!
SASS – so macht CSS wieder Spaß
Keiner weiß, wie viele Entwickler schon aus dem Fenster gesprungen sind, weil sie „mal eben schnell“ alle Vorkommnisse eines Grautons und dessen Abstufungen leicht ins bläuliche Färben sollten. CSS wird zwar um viele Features erweitert, doch die Auzeichnungssprache an sich hat sich seit 1998 kaum geändert. Features wie Variablen sucht man vergebens, was einem bleibt ist viel doppelte Arbeit.
Doch bevor nun alle Entwicklungsabteilungen ins Erdgeschoß verlegt werden, möchte ich den Ausweg aus der misere Vorstellen: SASS.
*.sass Dateien sind spezielle Stylesheets, die über einen Compiler einfach in CSS umwandelt werden. Man kann so Variablen, verschachtelte Definitionen, Funktionen und vieles mehr in sein Stylesheet einbauen – der Compiler erstellt daraus dann eine valide CSS-Datei.
Und das beste: Wer CSS kann, muss kaum Neues lernen. Eigentlich kann man damit sofort produktiv loslegen.
Nehmen wir mal ein einfaches Stylesheet:
div.header {
background-color: #ababab; /*dunkelgrauer Rand*/
border: 1px solid #dedede; /*grauer Rand*/
}Mit SASS würde dies wie folgt aussehen:
$theme_color1: rgb(222,222,222) /*Variable mit Farbwert*/
div.header
background-color: darken($theme_color1, 20%) /*Rand, dank Funktion 20% dunkler als $theme_color*/
border: $theme_color1 /*grauer Rand*/
Der Vorteil ist sofort ersichtlich: Muss man bei einem neuen Grauton das CSS an zwei Stellen ändern und sogar den neuen Farbwert des Randes per Hand ausrechen, reicht bei der .sass Datei lediglich eine Änderung in der Variable $theme_color – den Rest erledigt SASS.
Das CSS erstellt man einfach via
sass --watch %sass-quelle%:%ziel-datei% Durch den –watch Parameter erkennt SASS, wenn sich Änderungen an der *.sass Datei ergeben haben und aktualisiert das CSS. So kann man direkt am SASS Entwurf arbeiten und sieht das Ergebnis sofort.
Natürlich ist das nur ein kleiner Einblick in die Möglichkeiten. Am besten einfach mal auf die Homepage gehen, ausprobieren und begeistert sein.
