Popups im Browserfenster mit Rahmen öffnen
Wenn Popups über das Kontextmenü in einem neuen Tab geöffnet oder über Suchmaschinen gefunden werden, kann es zu dem Problem kommen, dass keine Verlinkung zur Startseite der Website existiert und das Popup somit eine Sackgasse darstellt. Besonders im Fall der Suchmaschinen-Verlinkung kann dies sehr ärgerlich sein, da einem potentiellen Kunden der Weg zum Angebot der Website versperrt bleibt.
Wir haben dieses Problem gelöst, indem wir mit JavaScript die Existenz von window.opener prüfen. Ist dieses Objekt nicht vorhanden, wurde die Webseite nicht im Popup geöffnet sondern wird im Browserfenster angezeigt. Über eine zusätzliche Klasse auf dem body-Element wird in diesem Fall ein umgebender Rahmen eingeblendet, welcher das ursprüngliche Popup als Webseite mit Hauptnavigation erscheinen läßt.
1&1 SmartPad als Popup
1&1 SmartPad als Webseite
Dies setzt vorraus, dass die Popups eine einheitliche Struktur aufweisen und im Idealfall die selben Dimensionen besitzen. Zur Demonstration habe ich das entsprechende Popup direkt verlinkt und eine Google Suchanfrage formuliert, welche das Popup (hoffentlich an erster Stelle) als Treffer anzeigt.
Mobile Internet Redesign
Heute ist 1&1 Mobile Internet in einem neuen Gewand online gegangen. Damit sind fast alle 1&1 Neukundenshops auf das neue Layout umgestellt. Nicht nur optisch hat sich einiges getan - wir haben die Umstellung dazu genutzt, Benennungen und Ordnerstrukturen für Grafiken und CSS zu vereinheitlichen. Dadurch konnten jede Menge alte Grafiken und Styles gelöscht werden. Auch bei diesem Design wurde darauf geachtet, gesharte Ressourcen modular vorzuhalten und zentral als Maven-Modul für alle Shops bereitzustellen. Obwohl die neuen Layouts sehr grafiklastig sind, findet sich unter der Haube schlankes, semantisches, zugängliches Markup, das mit einem Strict-Doctype valide ausgeliefert wird. Die grafischen Headlines wurden mit Image Replacement und die Buttons und Tabs mit der Sliding Doors Technik realisiert. Die Seiten sind trotz der Größe ihrer Ressourcen sehr performant. Das CSS ist modular aufgebaut, setzt gespritete Grafiken sinnvoll ein und kommt zu einem Großteil ohne Hacks und !important Regeln aus.
Mobile Internet (neu)
Mobile Internet (alt)
Archive
- Februar 2012 (1)
- Oktober 2011 (1)
- August 2011 (2)
- April 2011 (1)
- Oktober 2010 (6)
- September 2010 (5)
- August 2010 (3)
- Juli 2010 (2)
- Juni 2010 (3)
- Mai 2010 (9)
- April 2010 (8)
- März 2010 (13)
- Februar 2010 (10)
- Januar 2010 (11)
- Dezember 2009 (8)
- November 2009 (6)
- Oktober 2009 (10)
- September 2009 (9)
- August 2009 (12)
- Juli 2009 (16)
- Das Neueste ...
- Älteres ...
