Responsive Onepager
Beginners The Easy Single-Page

Home Start Website

Technik und Bedienkomfort

Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Alles läuft also auf einer Seite ab, nur ausnehmend die drei Links im Fussbereich.

  • Responsive Website
  • Onepager bieten ein besonderes Surferlebnis
  • Smooth-Scrolling für Optik und Feeling


Die Besonderheit

Dieses Template ist ein ONEPAGER für RESPONSIVE ANFÄNGER. Wir wollen Ihnen das Verstehen der Responsive Thematik erleichtern und möchten, sofern Sie nichts dagegen haben, daß Sie sich ganz auf die Responsive-Technik, also das Abfragen der Bildschirmgrößen per CSS-Media Queries, konzentrieren können. Deshalb haben wir dieses Template auf das Wesentliche reduziert. Der Quellcode ist damit auch sehr knapp, übersichtlich und entsprechend leichter. Getreu nach dem Motto: Responsive ist gar nicht so schwer lesen Sie bitte Näheres beim Abschnitt 'Quintus', ein Klick hier führt Sie direkt dorthin.

Primus Navigation

Orientierung ist wichtig: Smooth-Scroll Navigation

Klicken Sie im Menü die Links Home, Primus, Secundus, Tertius, Quartus, Quintus und Sextus und sehen Sie wie innerhalb dieser Seite die verschiedenen Sektionen animiert aufgerufen werden. Statt abruptem Anspringen gibt es also ein sanftes Gleiten (Smooth-Scroll). Klicken Sie auch die Links im Fussbereich, diese eher textlastigen und nicht zum eigentlichen Inhalt gehörenden Seiten öffnen wir als weitere HTML-Seiten.

  • Strukturierte Abschnitte
  • CSS-Only-Menü
  • Scroll-To-Sections-Links
  • Scroll-To-Top-Link


Strukturierte Abschnitte

Sie sehen auf dieser Webseite verschiedene Abschnitte, die farbig getrennt sind. Neben dem Smooth-Scrolling dienen vor allem diese strukturierten Abschnitte der Übersichtlichkeit bei einem Onepager.

Secundus Gallery

Tertius Technik

Responsive Webdesign

Responsive Webdesign 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.

HTML-Editoren

Wie immer ist aber zu beachten: Responsive Vorlagen können allgemein (das gilt für alle Anbieter, also nicht nur für unsere Vorlagen) sehr schwer mit einem Drag-and Drop Html Editor, auch bezeichnet als WYSIWYG-Editor, bearbeitet werden. Nehmen Sie besser einen textorientierten HTML-Editor wie die kostenlosen Editoren PHASE5 oder BRACKETS oder andere. Das bedeutet dann konsequenterweise, daß Sie zumindest leichte Kenntnisse in HTML und CSS haben müssen.


Quartus Kontakt

Öffnungszeiten

  • MO - FR:10.00 - 18.00 Uhr
  • DO:09.00 - 13.00 Uhr
  • SA:09.00 - 16.00 Uhr

Kontakt

  • Phone: (0000) 0000000-50
  • Mobile: (+49) 0000-1234567
  • Fax: (0000) 7654321-4141

Email

Quintus Wesentliches

Allgemeine Reduzierung

Es gibt in dieser Vorlage keine Font-Icons, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen sowie keine Animationen (außer Smooth-Scroll). Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS sowie auch Farbverläufe per CSS. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein. Denn dies ist bei dieser Vorlage unser primäres Ziel.

Onepager Reduzierung

Verzicht: Wir haben hier keine sich per Klick öffnenden Box-Fenster (div-box) eingebaut, welche sich sonst oftmals bei Onepagern innerhalb der selben Seite öffnen. Ziel war es eben, den Quelltext noch übersichtlicher und schlanker zu gestalten.

Sextus Information

Einbau Bilder allgemein

Wenn Sie ein Bild einbauen ist es automatisch responsive, d.h. es paßt sich in Originalgroesse mit '100 Prozent max-width' der Seite an, wird aber niemals groesser als die Breite der aktuellen Seite, sprich der jeweiligen Auflösung bzw. der Breite der enventuellen Box in welchem sich das Bild befindet.




Einbau Bilder in der Gallery

Wenn Sie Bilder innerhalb der Foto Gallery einbauen, so gilt:

In der Foto-Gallery sehen Sie 9 Bilder. Jedes Bild davon ist 33.33 Prozent breit und es stehen somit immer 3 Bilder nebeneinander. Sie können das natürlich erweitern und 12, 15, 18 usw. Bilder einbauen.

Entsprechend: Möchten Sie stattdessen aber, das 2 Bilder nebeneinander stehen, wählen Sie 50 Prozent, die Bildanzahl beträgt dann 2, 4, 6, 8, 10, 12 usw. Noch eine Alternative: Sollen 4 Bilder nebeneinander stehen wären es 25 Prozent und die Bildanzahl ist 4, 8, 12, 16 usw.

Wie Sie die Foto-Gallery mit jeweils einem größeren Foto (welches dann bei Klick erscheint) verlinken können, zeigen wir Ihnen auf der Seite index3.html
© 2029 Responsive Onepager Beginners