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

Chance verpasst?

Freitag, 28. November 2014

Ein spannendes Experiment: Krautreporter

Zitat:

Krautreporter ist eine Community, die Journalismus im Netz ermöglichen möchte. Dafür nehmen wir uns Zeit — zum Recherchieren, Experimentieren, Diskutieren und natürlich zum Lesen.

Krautreporter hat per Crowdfunding über 1 Mio € Startkapital gesammelt. 90.000 € davon wurden für die Website (Software und Design) aufgewendet. Ein stolzes Budget.

Ja, die Website macht tatsächlich etwas her. Wenn, ja wenn man nicht

  • mobil bei geringer verfügbarer Bandbreite lesen will, oder
  • wegen einer Sehbehinderung auf einen Screen Reader angewiesen ist.

Was ist da schief gelaufen?

  • RWD (Responsive Web Design) ist heutzutage ein Muss für jede Agentur, die ein Projekt als zeitgemäß verkaufen will.
    Leider haben die Macher zwar berücksichtigt, dass Smartphones und Tablets über kleine Monitore verfügen. Aber auch an Smartphones Seiten mit bis zu 6 MB Gewicht auszuliefern, wovon lediglich 15 kB auf Text, also auf den Inhalt, entfallen? Smartphones werden nicht ausschließlich im WLAN oder mit LTE eingesetzt!
    Dabei wäre es mit etwas gutem Willen durchaus möglich, die Inhalte mobil-friendy anzubieten. Ich habe erst kürzlich einen Artikel zu diesem Thema verfasst.
  • Ganz schlechte Karten haben blinde und sehbehinderte Menschen, die Krautreporter mit Hilfe eines Screen Readers lesen wollen. Ohne auf Details einzugehen, darf ich hier stellvertretend 2 Fehler erwähnen, die es Screen Readern schwer machen, die Seiten korrekt wiederzugeben, und blinden und sehbehinderten Lesern, sich auf den Seiten zu orientieren:
    1. Die Seiten sind mit technischen Fehlern gespickt, und
    2. semantisch nicht bzw. sehr mangelhaft strukturiert (z. B. h2 für das Artikeldatum, aber keinerlei Gliederung der Artikel selbst durch Zwischenüberschriften).

Die Probleme lassen sich natürlich beheben. Leichter, und vor allem kostengünsiger wäre es allerdings gewesen, bereits in der Konzeptions- und Umsetzungsphase sowohl die Barrierefreiheit, als auch die mobile Nutzung entsprechend zu berücksichtigen.


Eine gemeinsame Zwischenablage für alle Geräte

Dienstag, 25. November 2014

Unter dem Titel “Pastebot kaputt? Command-C springt ein” habe ich vor einiger Zeit die App Command-C vorgestellt.
Ich denke, ich sollte auch noch beschreiben, warum die App für mich inzwischen zu einem täglich genutzten Handwerkszeug wurde.
Ich teste häufig nicht nur die Barrierefreiheit von Websites, sondern auch die Qualität von Websites auf mobilen Geräten. (Stichwort: AWD.) In diesem Zusammenhang ist es extrem hilfreich, wenn ich die Eingabe von (manchmal ellenlangen) URLs nicht auf dem iPhone vornehmen muss.

Auf dem MacBook

  • Ich habe die zu testende Webseite auf dem MacBook geöffnet.
  • cmd + L fokussiert das Eingabefeld für den URL
  • cmd + C kopiert den URL in die Zwischenablage
  • Shift + cmd + X öffnet den Command-C-Dialog
    Screenshot Command-C-Dialog
    Beim Anklicken des Command-C Icons in der Menüleiste öffnet sich der Dialog mit den installierten Geräten zur Auswahl.
  • Dann wähle ich mit den Pfeiltasten das Gerät, auf dessen Zwischenablage ich den Inhalt der MacBook-Zwischenablage kopieren will.
  • Enter schließt die Aktion ab, ein Hinweisfenster bestätigt den Erfolg.
    Screenshot Hinweisfenster
    Die Meldung: Clipboard shared successfully.
  • Falls ein Fehler auftritt, wird der im gleichen Hinweisfenster gemeldet.

Auf dem Gerät (iPhone, iPad)

wird die erfolgreiche Übermittlung angezeigt. Je nach Einstellung entweder auf dem Lock Screen, und / oder, wenn das Gerät entsperrt ist, als Banner oder Hinweis.

Screenshot Einstellungen auf dem iPhone
Auf dem Gerät gibt es unter Einstellungen umfangreiche Konfigurationsmöglichkeiten.
Screenshot Banner auf dem iPhone
Hier ist die Meldung als Banner dargestellt. Ein Tipp auf die Meldung öffnet den Browser mit dem übermittelten URL.

Falls der Inhalt der übermittelten Zwischenablage ein URL ist, wird beim Entsperren des Geräts, oder fallweise durch Antippen des angezeigten Bannners / Hinweises, der Browser mit der übermittelten URL gestartet.
Alle übermittelten Zwischenablage-Inhalte werden auch in der App selbst noch einmal aufgelistet. Die App dient so als eine Art History für die Zwischenablage. Selbstverständlich kann aus dieser Liste ein URL erneut aufgerufen werden.

Damit ist aber der Leistungsumfang von Command-C noch nicht vollumfänglich beschrieben. Alles, was die Zwischenablage aufnimmt, kann übertragen werden. Auch Bilder und beliebige Texte. Und ja, die Übertragung kann in jede beliebige Richtung erfolgen, also auf vom iPhone zum MacBook, oder vom iPhone zum iPad.
Damit ist Command-C beispielsweise die schnellste Möglichkeit, Fotos vom iPad auf MacBook oder iPad zu übertragen.

Das klingt alles komplizierter, als es in der Praxis ist.

Barrierefreiheit — Benutzung mit VoiceOver

  • Auf dem MacBook: Leider reichen meine VoiceOver-Kenntnisse nicht aus, um zu beurteilen, ob das Dialogfeld zur Auswahl des Zielgerätes bedienbar ist.
  • Auf dem iOS-Gerät: Die App ist grundsätzlich mit VoiceOver bedienbar. Da das Bedienungskonzept sich jedoch nicht ohne weiteres selbst erschließt, ist vermutlich eine Einweisung durch einen erfahrenen Nutzer erforderlich.

Wie finde ich den passenden Webhoster für mein Projekt?

Donnerstag, 20. November 2014

Aus gegebenem Anlass — so sagt man wohl — und weil immer wieder danach gefragt wird, darf ich die Frage hier (wieder einmal) beantworten. Nein, nicht mit der Nennung eines bestimmten Webhosters, sondern mit einer Beschreibung über die richtige Herangehensweise.

Einen Webhoster wählt man nicht alle Tage aus. Die Zusammenarbeit soll schließlich über viele Jahre halten. Daher ist eine systematische Vorgehensweise nötig.

Ich habe vor einiger Zeit schon einmal einen Artikel zu diesem Thema geschrieben, und darf die wesentlichen Kriterien bei der Wahl hier noch einmal beispielhaft aufführen:

  • Features
    • 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)
  • Backup: Werden die Daten auf dem Server gesichert, für den Fall eines Hard- oder Softwareschadens?
  • Hotline / Service
    • Telefonisch - 7 Tage / 24 Stunden?
    • per E-Mail - Bearbeitungsdauer?
    • Brauche ich eventuell Support für eigene Scripte? Falls ja: Preis?
    • Wie schnell wird auf Probleme reagiert? Sind Techniker 24/7 verfügbar?

Zum Glück gibt es Portale, die einen objektiven und neutralen Vergleich von Webhostern ermöglichen. Beispielhaft möchte ich hier webhostingvergleich24.com nennen. (Dort gibt es übrigens auch einen umfangreichen Fragenkatalog, der wesentlich mehr Kriterien als die oben genannten umfasst.)
Das Wichtigste jedoch sind detaillierte Tests und Erfahrungsberichte über die einzelnen Hoster.

Verschaffe dir also einen Überblick über den Markt, über die unterschiedlichen angebotenen Leistungen, lese Tests und Kundenbeurteilungen, und suche den für dich passenden Anbieter aus.
Falsch wäre es meines Erachtens, nur ein einziges Kriterium zur Entscheidung heranzuziehen, etwa die im Supportforum gestellte Frage, ob der Betrieb eines Chat erlaubt ist. Deine Anforderungen werden möglicherweise im Laufe der Zeit umfangreicher. Vielleicht kommt später einmal ein Blog dazu, oder sogar eine ausgewachsene Webpräsenz. Auch dann soll dein Webhoster noch zu dir passen.

Zuletzt darf ich mich noch selbst aus meinem Supportforum zitieren:

Wenn du eine Vorauswahl getroffen hast, dann kontaktiere den Hoster deiner Wahl und stelle eine konkrete Frage. Aus der Reaktion auf deine Frage kannst du möglicherweise schon erkennen, ob dieser Hoster für eine langjährige Zusammenarbeit in Frage kommt, ob die “Wellenlänge” stimmt. Kam als Antwort nur eine halbautomatisch aus Textbausteinen zusammengestellte E-Mail? Oder wurde speziell auf dein Anliegen eingegangen?


Microsoft Office kostenlos: Word, Excel, Powerpoint für iPhone & iPad!

Donnerstag, 6. November 2014

Die Microsoft Office Programme gibt es jetzt kostenlos für iOS. Zur Nutzung ist lediglich ein kostenloser Microsoft Account erforderlich.

App Icon Winword Microsoft Word [iTunes Link]

App Icon Excel Microsoft Excel [iTunes Link]


App Icon Powerpoint Microsoft Powerpoint [iTunes Link]



Auf dem iPad fühlen sich Word und Excel richtig gut an. Und auf dem kleinen iPhone Monitor? Microsoft hat sich richtig Mühe gegeben, auch auf der eigentlich viel zu kleinen Arbeitsfläche alles Nötige unterzubringen. Aber mehr als ein Notbehelf kann das nicht sein.

Für mich das Highlight: Die Dropbox-Synchronisation, und damit die Möglichkeit, Dokumente auf verschiedenen Geräten zu bearbeiten.

Die VoiceOver Unterstützung ist perfekt. Eine Einschränkung muss ich machen: Das Editieren von Dokumenten unter iOS / VoiceOver ist generell, um es vorsichtig auszudrücken, schwierig. Nicht anders ist das natürlich mit Word-Dokumenten. Aber um das abschließend zu beurteilen, sind meine Kenntnisse mit VoiceOver nicht ausreichend.


Wozu braucht der Mensch Flash - ein Versuch

Dienstag, 4. November 2014

Flash — das waren doch die coolen Webseiten, wo sich was bewegte. Und Filme im Internet.
Apples Steve Job hat Flash zu Recht vor langer Zeit bereits auf den Index gesetzt. Auf meinen iPhones und -Pads gibt es kein Flash. Und ich hab’s dort bisher noch nicht vermisst. Auf dem MacBook aber ist Flash natürlich noch installiert. Unüberhörbar, wenn der Lüfter hochdreht, und “unüberfühlbar", wenn die Oberschenkel langsam aufgeheizt werden.

Dabei gibt es doch längst HTML5 und das video-Tag.

Was spricht eigentlich dagegen, einmal zu testen, ob die Welt ohne Flash lebenswert ist?

Mein Arbeitspferd für das Web ist Firefox. Dort kann man unter Extras — Add-ons — Plugins Flash ganz einfach deaktivieren. Ich verwende im ersten Schritt die Option “Nachfragen, ob aktiviert werden soll". Ich will (noch) wissen, was mir alles entgeht.

Screenshot
“Adobe Flash aktivieren” wird angezeigt, wenn ein Flash Video aufgerufen wird, aber Flash deaktiviert ist.

Und jetzt?

  • YouTube?
    Kein Problem. Youtube kann HTML5. Unter Umständen ist es einmalig erforderlich, den HTML5-Videoplayer zu aktivieren.
  • Facebook?
    Eingebettete Videos laufen nicht mehr. Vermutlich ist das eher eine Wohltat als ein Problem.
    Jedoch: Facebook weiß sehr wohl, dass man Videos auch ohne Flash schauen kann. Die iOS-App beweist es. Also warum nicht auch auf dem Desktop?
  • Twitter?
    ditto!

Jetzt kommt’s aber dicker:

  • Was ist mit meinen eigenen Seiten, die auf Flash setzen? Z. B. dieses Hausvideo?
  • Oder der geniale Yahoo! - Player, den ich in meinem Blog immer noch als Audio-Player verwende. Z. B. hier, um ein VoiceOver Audio einzubinden.
  • Oder das in meinem Chat eingebundene Radio?

Ob ich wohl die Konsequenz aufbringe, alle diese Flash-Anwendungen zu eliminieren?
Man wird sehen. ;-)


HTML5 veröffentlicht

Montag, 3. November 2014

HTML5 hat jetzt den Status “Recommendation", und ist damit De-facto-Norm. Am 28.10.2014 hat das World Wide Web Consortium nach mehr als 6 Jahren Entwicklungszeit die Spezifikation der Hypertext Markup Language 5 veröffentlicht.

Das HTML5 Logo
Bild: Wikipedia

HTML, das ist die Sprache des Web, die (Auszeichnungs-)Sprache, in der Webseiten geschrieben (nein, nicht programmiert) werden.
HTML5 erweitert den Vorgänger HTML 4.01 um viele neue Elemente, und ermöglicht eine bessere, sinnfälligere Strukturierung von Webseiten.

HTML5 ist eine Obermenge von HTML 4.01; anders ausgedrückt: Praktisch alle Elemente von HTML 4.01 sind auch in HTML5 enthalten.
Diese scheinbar akademische Feststellung hat ganz praktische Konsequenzen: Der Umstieg auf HTML5 kann “sanft” erfolgen. Es genügt im ersten Schritt, ein vorhandenes HTML 4.01 Dokument mit der Dokumenttypangabe <!DOCTYPE html> zu versehen, und schon hat man ein gültiges HTML5 Dokument.

Anschließend kann man all die schönen und nützlichen neuen Möglichkeiten von HTML5 nutzen, z. B.:

  • Natives audio und video. Auf Sicht werden damit Erweiterungen wie Flash, Silverlight usw. entbehrlich.
    Ein praktisches Beispiel mit dem audio-Tag.
  • Strukturierende Elemente: section, nav, article, aside, header und footer, anstelle “nichtssagender” div-Elemente. Assistive Techniken, z. B. Screen Reader, nutzen diese Elemente heute bereits um die Seitenstruktur zu verdeutlichen, und die Navigation zu erleichtern.
  • Beim input-Element können Entwickler genauere Vorgaben machen, welche Eingabewerte zulässig sind. So sind etwa Datumstypen oder Schieberegler für Zahlen vorgesehen.

Nicht alle Browser unterstützen bereits alle Möglichkeiten von HTML5. Im Einzelfall kann man auf caniuse.com nachschlagen und entscheiden, ob und welche Elemente man nutzen kann / will. So wird z. B. der Input-Typ date von den Schwergewichten IE und Firefox gar nicht unterstützt, das audio-Element hingegen von allen modernen Browsern.

Mein Fazit:

HTML5 ist eine feine Sache, ohne Nachteile. Viele neue Möglichkeiten, Verbesserung der Barrierefreiheit, z. B. Entfall von Flash, Verbesserung der Orientierung auf einer Seite, usw.


Mac OS X 10.10 Yosemite

Dienstag, 28. Oktober 2014

Ein Betriebssystem-Update macht man nicht alle Tage. Neue Windows-Versionen gab es bei mir üblicherweise nur beim Kauf einer neuen Kiste. Die kostet ohnehin nur wenig mehr als Windows.
Anders auf dem Mac. Seit Snow Leopard stellt Apple die Betriebssystem-Updates sogar kostenlos zur Verfügung.

Ich hab’ also auf meinem MacBook Pro jetzt bereits das fünfte Betriebssystem am laufen:

  1. OS X 10.6 (Snow Leopard)
  2. OS X 10.7 (Lion)
  3. OS X 10.8 (Mountain Lion)
  4. OS X 10.9 (Mavericks)
  5. OS X 10.10 (Yosemite)

Man sollte meinen, dass die Hardware dabei entweder nicht mehr mitmacht, oder zumindest die “alte” Kiste mit den steigenden Anforderungen der neuen Software überfordert ist.
Nicht so bei Apple.
Mein MacBook fühlt sich nach dem Update auf Yosemite an wie neu. Es ist schnell, stabil und frei von Fehlern. Erstaunlicherweise haben sich sogar uralte Fehler, an die ich mich längst gewöhnt hatte, in Luft aufgelöst.

Beispiele für Apps, die regelmäßig abstürzten — nicht mehr unter Yosemite.

Das Highlight aber ist der Akku! Wieder über 4 Stunden Akkubetrieb, und das mit einem Akku, der bereits 1200 Ladezyklen auf dem Buckel hat.

Die Mac-Aktivitätsanzeige:
Verbleibende Leistung: 5%
Verbleibende Zeit: 0:12
Zeit im Batteriebetrieb: 4:07

Ich musste allerdings nach dem Update auf Yosemite einmal einen SMC Reset durchführen, um nervige WLAN-Probleme in den Griff zu bekommen.

Und eine Akkupflege hat sicher meinem Akku geholfen.


Telefonieren - Direktwahl aus der Webseite

Mittwoch, 22. Oktober 2014

Telefonnummern finden sich wohl auf jeder Website. Zumindest auf impressumpflichtigen Websites die Telefonnummer des Seitenbetreibers. Dort hoffentlich nicht als Bild, sondern in Textform. Weil ersteres nicht nur sehbehinderte Nutzer ausschließt, sondern auch die formalen Anforderung an ein rechtssicheres Impressum nicht erfüllt, und im schlimmsten Fall zu einer Abmahnung führen kann.

So weit, so gut.

Seit dem Siegeszug von Smartphones und Tablets ist die Nutzung von Telefonnummern auf Webseiten sehr komfortabel. Viele Geräte erkennen selbständig, dass eine Ziffernfoge eine Telefonnummer sein könnte, und machen aus dieser Ziffernfolge automatisch einen Link, der die auf dem Gerät installierte Telefonapp aufruft. Sehr komfortabel.
Man kann es den Geräten auch leichter machen, und gleichzeitig die Darstellung der Telefonnummer frei gestalten, wenn man das URL-Schema “tel” verwendet.

<a href="tel:+491718319084">Tel.: +49 171 - 8319084</a>

Die Spezifikation zum URL-Schema “tel": RFC 3966

Solchermaßen eingebundene Telefonnummern ermöglichen unter Umständen auch das komfortable Telefonieren vom Desktop-Computern aus. Sie rufen, falls vorhanden, eine installierte VOIP-Software auf, oder nutzen auf Macs mit dem aktuellen Betriebssystem Yosemite die Telefonfunktion des iPhone.


Suchen

Donnerstag, 16. Oktober 2014

Was wäre “Neuland” ohne komfortable Suchfunktionen? Voran natürlich die allseits geliebte Tante Google.

Heute möchte ich aber nicht über Google & Co schreiben, sondern über

Seiteninterne Suchfunktionen auf Webseiten und in Apps.

Jeder aktuelle Browser kann komfortabel innerhalb von Webseiten suchen. Mit Strg + F, und dann mit Enter zum jeweils nächsten Treffer springen.
Die neuesten Browserversionen zeigen zusätzlich noch einen Hinweis wie “1 von 5 Übereinstimmungen” (Firefox), “1 von 5″ (Chrome, Opera) oder “5 Treffer” (Safari).

In meinem Suchscript

habe ich versucht, die Sache ähnlich komfortabel zu gestalten. Die Treffer werden auf den Zielseiten farbig unterlegt, und zusätzlich wird die Zielseite bis zum ersten Treffer gescrollt.

Screenshot Firefox
Die Seite mit dem Suchtreffer (in diesem Fall die Startseite von webdesign weisshart) wird bis zum ersten Treffer (Internet) gescrollt.

Interessant wird es mit mobilen Geräten

iOS/Safari hat die seiteninterne Suche etwas versteckt. Eigentlich Schade um diese coole Funktion.

Screenshot iPhone 1
Ins Adressfeld, also dort, wo man normalerweise die Adresse der zu öffnenden Seite eingibt, den Suchbegriff eintippen. Es werden mehrere Vorschläge angeboten, je nach Konfiguration des iOS-Geräts, z. B. die Suche nach dem eingegebenen Begriff bei Google fortzusetzen.
Screenshot iPhone 2
Wenn man ganz nach unten scrollt, kommt als letzter Vorschlag “Auf dieser Seite [Suchbegriff] suchen”
Screenshot iPhone 3
Diesen Vorschlag antippen, und auf der aktuellen Seite werden die Suchtreffer gelb hinterlegt. Mit den Pfeiltasten in der Fußleiste kann man dann bequem von Treffer zu Treffer springen.

Ähnliche Features bieten fast alle für iOS verfügbaren Browser.

iOS-Apps

Meine neue Lieblingsapp auf dem iPhone, NoteBox, versucht, die geschilderte Funktionalität von Safari nachzuahmen. Bei NoteBox gibt es eine sowohl eine seitenübergreifende als auch eine seiteninterne Suche. Die Umsetzung ist noch etwas holprig. Aber die App ist relativ neu, und wird vom Entwickler intensiv gepflegt. Da ist noch Verbesserung zu erwarten.

Sonderfall Screen Reader

Gerade für blinde IT-Nutzer, die ein längeres Dokument nicht mit einem Blick scannen können, ist eine auch mit Screen Reader funktionierende seiteninterne Suche wichtig. Funktionierend heißt: Treffer anspringen (fokussieren), und den Kontext (die Umgebung) automatisch vorlesen.
Die verschiedenen Screen Reader haben diese Funktion implementiert.

Für Interessierte hier beispielsweise die Befehle für den kostenlosen Screen Reader NVDA:

  • NVDA-Taste+STRG+F öffnet ein weiteres Fenster, in dem Sie einen Text eingeben können, der im aktuellen Dokument gesucht werden soll.
  • NVDA-Taste+F3 aucht die nächste Zeichenkette des gesuchten Textes im aktuellen Dokument, welche zuvor eingegeben wurde.
  • NVDA-Taste+Umschalt+F3 sucht die vorherige Zeichenkette des gesuchten Textes im aktuellen Dokument, die zuvor eingegeben wurde.

iOS VoiceOver

Safari unterstützte seit iOS 6 die oben beschriebene seiteninterne Suche mit dem betriebssystemeigenen Screen Reader VoiceOver. Genauer: Wenn VoiceOver aktiv war, wurde der Fokus automatisch in den ersten Treffer gesetzt, und der Kontext vorgelesen. Weitere Treffer konnten auf die gleiche Art angesprungen und vorgelesen werden. In iOS 8 (bis einschließlich Version 8.0.2) ist diese Funktionalität, das automatische Vorlesen, leider kaputt. Aber das ist ja nicht das einzige Problem mit iOS 8. :-(


Responsive Webdesign und Tabellen

Samstag, 11. Oktober 2014

Tabellen — nein, natürlich keine Layouttabellen! sondern Datentabellen — und kleine Monitore: das ist eine echte Herausforderung. Die Standardtechniken des RWD (Responsive Web Design) helfen hier nicht weiter.
Natürlich kann man auf Smartphones pinchen (zoomen). Unterstellt, der Webworker hat das nicht per meta-Tag unterbunden, was ohnehin ganz schlechter Stil ist. Aber die Übersicht über die Tabelle, die Zuordnung der Tabellenzellen zu den jeweiligen Köpfen geht dabei schnell verloren.
Es gibt fertige Lösungen, die zumeist auf JavaScript und CSS basieren. Keine dieser Lösungen passte so richtig auf meinen Fall:

Screenshot Desktop
Die Preisliste einer Pension. In der Desktop-Version der Webseite passen die 4 Spalten gut ins Layout.

Die gewählte Lösung: Nur die Kopfspalte und jeweils eine Datenspalte anzeigen.

Screenshot 2 iPhone
Beim Aufruf der Preisliste mit dem Smartphone wird zuerst einmal abgefragt, für welche von 3 Saisonzeiten die Tabelle angezeigt werden soll.
Screenshot 3 iPhone
Eine Kopfspalte und eine Datenspalte können auf dem kleinen Monitor in normaler Schriftgröße ohne Scrollen angezeigt werden. Zusätzlich wird noch auf die Details zu den einzelnen Tabellenzeilen verzichtet. Die Details sind in den verlinkten Detailseiten nachzulesen.

Die Umsetzung in Stichworten:

  • Media Queries reichen (leider) nicht. Ich frage per PHP den User Agent ab.
  • Falls der User Agennt ein Smartphone ist, wird per PHP das Auswahlmenü ein-, und die Tabelle erst einmal ausgeblendet.
  • Je nach gewählter Option (Saison) wird nach Absenden des Formulars (onChange="this.form.submit()") die Tabelle mit der gewählten Spalte angezeigt, und die beiden anderen Spalten per CSS verborgen.

Ältere Beitäge:

Kategorien:

Creative Commons Lizenzvertrag
Alle Artikel des Blogs Creative Commons CC BY-NC-SA 3.0 DE

Tastaturkürzel