H1 und H2 Überschriften in MOBILE?

axelwestdoerp

Hallo... bei der Modernisierung meiner Internetseite schaue ich recht oft auch
unter der Ansicht, Vorausschau "MOBILE" und "DESKTOP"...
Aber, MOBILE FIRST, denn 70-80% der Besucher meiner Site sind mobile unterwegs.
(Sagt Google )
Die H1 Überschriften sollen auch etwas aussagefähiger sein, aber dann bricht der
Text so mehrfach um, dass es nicht mehr schön auf dem Mobile ausschaut.

Also kommt man auf die Idee, die H1 so zu gestalten, dass sie auf Desktop aber auch
auf Mobile gut ausschaut. Im schlimmsten Fall dann aber mit "zu kurzer" Aussage.

Gibts da eine Lösung? Die Aussagen zu kürzen, nur dass es mobile nicht bis zu 3x umbricht,

getrennt wird, macht doch auch keinen Sinn? Die Textgröße vielleicht automatisch im CSS
anpassen, wenn Besucher MOBILE unterwegs ist? Macht er sicherlich jetzt auch schon...
aber noch gravierender?

Die alte Seite, da kann man es am besten sehen... "http://www.fotow.de" Da habe ich mir mit dem
H1 viel Mühe gegeben. Und Google hat es auch honoriert. Aber sieht "SCh...." auf mobile aus.

LG Axel

Stefan S

Man kann Schriftgrössen auch in relation zur Bildschirmgrösse definieren indem man mit der Masseinheit „vw“ kombiniert. eine Suche danach hier sollte bereits Ergebnisse liefern.

axelwestdoerp

Zitat von Stefan S

Man kann Schriftgrössen auch in relation zur Bildschirmgrösse definieren indem man mit der Masseinheit „vw“ kombiniert. eine Suche danach hier sollte bereits Ergebnisse liefern.

sorry, da finde ich nichts, habe schon über SUCHEN gearbeitet.. Kleiner Link würde helfen.

In dem Design, was ich jetzt NEU nutze, ist H1 für MOBILE wirklich zu groß, wenn ich einen aussagefähigen
Text für SEO eingebe. Habe jetzt das neue Layout... auf http://www.fotow.de übertragen. Im CSS sind schon
entsprechende Modifikationen für MOBILE enthalten, aber die greifen wohl nicht bei H1, es muss
ja auf DESKTOP auch noch nach was ausschauen, aber in Mobile keine 3 Zeiler Umbrüche?
Ist ja nur ne Frage zur Hilfestellung.

Stefan S

Posten Sie doch bitte ihr css für die h1 auf mobile hier, dann schau ich den code gerne mal an.

phil-web

Vielleicht wäre es auch sinnvoll, das CSS für die Überschriften in den Layouts mal zu aktualisieren, da gibt es mittlerweile ja neuere Sachen wie clamp() https://css-tricks.com/linearly-scale…n-the-viewport/

axelwestdoerp

Zitat von Stefan S

Posten Sie doch bitte ihr css für die h1 auf mobile hier, dann schau ich den code gerne mal an.

CSS

<style>
    #breadcrumb a,
    #footerarea #copyright,
    #footerarea form.zp-form.zp-editable .formbuttons input.button,
    #menubutton,
    #navigation a,
    #pageSitemap .sitemap-item a,
    #xmenu,
    a.button,
    input.button {
        font-family: #val(h1FontFamily);
    }
    #footerarea #copyright,
    #footerarea #search,
    #footerarea #xmenu,
    #footerarea form.zp-form.zp-editable .formbuttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    
        [user='1028']media[/user] only screen and (max-width:768px) {
            body {
                font-size: 1.1em;
            }
            #header .flex-caption {
                margin-top: 0;
                padding: 0;
            }
        }
        [user='1028']media[/user] only screen and (min-width:#val(desktopView)px) {
            #breadcrumb .wrapper,
            #pageSitemap .wrapper,
            #topline .wrapper {
                display: flex;
                justify-content: center;
            }
            #webinfo {
                padding: 10px 40px 0 100px;
            }
            #navigation > div > ul > li.active > a.active:after {
                content: '';
                position: absolute;
                top: 42px;
                left: 15px;
                width: calc(100% - 30px);
                height: 2px;
                background: #val(menuHoverFontColor);
            }
            #navigation > div > ul > li.active:first-of-type > a.active:after {
                left: 0;
                width: calc(100% - 15px);
            }
        }
        #topline.smaller {
            opacity: 0;
        }
        #footer > .wrapper > #copyright,
        #navigation #search,
        #navigation #xmenu,
        #topNav {
            display: none;
        }
        div.zpgrid div.zpRow.hiSlider {
            margin-top: -#val(contentPaddingTop);
            margin-bottom: calc(-#val(contentPaddingTop) / 2);
        }
        [user='1028']media[/user] only screen and (min-width:#val(desktopView)px) {
            div.zpgrid div.zpRow.hiSlider {
                margin-top: calc(-#val(toplineHeight)px - #val(contentPaddingTop));
            }
        }
        a.button,
        input.button {
            border: 2px solid #val(buttonInactiveFontColor);
        }
        a.button span,
        input.button {
            padding: 9px 25px;
        }
        a.button:hover,
        input.button:hover {
            border: 2px solid #val(buttonHoverFontColor);
        }
        #gotoTop a {
            line-height: 32px;
            color: #val(gotopInactiveFontColor);
            border: 2px solid #val(gotopInactiveFontColor);
        }
        #gotoTop a:hover {
            border: 2px solid #val(gotopHoverFontColor);
        }
        #footerarea #copyright,
        #footerarea #search,
        #footerarea #xmenu {
            margin-bottom: #val(articleareaSpacing);
        }
        #footerarea #xmenu a {
            padding: 0;
            border-top: 0;
        }
        #footerarea #xmenu a:after {
            content: "|";
            padding: 0 15px;
        }
        #footerarea #xmenu a:last-of-type:after {
            display: none;
        }
        [user='1028']media[/user] only screen and (max-width:667px) {
            #footerarea #xmenu {
                flex-direction: column;
                align-items: center;
            }
            #footerarea #xmenu a:after {
                display: none;
            }
        }
        #footerarea #search {
            float: none;
            margin-top: 0;
            margin-right: 0;
            padding: 0;
            height: 47px;
            line-height: 47px;
        }
        #footerarea .zpsearchform input {
            height: 47px;
            line-height: 47px;
            padding: 0 47px 0 20px;
            border-width: 2px;
        }
        #footerarea .zpsearchform button {
            width: 47px;
            height: 47px;
            line-height: 47px;
        }
        #footerarea form.zp-form.zp-editable .formbuttons input.button {
            color: #val(buttonHoverFontColor);
            background-color: #val(buttonHoverBackgroundColor);
            border: 2px solid #val(buttonHoverFontColor);
        }
        #footerarea form.zp-form.zp-editable .formbuttons input.button:hover {
            color: #val(buttonInactiveFontColor);
            background-color: #val(buttonInactiveBackgroundColor);
            border: 2px solid #val(buttonInactiveFontColor);
        }
        [user='1028']media[/user] only screen and (max-width:479px) {
            .responsivelayout div.zpRow .zpColumn:not(.styled) {
                margin-bottom: #val(paragraphSpacing) !important;
            }
        }
    }
    [user='1028']media[/user] (max-width:720px) {
        .j-module h1 {
            font-size: 12px !important;
        }
    }
</style>

Alles anzeigen

Stefan S

Danke, das ist viel! Könnten Sie mir nun noch den Teil isolieren, der Ihrer Meinung nach die Schrifgtöße der Überschriften auf mobile einstellen soll?

axelwestdoerp

Zitat von Stefan S

Danke, das ist viel! Könnten Sie mir nun noch den Teil isolieren, der Ihrer Meinung nach die Schrifgtöße der Überschriften auf mobile einstellen soll?

Da bin ich überfordert, Herr Stefan S, es ist der ORIGINAL-Eintrag in der CSS, aus dem ORIGINAL-Layout von ZETA. Die Einträge habe ich dort nicht vorgenommen.
(vielleicht nur die letzten 4 oder 5 Zeilen), aber auch nur zum Test. Die CSS stammen aus dem Hause ZETA. Ich wüsste gar nicht, wo ich den Bereich H1 suchen soll.

Stefan S

Ah, ok, da hatte ich Sie dann wohl falsch verstanden.

Zitat von axelwestdoerp

Im CSS sind schon
entsprechende Modifikationen für MOBILE enthalten, aber die greifen wohl nicht bei H1

H1 und H2 Überschriften in MOBILE?

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?