.

Mit jQuery Mobile Responsive Webdesign mobile Webseiten erstellen für alle Handys, Windows und Android Smartphones, iPhones, iPads und Tablets


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

WebdesignberatungE-Mail sendenFreunden empfehlenDrucken

Zurück von "Responsives Webdesign für mobile Webseiten mit JQuery Mobile, HTML5, CSS3 und JavaScript für alle Handys, Android Smartphones, iPhones, iPads und Tablets" zum Index für unser Webdesign Tutorial

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.

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?

Mit Ratenkredit rentable Investition finanzieren, spätere Selbstständigkeit vorfinanzieren oder wichtige Wünsche erfüllen

Kostenlose Infos, wie Sie 10.000 Euro im Jahr mit einer Website ohne HTML-Kenntnisse verdienen können.

Benutzername: Pflicht 

E-Mail: Pflicht 

Bitte nicht ausfüllen:

Ihre E-Mail-Adresse behandeln wir vertraulich. Die Weitergabe an Dritte ist nicht vorgesehen.


Werbung:

Diese Seite bei Facebook, Twitter, Google Plus oder LinkedIN weiterempfehlen:



Google

Wer schreibt hier?

1000 € verdienen mit Webdesign Rainer Wiesehahn

Mein Name ist Rainer Wiesehahn. Ich bin Rechtsanwalt und Webmaster in Dortmund von ca. 30 Websites.
Ich liebe die berufliche Freiheit als selbstständiger Freiberufler und das automatische Geld verdienen mit fleißigen Webseiten.
Haben Sie Fragen?

Zum Beispiel zum Webdesign, zur besten Krankenversicherung oder Finanzierung u.a..
Wir sind über unsere Webformulare jeden Tag 24 Stunden für Sie erreichbar:

Weitere Fragen zum Webdesign beantworten Ihnen möglicherweise auch unsere
Website-Suchmaschine sowie unser
Stichwortregister von A bis Z

WebdesignberatungE-Mail sendenFreunden empfehlen

Folgen Sie uns:

Webdesign Wiesehahn bei TwitterWebdesign Wiesehahn bei Youtube Rainer Wiesehahn bei Google+

Deutsch schnell & günstig

Englische, spanische und französische Texte, Webseiten und Newsletter sehr günstig und schnell in die schreckliche deutsche Sprache übersetzen.
Gewünschte Übersetzung:


Webseite bzw. Landing-Page eingeben z.B. http://domain.com/seite.html


oder hier den Text einfügen:

Bitte nicht ausfüllen:

Erläuterungen

Gratis HTML-Test

Adresse der Webseite z.B.
http://domain.de/seite.html

Bitte nicht ausfüllen:

Erläuterungen