Ich habe von CSS nur Grundkenntnisse. Bisher habe ich mir auch immer nur vorgefertigte Templates genommen und diese auf meine Bedürfnisse angepasst.

Dann solltest du bei diesem, für dich bewährten Prinzip bleiben, wenn nicht andere Gründe entgegen stehen ...

Bezüglich Templates habe auch noch diese Seite gefunden: http://w3layouts.com/

Was ich mich jetzt noch frage ist ob es aufwendiger ist die bestehende Seite umzubauen bzw. anzupassen, oder man sich lieber ein responsive Template heraus sucht und seine Seite neu erstellt.

Ich habe von CSS nur Grundkenntnisse. Bisher habe ich mir auch immer nur vorgefertigte Templates genommen und diese auf meine Bedürfnisse angepasst.

Gibt es zu den Media-Queries ein Anleitung/Beispiel?

Einfach mal im Netz nach Media-Queries suchen.
Da findest Du mehr als genug:
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
http://www.mediaevent.de/css/media-query.html
http://mediaqueri.es/

Das Prinzip ist einfach. Stell Dir einfach vor, du erstellst ein Stylesheet. In diesem Stylehseet gibst Du einem <div> eine bestimmte Größe. Diese Größe soll das <div> aber nur dann bekommen, wenn die Fenstergröße des Webseitenbesuchers eine bestimmte Mindestgöße hat. Anderenfalls hat das <div> eine andere oder garkeine Größe:

div.blablubb {
    width: 800px;
}

@media screen and (max-width:500px)
{
    div.blablubb {
        width:500px;
    }
}

Also das <div class="blablubb"> hat normalerweise eine Breite von 800px.
Hat aber das Fenster nur eine Breite von maximal 500px, hat das <div class="blablubb"> eine Breite von 500px.

Wie Du vielleicht schon siehst, helfen Dir Media-Queries allerdings lediglich beim Layout, jedoch nicht beim Inhalt. Du kannst zwar je nach Bildschirmgröße etc. Inhalte mit display:none auch ausblenden, aber sie stehen trotzdem im HTML-Code und werden daher trotzdem geladen.

Deshalb solltest Du serverseitig vor dem Ausliefern der Inhalte prüfen, ob es ein mobiles Gerät ist, oder nicht und dann ggfs. die Inhalte erst garnicht mit ausgeben.

Je nachdem wie stark sich die Inhalte unterscheiden, musst Du entweder für jede Seite eine Mobile-Seite anlegen und dann darauf umleiten oder Du prüfst das im Seitentemplate und gibst diese oder jene Inhalte nur für bestimmte Geräte aus.

Es gibt auch noch die Möglichkeit, mit .htaccess einiges zu steuern (Bilder z.B. - d.h. alle Bild-Anfragen mit einem bestimmten Cookie erhalten eben das kleine/große Bild). Das ist aber von Cookies und Javascript und evtl. auch vom Server abhängig (je nachdem wie komfortabel man es haben will).

kampkrusty schrieb:

Unsere Seite (CMS 1.11.10) ist sehr mobil freundlich. Das möchten wir ändern.

Ähmm, wie jetzt? Eure Seite soll nicht mehr mobil freundlich sein    ?

Hab es korrigiert.

Gibt es zu den Media-Queries ein Anleitung/Beispiel?

Grundsätzlich wollte ich auf Smartphones ein stark abgesteckte Seite anbieten. Ohne Slider, Sidebar etc. Die Menüpunkte (auch diese ausgedünnt) sollten vertikal dargestellt werden.
Allerdings wäre das für 7'' Geräte wohl zu abgespeckt. Das würde bedeuten, dass man eine dritte Seite konzipieren müsste, oder mache ich es mir zu kompliziert?

Wenn Letzteres wo bekommt man hier gute Tipps her (Schriftgröße, Bildgröße etc).

Hier gibts auch noch etwas dazu

http://t3n.de/news/google-verraet-dir-wordpress-591803

daher die Frage ob das noch immer so läuft?

Theoretisch schon ... allerdings würde ich da eher auf Media-Queries setzen. Damit isses wurscht, mit welchem Gerät die Seite angeschaut wird und ob es richtig erkannt wird. Entscheidend ist dann vielmehr die Bildschirmgröße, auf dem die Webseite angezeigt wird.

Ähmm, wie jetzt? Eure Seite soll nicht mehr mobil freundlich sein    ?

Mit der Schriftgröße ist es relativ einfach - halt einfach eine relative Größe wählen (em anstatt px)

http://wiki.selfhtml.org/wiki/CSS/Werte … nma.C3.9Fe

Für die Bildgrößen guckst du z.Bsp. hier

http://blog.kulturbanause.de/2014/09/re … -adaptive/

Unsere Seite (CMS 1.11.10) ist nicht sehr mobil freundlich. Das möchten wir ändern. Wenn möglich mit nicht allzu großen Aufwand
Daher die Frage lässt sich das technisch halbwegs automatisieren, bspw mittels extra Modul oder muss sollte man hier tatsächlich komplett neu aufbauen?
Wenn Letzteres wo bekommt man hier gute Tipps her (Schriftgröße, Bildgröße etc).

Was ist hiervon zu halten: http://www.i-do-this.com/blog/Make-your … e-ready/57

Versteht mich nicht falsch, im Moment suche ich noch nach einem Konzept, dieses Projekt anzugehen.

Vielen Dank nochmal allen Beteiligten!

1. wie leite ich denn bei dieser Methode auf eine eigene mobile Seite weiter anstatt im Content hin-und-her zu schalten?
meine mobile Seite liegt hier: "http://www.namederseite.de/mobile/startseite"

2. wie kann ich tablets den den normalen Seiten zuordnen? (Seite ist auf 940px angelegt)

nockenfells Umschalter: (Toolbox ist installiert)

---------------------------------------------------------------------------------------------
{process_pagedata}
{strip}
{if $smarty.get.forceDesktop== 1}
    {tbSessionSet name="forceNoMobile" value=true}
    {elseif $smarty.get.unForceDesktop == 1}
    {tbSessionUnset name="forceNoMobile"}
{/if}
{content assign="inhalt"}
{if $tbmobile->isMobile() and !$tbmobile->isTablet() and !$smarty.session.forceNoMobile}
    {assign var="isMobile" value=true}
    {else}
    {assign var="isMobile" value=false}
{/if}
{/strip}

<!DOCTYPE html>
<html>
    <head>
        ....
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{sitename} - {title}</title>
         ...
   
        {if $isMobile}
            <!--Spezielles mobiles CSS-->
        {else}
            {cms_stylesheet}
        {/if}
    </head>

---------------------------------------------------------------------------------------------

Hier mal der UA:

[== Useragent String ==]
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24

Die ToolBox nutzt die MobileDetect Klasse:
http://mobiledetect.net/

Diese authentifiziert via UserAgent den Client. Damit steuere ich im Demoscript auch ob die mobile Seite ausgegeben werden soll.

Ich hake hier mal ein, um nicht noch einen Beitrag zum Thema zu eröffnen:

Mobile detect erkennt seltsame, aber von Normalusern viel genutzte Standardbrowser auf Mobilgeräten nicht. Mein aktueller Fall: Der Stock Browser des HTC One V identifiziert sich als »X11 Linux« und damit als Desktop; nirgends kommt mobile, Android etc. im Useragent String vor. Wie ist dem beizukommen außer zusätzlich mobile Chrome o.ä. zu installieren, was der Normaluser ja nicht macht?