skip to content

Archiv

Neue Templates mit Responsive Webdesign

Wie die neuen Templates am besten zu nutzen sind.

1 Template für alle: Ob PC, Tablet oder Smartphone. Ob Stift, Maus oder Finger. Klingt gut? Über die neuen Templates und wie man sie richtig einsetzt.

Was alle (bisher) 3 Templates gemeinsam haben:

HTML 5, fluides Design  und Media Queries, also die Abfrage der  Ausgabe-Breite per CSS. HTML5 funktioniert soweit nötig in allen neueren Browsern, die Media Queries immerhin auf denen, die davon betroffen sind: Denen auf Smartphones.

Alle 3 haben (optional) 2 Blöcke, der 2. Block wird ab einer gewissen Mindestbreite aber ausgeblendet, um mehr Platz für den Rest zu schaffen.

Mal reinschauen!

Man muss nicht gleich am Smartphone testen; es reicht fürs erste auch, das Fenster auf ca 320 Pixel  zusammen zu schieben.

Stygg

Ein recht konventionelles Template, das auch ohne Javascript  und Bedienungsanleitung  auskommt. Die Menüpunkte werden am Smartphone schon recht klein, wie gut sie anklickbar sind, hängt von den Menüpunkten, vom Modell und von den Fingern ab.

 

Burblex und Tessa

Der IE6 mag nicht mehr so recht (und das sieht man auch gleich). Für neuere Browser präsentieren sie sich am Desktop mit klassischem Dropdown-Menü, unter ca 700 Pixel schaltet es das Menü um. In der Bedienung unterscheiden sich die beiden Templates dann grundsätzlich:

Burblex nutzt die WB-eigenen Klassen und verhält sich im Prinzip wie Templates mit vertikalem Aufklapp-Menü: Klickt man auf einen Menüpunkt mit Unterseiten, wird diese Seite angezeigt und die Untermenüpunkte werden sichtbar. Man klickt sich also von den oberen Seiten zu den unteren durch.

 

Tessa verhält sich ganz anders: Hat eine Seite Unterseiten, wird das Menü per Javascript ausgeklappt OHNE diese Seite selbst zu laden. Im Klartext bedeutet das: Man kann nur Seiten erreichen, die keine Unterseiten mehr haben.
In der Desktop-Ansicht ist das anders; man muss also trotzdem die übergeordneten Seiten einigermaßen schick herrichten.

Das Menü basiert auf einem Tutorial von Tessa Thornton und braucht jQuery. Auf älteren Browsern funktioniert es nicht richtig.

Einige Tipps zum Umgang mit Responsive Webdesign

Was hilft es, wenn sich die Breite des Designs auf 300 Pixel zusammenschieben lässt, dann Bilder, Tabellen oder feste divs klemmen. Die Devise ist: Alles Prozente! Finger weg von festen Breiten.

width:feste Breite des Bildes;  max-width: % der Spaltenbreite

Standardmäßig fügt der Editor die Breite und Höhe von Bildern ein. Das ist hier pfui! Die Höhe lässt man am besten ganz weg, für die Breite verwendet man etwas wie: style="float:left; width:200px; max-width: 50%; margin-right:10px;"

Zur Erinnerung: die %-Angabe bezieht sich (normalerweise) auf den umgebenden Block, nicht auf das Bild selbst. 50% heißt also: Halb so breit wie die Spalte, in der das Bild ist.
Im Template-Textbeispiel kann man das gut beobachten, wie sich das Bild bei verschiedenen Breiten verhält.

Auch bei den Modul-Einstellungen muss da und dort etwas nachgebessert werden, zum Glück könnte es aber schlimmer sein, meistens werden in den Voreinstellungen bereits  %-Werte verwendet, weil die Module ja sonst kaum in die verschiedenen Templates passen würden.

Mit Sicherheit gibt es auch Fälle, in denen man wieder auf Media Queries zurückgreifen muss, mitunter beinhart zu: display:none;

Jenseits der Euphorie?

Was klar sein muss: Auf älteren (Handy-)Browsern funktioniert das nicht. Der beliebte Opera-Mini versagt völlig; weit mehr als hätte man die Seiten nicht für Handys optimiert. Am Desktop sollte es oft mindestens der IE8 sein, schon der 7er macht manchmal Zicken, vom 6er ganz zu schweigen.

Und nicht zuletzt: Viele der schönen Slider und andere jQuery-Effekte kann man vergessen - sie alle benötigen feste Größenangaben. Wer es trotzdem versucht und mit overflow:hidden usw anfängt, lernt schnell die Tücken kennen. Speziell alles was "height" hat, kann zum unendlichen Frickelwerk werden.

Back

Kommentare:

16.06.2013

Chris

Hallo zusammen,
habe nun das Template Styyg in Arbeit. Leider fehlt die Suchfunktion. Ich habe das WB-Droplet SearchBox genutzt, funktioniert aber nicht.
Wie geht das trotzdem?
Grüße
Chris

06.07.2013

Marc Seifert

Das Tessa ist ja total unprofessionell.
Wenn man sich die Demo anguckt, sollte man da schon was nachbessern...

06.07.2013

Chio

Für Anregungen und Hinweise sind wir stets offen. Ein bissel konkreter solls aber sein, weil das fänden wir total cool!

Kommentar

Name:

E-Mail (required, not public):

Webseite:

Kommentar :

Up
K