Responsive Webseiten testen – ein schneller Überblick über diverse Browsergrößen und -auflösungen

Wenn man responsive Webseiten baut, dann spielt das Testen eine große Rolle.

Folgende Tools helfen dabei:

Browser Devtools

Firefox bietet zb in den Devtools (F12) die Möglichkeit, responsive Ansichten auszutesten.

Einfach Strg+Shift+M und schon kommt man in die Ansicht zum Testen, wo man im ersten Dropdown die Auflösung auswählen kann:

mattkersley.com/responsive/

Whatsapp mit Link vom Browser öffnen – Link zum eigenen Whatsapp Profil, zur eigenen Whatsapp Nummer

Einen Link zur eigenen Telefonnummer einzugeben ist recht einfach:

<a href="tel:+43147">Ruf mich auf der Telefonnummer 147 an!</a>

Der wichtige Teil ist das href=“tel…

href="tel:+43147"&gt;

Wie bekomme ich nun einen Link zur WhatsApp-Nummer?

whatsapp photo
Photo by clasesdeperiodismo

Für Desktop-Browser

Einfach einen Link zu Whatsapp-Web angeben, und schon öffnet sich Whatsapp!

Also so:

href="https://web.whatsapp.com/send?l=en&amp;phone=43147"

Der wichtigste Teil ist, die eigene Telefonnummer hinter phone= anzupassen:

...phone=43147"

Für Smartphones (Android, iOS)

href="https://api.whatsapp.com/send?l=en&amp;phone=43147"

So wär der Link also: https://api.whatsapp.com/send?l=en&phone=43147

Tricky Part

Mit Browser Sniffing muss nun der Link ausgetauscht werden. Am Handy funktioniert der Link zu WhatsApp Web nämlich nicht!

 

Die WhatsApp-Doku sagt dazu:

Links: