Smartphone View


No. 12

Style & Emotions

No. 37
Start-Up!

No. 74
Big City Walk

No. 05
Drive My Car



More: Smartphone


56

04

16

84

28

46

48

42



Home. Welcome.

Das Layout

Die Idee

Wenn Sie etwas zum Präsentieren haben, wie hier im Beispiel die Templates-Grafiken, dann ist dies vielleicht die richtige Vorlage für Sie. Vor bzw. nachstehend Sehen Sie Objekte in 4er - und 8er-Gruppen rotiert schräg dargestellt, sowie auch Objekte die übereinander liegend platziert sind.

Das Design

Dieses Template heißt 'Successful Business Presentation'. Es ist responsive angelegt und enthält einige Animationen. Diese Animationen sind per CSS angelegt und es wird diesbezüglich keinerlei Javascript verwendet. Hier auf der Seite index4.html (Quartus) erfahren Sie , welche Animationen es gibt und wie Sie allgemein auch die Animationen löschen können.



Präsentation

Desktop | Tablet | Phone

Folgend sehen Sie 3 Objekte, es ist keine Einzelgrafik, sondern es sind 3 Grafiken, welche übereinanderliegend platziert sind. Somit läßt sich jedes Objekt anpassen, z.B. die Rahmenfarbe bzw. Dicke des Rahmes oder auch die Anordnung in X-oder Y-Richtung. Hinweis: Bei ganz kleinen Auflösungen sehen Sie nur 2 Grafiken, denn wir haben dort die größte Grafik ausgeblendet (visibility:hidden). Die mittlere Grafik ist animiert und schiebt sich nach links und rechts.Übrigens: Bei Mausberührung auf die Objekte läuft eine weitere Animation ab.



DESKTOP
TABLET
PHONE




Die Technik

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS-Media Queries bei älteren Browsern, noch für die Animationen. Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.



Unser Weg

Gehen Sie mit uns



Desktop


Laptop


Tablet


Phone




Impressionen

Einige Foto Eindrücke

Bei den Fotos auf den Seiten index2.html (Secundus), index3.html (Tertius), index5.html (Quintus) und index6.html (Sextus) zeigen wir Ihnen Beispiele für die Anordnung von 2 Fotos im Block, 4 Fotos im Block, 3 Fotos im Block und 1 Foto mit nebenstehendem Text.

Zoom-In-Animation

Bei Mausberührung bzw. Touch auf den Fotos der vorstehend genannten Links gibt es eine Animation wie folgt: Es erfolgt eine Vergrößerung des Fotos. Da wir aber diese Animation innerhalb einer Box ablaufen lassen, wird daraus ein Zoom-In-Effekt.
Successful Business Presentation