Samstag, 22. März 2014

www.5202.de - für alle, die mehr aus ihrem Blogger holen wollen

Gerade eben durch Zufall darauf gestossen: http://www.5202.de ist ein Blog mit zahlreichen Tipps zu blogger. Autor ist Oliver Doetsch.

Freitag, 21. März 2014

Erste Gehversuche im Responsive Webdesign

Heute habe ich meine ersten Gehversuche im Responsive Webdesign unternommen. Beim Responsive Webdesign geht es darum für verschiedene Endgeräte angepasste Versionen der Website auszugeben.

Erster Kandidat ist www.windows-server-2012-r2.com

Hier sagt Google Analytics


Erstaunlich ist die lange Verweildauer mit dem Tablet und die im Gegensatz hierzu sehr kurze vom Desktop aus.

Die Seite bekam heute ein neues Design, ausserdem wurde die Lesbarkeit für die Mobil-Benutzer erhöht. Dies habe ich über ein angepasstes Stylesheet erreicht:


@media screen and (min-device-width: 481px) {
:
Anweisungen für Desktop
:
}

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)

{
:
Anweisungen für Mobile
:
}

Die meisten Mobiltelefone verfügen über eine Device-Widthvon 480px oder weniger, einschließlich der beliebten iPhone 4 (device-width: 320px ). Trotzdem läuft estechnisch mit einer Auflösung von 640 x 960. Dies liegt an dem iPhone 4 Retina-Display, das zwei Pixel in jedes "CSS Pixel"stopft .

Im Moment sind die Unterschiede noch gering, ich habe einfach seitliche Banner entfernt. Die Lesbarkeit hat sich dadurch im Landscape-Modus aber schon sehr erhöht. Mal sehen wie sich die Zahlen in einem Monat verändert haben.

Update:

Ebenfalls Hand angelegt habe ich im Rahmen eines kleinen Relaunch bei meiner Seite www.hyper-v-faq.com. Dort habe ich diverse Elemente mit
#...
{
   display:none;
 }


jeweils entweder ein oder ausgeblendet. Mobile User sehen andere Ads. 

Situation laut Google Analytics hier zur Zeit:



Weitere Informationen im Artikel http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml