Webdesign Tutorial zum Thema:
- Responsives Webdesign für mobile Webseiten mit
- JQuery Mobile
- HTML5
- CSS3
- JavaScript
für alle internettauglichen Handys, Windows und Android Smartphones, iPhones, iPads und Tablets.
Website-Betreiber, Webdesigner, Webentwickler und Webmaster erfahren hier, wie Sie mit jQuery Mobile Responsive Webdesign mobile Webseiten erstellen, die sich automatisch an die Bildschirme von allen Handys, Smartphones, iPhones, iPads und Tablets anpassen.
Dem Webdesign-Fachbuch "jQuery Mobile. Aplicaciones HTML5 para móviles" von Maximiliano Firtman verdanke ich, dass ich für meine Anwaltswebsite http://mini-e-business-in-dortmund.de ohne viel Mühe mit jQuery Mobile responsive, mobile Webseiten selber erstellen konnte.
Maximiliano Firtman ist der Papst für jQuery Mobile und mobiles Webdesign. Dieses Buch gibt es nur auf englisch oder spanisch. Dieses Fachbuch zu jQuery Mobil nützt Ihnen nur dann etwas, wenn Sie spanisch oder englisch lesen und umsetzen können.
Responsives Webdesign mit jQuery Mobile
Das Schöne am responsiven Webdesign mit jQuery Mobile ist, dass die mobilen Webseiten selbst dann "responsiv", also innerhalb des Handy-Browser-Bildschirmes, angezeigt werden, wenn das Handy weder CSS noch JavaScript unterstützt.
Das responsive Webdesign von jQuery Mobile kapieren die meisten der etwa 3.000 Handys und ca. 500 Handy-Browser.
Das Erstellen dieser mobilen Webseiten erfordert nur Kenntnisse in HTML. Grundkenntnisse in HTML5, CSS3 und JavaScript sind nicht unbedingt erforderlich.
Die mobilen Webseiten und deren Quelltexte für meine Anwaltswebpräsenz habe ich ohne Probleme selber erstellen können.
Responsives Webdesign testen:
Ob eine Website tatsächlich responsives Webdesign hat, können Sie kostenlos online überprüfen. Schauen Sie selbst:
Tool um die Darstellung von Webseiten auf mobilen Endgeräten zu simulieren
Smartphone/Tablet Simulator zur Überprüfung der Darstellung auf mobilen Endgeräten
Die mobilen Anwaltswebseiten habe ich mit HTML5, jQuery, jQuery Mobile, CSS3 und JavaScript programmiert. Unten sehen Sie die Programmieranweisungen (Quelltext) für eine responsive, mobile Webseite, die sich automatisch an die Bildschirmgröße der etwa 500 Browser für Handys, Smartphones und Tablets anpasst.
jQuery und jQuery Mobile sind kostenlose und frei verfügbare Open Source Frameworks bzw. JavaScript-Bibliotheken.
HTML5
Responsives Webdesign mit jQuery Mobile funktioniert nur mit HTML5. Jede mobile Webseite muss daher mit HTML5 programmiert werden.
Das ist gar nicht so schwer, wie es scheint. Jede HTML5-Webseite beginnt mit dem nachfolgenden Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="author" content="Rechtsanwalt Rainer Wiesehahn"/>
Wenn Sie mit HTML noch nicht so vertraut sind, können Sie mobile und responsive Webseiten auch mit dem Adobe Dreamweaver ab der Version CS5.5 programmieren.
Der Adobe Dreamweaver unterstützt ab der Version CS5.5 auch die mobile Webseitenentwicklung mit jQuery Mobile. Eine Testversion von Adobe Dreamweaver erhalten sie unten:
https://creative.adobe.com/products/dreamweaver
Weitere Infos zu Adobe Dreamweaver
CSS3
Das responsive Webdesign mit jQuery Mobile erfordert ferner die frei verfügbare jQuery Mobile CSS3-Datei:
jquery.mobile-1.0.min.css
Mit dieser CSS-Datei können Sie ohne Programmierkenntnisse wichtige Webdesign-Elemente erstellen wie z.B. Buttons (Schaltfächen), Navigationsleisten, aufklappbare Menüs, Listen, Tabellen, Formulare, Touchscreen-Funktionen und vieles mehr.
Diese Stylesheets binden wir nun mit der nachfolgenden HTML-Anweisung in unsere mobile "Responsive"-Webseite ein.
1.)<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
jQuery und jQuery Mobile
In den Fachbüchern und Fachartikeln zu jQuery und jQuery Mobile empfehlen die Autoren überwiegend, die freien JavaScript-Bibliotheken für jQuery und jQuery Mobile im Header-Bereich der Webseite in das mobile HTML-Dokument einzubinden.
Wir tun dies jedoch nicht, um die Ladezeit für die responsive Webseite nicht zu verlangsamen.
Stattdessen laden wir die beiden JavaScript-Dateien jQuery (jquery-1.6.4.min.js) und jQuery Mobile (jquery.mobile-1.0.min.js) erst am Seitenende in die mobile Webseite.
</div>
</div>
</div>
<!-- JavaScript fuer jQuery Mobile ans Ende, damit die mobile Webseite
mit responsivem Webdesign schneller laedt. -->
<script src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
</body>
</html>
Sehr hilfreiche und nützliche Infos zu jQuery und jQuery Mobile finden Sie auf folgenden Webseiten:
Offizielle Website von jQuery (englisch)
Offizielle Website von jQuery Mobile (englisch)
Deutscher Fachaufsatz zu jQuery
Die nachfolgende HTML-Anweisung sorgt dafür, dass der Handy-Browser die geladene mobile Webseite automatisch an die Breite des Handy-Browsers anpasst. Horizontales Scrollen wird so überflüssig beim Smartphone, Tablet, TV, Spielekonsole oder Internet tauglichem Handy.
2.)<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Die HTML-Anweisung </head> beendet die "Mitteilungen" für die Browser und Suchmaschinen. Nun folgt mit der HTML-Anweisung <body> das, was wir Menschen von den Browsern in formatierter Form zu lesen bekommen.
Die hiernach folgenden HTML5-Programmieranweisungen bestimmen, mit welchem Design und Layout die Inhalte der mobilen Webseite angezeigt werden sollen.
Diese HTML5-Programmieranweisungen sind so umfangreich, dass man ein ganzes Buch darüber schreiben könnte.
In den nächsten Tagen werden wir unser Webdesign Tutorial zum responsiven Webdesign für Handys mit jQuery Mobile fortsetzen.
Damit Sie einen Vorgeschmack bekommen, wie mächtig das responsive Webdesign mit jQuery Mobile ist, klicken Sie bitte auf den nachfolgenden Link, um sich das erste Beispiel für responsives Webdesign auf Ihrem Smartphone, Tablet oder Desktop-Computer anzuschauen:
Beispiel 1: responsives Webdesign für mobile Webseiten mit jQuery MobileWebseite
Private Krankenversicherung zu teuer?
Zahlen Sie zuviel für Ihre private Krankenversicherung?
Vielleicht finden Sie woanders eine bessere und günstigere PKV. Weitere Infos bei:
Tarifrechner für die beste PKV
Erstellt am: 14.10.2013
- Stichwörter:
- Responsives Webdesign
- Mobile Webseiten
- jQuery Mobile
- HTML5
- CSS3
Was Sie vielleicht auch interessiert
Nebenerwerbsgründung mit Webdesign optimal finanzieren
Hat Ihnen diese Webseite weitergeholfen?
Wenn Ihnen diese Webseite weitergeholfen hat, belohnen Sie bitte den Autor mit einer Weiterempfehlung und kleinen Spende. Klicken Sie hierzu auf den Spenden-Knopf, um per Paypal einen Geldbetrag Ihrer Wahl zu spenden.
Weitere Infos
Bitte geben Sie unten Ihr gewünschtes Thema, ein Keyword oder eine Suchbegriffkombination ein und lassen Sie sich die Ergebnisse anzeigen:
Haben Sie Wünsche?
Kostenlose Infos, wie Sie 10.000 Euro im Jahr mit einer Website ohne HTML-Kenntnisse verdienen können.
Ihre E-Mail-Adresse behandeln wir vertraulich. Die Weitergabe an Dritte ist nicht vorgesehen.
Folgen Sie uns: