Tag Archives: Adobe

Webmontag #64 – eine ausführliche Zusammenfassung!

by   •  

Der 64. Berliner Webmontag lockte am Montag während der Berlin Web Week eine große Schar Teilnehmer in den mobilesuite Coworking Space im Prenzlauer Berg.

Neben den sehr interessanten Vorträgen, fiel auch der Startschuss für den großen Kreativ- und Codingcontest von Webmontag und Adobe. Hierzu mehr im kommenden Beitrag.

Nach der Einführung zum Contest ging es direkt los mit dem Programm. Und dem ersten Vortrag. Zum Thema: Complex Web Animation. Andre Jay Meissner von Adobe, beschäftigt sich mit komplexen Web-Animationen mit Adobe Edge.

Die drei Grundregeln für Web-Animationen:

#1 do not hire a web developer (that doesn’t do mobile testing)
#2 don‘t get confused with animation
#3 don‘t overload yourself and others (stay lean – and browsers & budgets will love you).

Adobe Edge basiert auf DOM-Manipulationen und Webstandards, schreibt HTML-Files und generiert extrem menschenlesbaren Code. Neben Beispielen wie einer animierten Weltkarte und einem animierten Designer-Portfolio zeigt er in einer Live-Demo, was Edge alles leistet. Das Animieren von Formen, Einfügen und Animieren von Bildern zeigt er an einigen Beispielen wie einer Szene im Straßenverkehr.

Für alle, die mit Fireworks arbeiten, gibt es auch eine Fireworks-Extension von John Dunning.

Als Nächstes stellt Jay ein Toolkit für CreateJS vor und Wrestler im Toolkit. Das Prinzip: ein Designer kann viel JavaScript können – muss aber nicht. Auch dieses Toolkit generiert sehr menschenlesbaren Code und zeichnet sich besonders durch den angenehmen Workflow aus.

Mit Mobile Relief wird das mobile Testing erleichtert. Jay zeigt live das mobile Testing mit drei verschiedenen Devices. Das Tool Shadow ist noch als kostenlose Labs-Release erhältlich, kann jedoch bereits ausprobiert werden.

Und die neue Creative Cloud von Adobe ermöglicht Abonnenten der Cloud, neue Technologien wie die vorgestellten als allererste zu testen.

//

Nach der Pause, in der die Teilnehmer im Hinterhof des mobilesuite Coworking Spaces bei Bier und Grillwürstchen von der Fleischerei Gottschlich ihre Erfahrungen austauschen konnten, stand der nächste Beitrag an:

Tim Ahrens  sprach über „Webfonts – aber richtig!“. Der Schriftdesigner, der mit seiner Frau Shoko Mugikura ein eigenes Label betreibt (Just Another Foundry), zeigte ein weiteres Feature der Creative Cloud: TypeKit. Im Abonnement der Creative Cloud ist praktischer Weise ein Typekit-Abo automatisch enthalten.

Er erklärte auch den Unterschied zwischen Self-Hosting und Webfont Services. Es ist ganz einfach: beim Self-Hosting von Fonts werden verschiedene Varianten je Browser benötigt. Bei Webfonts weiß der Server, welche Datei der Browser benötigt und bekommt. Wie lässt sich dieser Vorteil mit TypeKit nutzen? In TypeKit wählt man einfach die gewünschte Schrift aus, fügt sie seinem eigenen Kit hinzu und hat auf diesem Wege nicht nur mehrere tausend Schriften zur Verfügung, sondern kann auch Schriften verschiedener Anbieter mischen. Eine Milliarde Schriften pro Monat werden dort abgerufen und jeden Tag mehrere neue Schriften ins Angebot aufgenommen.

Doch was macht eigentlich ein Webfont aus? Es ist das Prinzip wie bei einer Bestellung im Internet: eine Kiste befindet sich in einer anderen Kiste befindet sich … und so weiter.

Es gibt wie bei allen Fonts verschiedene Zeichen und Features (Kapitälchen, Ligaturen, …), hinzu kommen „Geschmacksrichtungen“ wie TrueType und Open Type und zusätzlich ggf. noch Metadaten.

Wie kann man aber dafür sorgen, dass Schriften scharf dargestellt werden? Gezeichnete Schriften sind sehr genau, müssen jedoch, wenn sie elektronisch verwendet werden sollen, in Pixel umgesetzt werden. Die älteste Methode dafür ist, die Pixel einfach schwarz oder weiß darzustellen. Steuert man jedoch nun die Helligkeit der Pixel, kann das Auge die Informationen in grauen Pixeln sehr gut wiederherstellen.

Doch was ist eigentlich Sub-Pixel Rendering? Erkennen kann man es, wenn man einen Screenshot vergrößert und es bunt wird. Der Vorteil daran ist, dass noch mehr

Informationen in die Schrift gepackt werden können, es bringt mehr Glättung in den Senkrechten, die Schrift erreicht eine bessere Definition, ist besser lesbar und erlangt einen besseren Rhythmus, was über die Qualität des Schriftsatzes entscheidet. Dieses Verfahren funktioniert in iOS nicht, dafür aber in Windows (dort nennt es sich ClearType), MacOS und dem Adobe Reader. Für große Größen ist das Hinting besser geeignet. Hierbei wird die Kontur der Schrift verbogen, bevor jeder einzelne Buchstabe rasterisiert wird. In jedem Fall empfiehlt er, alle Schriften fürs Web direkt am Bildschirm zu testen, werden sie doch meist mehr am Bildschirm gelesen als gedruckt.

Denn: auch wenn der Fortschritt vieles verändert – „Everything chages except the target eyeballs.“ (David Berlow)

Wichtig bei allen Fragen hinsichtlich Typographie ist es, mit Schrift immer richtig zu arbeiten. Es liegt immer in der Hand des Designers, was aus einer Schrift wird. In CSS lässt sich das steuern über letter-spacing, line-heigt und word-spacing in px oder em.

Direkt auf Tim Ahrens folgte der letzte Beitrag des Abends:

//

„Collaborate!“ ist Marie Schweiz‘ Aufruf ans immer noch nicht müde Publikum. Die Grafikerin, Visual und User Experience Designerin sprach mit Developern in ihrem Freundes- und Bekanntenkreis – um zu verstehen. Und sie findet: Collaboration funktioniert noch nicht so richtig gut.

Das Problem: Designer machen etwas Schönes, die Developer sagen: „Kann man nicht umsetzen“, die Investoren haben schon Geld hineingesteckt. Das Ergebnis? Frust.

Marie findet: Was wir brauchen, sind gute Layouts, gute Codes – wir brauchen Nachhaltigkeit. Und dafür brauchen wir Austausch. Was beide, Designer und Developer, lernen müssen, ist, sich entgegenzukommen, Kommunikationsschnittmengen zu finden, klare Worte zu finden – damit beide glücklicher sind.

Sie demonstriert am Beispiel von Adobe Illustrator und Fireworks die Umsetzung ihrer Forderungen an einem Icon. Übernimmt sie die Pfade des Icons von Illustrator in Fireworks, werden weiterhin die Pfade angezeigt, lassen sich skalieren – und sehen immer noch schön aus. Der svg-Code kann direkt angezeigt werden und die Positionen der Pfade sind direkt dargestellt. Das Ergebnis? Kollegialität. Miteinander denken. Und: weiterdenken.

Ganz im Sinne dieses Weiterdenkens nahmen viele der Besucher Tipps für ihren Arbeitsalltag mit – oder doch die eine oder andere Visitenkarte.

Wir freuen uns darauf, euch am nächsten Webmontag (wieder) zu sehen. Denn am 4. Juni steigt unsere große Webmontag Sommerparty. Was euch dort erwartet, erfahrt ihr in den kommenden Wochen hier und auf unserer Facebook-Fanpage. Ihr könnt euch bereits jetzt [hier] anmelden. Seid dabei – Wir freuen uns auf euch!

Webmontag #64 meets Berlin Web Week powered by Adobe

by   •  

Berlin’s the hottest place to be! And as summer’s in the city, next monday will be a great day for enjoying an awesome evening.

We’re glad to announce our next Webmontag! Together with our partner Adobe we invite you to join us on Webmontag – summer 2012. We found excellent speakers and experienced experts. Enjoy what’s the latest news from the worlds of design, typography and web technologies, get fantastic tips, and hear the best things that will ease and improve your daily work.

We’re very much looking forward to …

 

“Using Webfonts at ist best”

Tim Ahrens is a developer and expert on Webfonts and Fonts. He works e.g. with Typekit and will make us become familiar with topics like Subpixel-Rendering, Hinting and the differences between Self- and Service Hosting and the (dis)advantages of each opportunity.

“Collaborate!”

Marie Schweiz works as a freelance Web- & Appdesigner and shows us best practices for achieving better results when web designers and developers collaborate. She tells us about the best ways for working together efficiently and getting the best results by learning how to support each other and avoiding inefficiencies.

“Complex Web Animations and Advanced Mobile Testing”

Andre Jay Meissner (Adobe) presents complex web standard-based animations – and how you can enjoy creating them, even without much manual coding. He’ll also show us what you can do for making mobile debugging really fun – even on various devices at the same time.

As Berlin Web Week with the conferences re:publica and NEXT is now taking place in town, we’ll also give you detailled information on it and then start a Creativity and Coding Contest this evening. In the following four weeks, the competitors  will have time to create a solution for one of the non-profit contest challenges. On 04 june, 2012, we’ll have a Webmontag Summer Party, where also a jury will award the winners.

Our partner Adobe will sponsor beer & BBQ, but also the prizes for the winners of our contest who can e.g. win the new Creative Suite 6 Master Collection and the Creative Suite 6 Design & Web Premium.

After the official part of the event, meet new, creative people and enjoy a great evening. Make sure you can be part of it and register fort ehe event here.

Got curious? Want to know more?
We’d be glad to welcome you, talk to you and have a drink together.

Save the date!

where? mobilesuite Coworking Berlin / Pappelallee 78,79 / 10437 Berlin-Prenzlauer Berg
when? 07 may 2012, 7 p.m.
get there? take the U2 or the tram unitl Eberswalder Straße, it’s only a 3-minute-walk from there

very important: for making sure you can take part, please register here.

and: like our Facebook fan page and we’ll always keep you up-to-date. We promise.

See you on Monday!