Am 2. Mai 2009 steht der ShutdownDay 2009 an. An diesem Tag sollen sich die Menschen selbst fragen:

“Can you survive for 24 hours without your computer ?”

Eine gute Frage, für die Mehrzahl dürfte der Computer mittlerweile zum alltäglichen Gegenstand geworden sein. Ob auf Arbeit oder im Privatleben, der Computer nimmt einen immer größeren Teil der Zeit ein. Es bleibt jedoch die Frage offen, ob beim ShutdownDay auch Handhelds, Smartphones und Konsorten gemeint sind. Streng genommen, sind diese Geräte genauso “Rechner” wie der klassische Heim PC.

Zitat:

“Shutdown Day announces the Annual 2009 Campaign. Just like in years past, Shutdown Day 2009 calls on every net obsessed, computer–addicted individual to SHUT DOWN their computers for 24 hours on May 2, 2009 and do something else!

New, Shutdown Day 2009 will be promoting several organizations that help young people suffering from computer addiction. A bunch of events are also organized for May 2, 2009, so stay tuned and watch this space.”

Via Brennr

Webseiten werden mit modernen Handhelds / Smartphones immer besser und kompfortabler. Die Displaygröße bringt es jedoch mit sich, eine Webseite anzupassen. Vorbilder wie die mobile Spiegel Online Seite machen es vor. Wie kann man aber die eigene Seite dahin optimieren?

Grundlage sollte eine tabellenfreie Struktur sein, d.h. nur div Konstrukte verwenden.

Die Positionierung und Gestaltung der Informationen geschieht also über eine externe CSS Datei.

Als Beispiel kann oneclickbutton.de genutzt werden. Alle sichtbaren Boxen sind <div> Einheiten, welche über eine style.css Datei positioniert werden.

Für Handheld- / iPhone-Geräte wird nun eine handheld.css Datei angelegt. Dort wird die Breite der anzuzeigenden Informationen auf 300 begrenzt. Somit ist noch Platz für 10 px Rand auf der linken Seite.

Nicht wirklich brauchbare Informationen werden über visibility: hidden; ausgeblendet.

Als letzter Schritt wird in der index.php File die Zeilen:

<link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”handheld.css” type=”text/css” />

<link rel=”stylesheet” type=”text/css” href=”handheld.css” media=”handheld”/>

<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

eingefügt.

Damit wird dem Benutzer das zoomen deaktiviert, ist durch die Anpassung auch nicht mehr nötig. Andere Handheld Geräte werden ebenso die handheld.css nutzen, sofern sie sich als media=”handheld” zu erkennen geben.

Eine solche Anpassung bedarf bei sauberem CSS Layout maximal eine Stunde und hat eine weitere Zielgruppe an Nutzern zur Folge.

Weiterführende Links zum Thema:

http://developer.apple.com/webapps/

http://www.frogg.ch/2008/03/10/website-optimieren-fur-iphone/

http://www.kulturbanause.de/?p=204

http://aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete/