Web-App erstellen

[Elko]

Hallo,

ich arbeite gerade an einem Artikelsystem, geschrieben in PHP/MySQL.
Für das Design habe ich Bootstrap 3 genutzt. Dieses funktioniert auch soweit ganz gut.

Was auf http://getbootstrap.com/ nicht beschrieben ist, ist zb. die Nutzung von

<link rel="apple-touch-icon................. nicht beschrieben und andere Dinge die für Smartphons von bedeutung sind.

Mein Anliegen ist nun das Optimieren auf das jeweilige Smartphone. Mein Englisch ist begrenzt, daher fällt bei mir die Suche nicht Groß aus und hoffe das Ihr mir da noch ein paar Links bzw. Tips nennen könnt was alles berücksichtigt werden muss.

 

[hakura]

http://www.elmastudio.de/webdesign/ein-apple-touch-icon-fur-die-eigene-webseite-erstellen/
http://stephen.io/mediaqueries/

 

[Elko]

Mein Englisch ist begrenzt, daher fällt bei mir die Suche nicht Groß aus und hoffe das Ihr mir da noch ein paar Links bzw. Tips nennen könnt was alles berücksichtigt werden muss.

http://www.elmastudio.de/webdesign/ein-apple-touch-icon-fur-die-eigene-webseite-erstellen/
http://stephen.io/mediaqueries/

Ich verstehe nicht mal die Hälfte von http://stephen.io/mediaqueries/ weil es Englisch ist, sehe aber das dort nur der CSS Teil behandelt wird und ich wohl darauf verzichten kann weil ich Bootstrap im Einsatz habe. Ich konnte jetzt in Erfahrung bringen das wohl für Apple Produkte mehr als 7 Icons eingebunden werden können.

<link rel="shortcut icon" href="{$TPL_PATH}/images/icons/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="{$TPL_PATH}/images/icons/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="57x57" href="{$TPL_PATH}/images/icons/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="{$TPL_PATH}/images/icons/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="{$TPL_PATH}/images/icons/apple-touch-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="{$TPL_PATH}/images/icons/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="{$TPL_PATH}/images/icons/apple-touch-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="{$TPL_PATH}/images/icons/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="{$TPL_PATH}/images/icons/apple-touch-icon-152x152.png" />

Ich gehe davon aus das dies so richtig ist.
Wie schaut es da mit Android aus?

Ich suche keine Möglichkeit um mein Design an Smartphones anzupassen da dies bereits geschehen ist sondern eher Spielerein die nicht fehlen dürfen wie zb. die Icons oder Sticky für den Footer.

 

[hakura]

das apple-touch-icon kann man auch nur mit 1 Grösse einbauen, das passt sich bei den anderen Mobile Geräten automatisch an. So:

<link rel="apple-touch-icon" href="images/main/ico_apple_touch.png">

Das Icon was ich verwende ist 114 x 114,
du kannst aber auch für jede Grösse ein passendes Icon verwenden. sollte auch bei Android damit klappen.

Was für für Spielereien möchtest du noch einsetzen?

 

[Elko]

An Spielerein habe ich an sowas gedacht wie an der angehangenen Grafik zu sehen. So ne Navbar am unteren Bildschrimrand die immer mitscrollt (nav.png).
Ich habe dies Gestern schon einmal versucht, aber Aufgrund der Iphone eigenen Footer Navbar, wird diesse immer mitten auf dem Display angezeigt (Foto.png).

Ich habe diese jetzt entfernt und suche da nach einer anderen Lösung.
Solche Spielerein meine ich die nicht fehlen dürfen.

 

[hakura]

Die Iphone Navigation unten kann man so nicht entfernen. Ich weiss nichtmal ob es über eine App geht, also wenn deine Seite in einer App eingepackt ist. Eigentlich könnte man die dann unsichtbar machen wenn man eine App schreiben würde.
Ich habe auf einigen Seiten von mir selbst eine Nav unten im Footer und die verschiebt sich nicht wegen der Iphone Nav.

 

[Elko]

Ausblenden will ich diese auch garnicht.
Könntest du mir deine Navigation für den Footer einmal zukommen lassen, evtl. hatte ich die falsche.

 

[Tronjer]

Hallo,

Mein Anliegen ist nun das Optimieren auf das jeweilige Smartphone. Mein Englisch ist begrenzt, daher fällt bei mir die Suche nicht Groß aus und hoffe das Ihr mir da noch ein paar Links bzw. Tips nennen könnt was alles berücksichtigt werden muss.

Das ist eine komplexere Aufgabe, als es auf den ersten Blick aussieht. Ich hatte im vergangenen Jahr mal eine relativ einfache Seite für alle gängigen Smartphones anzupassen und habe da ziemlich lange dran gesessen.

Das Problem liegt in der hohen Fragmentation hinsichtlich Devices, Auflösungen, Betriebssystemen und Browsern, respektive deren Versionen. Das Grid-Layout von Bootstrap berücksichtigt zwar die device-width aber nicht die device-pixel-ratio. Du kannst zwei vergleichbar große Smartphones haben, von denen eines eine Auflösung von 1280x800 und das andere von 1920x1080 besitzt. Der Unterschied zeigt sich in der Darstellung der Bilder, die dann natürlich auch in verschiedenen Auflösungen und analog zum jeweiligen Device geladen werden müssen. Das zweite Problem ist die Browservielfalt, alleine Opera für Android liegt in mehreren Varianten vor, und deren CSS3-Fähigkeiten sind nicht unbedingt identisch. Als dritter Punkt kommt das Betriebssystem hinzu. Ich hatte auf dem iPhone die obere Navigationsleiste per JavaScript ausgeblendet und einen Sticky Footer gebaut. Nach der Umstellung von iOS 6 auf iOS 7 funktioniert das nicht mehr.

Mein Einstiegspunkt war das Mozilla Developer Network, und für die auftretenden Probleme stackoverflow.com, aber diese Ressourcen sind nur in Englisch verfügbar. Außerdem benötigst du noch einen entsprechend umfangreichen Gerätepark zum Testen oder alternativ dazu einen Dienst wie browserstack.com.

 

[Elko]

Da kann ich ja echt froh sein das mein Design auf auf alles Handys bereits gleich aussieht. Konnte da 10 Smartphones testen mit verschiedenen OS Version.

Was mir nur noch fehlt is eine mitscrollende Navbar im Footer für "Neue Artikel", "Suche" etc.

 

[Elko]

Hallo,

die mitscrollende Footerbar habe ich nun

<div id="footer">
...
</div>

#footer
        {
            position:fixed;
            bottom:0px;
            background:#000;
            text-align:center;
            padding:10px;
            width:100%;
            color: #FFF;
            z-index: 2;
         
        }

Was mir jetzt noch fehlt ist eine schöne Ansicht wie im Anhang zu sehen. Was könnt Ihr da Empfehlen?