Komisches Teaserbild ich weiß. Aber meine erste Lesereinsendung für die Linktipps soll ja nicht so einfach untergehen. Das muss gefeiert werden. *Feuerwerk* Also quasi ja doch eine Art was Besonderes. Ja klar es ist Freitag. Jeder Freitag ist was Besonderes, aber… Ach was auch immer, ich laber wieder nur Käse. Ich lasse die Spiele dann mal beginnen. Achso ja, diesmal ist auch mal ein Video dabei.

The Scale of the Universe

Sieht nicht unbedingt nach etwas Besonderem aus, ist es meiner Meinung nach aber. Vom kleinsten bekannten Teilchen (Quantenschaum) bis hin zur vermuteten Größe des Universums. Einfach nur absolut genial gemacht, wenn auch in einer sehr einfachen Darstellung, dadurch aber skalierbar. Danke an @LosAndroidos für den Tipp.

Zum Linktipp

Fotografie & Manipulation: Flex Dreams

Sehr schöne Fotografie mit anschließender Bearbeitung. Teil etwas extrem, also vielleicht nicht unbedingt die Kinder zuschauen lassen. Ich würde es auch als NSFW einstufen, aber das dürfte eh niemanden mehr betreffen, wenn die Linktipps endlich raus sind. 16 Bilder, an denen sich jeder Photoshopper ein Beispiel nehmen kann, beeindruckende Ideen und beeindruckend gut umgesetzt.

Zum Linktipp

30 Free UI Kits Featuring Detailed Web Elements

Ein kleiner Leckerbissen für die Designer unter euch. Wahlweise auch die Entwickler, die ja bekanntermaßen nicht so prall in Sachen Design sind. *auf mich zeig* 30 kleine hübsche UI-Kits, damit man sein Interface ein wenig überarbeiten kann. Ob nun Backend oder Frontend bleibt sicherlich jedem selbst überlassen. Man kann sie natürlich auch einfach als Inspiration nehmen, hübsch sind sie alle.

Zum Linktipp

Vintage Print Inspiration From The Golden Ages And Our Days

Vintage ist in, Vintage ist toll. Ich vermag gar nicht zu zählen, wie viele Bilder zur Inspiration sich hinter diesem Linktipp verbergen, aber es sind eine Menge. Auf altmodisch getrimmte Werbung und Plakate, die es allesamt wert sind angeschaut zu werden. Und wenn wir schon die vergangene Woche vergessen, dann können wir uns wenigstens mit Oldschool-Design beglücken.

Zum Linktipp

HTML5 Video: 18 Player für Websites und Blogs

Eine hübsche Auflistung von HTML5-Videoplayern zum mitnehmen. Kann man sicherlich immer mal gebrauchen. Nachdem Adobe den Support für mobile Geräte nun komplett eingestellt hat, sollte man zusehen, dass man langsam auf HTML5 umsattelt und da ist ein guter Video-Player schon mal ein netter Anfang. Durchaus interessant für alle, die eine eigene Seite oder einen eigenen Blog haben und auch ab und an mal ein Video vom Server wiedergeben wollen.

Zum Linktipp

I Love Typography – The Rather Difficult Font Game

Für jeden, der im Designbereich tätig ist, ist auch das Thema Typografie ein wichtiger Punkt. Es sollte zumindest ein bekannter Begriff sein. Nachdem meine Liebste sich total drüber gefreut hat, als ich ihr das gezeigt habe, wollte ich es euch auch einfach mal präsentieren. Macht Spaß, aber ich bin nicht einmal halb so gut wie ein Printer

Zum Linktipp

Androidnext Gewinnspiel

Dann mal noch was nettes zum Wochenende. Ein kleines Gewinnspiel von Androidnext.de bei dem man mal eben eines von drei Samsung Galaxy Nexus abstauben kann. Warum auch nicht. Ich hab mal mitgemacht und wollte euch mal eben von berichten. Läuft wieder mit Losverfahren, sodass man seine Gewinnchancen erhöhen kann. Viel Glück an euch. ^__^

Zum Gewinnspiel

Google Office around the World

Zum Schluss mal was Anderes. Kein echter Linktipp, sondern ein Video. Aber zum Jubiläum darf man sowas ja mal. Oder soll ich künftig auch immer mal ein Video einfügen? Auf jeden Fall ist dieses Video der Grund, warum ich irgendwann mal bei Google arbeiten möchte. Und wahrscheinlich auch jeder andere, der irgendwas mit Design, Technik oder Programmierung zu tun hat.

So. Ende im Gelände. Wie gesagt, nichts großartig Besonderes, aber 10 ist ja nun auch kein allzu großes Jubiläum. Ich hoffe euch haben die Linktipps, trotz der 2-Wöchigen Verspätung gefallen und ich wünsche euch allen ein angenehmes Wochenende. Für mich wird es diesmal wieder etwas ruhiger und technischer

Das war es dann auch schon wieder!
Euer Wishu

Ich habe bereits vor geraumer Zeit einmal über Google Webfonts gebloggt. Wunderbarer Service, den ich gerne weiterempfehle. Mittlerweile sogar über 450 Fonts. Offiziell. Denn es scheint auch Fonts zu geben, welche dort nicht gelistet sind. Egal wie ich suche, ich finde Roboto nicht. Auf der Projektseite von Android für das MWC fiel mir allerdings auf, dass der Countdown, wie angenommen, gar kein Bild ist.

Es ist per CSS formatierte Schrift. Kurzer Blick in den Quelltext zeigte mir, dass es Roboto ist und dass es über die Webfonts-API eingebunden wird. Die Webfont-API ist öffentlich und kann somit von jedem genutzt werden. Google bindet hier auch gleich mal alle Breiten ein und so kann man Roboto anständig nutzen. Ihr müsst lediglich folgenden Code in euren Head-Bereich im HTML einfügen. Also zwischen <head> und </head>:

<link href='http://fonts.googleapis.com/css?family=Roboto:100,400,700' rel='stylesheet' type='text/css' />

Damit ist es dann auch schon von der Seite erledigt. Nun muss man nur noch in der CSS-Datei die Schirftart ändern und schon hat man Roboto. Hier mal ein Beispiel, wie das für die Überschrift in Twenty Eleven (WordPress-Theme) aussehen könnte:

.entry-title { clear:both;  color:#222;
font-size:26px;
font-weight:400;
line-height:1.5em;
padding-bottom:.3em;
padding-top:15px;
font-family:Roboto, Arial, sans-serif;
}

Auf die Angabe von font-weight:100; würde ich verzichten. Es sei denn die Schrift ist wirklich sehr groß, sonst wird sie kaum lesbar sein. 400 hat sich hier als die beste Variante herausgestellt.

Wer also eine Android-Website hat und möchte, dass seine Besucher sich etwas heimischer fühlen, der kann das jetzt machen, indem er Roboto in seine Seite einfügt. Das Schriftbild wird dadurch meiner Meinung nach um Einiges angenehmer. Zu sehen auf meinem – derzeit ruhenden – Projekt ROMdroid. Hier habe ich es einfach mal eingefügt, um zu testen ob es wirklich läuft.

Das war es dann auch schon wieder!
Euer Wishu

Bildquelle: mobiFlip

Ich habe keine Ahnung, wann das passiert ist, aber vor einem Monat war es auf jeden Fall noch die alte Ansicht. Finde ich persönlich sehr cool. Zudem sieht man jetzt sofort, ob neue Fonts dazu gekommen sind. Zumindest wenn man sich die Anzahl oben links merken kann. Dazu kommt eine hübsche Suche, man kann Fonts vergleichen und und und. Einfach mal vorbeischauen.

Google Web Fonts

Das war es dann auch schon wieder!
Euer Wishu

Ich kann gewiss nichts daran ändern, dass einige Webdesigner der Meinung sind, dass sie auf einer zeilenlänge von 80 Zeichen pro Zeile den Blocksatz einsetzen müssen. Doch ich kann mich wenigstens in meinem Blog darüber aufregen und darauf hoffen, dass ich wenigstens ein oder zwei Webdesigner dazu bringen kann zumindest etwas darüber nachzudenken. Denn der Blocksatz ist für das Internet einfach ungeeignet.

Immer wieder sehe ich es auf Blogs, auf Foren oder auch auf einfachen Firmenwebsites. Da war wieder mal ein Profi am Werk und hat sich gedacht es muss alles perfekt aussehen, links und rechts müssen gerade Ränder am Text sein. Schöner Gedanke, doch nicht zu Ende Gedacht.

Monsterlücken durch zusammengesetzte Substantive

Denn eine automatische Silbentrennung unterstützt auch heute noch kein Browser. Somit kann gar keine vernünftige Darstellung stattfinden. Denn bei langen Worten wie Quelltextvalidierungsservice haben wir ein Problem. Zugegeben, dieses Wort ist wenig sinnvoll und wird auch selten vorkommen, doch wir sind hier in Deutschland – dem Land der unendlich langen zusammengesetzten Substantiven.

Das Problem lässt sich ganz einfach erklären. Dadurch, dass die Silben nicht getrennt werden können, müssen alle folgenden Wörter einfach nach unten rutschen und somit hat man vielleicht nur 3 oder sogar 2 Wörter in einer Zeile und dazwischen ist eine riesige Lücke. Ich werde das mal im folgenden Absatz veranschaulichen:

Hier auf dem Wishu-Blog tritt der Effekt jetzt nicht ganz so stark auf, doch er tritt merklich auf. Und es stört einfach den Lesefluss, wenn zwischen den Wörtern auf einmal große Lücken entstehen. Wenn die Zeilen noch kürzer werden – und das ist in vielen Blogs gerade zu Beginn des Artikels der Fall – dann bemerkt man die Lücken allerdings noch dramatischer.
Hier mal ein Beispiel:

Hier sieht man sehr deutlich, dass ziemlich große Lücken entstehen können, wenn man den Blocksatz im Browser verwendet.
Kein realistischer Anwendungsfall? Doch!

Richtig lückenhaft wird’s erst mobil

Ich surfe jeden Morgen, wenn ich zur Arbeit fahre und jeden Abend, wenn ich wieder nach Hause fahre eine Stunde lang mit meinem HTC Desire im Internet. Und da ist die Zeilenlänge gerne mal etwas kürzer. Besonders da meine Augen auch nicht mehr die besten sind.

Hier entstehen sehr oft sehr große Lücken. Dies ist auf jeden Fall auch dem Entwickler dieses grässlichen mobilen Themes für WordPress zu verdanken. Dieses setzt nämlich automatisch den Blocksatz ein und somit hat man auf 90% aller Blogs, welche für das mobile Web optimiert sind erstmal den Blogsatz. Und somit fällt der Begriff “optimiert” auch schon wieder weg.

Auf jeden Fall kann ich mit gutem Recht behaupten, dass es eine Qual ist jeden morgen durch dieses Blocksatzinfizierte mobile Web zu wandern, weil der Lesefluss durch solche Lücken dramatisch gestört wird. Also fasst euch ein Herz und denkt auch an eure Besucher und nicht nur an euch selbst. Eure Besuche müssen die Beiträge im Front-End lesen, ihr habt euer Backend von WordPress und dort wird schließlich auch kein Blocksatz verwendet.

Habt ihr vielleicht ein paar Beispiele für gruselig schlechten Einsatz von Blocksatz? Oder kennt ihr vielleicht gute Skripte zur Silbentrennung? Die Kommentare stehen euch wie immer offen

Das war es dann auch schon wieder!
Euer Wishu

Soeben habe ich bei Caschy einen interessanten Kurzartikel zu einem kleinen Bookmarklet gefunden. Kurze Erklärung für das Wort Bookmarklet. Der Einfachheit halber klau ich mir das mal kurz auf dem Wikipedia-Artikel für Bookmarklet:

Ein Bookmarklet (auch: Favelet) ist ein kleines in JavaScript geschriebenes Makro, das als Bookmark abgespeichert wird und dadurch die Funktionen eines Webbrowsers erweitert. Es erlaubt beispielsweise, Aussehen oder Funktionalität von Webseiten zu verändern. Technisch gesehen ist ein Bookmarklet ein Lesezeichen auf das Pseudoprotokoll javascript:, das ermöglicht, Code durch den Browser auszuführen.

Die Funktion habe ich gerade schon leicht angeschnitten. Readablilty schafft Abhilfe bei – gelinde gesagt – unschönen Websites. Es gibt viele davon, wir leben damit, doch wir müssen es nicht. Denn Readablilty gibt uns die Möglichkeit mit einem Klick das Aussehen einer Website so anzupassen, dass sie auf das Wesentliche beschränkt wird. Den Inhalt. Denn der ist es ja, den wir bei der Recherche im Internet suchen.

Die Einstellungsmöglichkeiten sind etwas mager, aber vollkommen ausreichend. Ich zum Beispiel habe eBook, Medium, Wide benutzt und finde es ziemlich angenehm.
Was euch am besten passt, müsst ihr für euch selbst herausfinden. Unter den Einstellmöglichkeiten ist eine Box, in der ihr eine Vorschau seht.

Welche Einstellungen habt ihr gewählt? Und fällt euch eine Seite ein, bei der ihr Readablilty sofort einsetzen würdet?

Readability.com

Das war es dann auch schon wieder!
Euer Wishu

Ingo Turski, welcher in Webdesignkreisen gerne liebevoll als Homepage-Guru oder Webseiten-Guru bezeichnet wird, hat darüber einen sehr interessanten und lesenswerten Artikel verfasst. Dieser erklärt ziemlich genau, warum man die Pixel außen vor lassen sollte. Ich könnte den kompletten Artikel jetzt auch noch einmal umformuliert abtippen, doch das wäre Schwachsinn. Besonders, weil ich bei meinem Blog nicht zu 100% darauf achte. Meine Schriftgrößen haben ihre Größe durch die Angabe von em, doch das Layout hat seine Breite durch Pixel bekommen.

Ich kann nur empfehlen, sich diesen Artikel mal zu Gemüte zu führen und es in Zukunft besser zu machen.

Wenn man diese Texte selbst schreiben müsste, würde wertvolle Zeit verloren gehen. Auch die ganzen Texte, welche nun wirklich auf der Seite stehen sollen, sind meist noch nicht geplant und wenn, dann noch nicht geschrieben, also benutzt man am besten einen Blindtextgenerator wie diesen. Auf den ersten Blick ein typischer Lipsum-Generator (Kurzform für “Lorem Ipsum”), doch er kann noch viel mehr.

Nützlich ist davon nicht alles, aber man weiß ja nie, wann man es mal gebrauchen kann. Die Einstellung von 17 Sprachen ist möglich, darunter auch eher exotische Dinge wie Leetspeak und Morsezeichen. Man kann einstellen, wie viele Absätze generiert werden sollen, von 1 bis 100 ist dies bei diesem Generator möglich. Ich denke mal kein Mensch benötigt wirklich 100 Abstätze, von diesem vollkommen bedeutungsfreien Text, doch es soll erwähnt sein. Bei der Wortanzahl ist es mit 4500 auch relativ hoch gegriffen, aber es gibt sicherlich Leute, die irgendwann mal eine solche Menge benötigen. Es kann ja nicht schaden ein bisschen mehr anzubieten

Durch seine intuitive Bedienung muss man diesen Generator nicht genau erklären. Ausgegeben kann der Text übrigens in 2 verschiedenen Versionen werden. Einmal als ganz gewöhnlicher Text, welchen man sich nach belieben kopieren kann und dann kann man sich das ganze noch in HTML herunterladen. Sowohl es bei der zweiten Methode eher dürftig formatiert ist.

Beim schreiben dieses Textes ist mir im übrigen noch aufgefallen, dass dieser Generator in 3 verschiedenen Sprachen zur Verfügung steht, nämlich Englisch, Deutsch und Spanisch. Also auch sicherlich für den Internationalen Einsatz nicht verkehrt.

Das war es dann auch schon wieder!
Euer Wishu