alps hypertexte - Entries tagged as Webdesign

Faux Absolute Positioning

Seeehr interessante Layout-Technik.

Noch so ein schönes Beispiel für die BML-Sparte. Sehe ich schon zum dritten Mal in diesem Jahr:

<a class="klicky" href="http://irgend.woh.in"><div class="klickbareFlaeche">&nbsp;</div></a>

Passendes CSS dafür:

.klickbareFlaeche {
width: 225.5px;
height: 120px;
}

Seit Sommer letzten Jahres ist es still geworden um die adaptation-Entwicklung, aber jetzt ist wieder eine neue Version raus: adaptation 0.8

Nachdem ich jemandem sein Template iPhone-tauglich gemacht hatte, musste ich das natürlich auch haben. Und dafür musste ich nicht mal viel rumschrauben. An den Fonts musste ich nichts drehen, da dieses Template hier sowieso schon nach der 100%e2r-Philosophie das Systemdefault bezieht. Also wurde nur der Viewport auf die Größe der ersten Spalte verringert (iPhone benutzt defaultmäßig 980px) und erwartungsgemäß klappten die zweite und und dritte Spalte darunter. Hab außerdem noch ein Fontset "Helvetica" dazugeklatscht und am Code geputzt.

Zuerst wollte ich auch so 'ne klobigen Schaltflächen machen, für die Typen, die ihr iPhone mit der Stirn bedienen, aber da dieses Theme sowieso recht große Elemente hat, musste ich nur noch hier und da an den Abständen schustern, damit man mit einem Daumen nicht auf 2 Schaltflächen kommt. Außerdem müsste ich für alles in der Sidebar extra Seiten anlegen, um sie dahin auszulagern. Aber wir wollen ja selbst iPhone-Usern nicht etwas anderes präsentieren, als einem normalen Webbrowser. Deshalb zuerst das Grobe hier, Feinjustierungen kommen wie immer danach mit der Zeit.

Achja ... und für die Leute mit kaputter Monitorkalibrierung, die sich hier schonmal beschwert hatten ;), habe ich das grün in den Links mal ein wenig dunkler gemacht.

567 helpful links for webdesigners

Ist schon interessant, wie sich die Bräuche bezüglich des Markups für Navigationsmenüs verändert haben (und verändern werden). Die Jahreszahlen sind Pi-Mal-Daumen-Werte aus'm Kopf:

1995:

<a href="page1.html">Seite 1</a> <a href="page2.html">Seite 2</a> <a href="page3.html">Seite 3</a> <a href="page4.html">Seite 4</a>

1997:

<a href="page1.html"><img src="/img/irgensonegrafik1.jpg" width="200" height="80" alt=""></a><br>
<a href="page2.html"><img src="/img/irgensonegrafik2.jpg" width="200" height="80" alt=""></a><br>
<a href="page3.html"><img src="/img/irgensonegrafik3.jpg" width="200" height="80" alt=""></a><br>
<a href="page4.html"><img src="/img/irgensonegrafik4.jpg" width="200" height="80" alt=""></a>

2003:

<ul>
  <li><a href="page1.html">Seite 1</a></li>
  <li><a href="page2.html">Seite 2</a></li>
  <li><a href="page3.html">Seite 3</a></li>
  <li><a href="page4.html">Seite 4</a></li>
</ul>

2010:

Aus XHTML 2 vs. HTML 5 - I'm Mike (via Schockwellenreiter)

XHTML 2.0

<nl>
  <label>Kategorie</label>
  <li href="/Seite1.html">Seite 1</li>
  <li href="/Seite2.html">Seite 2</li>
  <li href="/Seite3.html">Seite 3</li>
  <li href="/Seite4.html">Seite 4</li>
</nl>

HTML 5

<nav>
  <h1>Kategorie</h1>
  <ul>
    <li><a href="/Seite1.html">Seite 1</a></li>
    <li><a href="/Seite2.html">Seite 2</a></li>
    <li><a href="/Seite3.html">Seite 3</a></li>
    <li><a href="/Seite4.html">Seite 4</a></li>
  </ul>
</nav>

Da mach ich doch einfach mal mit. (via Robert Lender)

1. Wie wichtig ist euch das Design eures Blogs?

Das Design der Blogs, die ich lese, ist mir kaum wichtig. Solange der Einatragstext nicht 100% der Browserfensterbreite einnimmt. Bei meinem Blog experimentiere ich allerdings gerne mal rum.

2. Was für Erfahrungen habt ihr mit Webdesign?

Ich mache das seit 1997.

3. Habt ihr euer Theme selber erstellt oder benutzt ihr ein free/gekauftes?

Ich erstelle mir meine Themes immer selbst. Manchmal bastele ich auch Themes für Blogsysteme und stelle sie für andere zur Verfügung.

4. Habt ihr selber Programme wie Photoshop, Fireworks oder GIMP?

Nur GIMP. Die Grafiken dieses Themes sind auch mit GIMP erstellt; die Quelldateien liegen dem Theme anbei.

5. Beherrscht ihr CSS? (Wenn ja, wie viel Erfahrung habt ihr damit.)

Ich arbeite beruflich viel damit. Kenne auch die Browserhacks, setze sie allerdings ungern und nur im Notfall ein.

browsershots.org

Alistapart nimmt sich diesen Monat eines der "new school usability"-Themen im Webdesign an: Designing For Flow. Gemeint ist hier das Flow-Erlebnis aus Mihaly Csikszentmihalyis Buch.

Das ist ein Thema, über welches wir mit Kollegen in letzter Zeit immer öfter diskutieren. Und zwar immer dann, wenn einer mit der (old school-) Masche "don't make me think" oder "keep it simple, stupid" (kiss) ankommt. Diese Usability-Prinzipien werden heut zu Tage als wichtigstes Prinzip für den Erfolg eines Web-Projekts angesehen. Dabei haben sie nur auf einer speziellen Ebene Gültigkeit. Das KISS-Prinzip möchte unnötige Komplexität vermeiden; stellt sich also die Frage, welcher Grad an Komplexität nötig ist ...

Komplexität kann nötig sein, um dem User z.B. ein Erfolgserlebnis zu bescheren, oder - wie es der Alistapart-Artikel ausdrückt - dem User neue Entdeckungen in der Site/der Anwendung zu ermöglichen. Ich sehe es sogar so, dass in erfolgreichen Web-Projekten immer mindestens 5 bis 10% der Dinge oder Features unentdeckt sein sollten bzw. dass immer ein gewisses Potential existieren sollte, damit der User noch etwas zu entdecken hat, wenn er Bock darauf hat. Das können Features sein, das können aber auch einfach nur Inhalte sein. Eine Web-Anwendung wird immer dann schnell langweilig, wenn man sie bereits nach wenigen Tagen oder Wochen vollständig erfasst und durchschaut hat. Sie wird aber auch frustierend, wenn darin es mehr Unbekanntes als Bekanntes gibt.

Hierbei die richtige "goldene Mitte" zu finden, macht eine erfolgreiche User Experience aus.

Aus der E-Mail eines Kunden:

Unter "Das ist genau das, was ich will!" soll noch eine Leerzeile. Am liebsten wäre uns eine halbe Leerzeile. Unsere EDV-Leute sagen aber, dass das relativ kompliziert sei. Wenn euch für eine halbe Leerzeile die Zeit fehlt, fügt bitte eine ganze Zeile ein.

• Rediscovering the Button Element By Kevin Hale
• Aufzählungszeichen mit CSS für Ausgeschlafene
• CSS @ Ten: The Next Big Thing (via Ajaxian und Deep Resonance)

... am 24.09, im Jahre 2007 ein solches Blog-Design zu bringen: Welcome To The DMOZ Blog (via tentatives verlinken)

Nicht nur Tabellenlayout und Spacer.gifs, wie der Tentalinker schon bemerkt, sondern auch noch 68 andere Übelkeiten.

Noch so ein BML-Beispiel, dem ich heute begegnen durfte:

<input name="email" type="text" size="80"></input>

War im Newsletterformular eines Kunden. Gleich 2 mal. Wohlgemerkt: Das sind alles keine blutigen Frontpage-Anfänger, die sowas fabrizieren, sondern gestandene "Web designer" die sich so nennen und die damit ihren Unterhalt verdienen.

"Sie können das eigentlich so gestalten, wie Sie meinen. Sie haben da völlige Freiheit. Solange das einigermaßen stimmig und schön aussieht."

Anweisung wie diese sind die koolsten. Die Falle verbirgt sich hinter den Begriffen "stimmig" und "schön", denn da hat der Kunde meist ganz andere Vorstellungen.

Klasse finde ich auch so Sprüche wie

Lassen Sie Ihrer Kreativität freien Lauf!

oder noch besser:

Toben Sie sich so richtig aus!

Wenn ich noch einmal einen dieser Sprüche höre, lache ich denjenigen offen aus ...

Interpretiert mal, was dieser Markup bedeutet:

<br style="font-weight: bold;" />

[hat man mir kürzlich zur Weiterbearbeitung vorgesetzt ;-)]

Es gibt (nicht wenige) Kunden, die stehen drauf, wenn sie dem Webdesigner über Telefon oder Chat Anweisungen geben und den Fortschritt im Design fast in Echtzeit betrachten können. Meist sind das Kunden, die nicht genau wissen, was sie wollen und geben daher komische Anweisungen wie "Mach das mal weiter rechts" oder "Und wie sieht's mit 'nem grünen Rahmen aus?" oder "Geht der Rahmen oben auch etwas dicker?". Während dessen sitzt du als Markup-Buttler am anderen Ende der Leitung, hackst deinen Markup in den Editor, überträgst es per FTP/SCP auf den öffentlichen Server und sagst zwischendurch "Lad mal neu" (und schwitzt dabei auf die Tastatur).

Das nenne ich Hardcore-Design-Service. Besonders wenn er mit seinem ungepatchten MSIE 6.0 den Fortschritt verfolgt. Du bist ständig am Tippen und am Hochladen und kommst nicht mal dazu, nebenbei einen Kartoffel-Chip zu verdrücken oder die lästige Fliege zu verscheuchen, die sich an der Wärme deines Monitors ergötzt. Dabei hörst du den Kunden genüßlich was Essen/Trinken/Rauchen (wasauchimmer), während er mit unpräzisen Anweisungen den Webdesigner quasi fernsteuert. Mach das mal eine Stunde und du bist fertig, wie nach einem kompletten Arbeitstag.

Anfänger kriegen das gar nicht mal hin; fühlen sich unter Druck gesetzt oder über die Schulter geschaut. Deshalb werde ich vom nächsten Kunden, der "Real-Time-Webdesign" möchte, auch etwas extra nehmen. Schließlich gab's die Mayo auf die Pommes auch mal umsonst, bis irgendwer auf die Idee kam, dafür extra Kohle zu nehmen

Approach to flexible multi-column forms