Nachhiuf i Online-Wärbig

Ha uf informationarchitects.jp eismau grad ä sehr intressante Artiku gläse. Sisch augemein ä empfählenswärti Siite. Das isch vomne Schwizer wo i Sache Usability, Webdesign etc sehr geniau isch und ds Japan ä Firma het.
I dem Artiku geits eigentlech meh drum wie klassischi Print-Medie ir hütige Internet-Ziit chöi überläbe und de verzeut er ou uf wasme söt luege bi Online wärbig…
Hie ä intressante Uszug:

1. Reduce number of banners per page to one.
2. Increase banner size.
3. Distinguish clearly between ads and content.
4. Kill all pop up windows.
5. Forbid animated and amateurish banners.
6. No google or other cheap looking ads.
7. Hire sales staff to sell proper advertisement instead of whining that there is no money online.
8. Care as much about increasing the quality of online advertisement as you care in print.
9. Sell the books you cite, the CDs and DVDs you discuss, sell T-shirts from fashion designers you write about…

Woni das gläse ha, hani natürlech sofort a PG müesse dänke.
Luegemr mau paar Pünkt a:
1. Me söt d Azau Banner pro Site reduziere und zwar optimalerwiis uf eis…

5. Verbietet animierti und amateurhaft ussehendi Banner … Da muessi nid meh säge oder?

Nomau, sisch augemein ä super Siite, dä Maa het ächt ahnig und bis jetz hani jede Artiku läsenswärt gfunge. Er veröffentlech eigentlech uf dere Siite sine „Notize“ was später mau es Buech söt wärde.

Alternative zu Popups

Wie mir au wüsse, het PG Popups sehr gärn. Obwou die eigentlech im 2007 nütmeh gross ufere Siite zsueche hei.
Einersits muessme öpis zuegä: weni z.B. dürne Fotogallerie „blättere“ und es biud wot aluege, isch dr Vorteil dases imne Popup ufta wird, dass d Übersichtssite nid verschwindet.
Aber schöner und ohni verwändig vo Popups wärs z.B. fougendermasse:

Sehr viu Siitene bruche im Moment Lightbox. Wennme da ufnes chlises Biud klickt wird när ds grosse Biud so z säge über d Siite gleit, ohni Popup, ohni dasme d Site verlaht. Uf dr Site vo Lightbox gits da o gnue Bispiu zu dem.
Itz chame mit dem leider nur Biuder zeige, aber PG brüchti ja no Text u Platz fürd Kommentär etc. Itz gits aber ä Variante vo Lightbox namens Thickbox wo genau das ermöglecht. Dert chame Text, Textfäuder etc (aues mögleche) uf das Overlay tue. Wär ziemlech cool und praktisch wie ig finge.

Da steuts mir d Haar uf

Ha vorher gläse dass PG zäme mit Fotopick itz sone neui Foto-Services Siite het. Ok hani mau drufklickt bir Startsiite u när chunnt eifach wiedermau sone lieblos und eifach nid sehr professionel würkendi Siite entgäge:

• Rot ungerstriche, ds Läärzeiche voreum Usruefezeiche. Sorry PG Lüt, aber das gits eifach nid. Vor Satzzeiche gits ke Lücke. Ganz eifach. Macht ja o kene voremne Punkt ä Lücke. Viu Lüt dänke itz, dass das ja nüt schlimms isch, aber hey, mir rede hie vore Siite wo wet professionell sii! Was macht das fürne idruck wenn dr Text usgseht aus hätne ä 14 jährige gschribe? Sorry aber so Sache fingi eifach pinlech.
• När ds angere mit de Links. Has scho paarmau erwähnt i angerne Biiträg. Aber hie fauts wiedermau uf. Eini vo de wichtigste Regle bim Webdesign isch, dass Links sofort müesse erkennbar sii. I muess sofort gseh was ä Link isch u was Text. Hie isch dr ganz Text schwarz und nur das „Mehr hier…“ isch ä link. Auso chönntme meine aues wo schwarz und fett gschribe isch, isch ä link… Aber äuäää. Werum ou.
  I nime a PG isch ir zwüscheziit rein vom PHP code besser und sicher worde aus o scho, aber dir bruchet eifach definitiv no ä WebDESIGNER und zwar eine wo sich o mit Usability befasst. Isch eifach nüm akzeptabu so Sache im 2007. Egau wie aut ds PG Design scho isch und wie gross u komplex blabla. Intressiertmi nid. Weni nidmau ä Link vo normalem Text cha ungerscheide, de isch würklech scho bi de absolut tiefste Grundlage nüt überleit worde.

Wieder ä chlini Schönheitskorrektur

Mir erinnere üs aui a die nid sehr schöni Loading-Animation wome gseh het wennme z.B. es Voting abgäh het.
Zur erinnerig, das het so usgseh:

Vor churzem isch das erneueret worde, PG goes Mac OS X chönntme ou säge:

Das chunnt eim z.B. entgäge wennme si Mac startet:

Nid fausch verstah, i dem Bitrag hie geits nid drum dass PG das klauet het … schliesslech wird das Lade-Symbol inzwüsche unzählige Orte/Applikatione/Websiite brucht.
Gseht emu besser us, das blaue Teil wo eim früecher entgäge gsprunge isch, isch nid grad ä Ougeweid gsi.

Niveau

I bi mängisch scho fasch „fasziniert“ vom Niveau vo de User uf PG. Oder ischs eher beängstigend? Ehm wie o immer.
I gloub uf au Fäu düe sich d Verastauter am Niveau vo ihrem Zielpublikum ou apasse. Vor paar Täg isch dä Link uf PG gsi:

I gloub vor Azau Usruefezeiche chame ziemlech eifach ufs Niveau schliesse. Nei chum, höret doch uf nech säuber lächerlech zmache…

[...] HIP HOP set!!!! Eintritt: CHF 12.-!!! [...] AB 16J.!!!

Nei das isch eifach ungerschti.

Und das Paradebispiu ischmr einisch ufdr Frontsiite begägnet, isch vo irgendemne männleche (!) Profiu…

Sorry chline, wenn di STJLE so isch wie di analphabetismus i fortgschrittenem stadium, de isch das überhoupt niemerem si DREAM, eher nightmare.

touch me

Mau öpis völlig PG-loses… Aber da i ke angere Blog füehre, muess das da ine
Wüu i muesses eifach irgendwo häreschribe.

Geschter Morge isch ändlech mis vorbsteute und sehnlechst erwartete „Spieuzüg“ cho. Und zwar mi iPod touch.
I bi eifach dermasse beidruckt vo dem Grät dasis eifach muess ufschribe.

Es faht a wennme ds Schachteli aluegt. Es isch wunderschön gmacht, Stiiuvou und edel. Wennmes ufduet hetme eher ds Gfüeu me het ä Luxusuhr kouft u ke MP3-Player und im erste Moment hanimi chuum getrout das Ding azlänge.
När geits witer wennmes alaht. Ds Display isch absolut brillant, schöni farbe, höchi uflösig…Eifach hammer.

Dr Wahnsinn isch eifach d Bedienig. Me rollt richtig dür Lischtene, sisch aus wäresi ä Rolle wome cha „akicke“ und jederzit o wieder stoppe. Und das aues absolut flüssig. Augemein reagiert aues immer ohni verzgerige und butterweich.

Oder wennme ds Grät Quer nimmt, merkt das ä Sensor und d Asicht schautet um. I ha no nie so schön dür mini Musigsammlig chönne blättere. Aues ungloublech intuitiv. Dr Witz isch, im Schachteli hets nur ä ganz chlini Churzaleitig und das us eim Grund: Es brucht garke richtigi Aleitig. Aues isch so eifach ufbout und me muess ke Sekunde überlege wasme itz muess „drücke“.

Viu dänke sicher „ja aber Touchscreens gits scho lang“… Ja das isch so. Nur hei bisher Touchscreens gröschteteils eifach Chnöpf emuliert und nüt angers. Aber hie chani dür mini Fotos blättere, nid drücke…
Und ds angere isch natürlech Multitouch, auso Touchscreen wo meh aus 1 Druckpunkt erkennt. Das gits i kem angere mobile Grät. So chame mit zäme- oder usenangzieh vo zwöine Finger i Fotos ine und use zoome.

Genau glich funktioniert ds zoome im Browser. Dank iboutem WLAN chame is Internet und das im geniauste Browser woni je imne Mobile Grät gseh ha. Zoome, umefahre, mehreri Siitene glichzitig offe etc.
Oder ou d Integration vo YouTube isch super gmacht. Und me cha direkt uf dem iPod i iTunes-Store ga, aui Lieder vorlose, sueche und direkt dert druf choufe u abelade. Das hets ou no nie gä.

I bi würklech beidruckt vo dem Teil, ertappe mi aube wieni eifach sinnlos drmit umespiele und wenni när mis Natel id Hang nime chunnt mir das Sony-Ericsson-Teil vor wie es Ding usem letschte Jahrhundert. I meine das völlig nid übertribe, vo mir us gseh muess SO es Grät im 2007 funktioniere und usgseh.

Klar es het o sini Macke, z.B. wär viu meh möglech gsi, auso meh Applikatione. Aber das het Apple natürlech nid wöue, sie beharre druf dases eifach ä iPod isch und nid meh. Schad.
Und wo d Vordersiite us Chratzfestem Glas isch, heisi hinge unverständlecherwiis uf sone chromigi Oberflächi gsetzt wo schnäu dräckig und verchratzt wird.
Aber aues i auem muessi säge, das Ding isch ungloublech. Es Spieuzüg zwar wennmer ehrlech si, aber i ha no nie uf sone schöni und eleganti Art u Wiis mini Musig chönne mitnäh.

So, das het usemüesse
(ahja sischmr bewusst dass d Föteli vo mir absolut mies si, ha ke Digicam nur mis Handy und iSight…naja)

Chlini optischi uffrüschig

Das freutmi doch, isch zwar nur es Detail aber immerhin. Da das Thermometer wo bi de Föteli da isch zum Bewärte (vo 1 bis 10) het scho immer ziemlech verautet usgseh, sit neustem isch das aber dürnes moderners ersetzt worde. Gseht würklech besser us aus vorher.
Neu:

Ahja, bi de upgloadete Föteli i de Profil schiint aber no ds aute Thermometer vorhande zsii.

PG, wieso machschmrs so eifach?

Ä Websiite söt immer konsistent ir Bedienig sii, me söt sofort merke was links si und was nid. Das hani scho i angerne Biiträg erwähnt. Aber ja, sie weis eifach nid konsequent dürezieh.

Git ja ufdr Startsiite in blauem Text die „news“, i ha mi drmit abgfunde dass sie nid wei dass dr Titu ä link isch sondern nur dr ganz Text ungerdran (obwou das blödsinnig isch). Aber itz ziehsi nidmau das konsequent düre:

Dr ober Itrag isch wie gewohnt, dr Text isch ä link, aber die news übers Trend-Magazin isch lustigerwiis ke link. Nei, me fingt drin ä beschribig wieme zum erwähnte Ort glangt. Wie doof isch das de? Ok vilech heisi drmit wöue erreiche dass dr User när weiss woner die Siite fingt wenners säuber muess sueche. Trotzdem: Das machtme eifach nid. Dr User gseht blaue Text u dänkt sisch ä link, sisch aber kene, auso lanis grad la sii.

Chlini Zämefassig:

• Event-Tipps Liischte: Biuder hei ä schwarze Rahme, Biud UND Text isch ä link
• Top Event: Biud het KE schwarze Rahme, nume ds Biud isch ä link
• Zufällige PartyPictures: Biuder hei ä schwarze Rahme, nur ds Biud isch ä link
• Meiste Kommentare geschrieben, etc: Biuder hei KE schwarze Rahme, nur ds Biud isch ä link. Das heisst: Nidmau dr Username wo ungerem Biud steit isch ä link zum Profiu (muessme sich mau düre chopf la ga die logik…)

Soviu zur konsistenz und emne einheitleche Ufträtte.
Viu wärde dänke „ja das isch doch nid schlimm, das isch doch egau“, aber das si die Grundlegendste Sache wenns um Webdesign geit. Wenns scho bi dene schiiteret, denn bim rescht sowieso ou.

PG-Logo: Alles nur geklaut?

Hüt hani vomne PG-User wo mir scho paarmau Tipps gä het für Sache woni uf pgwatch chönnt erwähne, ä ganz heisse Tipp becho. Und zwar het er irgend are aute Maschine (was o immer gnau für eini) umegschrubt und ufem Lüfter ä ziemlech interessante Chläber entdeckt mitemne Logo mit so lustige Pfiile… Was PG macht Lüfter? Ehm nei nid ganz.
Die Firma wo die Lüfter macht nennt sich „Rübsamen & Herr Elektrobau GmbH“ und uf ihrer Siite gseht dir obe rächts das vertrout vorkommende Logo.
I ha nid recherchiert wär äch zersch isch gsi. Fakt isch nur dases die Firma anschienend scho sehr lang git und äbefaus sehr guet möglech isch ja dass dä wo ds PG-Logo klaut gmacht het vilech mau über sone Maschine/Lüfter gstouperet het u sich het la „inspiriere“…
Wüu es isch würklech nid nume ähnlech (auso dr Teil mitde Pfiile) sondern würklech haargenau glich!
Lueget säuber:

Und ds PG-Logo:

Merci a Michu für dä sehr interessant Link!

Update:
Merci Flo füre Tipp mit web.archive.org wome cha ga luege wie d websiite früecher het usgseh.
Und somit isch klar dass ds Logot scho sit mindestens 2001 die Pfiile het und ds PG-Logo besteit sitem Juni 2001…
Hie dr Link wie d Siite vo „Ruebsamen und Herr“ im 2001 usgseh het.
D Pfiile si würklech identisch, das isch ke zuefau

Redesign?

Auso i weiss ja nid ob im Hingergrund bi PG amne Redesign gschaffet wird (u drmit meini nid nur optisch sondern dr ganz HTML Code wo absolut kene Standards entspricht), aber i cha nur us dr Sicht schribe wies momentan isch.

• Kennsch h-Tags? I finge uf PG keni h1, h2, etc Tags. Die wäre für Title dänkt. Stattdesse wenn ä Titu zgseh isch mache sie dert eifach d Schrift Fett und chli grösser, drbi gits genau für das d h-Tags. Es isch wichtig dasme jedes Tag für das brucht wos dänkt isch. Wenn ä Titu zgseh isch, muessme dä ou us Titu kennzeichne.
• Links müesse ganz klar aus sötigi erkennbar sii… Uf PG gsehni nid was ä link isch und was nid. Meistens hei die genau die glichi Farb wie dr normau Text, sie wärde absolut nid hervorghobe. Mängisch isch öpis schwarzes ä link und angeri mau nid. Mängisch si Title link, mängisch nid. Bi de Event-Tipps rächts isch dr Text und ds Biud dr link, bi de Gallerie-Übersicht ischs nur ds Biud… sehr konsistent das ganze, dir merkets.
• Anstatt bi de News jedem einzelne Textabschnitt z säge „he du bisch de blau und gsehsch so und so us“, chönntme eifach ä klass für die News definiere, dert in isch definiert wie news usgseh (nämlech blau und die und die Schriftgrössi) und ou d Title imne Newsabschnitt chönntme definiere. Me würd sooo viu Platz spare im html.
• Das wäge JavaScript hani scho nöime angers erwähnt gha. D Site muess uf jede Fau ou mit deaktiviertem JavaScript vou bedienbar sii, bi PG isch das nur igschränkt dr Fau. D Navigation geit nüm richtig und angeri Sache. Unbruchbar.
• Popups: Sötme eigentlech würklech nüm bruche. Wenn dr User ä Site imne neue Fänschter wot uftue, de chaner das säuber bestimme. Popups zwinge abr dr user das imne neue Fänschter ufztue u das isch bevormundig.
• Bispiu d Kommentar-Übersicht (neuste Kommentare): Isch us Tabäue implementiert und jedere Ziile wird d Farb gsetzt (damit das Zebramuster entsteit). Das isch ä riese Overhead. Die Übersicht isch doch klar ä Lischte, auso bruchtme ou ds Element wo für Lischtene vorgseh isch worde in Html u dert chame erschno für jedi gradi und ungradi Ziile ä angeri Farb setze, auso würd das schowieder aues wägfaue im html. Wieder ziemlech viu igspart. So Bispiu hets unzähligi, i bi sicher d html Files würde 20% chliner wärde (so ganz ä grobi spontani Schätzig).
• Sache wie ‘div class=“text_klein“‘ si nid würklech dr Sinn vo dem Ganze: Sie bruche das z.B. bim ufbou vom Menu rächts (Posteingang, myWasAuchImmer etc). Und zwar für jedi Ziile…Sie Packe jedi Ziile ines div und gäbe dert d Klass a „he du hesch de chliine Text“… Nei, das isch nid dr Sinn, ds ganze isch doch ds Menu, auso packemr doch ds ganze ine Liste und gäbe dere d Klass „Menu“ und definiere dass dert dr Text chlii söu sii und fertig. I ha genau einisch class=“menu“ gschribe u zwar bir lischte und fertig. Wieder x mau unnötige code gspart und vorauem ds ganze semantisch (vor bedütig her) richtig gmacht.
• Geit i die richtig wie dr ober Punkt: Klasse sötte nid direkt ds ussehe beiflusse, auso klasse wie „text_klein“ oder ähnlechs si nid würklech richtig. Me söt Klasse definiere wie „menu“, „navigation“, „news_block“ oder ähnlechs. Auso i säge amne Element im html „du bisch de es Menu“ und när isch im css definiert wie das Menu äbe usgseht. Aber i säge NID im html wie ds element söu usgseh! Wüu süsch simer wieder dert dasmr im html ds ussehe beschribe und das isch nid dr Sinn. Das wird im css gmacht. Süsch definieremr de no Klasse wie „text_rot“ oder „text_unterstrichen_und_hellblau“… sone blödsinn.
• Hui zersch machi no Witze wäg dene lustige Klassenäme u itz woni churz nomau i Code ha gluegt, gsehni dass die das tatsächlech so mache. Nid nur gits d Klass „text_klein“, sondern fürd Title (!!!) i de news bruche sie när d Klass „text_klein_bold“… Wie gseit, nomau dr vorherig Punkt läse oder no besser es Buecht über (X)Html und Css läse…

Uf au Fäu muess da es richtig Gründlechs redesign häre süsch wird dä aut Code no weiss nid wie lang mitgschleipft.