Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Aus dem Off: Navigation und Inhalte platzsparend unterbringen

Aus dem Off: Navigation und Inhalte platzsparend unterbringen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 12. November 2012

Inhaltsverzeichnis

Für Webdesigner ist es oft eine Herausforderung, alle Inhalte einer Website für Mobilgeräte – vor allem Smartphones – aufzubereiten. Header, Navigation, Text und Bild, Seitenleisten und andere Elemente finden nur selten gemeinsam Platz im mobilen Layout. Off-Canvas-Layouts sind hier die Lösung des Problems. Sie verstauen bestimmte Inhalte dort, wo sie nicht stören – außerhalb des sichtbaren Bereichs.

Die Idee ist, bestimmte Inhalte einfach von der Website zu verbannen, ohne sie gänzlich zu entfernen. Sie verschwinden lediglich außerhalb des Browserfensters beziehungsweise Displays. Per Knopfdruck werden sie wieder eingeblendet – dank CSS3 auch per schicker Animation. Off-Canvas-Layouts lassen sich mit CSS und JavaScript realisieren. Es gibt mittlerweile auch entsprechende Frameworks, die passende Lösungen für unterschiedliche Ansätze bereitstellen.

Off-Canvas-Layouts für Foundation

Die Macher des Responsive-Frameworks Foundation haben vier verschiedene Varianten für Off-Canvas-Layouts entwickelt und bieten diese zum Download an. Bei allen Layouts geht es darum, in der mobilen Ansicht entweder die Navigation zu verbergen und per Klick einzublenden oder Inhalte platzsparend unterzubringen.

offcanvaslayouts foundation Aus dem Off: Navigation und Inhalte platzsparend unterbringen
Off-Canvas-Layouts mit Foundation

So wird aus einer horizontalen Navigation in der Mobilansicht eine vertikale Navigation, die am oberen oder unteren Bildschirmrand dargestellt wird. Alternativ kann die Navigation auch ganz aus dem Display verschwinden und es wird nur ein Menü-Button eingeblendet, der die komplette Navigation aus dem Off holt. Ein anderes Layout bringt untereinander angeordnete Inhalte platzsparend in Tabs unter.

Der Aufbau der Layouts ist einfach, so dass sie leicht abzuwandeln und für eigene Zwecke einsetzbar sind. Lediglich das Foundation-Framework muss eingesetzt werden, damit die Layouts funktionieren.

Variantenreiche Off-Canvas-Layouts

Webdesigner Jason Weaver hat eine Demo-Seite entwickelt, auf der er sehr schön demonstriert, wie sich Navigation und Inhalte per Off-Canvas-Layouts verstecken und einblenden lassen. Mit JavaScript, Media Queries und CSS3-Transitions werden interessante Effekte dargestellt.

offcanvaslayouts jasonweaver Aus dem Off: Navigation und Inhalte platzsparend unterbringen
Off-Canvas-Layouts von Jason Weaver

Aus einem dreispaltigen Layout in der Desktop-Ansicht wird so zum Beispiel mit abnehmender Auflösung zunächst ein zweispaltiges und bei geringer Auflösung ein einspaltiges Layout.

Fazit: Dank Off-Canvas-Layouts können alle Inhalte einer Desktop-Website auch sinnvoll auf kleinen Displays, etwa denen von Mobilgeräten, untergebracht werden. Die Entscheidung zwischen abgespeckten Inhalten oder überladenen Sites ist hinfällig.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

seooffensive Frankfurt Logo.

seooffensive – die Local SEO Agentur

Frankfurt am Main

WordPress Agentur Kreativdenker

Speyer

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

Logo der Knallblaumedia Agentur in Hamburg.

KnallBlauMedia

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

0 Antworten zu „Aus dem Off: Navigation und Inhalte platzsparend unterbringen“
— was ist Deine Meinung?

  1. Chris sagt:
    13. November 2012 um 14:27 Uhr

    @Andre
    es gibt einige addons/bookmarklets für deinen use case

    zb
    http://blog.pansapiens.com/2009/01/02/qr-code-bookmarklets/

    VG!

    Antworten
  2. Andre sagt:
    13. November 2012 um 11:38 Uhr

    Ja in der Tat sehr schön der Artikel. Könnt Ihr vielleicht bei solchen Artikel die das Responsive Design, bzw. Design für Mobilgeräte kurz mal eben ein QR -Code mit der Seite einbauen? Ich surfe oft mit dem PC ( ja sowas soll es nocht geben ) und dann nehme ich mir das Smartphone und tippe die URl noch einmal ein um zu sehen wie sich das auf dem Ziel gerät verhält.
    Mit so einem QR code wäre das um einiges einfacher…

    Gruß André

    Antworten
  3. SiGa sagt:
    12. November 2012 um 20:47 Uhr

    Ich habe das Foundation-Framework schon verwendet und finde es überzeugend. Schön, dass ihr es hier immer wieder mal zum Thema macht! Und immer wieder interessant, wie sich die ganze responsive/mobile Geschichte entwickelt. Ich hab mir die Off-Canvas-Layouts direkt zum Testen heruntergeladen – danke für diesen Artikel, sehr nützlich! 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑