Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 20 2011

May 05 2011

March 18 2011

Type study: Typographic hierarchy « The Typekit Blog

Workers of the web are familiar with establishing a hierarchy through markup by using tags like <h1> and <em>, but what of the aesthetics of it? On the web, a large chunk of our content is text. This means it’s important to understand how to reinforce this hierarchy typographically. A clear understanding of hierarchy results in more beautiful, meaningful, and communicative designs that better serve their audience.

February 06 2011

Niemand scrollt auf Webseiten.

Niemand scrollt auf Webseiten.
Es hält sich hartnäckig: Inhalte auf Webseiten sollen kurz gehalten werden, damit man nicht so viel scrollen muss. Von Seitenlängen in maximal anderthalbfacher Bildschirmhöhe kriegt man zu hören, der Betreiber der Website soll seine Inhalte dem Medium anpassen (=kürzen), denn die Inhalte unterhalb der Bildschirmhöhe werden sowieso nicht gelesen.
Ist das so?
Reposted bymadgyverMadMaidseraserapenpen

December 29 2010

Less Framework 3

Less Framework is a cross-device CSS grid system based on using inline media queries.

The idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore all the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.

December 09 2010

November 11 2010

September 29 2010

6 Tips for Designing with Lines | Design Shack

Today we’re going to look at one of the simplest possible design elements: a line. We’ll learn how to wield lines properly as well as what to avoid when implementing them.

Adding a few simple lines to a design can bring structure and graphical flair to an otherwise boring design. It’s a dead simple trick that, when used effectively, has the effect of adding a layer of finish your design.
Reposted byMadMaid MadMaid

September 14 2010

BrowserBox - Appliance zum Testen von Webseiten : Karl-Tux-Stadt

Da wäre zum Beispiel BrowserBox eine mit SUSE Studio erstellte, logischerweise SUSE Linux basierte Distribution, die doch sage und schreibe 22 Browser bzw 14 Browser mit den entsprechend verschiendenen Versionen die derzeit Verwendung finden, bietet. Darunter auch Browser auf mobilen Endgeräten wie Mozillas Fennec, der Android-Browser oder Opera Mini.

September 02 2010

Why Users Fill Out Forms Faster With Top Aligned Labels | UXMovement.com

Imag­ine a user who is really excited about your prod­uct or ser­vice. They’re ready to sign up, so they go to your form page and start fill­ing out their infor­ma­tion. The way you align your labels with your form fields can affect how easy it is for users to fill out the form. Do you want to give users a quick, easy and pain­less expe­ri­ence or do you want to give them a has­sle? If you want to make their expe­ri­ence quick, easy and pain­less, con­sider using top aligned labels for your form fields.

August 11 2010

Fragen zu HTML5 beantwortet • Peter Kröner, Webdesigner & Frontendentwickler

Es stellt sich heraus, dass eher wenige Leute meine HTML5-Fragen-Community nutzen und stattdessen lieber zur altbewähren E-Mail oder zu Twitter greifen. Da ist es manchmal schade, dass einige sehr gute Fragen (nebst Antworten) der Allgemeinheit entgehen. Deshalb hier eine kleine Sammlung mit interessanten Fragen und meinen Antworten der letzten paar Wochen zum Buch und zu HTML5.

Fragen zu HTML5 beantwortet • Peter Kröner, Webdesigner & Frontendentwickler

Es stellt sich heraus, dass eher wenige Leute meine HTML5-Fragen-Community nutzen und stattdessen lieber zur altbewähren E-Mail oder zu Twitter greifen. Da ist es manchmal schade, dass einige sehr gute Fragen (nebst Antworten) der Allgemeinheit entgehen. Deshalb hier eine kleine Sammlung mit interessanten Fragen und meinen Antworten der letzten paar Wochen zum Buch und zu HTML5.

April 07 2010

praegnanz.de: Der heilige Gral des Webvideo

unächst müssen wir uns darüber klar werden, was genau gemeint ist, wenn wir von »Video im Web« reden. Streng genommen handelt es sich ja um zwei Hauptkomponenten, die in Einklang zu bringen sind: Videoformat und Player. Waren diese Anfangs noch fest aneinander gekoppelt, sehen wir später, dass ein und dieselbe Videodatei durchaus auch mit unterschiedlicher Software (oder auch Hardware) abgespielt werden kann.

Darüber hinaus unterscheide ich in diesem Essay – der Einfachheit halber – nicht zwischen Progressive Download und Streaming. Letztlich muss der heilige Gral eine einfach zu beherrschende Technik sein, um fertige Videodateien auf Websites so einzubinden, dass sie auf allen Systemen unproblematisch abgespielt und idealerweise auch heruntergeladen werden können.

January 11 2010

finkregh

Viele Webdesigner beachten inzwischen den immer noch zutreffenden Ratschlag »Mehr Weißraum! Mehr Zeilenabstand!«

Das ist eine gute Sache und dient der ästhetischen Qualität im Netz.

Manchmal jedoch wird des Guten zuviel getan, und ganz besonders gerne sieht man das bei Headlines ab etwa 24 Pixel Schriftgrad. Zum Beispiel hier beim Webwork-Magazin:

WWM

Das Problem hierbei ist nicht unbedingt nur der große Zeilenabstand in der Headline, sondern vor allem, dass unterhalb einer mehrzeiligen Headline eine Zeile mit Meta-Informationen platziert wird. Der Abstand von Headline zur »Metazeile« ist jedoch geringer(!) als der Abstand zwischen den einzelnen Headline-Zeilen. Und das wirkt visuell sehr seltsam: Durch das Gesetz der Nähe begreift man die letzte Zeile der Headline und die Metazeile als eine Einheit. Durch das Gesetz der Ähnlichkeit hingegen sieht man die gesamte Headline als eine Einheit. Und je nach persönlicher Ausprägung wechseln diese Wahrnehmungen ständig hin und her.

Deshalb: Klare Verhältnisse! Dinge, die zusammen gehören, kompakt zusammenfassen und andere Informationsebenen klar genug abtrennen. Ein Zeilenabstand von 1.5em ist zwar für den Fließtext eine gute Wahl, aber bei großen Headlines tun es oft sogar nur 1em oder 1.2em.

praegnanz.de: Zuviel Abstand ist manchmal unschön

August 28 2009

Baseline - a designer framework by ProjetUrbain.com

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as it’s foundation.

August 10 2009

HTML 5 Reset Stylesheet | HTML5 Doctor

We’ve had a number of people asking about templates, boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and use, edit, amend and update in your projects. Based on Eric Meyers CSS reset, I’ve made a few adjustments from Erics work that we’ll get to later but first here’s the file in full and we’ll then break it down step by step.

August 07 2009

July 29 2009

June 22 2009

June 10 2009

Rendering Quotes With CSS | David’s kitchen

The W3C recommends that visual user agents render quotation marks according to the specified language attribute, since many languages adopt different styles for quotations. Yet no user agent I have tried will render quotations in a language-specific manner in their default style sheet. Let’s change that. When building tripoli, one of the goals was to ensure language-specific quotation marks through CSS. But that turned out to be a difficult task to achieve, since many user agents either simply ignore the specs or make up their own way of rendering quotes. Even so called “modern” browsers like safari.
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl