Stiknormales Mobile Theme

Beitrag von **ThatsLife** » 10.01.2012, 06:30

Ich will einige meiner statischen Websites auch mobil anbieten und bin deshalb schon die ganze Zeit auf der Suche nach einem ganz normalen Mobile Theme, eine HTML Vorlage (einfaches Gerüst) an der ich dann rumbasteln kann. Die Google Suche spukt mir nur irgendwelche Online Generatoren etc. aus, aber darauf hab ich mal null Bock. Also, hat jemand von euch so eine Seite parat die das anbietet mit Infos rund um das Thema? Ob Deutsch oder Englisch, egal Hauptsache kostenlose Vorlagen/Themes.

von **Anzeige von ABAKUS** »

Beitrag von **seorotiker** » 10.01.2012, 11:07

statisch? wieso bastelst du die das dann nicht komplett selbst? Son paar DIV-Container zusammenkloppen kann doch net wirklich herausfordernd sein, oder? Browserweiche, floatende DIVs und basta...

Beitrag von **Melegrian** » 10.01.2012, 12:45

Ob für neuere Generationen noch eine derartige Browserweiche benötigt wird, weiß ich nicht.

Code: Alles auswählen

<?php

if &#40;stristr&#40;$_SERVER&#91;"HTTP_ACCEPT"&#93;,"application/xhtml+xml"&#41;&#41; &#123;
    header&#40;"Content-type&#58; application/xhtml+xml"&#41;;
    $contenttype = "application/xhtml+xml";
    &#125;
	else &#123;header&#40;"Content-type&#58; text/html"&#41;;
    $contenttype = "text/html";
    &#125;
    
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"; 
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http&#58;//www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de-DE">

Ob das mit "viewport/device" so richtig war, müsste ich erst noch einmal nachlesen, denke aber schon.

Code: Alles auswählen

<head>
<title>Mobile Seite</title>
<?php print "<meta http-equiv=\"content-type\" content=\"".$contenttype."; charset=ISO-8859-1\" />\n"; ?>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<meta http-equiv="cache-control" content="max-age=86400" />
<style type="text/css"><?php readfile&#40;"mobile.css"&#41;; ?></style>
<meta name="description" content="Beschreibung für mobile Seite." />
<meta name="robots" content="index,follow" />
</head>

Links können durch accesskey per Tasten angesprochen werden.

Code: Alles auswählen

<body>
<h1>Headline</h1>
<p>Text...</p>
<div class="farbe-1">&#91;1&#93; <a href="start.php" accesskey="1">Start</a></div>
<div class="farbe-2">&#91;2&#93; <a href="mobile.xhtml" accesskey="2">Mobile XHTML</a></div>
<div class="farbe-1">&#91;3&#93; <a href="navigation.php" accesskey="3">Navigation</a></div>
<div class="farbe-2">&#91;4&#93; <a href="impressum.htm" accesskey="4">Impressum</a></div>
<p>Text...</p>
<p>Footer...</p>
</body>
</html>

Und so viel mehr ist das wohl nicht.

von **Anzeige von ABAKUS** »

Beitrag von **Wojciech** » 10.01.2012, 14:23

Wäre das nicht auch ein einfacher Ansatz deine Seite entsprechend der Browsergröße anzupassen?

@media screen and (max-device-width: 480px) {
#wrapper { width:480px;}
}

Beitrag von **Melegrian** » 10.01.2012, 14:46

Hatte einige Infos von dieser Seite https://mobilewebdesign.de/, die leider nicht erreichbar ist. Habe heute nur aus dem Cache noch einmal herausgesucht, warum ich die Stylesheets wie im Beispiel eingebunden hatte.

Das CSS könnte man auch in eine externe Datei legen und verlinken, was aber wegen des “flash of unstyled content (aka fouc)” und oft schlechtem Caching-Verhalten der Geräte nicht unbedingt empfehlenswert ist.

Nur im Cache noch verhanden: https://www.mobilewebdesign.de/?p=18

Dann gab es noch verschiedene andere Webseiten mit Infos, auch Tools mit einer Vorschau in unterschiedlichen mobilen Endgeräten. Ob das aber alles noch so zutreffend ist, sind ja bereits einige Jahre vergangen.

Beitrag von **seorotiker** » 10.01.2012, 14:52

https://pc.dev.mobi/files/dotMobi%20Mob ... 0Guide.pdf

Beitrag von **ThatsLife** » 10.01.2012, 22:04

Abend Kollegen,
danke für die Antworten, ich hab durch die pdf von seorotiker nach mobile web developers gegooglt und bin auf das Framework von https://jquerymobile.com/ gestoßen. Ziemlich gut gemacht - Buttons, Texte etc. pp copy&paste. Als PHP-Weiche zweckentfremde ich ein Skript von sgm.

Beitrag von **Melegrian** » 11.01.2012, 05:08

Ein Blog von einem Autoren, der ein deutschsprachiges Buch über Mobiles Webdesign geschrieben hat. Eigentlich sagt der letzte Satz vom veröffentlichten Interview bereits recht viel aus:

Darüber hinaus sollte man darauf achten, dass man dem mobilen Benutzer immer die Möglichkeit bietet von einer mobilen Version auf die herkömmliche Desktop-Version navigieren zu können und von dieser auch immer wieder zurück auf die mobile Seite gelangt.

https://www.manuel-bieh.de/blog/mobiles ... ntwicklung

Aus dem Grund hatte ich da auch nicht weiter am Ausbau von mobilen Seiten gearbeitet, da mehr als ein paar zusätzliche mobile Einstiegsseiten, die dann eh mit "normalen" Webseiten verlinkt werden müssten, praktisch kaum etwas bringen würden. Wer entsprechende Infos oder Dienste anzubieten hat, für denjenigen mag sich das mehr lohnen.

Beitrag von **ThatsLife** » 11.01.2012, 14:35

In meiner "Abteilung" würde sich das schon lohnen, allein die klickbaren Telefonnummern sind Gold wert

Die Sache mit dem Desktop-Switch hab ich schon auf meinem Monitor muss nur mal schauen wie ich das umsetze. Wenn jemand auf "Desktop" klickt durchläuft er ja wieder die Weiche, also brauche ich dann eine Schleife die den Referer checkt. (So zumindest die Theorie..)