Mobile Seite

[the_zoker_09]

Hallo zusammen,

Ich möchte meine Seite http://www.crystalblood.defür Mobile Geräte verbessern. (weiterleitung auf m.meineseite.de)

Ich hatte mir gedacht, ich platziere die wichtigen Buttons einfach untereinander, also:


Wie sollte ich das am besten machen (vom graphischen her)?
Nichts aufwändiges...
Mit Bildern arbeite ich eig ungern, da bei Links mit Bilder, der Touchscreen nicht sofort reagiert (ich muss auf ein Bild immer zweimal klicken...)

Es sollte aber schon eine dynamische Seite sein, also mit der Größe des Displays mitgehen (nur nicht bei Tablets, die sollen die normale Seite sehen)

Kann mir jemand ein bisschen weiterhelfen?

Vielen Dank
the_zoker_09

 

[mermshaus]

Deine Frage ist, wie du eine Liste von Link-„Buttons“ so platzierst, dass sie immer den gesamten Viewport ausfüllt? Versuche es mit prozentualen Angaben.

Die Frage nach der Gestaltung ist schwierig zu beantworten, da sie natürlich vom Inhalt abhängt. Den kennst letztlich nur du.

Du könntest dir einige bestehende mobile Seiten anschauen, um Ideen zu finden.

Vielleicht interessant:

- jQuery UI - Home

 

[the_zoker_09]

Der Inhalt sieht genauso aus wie auf dem oberen Bild:
Einfach 4-5 Buttons untereinander, die auf eine andere Seite weiterleiten
Mehr soll das nicht sein

 

[mermshaus]

Und die Frage ist, wie du die konkret designst oder wie (rot, grün, blau, mit Rahmen, ohne Rahmen, …)? Na ja, was soll man da groß drauf antworten? Geschmackssache, oder?

 

[the_zoker_09]

Wie kann ich das in CSS den geeignet umsetzten (Ansätze) und was ist die beste Möglichkeit ein "Mobile Redirect" zu machen (es gibt ja so viele)?

 

[struppi]

Gerade gestern bin ich diese Frage bei einer meiner Seiten auch angegegangen. Ich benutze keine weiterleitung sondern einfach media queries. Das Menü, dass eine Liste ist, wird einfach mit li { float:left; width:25%;} abgebildet. In deinem Fall wäre width:100% möglich.

Da du aber keine Liste hast, wird das deutlich schwieriger und speziell mit deinen "replacing images" doppelt schwierig. Wenn du einfach Bilder genommen hättest (die mit <img> eingebunden sind) und keine Tabellen drumherum gebaut hättest, wäre die Sache kein Problem. Aber dein Konstrukt ist mehr als umständlich (und funktioniert anscheind noch nicht mal sonderlich toll, wie du selbst schreibst)

 

[the_zoker_09]

Das "replacing images" (ich denke du meinst, wenn man mit der Maus drüber fährt, dass sich die Bilder ändern) soll in der Mobilen Version nicht eingefügt werden. Also ohne diese Funktion.

Das ich die Seite so ausgebaut habe, lieg daran, dass ich es mit CSS nicht geschafft habe, dass die Seite so aussieht, wie sie jetzt aussieht. (mir fehlt einfach das Wissen in CSS und leider habe ich als Schüler sehr wenig Zeit, das "schnell" bzw. überhaupt zu lernen)

Das mit den Tabellen war für mich die einfachste Art, diese Aufteilung zu verwirklichen.

(und funktioniert anscheind noch nicht mal sonderlich toll, wie du selbst schreibst)

Wo schreib ich das?

Also
1. sind die Bilder nicht da wo sie sein sollten
2. Fehlt eines komplett (das Minecraft...)

 

[struppi]

Mit Bildern arbeite ich eig ungern, da bei Links mit Bilder, der Touchscreen nicht sofort reagiert (ich muss auf ein Bild immer zweimal klicken...)

Ist das auch so, wenn du die Bilder ganz normal als Link eingebunden hast?

replacing images ist das was du machst. Leere Links die du mit CSS "füllst".

Die Tabellen sind völlig überflüssig und ich kann mir nicht vorstellen, dass sie die Gestaltung in deinen Fall vereinfachen.

Schau dir mal die Seite ohne einen Stil an (Im Firefox Menü Ansicht > Webseiten Stil > kein Stil ), du siehst, dass du keinen Inhalt hast. Du machst es dir deutlich zu kompliziert. Nimm einfach die Bilder, packe einen Link drumherum und dann positioniere sie. Das sollte in deinem Fall relativ einfach sein.

 

[the_zoker_09]

Ist das auch so, wenn du die Bilder ganz normal als Link eingebunden hast?

Hm ich denke schon, weiss es aber nicht genau.

Die Tabellen sind völlig überflüssig und ich kann mir nicht vorstellen, dass sie die Gestaltung in deinen Fall vereinfachen.

Wo ist in der Seite der Fehler?

Nimm einfach die Bilder, packe einen Link drumherum und dann positioniere sie. Das sollte in deinem Fall relativ einfach sein.

Aber wie mache ich das dann mit dem "mouse over Bild Wechsel"?

 

[Wustersoss]

Als kleine Lernübung habe ich dir das in HTML und CSS mal geschrieben für die ersten 2 Links.
Die restlichen Links must du selbst eintragen.

<!DOCTYPE HTML>
<html>    
    <head>        
        <meta charset=UTF-8>        
        <title>Crystelblood</title>        
        <style>  
        *{
            margin:0; padding:0;
        }
        html, body {
            height:100%;                                     
            width:264px;
            margin:0 auto;       
        }
        a{
            display:block; 
            width:264px;
            height:64px;
            border:1px solid #000000;
        }  
         a#crossfire{
            top: 0px; left: 0px; 
            background:url(http://www.crystalblood.de/button1.png);    
        }
        a#minecraft {
            background:url(http://www.crystalblood.de/button3.png); 
        } 
        a#crossfire:hover {
             background:url(http://www.crystalblood.de/button2.png);
        }  
        a#minecraft:hover {
             background:url(http://www.crystalblood.de/button4.png);
        }      
        </style>    
    </head>    
    
   <body>    
        <a id="crossfire" href="http://www.crossfire.crystalblood.de/"></a>
        <a id="minecraft" href="http://www.minecraft.crystalblood.de/"></a>
        <a id="" href="">nächsten Link selbst eintragen</a>
    </body>
</html>

 

[harryman]

Hi,

hab vor längerer Zeit auch mal mit mobilen Seiten herumgebastelt.
Meine Erfahrungen/Erkenntnisse habe ich dann hier: Tipps zur Webseitengestaltung - Mobile Webseiten niedergeschrieben. ==> Vielleicht hilft's ...

 

[the_zoker_09]

Vielen Dank ihr beiden
ihr habt mir wirklich weiter geholfen.

Nur ein Problem bleibt: Die Desktop Variante

Leider habe ich es dort noch nicht hin bekommen, eine ordentliche CSS Seite zu basteln.

Mein Ziel: Die Seite soll genauso nur mit CSS anstatt von Tabellen gestaltet werden.

Ich habe hier schon einen Versuch, das ganze mit CSS zu machen, hat aber nicht funktioniert.

Leider hat das nicht so funktioniert, wie vorgestellt :/

Könnt ihr euch mal die beiden Seiten anschauen und mir sagen, wo der Fehler liegt?

Vielen Dank
the_zoker_09