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

Hochformat-Videos sind böse

Dienstag, 30. September 2014

Hat schon mal wer eine Kinoleinwand im Hochformat gesehen? Oder ein Hochformat-Fernsehgerät? Oder jemanden, der den Camcorder so hält, dass ein Hochformat-Video entsteht.
Na also!
Warum gibt es dann so viele Hochformat-Videos auf YouTube — wo sie übrigens richtig Scheiße aussehen, nach Mäusekino.
Richtig: Weil Smartphones diesen Blödsinn erlauben. Nicht nur erlauben, sondern sogar indirekt unterstützen, weil man halt ein Smartphone natürlicherweise so hält, dass Fotos und Videos im Hochformat aufgenommen werden.

Diesen Unfug sollten Smartphone-Hersteller unterbinden!

Bis dahin kann ich eine App empfehlen, die immer ordentliches Querformat erstellt, selbst wenn man das iPhone krumm und schief hält: Horizon

Screenshot
Der iPhone Monitor von Horizon zeigt den Ausschnitt an, der als Video aufgezeichnet wird. Im gezeigten Beispiel wird das iPhone hochformatig, aber stark schräg gehalten.

RSS Feed ungekürzt

Sonntag, 28. September 2014

Seit der Erfindung des Internet (oder war’s doch einige Jahre später?) liefere ich meinen RSS-Feed angeteasert aus. Wer den Teaser interessant findet, klickt dann wohl im Feedreader auf “weiter", um meinen Blog zu besuchen. So war wohl der ursprüngliche Gedanke (ich unterstelle einfach mal, dass ich mir überhaupt etwas dabei gedacht habe).
Vielleicht war dieser Gedanke sogar damals richtig — Stichwort Transfervolumen sparen usw. Aber meine eigene Erfahrung mit Feeds — ich benutze Feedly, seit Google seinen Feedreader eingestellt hat — zeigt mir, dass das wohl heute so nicht mehr richtig ist. Ich lese gerne komplette Artikel direkt in Feedly, und klicke nur in den seltensten Fällen zum Blog.
Konsequenz: Ich veröffentliche in meinem Feed ab sofort auch ganze Artikel. Wer wirklich von einem Artikel so hin- und hergerissen ist, dass er partout dazu einen Kommentar abgeben will, oder einfach das Bedürfnis verspürt, mehr über den Schreiberling zu erfahren, der wird schon klicken.

Werbung:

ABONNIEREN SIE @fritzweissharts WEBLOG!
Erhältlich in allen guten Feedreadern.
Fragen Sie nach http://webdesign.weisshart.de/wordpress/wp-rss2.php
Eine reiche Auswahl von Datenpaketen vorzüglicher Qualität ist garantiert.
Nur € 0,-. Bei Nichtgefallen 30 Tage Geld-zurück-Garantie!

Dank für die Idee mit dem Werbeblock an @danimrich via @RobLen


Kein WLAN-Sync mit IOS 8

Ein leidiges Problemchen, das Apple anscheinend nicht in der Griff bekommt:
Geräte über WLAN mit iTunes synchronisieren.
Mit iOS 5 eingeführt, gab es bereits bei iOS 6 Probleme damit.
Und jetzt mit iOS 8 wieder. Einen Workaround habe ich hier beschrieben.

Auch die Apple Support Community diskutiert den Bug.

Dort wird unter anderem auch folgende Lösung beschrieben:
Einstellungen - Allgemein - Handoff & App-Vorschläge - Handoff ausschalten.
Anschießend das Gerät neu booten (Hometaste und Ausschalter so lange halten, bis das Apple Logo erscheint)
Scheint zu funktionieren.
Allerdings nur für Geräte, die Handoff unterstützen. Also z. B. das iPad mini. Mein iPhone 4s ist aber definitiv außen vor. Und wird jetzt sogar durch das beschriebene Aus- und Einschalten nicht mehr in iTunes angezeigt.
Ich musste ganz tief in die Trickkiste aus iOS 5-Zeiten greifen:

  • Gerät per USB-Kabel mit dem Mac/MacBook verbinden.
  • iTunes aufrufen, und warten, bis das iPhone erkannt wird.
  • Verbundenes Gerät in der iTunes Seitenleiste anklicken.
  • Häkchen entfernen vor “Mit diesem iPhone / iPad über WLAN synchronisieren”
  • Beliebigen anderen Punkt in der Seitenleiste anklicken. Meldung “Sie haben die Einstellungen …” bestätigen.
  • Verbundenes Gerät in der iTunes Seitenleiste anklicken.
  • Häkchen setzen vor “Mit diesem iPhone / iPad über WLAN synchronisieren”
  • Beliebigen anderen Punkt in der Seitenleiste anklicken. Meldung “Sie haben die Einstellungen …” bestätigen.
Screenshot iTunes
In der Seitenleiste von iTunes werden die Geräte gelisten, die für Sync verfügbar sind.

Dann kann, während iTunes noch läuft, das Kabel entfernt werden.

Es scheint zu klappen. Handoff ist ohnehin erst irgendwann in der Zukunft sinnvoll, wenn es auch auf OS X (Yosemite) läuft.

Nachtrag 29.09.2014

iOS hat da offensichtlich eine Zeitschaltung eingebaut. Gestern lief alles, heute morgen wird keines meiner Geräte mehr gefunden. Wie einleitend geschrieben: “Ein leidiges Problemchen, das Apple anscheinend nicht in der Griff bekommt.”


iOS 8 - und iTunes findet das iPhone / iPad nicht mehr zum WLAN Sync

Mittwoch, 24. September 2014

Zu diesem Thema habe ich vor fast genau 2 Jahren eine Anleitung geschrieben mit dem Titel:
iOS 6 - und iTunes findet das iPhone nicht mehr zum WLAN Sync

Duplizität der Ereignisse: Auch iOS 8 beschert uns diesen Bug wieder.
Die Lösung ist allerdings diesmal wesentlich einfacher und vor allem zuverlässiger — wenn auch nervig. Nervig, weil die Prozedur praktisch bei jedem Start von iTunes erneut erforderlich wird.

Einfach das Gerät, das nicht gefunden wird, aus- und wieder einschalten. Also nicht nur Stand-By, sondern richtig ausschalten.


Die RWD-Lüge - Betrug am Kunden

Warum werben Agenturen mit RWD (Responsive Web Design) mit folgender Aussage:

Smartphones und Tablet PCs bringen ein paar weitere Anforderungen an ein gutes Responsive Design mit: … eventuell weniger Datenrate (von Unterwegs über 3G oder EDGE)

und liefern dann Webseiten ab, die mein mobiles Datenvolumen mit 2,7 MB belastet. Alleine für die Startseite. Wenn ich nicht nach mehrminütigem Warten auf den Seitenaufbau die Lust verliere.
Ich nenne das Betrug am Kunden, der den Mangel nicht nachvollziehen kann. Denn selbst wenn er seine eigene Website zum Test unterwegs mit dem Smartphone aufruft, lädt er höchstwahrscheinlich die Seiten blitzschnell aus dem Cache seines Smartphones, weil er sie vorher zuhause im WLAN schon einmal geladen hat. Seine Kunden erleben jedoch, was ich erlebte. Die beworbene, und teuer bezahlte Tauglichkeit der neuen Website für das mobile Web steht nur auf dem Papier.

Der phantastische Online-Dienst WebPagetest zeigt das Übel in aller Deutlichkeit:

Screenshot
Die Ergebnisse eines Tests mit WebPagetest:
Tabellarisch werden die wichtigsten Kenndaten aufgelistet, darunter ein Balkendiagramm, das die Ladezeit der einzelnen Seitenelemente darstellt. Rechts eine Vorschau der getesteten Seite.
Screenshot
Die wichtigsten Kenndaten:
  • Load Time: 34,496 Sek.
  • Bytes: 2.733 kB

Der Knackpunkt dabei: Auch an mobile Geräte werden Seiteninhalte geschickt, die auf dem kleinen Bildschirm keinen Sinn machen — viele Scripts zum Beispiel — , und zum größten Teil auch gar nicht benötigt werden, wie z. B. riesige Hintergrundgrafiken

Nein, dieses Beispiel ist kein Einzelfall. Sondern die Regel.
Um es noch deutlicher zu Sagen: Mir ist keine einzige Website bekannt, die das Datenvolumen für mobile Nutzung ordentlich optimiert. RWD, das Neu-Anordnen der Seitenelement für kleine Bildschirme, genügt eben nicht, um Seiten wirklich tauglich zu machen für mobile Nutzung.

Dabei wurde doch AWD (Adaptive Web Design) bereits erfunden!


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".


Ältere Beitäge:

Kategorien:

Tastaturkürzel

zum Seitenanfang