1. #1

    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:

    Klicke auf die Grafik für eine größere Ansicht 

Name:	foto22.11.12135919e7d5q.png 
Hits:	217 
Größe:	85,5 KB 
ID:	8221

    Klicke auf die Grafik für eine größere Ansicht 

Name:	foto22.11.121359232ffja.png 
Hits:	232 
Größe:	63,4 KB 
ID:	8222

    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
    Avatar von Minecraft
    Registriert seit
    25.11.2011
    Beiträge
    275
    Thanked 50 Times in 34 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

    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
    Avatar von Minecraft
    Registriert seit
    25.11.2011
    Beiträge
    275
    Thanked 50 Times in 34 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

    Registriert seit
    17.09.2012
    Beiträge
    1.865
    Thanked 384 Times in 258 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

    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.