Montag25. November 2013

Thinkin’ Tags - das browserbasierte Prototyping-Tool für CSS-Layouts - ist seit nunmehr 14 Monaten online. Seit heute morgen steht mit der Alpha-Version v0.5 ein weiteres umfangreiches Feature-Update bereit. Das erste große Update (v0.3) im Januar 2013 brachte umfangreiche Erweiterungen in der CSS3-Unterstützung. Mit dem zweiten Update (v0.4) im Mai diesen Jahres kam die lang ersehnte Unterstützung für Responsive Webdesign sowie eine grundlegend neu gestaltete Website. Die aktuelle Version 0.5 bringt die bisher größten Veränderungen mit sich.

Eine neue Benutzeroberfläche

Applikationen mit immer neuen Funktionen zu versehen, ist nicht weiter schwer. Die stetige Evolution der Oberfläche führt jedoch nicht selten zu Inkonsistenzen und schon von Beginn an war Thinkin’ Tags deutlich komplexer sein Vorgänger. Das sahen auch viele Nutzer so und so gestaltete sich die Einarbeitung in den ebenfalls neuen visuellen Arbeitsablauf nicht immer einfach. Im Verlauf des Sommers reiften die Gedanken hinsichtlich einer spürbaren Vereinfachung der Benutzeroberfläche. Im Kern bestanden folgende Kriterien an die neue Benutzeroberfläche:

  • eine einfachere Menüstruktur
  • kürzere Mauswege
  • mehr Raum für den Arbeitsbereich

Das Ergebnis der sich daraus ergebenen Mühen zeigt sich in den beiden folgenden Screenshots.

Das Dashboard bekam eine leichte optische Auffrischung, verbunden mit einer effektiveren Nutzung des zur Verfügung stehenden Platzes bei der Darstellung der Projektlisten sowohl auf relative kleinen Notebook-Displays als auch auf sehr großen Bildschirmen.

Die grundlegenden Änderungen hat die eigentliche Entwicklungsumgebung erfahren. Die Anzahl der Hauptmenüpunkte wurde von fünf auf drei reduziert, die nun “Projekt”, “Markup” und “Design” lauten. Dahinter verbergen sich nicht ganz unerwartet die Dialoge zur Projektorganisation (File Management), den Funktionen zur Erstellung und Bearbeitung des HTML-Markups und dem umfangreichen Gestaltungsbereich auf Basis von CSS, welcher die ehemaligen Menüpunkte “Screen Layout” und “Typographie” zusammenfasst. Der zweite entfallende Menüpunkt “Print Layout” entfällt. Bereits in den früheren Versionen diente dieser Menüpunkt lediglich dem Wechsel auf die Emulation des Medientyps “print” und demzufolge ist die Vorschau hierfür in die entsprechende Auswahlbox für das “Output Device” gewandert, über welches sich auch die Viewports diverser Mobilgäte emulieren lassen.

 

Den gesamten Beitrag lesen


Mittwoch12. Juni 2013

Das Warten ist endlich vorbei. Heute am frühen Morgen (7:50 Uhr Ortszeit) hat die Version 4.1 von YAML das Licht der Welt erblickt. Für mich endet damit mehr als nur eine 6 monatige Entwicklungszeit, doch dazu mehr am Schluss dieses Beitrags. Zunächst möchte ich die neue Version vorstellen und ein wenig über die Hintergründe erzählen.

Github

Die Projektdateien von YAML liegen ab sofort auf Github. Über viele Jahre habe ich YAML in einem privaten SVN Repository gepflegt und bin damit als Einzelentwickler auch sehr gut gefahren. Doch auch wenn SVN ein, zwei wirklich liebenswerte Features hat, ist Git ein großes Stück anwenderfreundlicher, weshalb ich bei anderen Projekten schon seit Jahren mit Git arbeite. Der Umstieg bei YAML war dennoch nicht ganz einfach, weil ich lange mit mir gerungen habe, in wie weit die Versionsgeschichte aus dem SVN Repro in das Git-Projekt herüber gerettet werden sollte – schließlich geht es um mehrere Jahre nachvollziehbarer Entwicklungsarbeit. Letztlich führte eine Entscheidung an anderer Stelle dazu, dass diese Gedanken hinfällig waren und ich mit einem mehr oder minder frischen Repro gestartet bin, und zwar die, YAML 4.1 auf dem im Herbst letzten Jahres veröffentlichten Sass-Port von YAML 4.0.2 aufzubauen.

Den gesamten Beitrag lesen


Donnerstag23. Mai 2013

Heute geht das zweite große Feature-Update für Thinkin’ Tags online. Die Zahl der Neuerungen ist nicht so umfangreich beim letzten großen Release im Januar, dafür handelt es sich um eine langerwartete Erweiterung des Funktionsumfangs. Das Update steht ganz im Zeichen von “Responsive Web Design”.

Website Redesign

Zusammen mit den neuen Features des Builders hat auch die Thinkin’ Tags Website eine optische Auffrischung erhalten. Es ist luftiger und klarer strukturiert, das Logo und die verwendeten Schriften wurden optimiert und – passend zum Thema des Feature-Updates – ist es vollständig responsive. Natürlich basiert es auch weiterhin auf YAML 4, was sich in diesem Selbstversuch einmal mehr als hervorragende Ausgangsbasis für flexible, responsive Designs erwiesen hat.

Responsive Web Design gehört mittlerweile ins Repertoire jedes professionellen Webdesigners. Nicht weil alle Kunden mittlerweile danach fragen, sondern weil der Wandel bei der Nutzung des Internets über Mobilgeräten und Tablets ungebremst voranschreitet und heute erstellte Projekte dieser progressiv fortschreitenden Entwicklung heute und in der Zukunft Rechnung tragen müssen.

Für Thinkin’ Tags bedeute dieser Schritt eine Erweiterung der internen CSS-Engine. Diese konnte bisher bereits unterschiedliche Medientypen (screen, print, all) verarbeiten und ermöglichte damit bereits die komfortable Gestaltung der Druckdarstellung direkt im Browser. Media Queries waren also nur der nächste logische Schritt. Wichtig für den visuellen Arbeitsablauf von Thinkin’ Tags ist dabei, einen ausgewogenen Kompromiss zwischen Gestaltungsfreiheit für den Anwender und der notwendigen Kontrolle durch die Applikation zu finden. Daher stellt Thinkin’ Tags in der aktuellen Ausbaustufe vorkonfigurierte Media Queries für vier verschiedene Geräteklassen bereit:

  • Geräte mit Viewportbreiten bis 480px (Smartphones)
  • Geräte mit Viewportbreiten bis 768px (Tablets)
  • Geräte mit Viewportbreiten oberhalb von 768px (Desktop/Notebooks - Defaut)
  • Geräte mit Viewportbreiten oberhalb von 1200px (Widescreen-Displays)

Mit ein bisschen Erfahrung im Bereich Responsive Web Design erkennt man, dass der hier vorgestellte Aufbau der Media Queries sich am Konzept “desktop first” orientiert. Das liegt daran, dass YAML als bisher einziges unterstütztes, responsives CSS Framework seinerseits in der aktuellen Version 4.0.2. nach diesem Konzept entwickelt wurde. Es wird aber in absehbarer Zeit auch möglich sein, nach dem Prinzip “mobile first” zu arbeiten. An dieser Stelle möchte ich erwähnen, dass die Wahl der Herangehensweise zur Erstellung responsiver Layouts, speziell das Konzept “mobile first” massiv gehypt wird. Lässt man den ganzen Buzzword-Kram mal beseite,
so geht es bei der Entwicklung anpassungsfähiger Webseiten um eines bestmögliche Darstellung der Inhalte auf allen Geräteklassen, demnach also: content first.

Und diesem Denkansatz fühlt sich auch Thinkin’ Tags verbunden. Es ist nicht entscheidend, wie herum Sie ihr CSS aufbauen. Es ist entscheidend, dass Sie von Beginn die verschiedenen Geräteklassen und Viewportbreiten im Blick haben und in ihre Überlegungen zum strukturellen Aufbau des Layouts einbeziehen. Und das geht am besten, wenn der Zugriff auf die verschiedenen Viewportgrößen möglichst unkompliziert ist, denn den Testaufwand sollte niemand unterschätzen. Thinkin’ Tags erlaubt daher direkt in der Arbeitsoberfläche die Viewportbreite verschiedener Geräteklassen zu simulieren und gibt dem Anwender somit ein unmittelbares Feedback - ohne, dass das Layout bereits in einem so frühen Entwicklungsstadium immer wieder auf verschiedenen Endgeräten getestet werden muss. Das ist ein enormer Vorteil und ereichtert die Entwurfsarbeit gewaltig.

Das aktuelle Feature-Release trägt die Versionsnummer v0.4.0. Das deutet darauf hin, dass die Entwicklung auch im Bereich der RWD-Unterstützung erst an Anfang ist und noch viele Verbesserungen und neue Funktionen auf Ihre Umsetzung warten. Dennoch freue ich mich, das heutige Update nun endlich zum Testen freigeben zu können.

Übersicht der neuen Funktionen
  • Unterstützung für CSS3 Media Queries zur Erstellung resonsiver Layouts
  • Simulation der Viewportbreite für verschiedene Mobilgeräte, direkt aus der Applikation heraus
  • Vier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop, Widescreen
  • YAML4 Beispiele “Simple Website” und “Flexible Grids” sind nun responsive
  • Die Reihenfolge, in der die einzelnen Stylesheets ins Layout eingebunden werden, ist nun konfigurierbar
  • Stylesheets können aus dem Layout entfernt und wieder eingebunden werden

Im offiziellen Release-Beitrag im Devblog von Thinkin’ Tags findet ihr auch einen hochauflösenden illustrierten Screenshot für die neuen Funktionen.

Wie immer wünsche ich allen viel Spaß mit der neuen Version. Wenn Euch gefällt, was ihr seht (oder auch nicht), sprecht und bloggt bitte darüber.


Montag15. April 2013

Der erste richtig große Meilenstein seit dem Release der Alpha von Thinkin’ Tags ist geschafft. In den vergangenen Monaten habe ich von den ersten wenigen Usern, die den Editor bereits voll nutzen können, wichtigesFeedback erhalten und damit zahlreiche Kinderkrankheiten beseitigen können.

Seit heute morgen ist nun die nächste Stufe gezündet in der über ein Invite-System neue Testpiloten an Bord kommen können. Zunächst starte ich mit 500 freien Plätzen, wofür man sich über das “Request Invite” Formular auf der Startseite von Thinkin’ Tags bewerben kann. Im nächsten Schritt werden bestehende Nutzer selbst neue User einladen können, bevor es in der Beta-Phase die Anmeldung für alle Interessierten Nutzer zugänglich sein wird.

Bereits im Januar gab es einen ersten großen Schub neuer Funktionen und auch auch heute kann ich wieder einige Neuerungen verkünden. Denn ab sofort können die wichtigsten Funktionen innerhalb des Editors auch per Tastatur gesteuert werden.

Auswahl des aktiven Arbeitsbereiches
Über CTRL+ALT+1 bis 5 können die Arbeitsbereiche File, Markup, Screen, Typography und Print ausgewählt werden.
Wahl des Darstellungsmodus
Über CTRL+ALT+6 bis 9 kann zwischen den Darstellungsmodi Live, Structured, Linearized und Source umgeschaltet werden. Über CTRL+ALT+0 kann die Hervorhebung der semantischen Informationen ein- und ausgeschaltet werden.
DOM/CSS Inspector
Über CTRL+ALT+F12 kann der DOM/CSS Inspector aktiviert und deaktiviert werden.
Navigation im DOM
Sobald in der Arbeitsoberfläche ein Element selektiert wurde, kann per Tastatur durch das DOM navigiert werden. Über CTRL+Cursor Up und CTRL+Cursor Down kann das nächste bzw. das vorhergehende Geschwister-Element des aktiven Elements selektiert werden. Über ALT+Cursor Up erreicht man das Elternelement des aktiven Elementes und durch ALT+Cursor Down kann das erste Kind-Element des aktiven Elementes ausgewählt werden.

Das sind die verfügbaren Optionen für den Anfang. Innerhalb einer Webapplikation ist die Auswahl sinnvoller Tastaturkürzel nicht gerade einfach, weil das Betriebssystem, der Browser und ggf. im Browser installierte Erweiterungen bereits zahlreiche Tastaturkombination für sich beanspruchen und aus meiner Sicht eine Webapplikation diese übergeordneten Funktionen nicht blockieren sollte. Ich bin daher sehr gespannt auf Euer Feedback hierzu, denn ich möchte die Möglichkeiten der Tastatursteuerung möglichst eingängig gestalten und natürlich weiter ausbauen.

Mit dem heutigen Release wurde auch die Dokumentation des Projektes deutlich erweitert. Bereits vor einigen Wochen hatte ich ja über den Youtube-Kanal von Thinkin’ Tags berichtet. Nun stehen diese Videos auch direkt im Docs-Bereich in Deutsch und Englisch zur Verfügung.

Soweit der aktuelle Stand. Wie immer freue ich mich auf zahlreiches Feedback und nun natürlich auch auf viele neue Testpiloten.


Donnerstag14. März 2013

Dieses Mal ist er drin. Der Beitrag “Design im Browser” in der ScreenGuide Nr. 17 mit meinen Gedanken zu den Gründen für das frühzeitige Versagen der WYSIWYG Webeditoren ala Frontpage,GoLive und Dreamweaver, sowie die Gründe dafür, warum ich mit meinen Projekt Thinkin’ Tags trotzdem einen visuellen Layoutansatz gewählt habe. Angekündigt hatte ich den Beitrag ja bereits im November. Durch einige unglückliche Umstände musste er jedoch verschoben werden und um so mehr freut es mich, dass er nun ab dem 18.3. endlich zu lesen sein wird.

Webentwickler sehen sich in der heutigen Zeit beeindruckenden technischen Möglichkeiten der Browser, aber auch deutlich gestiegenen Erwartungen und Ansprüchen seitens ihrer Kunden gegenüber. Um diese zu meistern, bedarf es der Anpassung der eigenen Arbeitsweise an die veränderte Wirklichkeit. Layout-Dummies in Photoshop mögen als Hochglanzdrucke auf weißem Karton im Rahmen einer Präsentation ob ihrer Perfektion beeindrucken, doch Sie geben uns (oder dem Kunden) keinerlei brauchbares Feedback über das Verhalten des Layouts in verschiedenen Umgebungen. Sie geben uns kein Gefühl über die Rendering-Geschwindigkeit von CSS3 auf Mobilgeräten mit nur mäßig schneller Hardware. Sie täuschen eine Qualität der Kantenglättung von Webfonts vor, die in realen Browsern (man denke nur an die Kombination: Firefox + Windows) nicht einmal ansatzweise erreicht wird. Sie vermitteln uns kein Gefühl für Ladezeiten.

Doch all das sind Fragen, für die nach einer Antwort verlangen und die auf dem klassischen Weg vom Photoshop-basierten Entwurf zur pixelgetreuen HTML-Umsetzung nach Abnahme des finalen Designs erschreckend spät beantwortet werden können. Der Grund dafür ist der Medienbruch in der Entwurfsphase, indem auf Werkzeuge aus dem Printbereich zurückgegriffen wird (Photoshop, InDesign, etc.), um das Design einer Website vom ersten Prototyp bis zum fertigen Design zu gestalten. Fehler in dieser frühen Projektphase bleiben so bis zur Umsetzung (ggf. sogar darüber hinaus) unbemerkt und sind nur unter großem Aufwand zu korrigieren.

Für all diese Probleme erscheint der Browser als Grundlage für die Entwurfserarbeitung eine sinnvolle Alternative. Die Leistungsfähigkeit der JavaScript- und CSS-Engines ist bei der aktuellen Browsergeneration ebenfalls gegeben, sodass ich mich für diesen Weg entschieden habe. Mehr dazu in der aktuellen ScreenGuide.


Seite 1 von 44 Seiten

 1 2 3 >  Letzte »