Contao-Camp 2024
Ergebnis 1 bis 6 von 6

Thema: Webseiten für mobile Geräte umstellen

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Webseiten für mobile Geräte umstellen

    Hallo zusammen,

    ich möchte gerne unsere Vereinshomepage für mobile Geräte optimieren, aber weiß nicht so recht wie man das angeht. Ich habe dazu schon vieles gelesen nur wie man es schlussendlich realisiert da blicke ich im Augenblick noch nicht durch.
    Ich weiß zwar jetzt, dass vieles mit Media Queries realisiert werden kann. Aber bei welcher Seitenbreite die Breakpoints gesetzt werden solten und welche Schriftgrößen von Vorteil wären und einiges mehr ist mir noch völlig unklar.
    Gibt es eine gute Seite wo solche Dinge und die Vorgehensweise zum Aufbau von Webseiten für mobile Geräte verständlich erklärt wird, auch für einen relativen Anfänger?
    Danke!

    Gruß
    Thomas

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Bei Brakepoints halte ich mich immer an die Raster der großen Frameworks. z.B. https://getbootstrap.com/docs/5.0/layout/breakpoints/

    Am besten auch direkt ein solches verwenden, dann muss man das Rad nicht neu erfinden sondern kann direkt mit deren Klassen und Spalten arbeiten.

  3. #3
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.705
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Die Breakpoints setze ich bei individuellen Layouts so, wie es das Layout verlangt.
    Ansonsten ist für Fragen dieser Art der Blog von Kulturbanause ein guter und m.E. für Anfänger geeigneter Anlaufpunkt https://blog.kulturbanause.de/
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  4. #4
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Danke für die Rückmeldungen, jetzt ist mir klar welche Breakpoints zu definieren sind.

    Aber nun gibt es für mich noch eine weitere Frage. Kann man für die einzelnen Breakpoints ein eigenes externes Stylesheet erstellen? So das man nicht bei jedem Selektor die Media Queries angeben muss, sondern nur 1x pro Stylesheet angeben muss. Ist dies möglich?

    Gruß
    Thomas

  5. #5
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.705
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja kann man.
    Ich mache das schon seit Jahren nicht mehr. Ist m.E. auch nicht mehr empfohlen, das es deutlich übersichtlicher ist, wenn alle Definitionen für ein Element an einer Stelle "sichtbar" sind.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen

    Aber nun gibt es für mich noch eine weitere Frage. Kann man für die einzelnen Breakpoints ein eigenes externes Stylesheet erstellen? So das man nicht bei jedem Selektor die Media Queries angeben muss, sondern nur 1x pro Stylesheet angeben muss. Ist dies möglich?
    Gruß
    Thomas
    Kann man...würde ich aber nicht. Z.b. hättest du dann für die Formatierung einer Überschrift 3 Stylesheets, deren Pflege total unübersichtlich wäre. Wenn man das im Element selbst verschachtelt ist es viel übersichtlicher und das allein schon bei "nur" einer Überschrift.

    Code:
    h1{
        font-size:1.55rem;
        font-weight:500;
        
        @media all and (max-width: $break-md) {
            font-size:1.45rem;
        }    
    
    
        @media all and (max-width: $break-xs) {
            font-size:1.3rem;
        }        
    }

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •