Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Was muss ein Webdesigner bei der Auswahl eines Webhosters beachten.

Mittwoch, 17. September 2014

Webworker müssen bei der Auswahl eines Webhosters einiges beachten. Der eigene Server auf der ausgedienten Windows-Kiste reicht vielleicht zum Betrieb einer Gaming-Community. Für diesen Fall tut es möglicherweise auch einer der vielen Anbieter von kostenlosem Webspace. Auch im Falle einer “Anfänger-Homepage” kann man beim Webspace-Hosting ruhig aufs Geld schauen.
Aber sobald es an das Hosting von “seriösen", z. B. Unternehmens-Websites geht, steigen die Anforderungen an den Hoster.

Auf der Hand liegt die Frage: Webhosting, oder eigener Server? Wenn Server: Root-Server oder Managed Server?
Diese Entscheidung wird die Performance der gehosteten Site(s) erheblich beeinflussen. Aber das ist natürlich auch eine Kostenfrage.
Servermietpreise liegen mindestens beim zehnfachen von Webhosting-Paketen.

Relativ einfach ist es, die angebotenen Features mit den eigenen Bedürfnissen abzugleichen. Jeder seriöse Hoster bietet auf seiner Website eine (mehr oder weniger übersichtliche) Liste verfügbarer Features.

Features (Beispiele)

  • Verfügbarer Speicher
  • Traffic
  • Anzahl möglicher E-Mail-Accounts
  • Welche tdl (Top Level Domains) sind verfügbar?
  • FTP-Zugänge
  • Installierte Software
  • Cronjobs
  • SSL-Proxy
  • SSH-Zugriff
  • DNS Einstellungen
  • Viren/Spamfilter
  • … usw. usf.

Server-Verfügbarkeit (Historie)

100% Verfügbarkeit gibt es nicht. Aber auch 99,9% können einen nervösen Webmaster beunruhigen, wenn die 0,1% ausgerechnet dann zutreffen, wenn gerade eine dringende Änderung durchzuführen ist.
Die meisten Hoster bieten hier Verfügbarkeitsstatistiken zum Vergleich an.

Das wichtigste Auswahlkriterium aber ist leider auch am schwierigsten zu fassen: Der Service.

Software

  • Wie aktuell werden Aktualisierungen der Serversoftware (Apache, PHP, MySQL usw.) durchgeführt?
  • Werden Updates rechtzeitig vorab angekündigt?
  • Werden neue Versionen vorab zum Test eigener Scripte zur Verfügung gestellt?

Backup

  • Welche Daten werden wie häufig und wie lange gesichert?
  • Was passiert bei einem Hardware-/Software-Crash im Rechenzentrum?

Hotline / Service

  • Telefonisch - 7 Tage / 24 Stunden?
  • per E-Mail - Bearbeitungsdauer?
  • Brauche ich eventuell Support für eigene Scripte? Falls ja: Preis?
  • und wieder schwer greifbar: Wie schnell wird auf Probleme reagiert? Sind Techniker 24/7 verfügbar?

Auswahl

Welche Kriterien besonders wichtig, und welche weniger wichtig sind, wird fallweise sehr unterschiedlich sein. Ein Vergleich von Webhosting-Angeboten, z. B. bei Netzsieger.de kann bei Auswahl und Entscheidung hilfreich sein. Auch Beurteilungen / Rezensionen durch Kunden können helfen.


Bin ich ein DAU?

Freitag, 12. September 2014

… diese Frage musste ich mir soeben ernsthaft stellen.

Ich will Konzertkarten kaufen. Das Angebot auf der Website hat mich angemacht. Vor allem das eingebundene YouTube-Video. Also flugs das Online-Buchungsformular aufgerufen:

Screenshot
Ausschnitt aus einem Navigationsmenü:

KARTEN

  • Pauschalangebot Saitensprünge
  • Abo
  • Verkaufsstellen

Ich probiere “Pauschalangebot Saitensprünge” — das ist es natürlich nicht.
Als nächstes “Abo” — nein, ich will ja nur Karten für ein Konzert.
Letzter Versuch: “Verkaufsstellen". Dort finde ich ein Kartentelefon. Na gut, dann eben old style.

Die Dame am Telefon war wirklich nett. Was die alles von mir wissen wollte: Welches Konzert, meine Adresse und E-Mail, Bankverbindung — eine IBAN telefonisch durchzugeben hat was ;-) Da konnte ich mir die Frage nicht mehr verkneifen, warum denn keine Online-Buchung möglich sei.
Antwort: “Haben wir. Gehen Sie auf die Seite bla bla bla …”
Ich: “Aber dort gibt es nur Pauschalangebote und Abo. Das will ich aber nicht. Ich will nur 2 Karten bestellen.”
Antwort: “Klicken Sie auf KARTEN".

Boing! Das war für mich eine Überschrift, eine Kategorie, und kein aktiver Menüpunkt. Die Großschreibung des Begriffs KARTEN hat mich zu der Annahme geführt. Und diese Überschrift wurde beim Überfahren mit der Maus auch nicht so schön rot unterlegt wie die Unterpunkte.

Usability? Oder bin ich ein DAU?


Adaptive Web Design vs. Responsive Web Design - die Zweite

Montag, 8. September 2014

Im vorhergehenden Artikel hab’ ich mich selbst gelobt, wie gut ich doch Websites für mobile Geräte optimieren kann.
Aber um welche Website es sich handelt, sollte ich doch noch verraten: Ein 5 Jahre altes Projekt relaunched.

Und vor allem sollte ich kurz erwähnen, wie es gelungen ist, eine 1,3 MB schwere Webseite auf 100 kB zu schrumpfen.
www.webpagetest.org

Mit Media Queries, dem Schweizer Messer des RWD (Responsive Web Design) geht das nämlich nicht. Vielmehr musste ich auf eine alte, etwas in Verruf geratene Technik zurück greifen: User Agent Sniffing.
Warum?
Media Queries können zwar für eine auf das jeweilige Gerät optimierte Darstellung sorgen. Aber sie können nicht verhindern, dass Daten vom Server geladen werden, die für eine mobile Ansicht gar nicht nötig sind. In unserem Beispiel sind das vor allem jQuery & Co.
Mit User Agent Sniffing stelle ich schon auf dem Server fest, ob ein mobiles Gerät auf die Site zugreift, und PHP sorgt dafür, dass bestimmte Inhalte gar nicht erst zu mobilen Geräten geschickt werden.

Auf html5-mobile.de gibt es eine schöne Sammlung der wichtigsten mobilen User Agents.
Diese User Agents werden in ein Array namens $agents gepackt, und etwa folgendermaßen abgefragt (PHP):

for ($i=0; $i<count($agents); $i++) {
if (isset($_SERVER["HTTP_USER_AGENT"])
&& strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false) {
$sitestyle = “mobile";
}
}

Die relevanten Daten, z. B. jquery.js, werden dann nur zum Client geschickt, wenn es sich NICHT um ein mobiles Gerät handelt.

if ($sitestyle != "mobile" ) {
echo’
<script src="jquery.min.js"></script>

Natürlich muss Sorge getragen werden, dass die Seiten konsistent bleiben. D. h. beispielsweise eben nicht auf jQuery zugegriffen wird, wenn es nicht verfügbar ist. Wie schon mehrfach erwähnt, bedeutet das Handarbeit. Und vor allem immer wieder testen. Mit verschiedenen Tools, aber natürlich auch mit echten Geräten.


Adaptive Web Design vs. Responsive Web Design

So. ich bin mir selbst untreu geworden. Ich habe meine erste Website mit mehr als 1 MB für die Startseite online gestellt. Exakt 1.35 MB. Der Wunsch des Kunden war mir Befehl. Es mussten einfach wechselnde Hintergrundbilder sein.

Screenshot
Der Screenshot zeigt die Webseite. Links die Bereichsnavigation mit der Box für Aktelles
Screenshot
Der Screenshot zeigt die Webseite, nachdem der Inhalt ausgeblendet wurde, um nur das Hintergrundbild anzuzeigen. Ein Feature der Website.

Schön und gut. Mit einem schnellen Internet.

Aber was ist mit den ca. 20 % Besuchern (gemessen), die das Angebot mobil nutzen?
Gut. Sie bekommen eine mobile Version mit 100 kB, also gerade mal 8 % des Gewichts der Standardseite angeboten. Dafür gibt es für mobile Nutzer zusätzliche Features, die mobil, und nur mobil Sinn machen. Z. B. Direktlinks zu Navigationsapps, die ggf. auf dem Smartphone installiert sind.

Screenshot iPhone
Auf dem mobilen Bildschirm wird zuerst einmal das Wichtigste gezeigt, nämlich die Last Minute Angebote, die auf der Standardansicht in der seitlichen Navigationsleiste eingebunden sind.

Nein. Das ist keine Seite, die speziell für mobile Nutzung erstellt wurde. Sondern RWD (Responsive Web Design) weiter gedacht. Also AWD (Adaptive Web Design). Was nicht benötigt wird, wird für die mobile Nutzung auch nicht vom Server geladen. Das geht weit über RWD, Responsive Images und Ähnliches hinaus. Ein wenig Handarbeit ist dazu allerdings erforderlich. Ich kenne zumindest kein CMS, das Ähnliches leistet.


Firefox 32 - das neue Kontextmenü

Mittwoch, 3. September 2014

Firefox 32.0 hat ein nettes Feature: Das Kontextmenü beinhaltet jetzt Buttons für Vorwärts / Rückwärts / Seite neu laden / Favoriten

Screenshot
Das neue Kontextmenü des Firefox 32.0 mit den Navigationsbuttons

Schön. Und schneller, als mit der Maus die entsprechenden Buttons im Browser anzusteuern.
Aber dass Firefox jetzt den Deppenlink adelt, finde ich gar nicht nett. Wieso zeigt der Pfeil nach links ein Tooltip “Eine Seite zurück", wenn es keine vorherige Seite gibt, und Pfeil nach rechts ein Tooltip “Eine Seite vor", wenn es keine Seite vor gibt?
Beim genaueren Hinschauen stelle ich fest, dass die inaktiven Pfeile grau, und nicht schwarz sind. Zu spät, ich habe mich bereits geärgert. Mozilla bitte nachbessern, wirklich hellgrau machen, und den Tooltip entfernen.

NB: Screen Reader Nutzer sind hier im Vorteil. Sie erhalten einen Hinweis wie “nicht verfügbar".


Eine App - um jeden Preis - für jeden Sch***

Eine App muss her! Hat ja die Konkurrenz auch.
Aber halt! Muss wirklich?

Nein. Da ist in den letzten Jahren etwas gewaltig schief gelaufen.

Warum etwa muss, für dickes Geld, zur Anzeige einer Wettervorhersage eine App für iOS, eine für Android, und eine für Windows entwickelt und gepflegt werden?
Warum muss ich mir für diesen Zweck einige MB downloaden und meinen kostbaren Speicherplatz damit füllen?
Wieso kann ich mir die Wetterprognose nicht auf einer — natürlich responsiven — Webseite anschauen?
(Doch, ich kann: wetter.de beweist es.)

Screenshot iPhone
wetter.de auf dem iPhone Safari-Browser

Klar, auch ich habe inzwischen 5 verschiedene Wetterapps installiert, mit zusammen 70 MB. Wofür habe ich mir schließlich ein Smartphone mit 64 MB Speicher gekauft. (Der Browser der mir die oben genannte Website wetter.de anzeigt, wiegt übrigens nur 4,7 MB!) Und das Icon, das ich mir als Shortcut zu wetter.de auf den Homescreen gelegt habe, ist mindestens so schön wie die Icons der Wetter-Apps :-)

Screenshot iPhone
Der Ordner mit den Wetter-Apps. Rechts unten das Icon mit dem Shortlink zu wetter.de im Safari-Browser

Und online muss ich für die Abfrage der Wetterprognose ohnehin sein. Wozu also eine App, wenn’s mit einer Website auch geht?

Da läuft was schief!

Nun gut, Wetter ist die eine Sache. Ich könnte x andere Beispiele zitieren. Etwa die Gemeinde in der Urlaubsregion XYZ, die viel Geld zum Fenster raus geworfen hat für eine App, die letztlich nur einen Bruchteil der Informationen liefert, die ohnehin auf der Website zu finden sind, und keinerlei Mehrwert. Wer wird sich wohl diese App installieren, nachdem er die Websites der Urlaubsregion durchstöbert hat, und am Ende auf die berühmten Buttons “App im iTunes Store", “Google Play” usw. gestoßen ist. Aber “alle andern haben auch eine App. Also brauchen auch wir eine App.”

Klar, es gibt auch Beispiele für sinnvolle Apps. GPS-Signale für eine Navi-App auszuwerten, damit wäre HTML wohl überfordert. Und nur navigieren, wenn ich Online-Zugriff auf Kartenmaterial habe, ist auch nicht gerade das Gelbe vom Ei.

Aber die hundertste Editor-App ist bestimmt nicht nötig. Eine pfiffige Web-App, die Zugriff auf die Cloud hat zur Ablage von Dokumenten, und die begrenzt Daten auf dem Gerät zwischenspeichern kann, sollte mit HTML5 machbar sein. Browser und Betriebssystem müssten solche intelligenten Lösungen unterstützen.

Neuer Anlauf: Ein FTP-Programm. Das geht doch nur mit einer App. Dafür macht eine App doch sicher Sinn? Um unterwegs mal schnell einen Fehler in einer Datei auf dem Server zu korrigieren. Oder etwa doch nicht? Es gibt webbasierte FTP-Clients. Und für die schnelle Änderungen, die unterwegs mal nötig wird, sollte das doch auch im mobilen Browser möglich sein.

Screenshot iPhone
net2ftp.com bietet einen webbasierten FTP-Client. Die Site ist responsive, und auch mit dem Smartphone bedienbar.

Quod erat demonstrandum.

Ich prognostiziere mal, dass es diesbezüglich in einigen Jahren eine Rückkehr zur Vernunft geben wird.


iTunes Guthaben mit Rabatt bei der Sparkasse

Montag, 1. September 2014

Die erste iTunes-Rabattaktion, die wirklich Geld spart: ausgerechnet bei der Sparkasse.

Dort kann man ja schon seit einiger Zeit iTunes Gutscheinkarten kaufen.
Bereich Banking > Auftrag > iTunes Codes > Wählen Sie Ihren Anbieter durch Klick auf das Logo:
Das Einlösen geht ganz komfortabel, durch Kopieren des Gutscheincodes, also ohne die Rubbelei wie bei normalen Gutscheinkarten.

Seit heute 01.09.14 (wie lange wohl?) gibt es die 25 € Karte für 20 €. Also mit 20% Rabatt.

Screenshot
Die rabattierte Karte ist im Design abweichend dargestellt. Also nicht die “normale” 25 €-Karte wählen, sondern diese.

Und warum spart ausgerechnet die Sparkassenaktion Geld?
Weil ich bisher die “ersparten” 5 € immer an der Tankstelle “reinvestiert” habe. Für die Fahrt zum xxx-Markt, wo es rabattierte Karten gab.

Ich hab’ jedenfalls mein iTunes-Konto mal aufgeladen. Braucht man ja immer wieder mal für eine App, oder einen Musiktitel.


Wie lange darf die Beantwortung einer E-Mail dauern?

Freitag, 29. August 2014

Drei Tage? Eine Woche? Kann man nach 2 Wochen noch mit einer Antwort rechen?
Ja. Wenn der Adressat Lufthansa heißt. Auch wenn die Antwort dann als Telefonat kommt.

Neuland eben.

PS:
E-Mail ist in diesem Fall nur Synonym. Es gibt keine E-Mail Adresse der Lufthansa! Sondern nur ein Online-Formular. Und wenn man dort seine Haarfarbe und ähnliche Details nicht eingibt, wird das Formular einfach nicht abgeschickt. Dafür kann man Anlagen mitschicken. Bis zu 500 kB. Aber dass es diese Begrenzung gibt, und wo sie liegt, kann man nur vermuten, nachdem man das entsprechende Dokument eigens für die Lufthansa gescannt und ans Formular angehängt hat. Mehrere erfolglose Versuche mit Dateien unterschiedlicher Größe führten mich zur Annahme, dass es die Begrenzung auf 500 kB gibt.
Nun gut, dann also zippen. Denkste. zip-Dateien mag die Lufthansa gleich gar nicht. Auch das erfährt man, nachdem man die Datei gezippt und hochgeladen hat.

Neuland eben. Dass der Verfasser des Online-Kontaktformulars den Begriff Usability kennt, will ich mal nicht unterstellen. Denn sonst müsste ich Böswilligkeit unterstellen.

Was übrigens gut funktioniert bei der Lufthansa: Der Autoresponder. Die Lufthansa hat also meine Nachricht erhalten. Welche Nachricht? Das verrät man mir wohlweislich nicht. Ich hab’ mir ja vor dem Abschicken des Formulars sicher einen Screenshot angefertigt. Eine andere Möglichkeit, das Formular vor dem Abschicken zu speichern, gibt es nämlich auch nicht.
Womit wir wieder beim Stichwort Usability wären …


Social Plugins - Facebook, Twitter und Google

Mittwoch, 20. August 2014

Nicht mehr ganz neu: Datenschützer mögen die Art nicht, wie die sozialen Dienste Facebook, Twitter und Google+ das Nutzerverhalten ausspionieren, wenn und sobald auf einer Seite die bekannten “Like"- und “Teilen"-Buttons eingebaut sind. (Ich mag das übrigens auch nicht.)
perun.net hat dazu gebloggt. Und auch gleich noch eine elegante Lösung publiziert: Statische Social Buttons. Elegant, schlanker Code, und vor allem: ich konnte den Code lesen, und verstehen, was dort passiert, bzw. nicht passiert. Klar, das ich die Lösung übernommen habe.

Leider funktioniert diese Lösung seit einiger Zeit nicht mehr. Facebook hat mal wieder was kaputtgeändert. Die sharer.php funktioniert nicht mehr. Und ich habe keine Lust, die aufwändige, auf stackoverflow beschriebene Lösung einzubauen. Weil ich mir ausrechnen kann, wann Facebook die API wieder kaputtändert.

Also zurück zur 2-Klick Lösung von heise.de.
jQuery Plug-In socialshareprivacy — Dokumentation

Egal, wie der aktuelle Stand bzgl. Datenschutz ist: Mir ist damit wohler, als mit den Standardbuttons. Ich will nicht, dass die Besucher meiner Seiten ausgeschnüffelt werden.

Ein Bild kann ich mir ersparen. Der geneigte Leser sieht es in diesem Artikel. Natürlich nur, wenn er den Artikel selbst aufruft, und nicht eine Übersichtsseite, Kategorie o. Ä.


Die Zwischenablage gemeinsam auf Mac, iPhone und iPad nutzen

Samstag, 16. August 2014

Schnell mal einen Link, ein Textschnipsel, oder ein Foto vom Mac auf das iPhone, vom iPhone auf das iPad oder oder … schieben. In jede Richtung.
Üblicherweise wird zu diesem Zweck E-Mail missbraucht.

Wesentlich eleganter geht es allerdings mit der iOS App
Pastebot [iTunes Link], derzeit 3,59 €

Funktion

Pastebot stellt gewissermaßen eine gemeinsam genutzte Zwischenablage dar. Was auf einem der Geräte kopiert wird, landet gleichzeitig auf allen Geräten, auf denen Pastebot läuft, und kann dort weiter verwendet werden, z. B. um einen Hyperlink im Browser zu öffnen, oder ein Bild in eine beliebige Anwendung einzufügen. Einzige Voraussetzung: gemeinsam genutztes WLAN.

Pastebot dient daneben auch als Archiv für die Zwischenablage. Die letzten 200 dorthin kopierten Schnipsel sind verfügbar.

Screenshot der iPhone App
Die in Pastebot abgelegten Schnipsel - Fotos, Text, eben alles, was durch den Copy-Befehl in die Zwischenablage gelegt wurde - stehen in Pastebot zur Verfügung. Zur Bearbeitung, oder zum Versenden auf andere Geräte.

Hinweis: Die iPhone App läuft auch auf dem iPad. Auf dem Mac ist zusätzlich die kostenlose App Pastebot Syn erforderlich.

Barrierefreiheit

Pastebot ist mit VoiceOver nicht bedienbar. :-(


Ältere Beitäge:

Kategorien:

Tastaturkürzel

zum Seitenanfang