Mobile test

[beatovich]

hallo

Wie zuverlässig sind solche Testsites wie diese

http://mobiletest.me/iphone_5_emulator/?u=http://beat-stoecklin.ch

Ich steige eben erst in die Mobile-Optimierung ein, und offensichtlich muss ich noch etwas nachhelfen. meine Seite verwendet

<meta name="viewport" content="width=device-width, initial-scale=1.0"> und natürlich @media screen and (width...)

Gibt es ausserdem noch etwas wichtiges zu beachten, um die meisten modernen Mobiles zu befriedigen?

mfg beatovich

[Julius]

Hallo beatovich,

Wie zuverlässig sind solche Testsites wie diese

http://mobiletest.me/iphone_5_emulator/?u=http://beat-stoecklin.ch

Wenn ich das richtig sehe, packt die Testsite deine Website einfach in ein iFrame mit iPhone-Rand. Ist ganz nett, um die Seitenverhältnisse und Größen sowie das Verhalten der Website bei kleineren Viewports zu simulieren, aber das kannst du auch durch Verkleinern des Browserfensters oder unter Benutzung der Browser-eigenen Werkzeuge (bei Firefox: Extras > Web-Entwickler > Bildschirmgrößen testen) feststellen. Am besten probierst du das auch mal mit einem echten Gerät und verschiedenen Browsern aus – unter Android gibt es Firefox, Opera (Mini) und Chrome sowie diverse andere Browser, die WebKit benutzen.

Gibt es ausserdem noch etwas wichtiges zu beachten, um die meisten modernen Mobiles zu befriedigen?

Dein Header ist bei schmalen Viewports nicht ganz sichtbar, das hast du wahrscheinlich schon selbst gesehen.

Ansonsten eher allgemeine Dinge:

Nicht allzu große Dateien einbinden, aber das gilt ja auch für Desktop-Webbrowser, mit denen kann man ja schließlich auch über langsame Verbindungen Webseiten abrufen (hast du aber wohl nicht). Außerdem solltest du dir noch ein Favicon zulegen, weil viele Browser standardmäßig unter http://beat-stoecklin.ch/favicon.ico danach schauen.

Blocksatz ist im Web eher suboptimal, zumal du eine Handschrift-artige Schriftart verwendest und garantiert niemand beim Schreiben mit der Hand Blocksatz verwnedet :-)

Aus diversen Gründen^[1] solltest du deine Seiten via HTTPS erreichbar machen, von HTTP darauf umleiten und es via HSTS erzwingen.

Gruß
Julius

---

---

1. Google honoriert das, du sorgst für Verbreitung der verschlüsselten Verbindungen im Web, deine Seite wird per HTTP/2 aufrufbar sein, wenn du HTTPS einsetzt und dein Hoster das unterstützt und es schützt deine Seiten (zusammen mit HSTS) vor Manipulation durch dubiose WLAN-Hotspot-Betreiber. Außerdem kosten Zertifikate dank Let’s Encrypt nichts mehr und die ersten Hoster haben das bereits integriert. ↩︎

[beatovich]

hallo

Wenn ich das richtig sehe, packt die Testsite deine Website einfach in ein iFrame mit iPhone-Rand. Ist ganz nett, um die Seitenverhältnisse und Größen sowie das Verhalten der Website bei kleineren Viewports zu simulieren, aber das kannst du auch durch Verkleinern des Browserfensters oder unter Benutzung der Browser-eigenen Werkzeuge (bei Firefox: Extras > Web-Entwickler > Bildschirmgrößen testen) feststellen. Am besten probierst du das auch mal mit einem echten Gerät und verschiedenen Browsern aus – unter Android gibt es Firefox, Opera (Mini) und Chrome sowie diverse andere Browser, die WebKit benutzen.

Ich habe 4 verschiedene Sites getested. Ja natürlich ein wirklicher test kann nur auf einem Mobile geschehen. Allerdings gabs ja auch früher die browsertest Seiten und die gaben gerenderte Screenshots zurück, was sehr zuverlässig war.

Ich kann hier selber nur über das Samsung Galaxi testen mit einem etwas besseren WAP Browser (will da keine Apps installieren).

Dein Header ist bei schmalen Viewports nicht ganz sichtbar, das hast du wahrscheinlich schon selbst gesehen.

Wurde in der lokalen Version bereits korrigiert.

Ich habe die Seite übrigens von google auf mobile tauglich testen lassen. Google fand trotz zu grossem Logo keine Beanstandung.

Ansonsten eher allgemeine Dinge:

Nicht allzu große Dateien einbinden, aber das gilt ja auch für Desktop-Webbrowser, mit denen kann man ja schließlich auch über langsame Verbindungen Webseiten abrufen (hast du aber wohl nicht). Außerdem solltest du dir noch ein Favicon zulegen, weil viele Browser standardmäßig unter http://beat-stoecklin.ch/favicon.ico danach schauen.

Tja favicon... fällt mir jetzt nur Bullshit ein 😉

Blocksatz ist im Web eher suboptimal, zumal du eine Handschrift-artige Schriftart verwendest und garantiert niemand beim Schreiben mit der Hand Blocksatz verwnedet :-)

ja, das kann noch geändert werden

Aus diversen Gründen[^1] solltest du deine Seiten via HTTPS erreichbar machen, von HTTP darauf umleiten und es via HSTS erzwingen.

https ist bereits in Betrieb. die .htaccess wird schon noch wachsen ...

Danke

[Julius]

Hallo beatovich,

Allerdings gabs ja auch früher die browsertest Seiten und die gaben gerenderte Screenshots zurück, was sehr zuverlässig war.

Gibt es die nicht immer noch? Kann ja einen Versuch wert sein, warum nicht.

Ich kann hier selber nur über das Samsung Galaxi testen mit einem etwas besseren WAP Browser (will da keine Apps installieren).

Der „WAP-Browser“ ist wahrscheinlich der bereits vorinstallierte WebKit-basierte Webbrowser von Samsung. Je nach Alter des Geräts wird der auch schon etwas abgehangener sein – wenn der mit deiner Seite kein Problem hatte, sollten die moderneren die auch darstellen können.

Ich habe die Seite übrigens von google auf mobile tauglich testen lassen. Google fand trotz zu grossem Logo keine Beanstandung.

Ist ja auch ok, da das ja nur ein kleiner Schönheitsfehler ist (bzw. war), der aber die Lesbarkeit des Inhalts und die Benutzbarkeit der Seite nicht einschränkt.

Vermutlich gucken die auch nur, ob der Hauptinhalt lesbar (innerhalb des Viewports, passende Schriftgröße) ist und das Viewport-Meta-Element vorhanden ist. Eventuell gucken die sich noch die Ladezeit an, das wars.

Außerdem solltest du dir noch ein Favicon zulegen, weil viele Browser standardmäßig unter http://beat-stoecklin.ch/favicon.ico danach schauen.

Tja favicon... fällt mir jetzt nur Bullshit ein 😉

Einfach deine Initialien mit gutem Kontrast – transparente Favicons sind nicht empfehlenswert , weil du ja nicht die Hintergrundfarbe kennst – und in den Farben der Seite? Erhöht jedenfalls den Wiedererkennungswert, wenn ich mich durch meine ~20 offenen Tabs in meinem Browser-Fenster wühle...

https ist bereits in Betrieb. die .htaccess wird schon noch wachsen ...

Finde ich gut 😀, danach kannst du dich ja mal https://securityheaders.io/ widmen.

Gruß
Julius

[Felix Riesterer]

Lieber Julius,

danach kannst du dich ja mal https://securityheaders.io/ widmen.

oder Mozillas Observatory nutzen.

Liebe Grüße,

Felix Riesterer.

[beatovich]

hallo

danach kannst du dich ja mal https://securityheaders.io/ widmen. oder Mozillas Observatory nutzen.

Kann ich die folgenden Anweisungen einfach ins root .htaccess schreiben?

#Strict-Transport-Security: max-age=31536000 #Content-Security-Policy: script-src 'self' #Content-Security-Policy: font-src 'self' #hier sollen google fonts erlaubt sein. #Referrer-Policy: same-origin

Ich habe mal testweise die erste Zeile im htaccess notiert. Gab aber einen Server Error.

Wie muss ich das anwenden?

[Julius]

Hallo beatovich,

ich habe mal einen Codeblock drumherum gepackt:

#Strict-Transport-Security: max-age=31536000
#Content-Security-Policy: script-src 'self'
#Content-Security-Policy: font-src 'self'
#hier sollen google fonts erlaubt sein.
#Referrer-Policy: same-origin

Ich habe mal testweise die erste Zeile im htaccess notiert. Gab aber einen Server Error.

... weil der Apache ja nicht weiß, was er damit anstellen soll.

Wie muss ich das anwenden?

So (Doku):

Header set Strict-Transport-Security "max-age=31536000"

Gruß
Julius

[beatovich]

die beiden Header

Header set Strict-Transport-Security "max-age=31536000"
Header set Content-Security-Policy "script-src 'self'"

werden jetzt ausgeliefert.

das folgende brauche ich noch:

Header set Content-Security-Policy "font-src 'https://fonts.googleapis.com'"

Beim Rest bin ich noch ziemlich ratlos.

[beatovich]

hallo

Header set Content-Security-Policy "font-src https://fonts.googleapis.com"

scheitert aus unerfindlichen Gründen.

gelöst

Header set Content-Security-Policy "font-src https://fonts.gstatic.com"

gehört auch dazu, weil dieser Request als folge der googleapis erfolgt.

[Julius]

Hallo beatovich,

sollte man nicht erst alles externe (und auch inline-Styles etc.) verbieten und dann stückweise wieder erlauben? Also etwa so?

Header set Content-Security-Policy "default-src 'self'; font-src https://fonts.googleapis.com https://fonts.gstatic.com;"

– Ich hatte bisher auch noch nicht wirklich damit zu tun...

Quellen:

• https://www.heise.de/security/artikel/XSS-Bremse-Content-Security-Policy-1888522.html?artikelseite=3
• https://content-security-policy.com/

Gruß
Julius

[beatovich]

hallo

diese Syntax...

Header set Content-Security-Policy "default-src 'self'; font-src https://fonts.googleapis.com https://fonts.gstatic.com;"

...führt zu Fehlern in Firefox. Als Einzelzeilen gesetzt jedoch fanktioniert es.

[Julius]

Hallo beatovich,

diese Syntax...

Header set Content-Security-Policy "default-src 'self'; font-src https://fonts.googleapis.com https://fonts.gstatic.com;"

...führt zu Fehlern in Firefox. Als Einzelzeilen gesetzt jedoch fanktioniert es.

Interessant, das muss ich mir noch mal genauer anschauen. Ich hätte jetzt vermutet, dass ein Header einen gleichartigen Vorgänger überschreibt?!

Gruß
Julius

[beatovich]

hallo

Header set Content-Security-Policy "default-src 'self'; font-src https://fonts.googleapis.com https://fonts.gstatic.com;"

...führt zu Fehlern in Firefox. Als Einzelzeilen gesetzt jedoch fanktioniert es.

Interessant, das muss ich mir noch mal genauer anschauen. Ich hätte jetzt vermutet, dass ein Header einen gleichartigen Vorgänger überschreibt?!

Ich habe es jetzt nicht ausführlich getestet. Es mag am letzten ; liegen, das Firefox nicht mag.

[beatovich]

hallo

meine Apache Header sehen jetzt so aus

Header set Strict-Transport-Security "max-age=31536000"
Header set Content-Security-Policy "default-src 'self'; font-src https://fonts.googleapis.com; font-src https://fonts.gstatic.com; frame-ancestors 'none'"
Header set X-Frame-Options "DENY"
Header set X-Content-Type-Options "nosniff"
#Referrer-Policy: same-origin

Eine Notiz zu finalen semicolon bei Firefox: es ist zu vermeiden.

https://observatory.mozilla.org/analyze.html?host=beat-stoecklin.ch

score 110/100

[Felix Riesterer]

Lieber beatovich,

Eine Notiz zu finalen semicolon bei Firefox: es ist zu vermeiden.

sehr gut zu wissen!

https://observatory.mozilla.org/analyze.html?host=beat-stoecklin.ch

score 110/100

https://observatory.mozilla.org/analyze.html?host=peutinger-gymnasium.de

auch 110/100

Liebe Grüße,

Felix Riesterer.

[beatovich]

hallo

Ich musste doch nochmals zurückstufen.

Header set Content-Security-Policy "frame-ancestors 'none';"

OK aber

Header set Content-Security-Policy "default-src https://beat-stoecklin.ch 'unsafe-inline'; font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; frame-ancestors 'none';"

verhindert immer noch die Anzeige der geladenen fonts. es ist frustrierend, alle notwendigen Rechte auszuprobieren, und wirkliche Anleitung habe ich nicht gefunden.