BML: Fläche klickbar machen
<a class="klicky" href="http://irgend.woh.in"><div class="klickbareFlaeche"> </div></a>Passendes CSS dafür:
.klickbareFlaeche {
width: 225.5px;
height: 120px;
}
adaptation 0.8.0
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.
Die Evolution des Navigationsmenü-Markups
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>
Blogparade: Blogger und Webdesign
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.Flow im Webdesign
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.
Die aufwendige halbe Leerzeile
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.
DMOZ hat echt Nerven
Nicht nur Tabellenlayout und Spacer.gifs, wie der Tentalinker schon bemerkt, sondern auch noch 68 andere Übelkeiten.
Noch ein BML-Beispiel
<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.
Arbeitsanweisungen, die viel Raum lassen
"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 ...
Aus der Reihe: Semantisches Markup
<br style="font-weight: bold;" />[hat man mir kürzlich zur Weiterbearbeitung vorgesetzt ;-)]
Real-Time-Webdesign
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



neueste Leser-Kommentare:
Sat, 19.07.2008 13:35
hallo ich hab Probleme mit mei n USB Sticker mein pc viel es nicht erkennt warum macht er das was muss ich machen [...]
Thu, 10.07.2008 19:44
Klasse Kommentar. Vor allem de r letzte Absatz. Richtig, bei so komplexen nicht-linearen Sy stemen wie dem Klima kön [...]
Thu, 10.07.2008 17:54
Wichtig in diesem Zusammenhang ist auch der Auftrag, den die Wissenschaftler-Gruppe des IP CC erhielt, sowie ihre Z [...]
Thu, 10.07.2008 11:56
Der Text ist zwar schon älter, aber nicht minder uninteressa nter geworden. Und ich muss sa gen, dass das eine Sicht [...]
Fri, 04.07.2008 16:54
Ehhh Halloooo aber auch,,, also die beste Methode Fliege n zu Fangen meiner meinung nac h ist die von John Rambo [...]
Fri, 27.06.2008 13:32
Also ich mache ja nichts gegen Geld, sondern gegen Gefallen. Aber die Punktemethode hat da auch seine Berechtigung [...]
Fri, 20.06.2008 18:37
Kann ich nur bestätigen. Ich s piele schon!
Tue, 17.06.2008 19:35
Super Seite, insbesondere mit den guten Screen-Anleitungen. Ich wünschte es gäbe mehr Seit en, die sch solche Mühe [...]
Sat, 14.06.2008 14:26
alp-uckan? Exozet? alp-uckan! so klein ist das WeltWeiteNe tz ... beim springen von einem Linux Blog zum nächsten [...]
Fri, 30.05.2008 15:32
Super ausführliche und detaill ierte Anleitung, Sehr hilfre ich. Danke für die Mühe
Sun, 18.05.2008 03:14
Das ist im Zeitalter von "Geiz ist Geil" ein fast schon norm ales Erstgespräch. Ich für mei nen Teil hab lieber mal [...]
Fri, 16.05.2008 09:03
@ boris: deswegen nenne ich mi ch auch - ganz individuell - U sability Idealist. Und je nach Anforderung "Frontent-E [...]
Thu, 15.05.2008 22:08
So langsam muss man sich ja sc hämen, Webdesigner zu sein (un d sich öffentlich so zu nennen ). Man könnte mit Leute [...]
Mon, 05.05.2008 16:48
Danke. Fehler ist korrigiert u nd oben.
Sun, 04.05.2008 19:16
BG-Color ist nicht gesetzt, an sonsten bin ich es gerade für meine zwecke am Umbauen