1. #1
    Permanent gesperrt

    Registriert seit
    16.11.2012
    Beiträge
    8
    Thanked 3 Times in 2 Posts

    Standard Mobile Webseiten - Der Einstieg

    Hallo liebe Community,

    mobile Webseiten werden immer bekannter, die Zahl der mobilen Nutzer im Web steigt stetig.
    Aus diesem Grund habe ich mich damit beschäftigt, wie man diese entwickelt.

    In diesem Tutorial wird es allerdings nur um die Grundlagen gehen, ich werde weder auf APIs noch auf andere Hilfsmittel eingehen, das wird in einem weiteren Tutorial folgen.

    HTML5- und CSS3-Kenntnisse sollten vorhanden sein.

    Zuerst einmal der Quelltext der Datei index.html

    Code:
    <!DOCTYPE html>
    <html lang="de">
        <head>
            <title>#1 Mobile</title>
            <meta charset="UTF-8" />
            <link rel="stylesheet" href="style.css" />
            <meta name="viewport" content="width=device-width" />
            <link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" />
        </head>
        <body>
            <!-- Kopfbereich -->
            <header>
                <h1>#1 Mobile</h1>
                <nav></nav>
            </header>
            <!-- Content -->
            <section>
                <p>#1 Mobile ist mein erster Versuch eine mobile Webseite zu entwicklen. Dabei benutze ich ausschlie&szlig;lich HTML5 und CSS3.<br>
                    Au&szlig;erdem habe ich ein apple-touch-icon eingebunden, sodass man diese Webseite auf dem Homescreen des iPhones abgelegen kann.<br>
                </p>
            </section>
            <!-- Fußbereich -->
            <footer>
                &copy; <a href="index.html">#1 Mobile</a> 2012
            </footer>
        </body>
    </html>
    Jetzt werde ich einige Sachen zu diesem Quellcode erklären:

    Code:
    <meta name="viewport" content="width=device-width" />
    Damit verhindert man das Verkleinern der Webseite durch den Browser, was bei mobilen Webseiten wichtig ist. Anstatt content="width=device-width" kann man auch content="width=320" verwenden.

    Code:
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" />
    Die Verlinkung zu dem apple-touch-icon, das dafür verwendet wird bei einem iPhone die Webseite auf dem Homescreen abzulegen.

    Der Rest sollte bekannt sein.

    Kommen wir zur CSS-Datei style.css:

    Code:
    html,body{
        margin:0;
        padding:0;
    }
    body{
        font-family:Helvetica,Arial;
        background:#E8E8E8;
    }
    header,footer{
        width:100%;
        background:black;
        color:white;
        padding:2px 0px 2px 10px;
        opacity: 0.7;
    }
    section{
        padding:2px 10px 2px 10px;
        text-align:justify;
        font-size:14px;
    }
    footer{
        font-size:12px;
        text-align:center;
    }
    h1{
        padding:0;
        margin:0;
    }
    a{
        color:white;
    }

    Code:
    margin:0;
    padding:0;
    Diese Angabe ist wichtig, damit kein weißer Rand entsteht.

    Der Rest sollte auch bekannt sein. Diese Datei sollte man allerdings noch verkleinern, um zu erreichen, dass bei einem Aufruf der Seite weniger Quellcode geladen werden muss, d.h. höhere Geschwindigkeit,

    Verkleinert:

    Code:
    html,body{margin:0;padding:0;}body{font-family:Helvetica,Arial;background:#E8E8E8;}header,footer{width:100%;background:black;color:white;padding:2px 0px 2px 10px;opacity: 0.7;}section{padding:2px 10px 2px 10px;text-align:justify;font-size:14px;}footer{font-size:12px;text-align:center;}h1{padding:0;margin:0;}a{color:white;}
    Vorschau:

    foto22.11.12135919e7d5q.png

    foto22.11.121359232ffja.png

    Solltet ihr noch Fragen haben, könnt ihr euch gerne hier im Thread oder per PN bei mir melden

  2. The Following 2 Users Say Thank You to Entrafiz For This Useful Post:

    Minecraft (22.11.2012), Open Thought (21.04.2015)

  3. #2
    U-Labs Routinier
    Avatar von Minecraft
    Registriert seit
    25.11.2011
    Beiträge
    256
    Thanked 39 Times in 26 Posts
    Blog Entries
    13

    Standard AW: Mobile Webseiten - Der Einstieg

    Sehr schönes Tutorial!
    Passt mir gerade auch ziemlich gut weil ich mich seit einigen Tagen mit Webentwicklung beschäftige.
    Ich hätte aber eine Frage zu diesem Apple Touch Icon, also das hier:
    Code:
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" />
    Gibt es etwas ähnliches in der Art auch für Android?

  4. #3
    Permanent gesperrt

    Registriert seit
    16.11.2012
    Beiträge
    8
    Thanked 3 Times in 2 Posts

    Standard AW: Mobile Webseiten - Der Einstieg

    Das kann ich dir leider nicht sagen, kann man bei Android Webseiten auf dem Homescreen ablegen? Ich habe das bis jetzt nur für's iPhone gesehen, tut mir leid.

  5. #4
    U-Labs Routinier
    Avatar von Minecraft
    Registriert seit
    25.11.2011
    Beiträge
    256
    Thanked 39 Times in 26 Posts
    Blog Entries
    13

    Standard AW: Mobile Webseiten - Der Einstieg

    Klar geht das: Android: Webseiten auf dem Startbildschirm ablegen | schieb.de
    Mir ging es darum dass ich auch so ein Icon für Android festlegen kann.
    Hab auch schon ein bisschen in Google danach gesucht aber nichts gefunden.

  6. #5
    U-Labs Legende

    Registriert seit
    17.09.2012
    Beiträge
    1.859
    Thanked 380 Times in 254 Posts

    Standard AW: Mobile Webseiten - Der Einstieg

    Geiles tut , hoffe ich Kann bald mehr von dir lessen

    Gerne auch mit PHP & Datenbank würde mir gut passen

    LG chriss

    Ps: 10/10

  7. #6
    Neuling

    Registriert seit
    12.10.2014
    Beiträge
    23
    Thanked 0 Times in 0 Posts

    Standard AW: Mobile Webseiten - Der Einstieg

    Hey, wenn ich mich mit einer mobilen Webseite beschäftige, arbeite ich immer mit width oder height in % und nicht in px da es immer an den gerade benutzten Bildschirm zugerechnet wird

Ähnliche Themen

  1. Suche: Programm zur Erstellung von Webseiten
    Von Accountuser im Forum Webmaster
    Antworten: 13
    Letzter Beitrag: 23.01.2014, 14:46
  2. [S] User zum GameHacking Einstieg
    Von rVs14 im Forum Hochsprachen
    Antworten: 8
    Letzter Beitrag: 26.06.2012, 13:15
  3. [S] Webseiten zum Bücherkauf
    Von Reactin im Forum OffTopic
    Antworten: 2
    Letzter Beitrag: 06.06.2012, 20:58
  4. [GFX] Webseiten - Banner
    Von St0nY im Forum Showroom
    Antworten: 7
    Letzter Beitrag: 25.04.2012, 07:12
  5. Minecraft Einstieg für Newbie?
    Von Essah im Forum Minecraft
    Antworten: 3
    Letzter Beitrag: 13.03.2012, 18:40
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191