Inhalt
- 1. Breite Abdeckung von Browsern und Geräten
- 2. Berührungsfreundliche Formulareingaben und UI-Widgets
- 3. Responsive Webdesign freundlich
- Neues Panel-Widget
- Responsive Tabellen
- Responsive Grid
- 4. Layout- und Theming-Engine
- 5. Ajax-Seitennavigationsmodell
- Tipp: Laden Sie sofort neue Seiten (keine Ladeanzeige)
- Web Delivery für alle
Angesichts der zunehmenden Verbreitung von Touchscreens auf Telefonen, Tablets und Laptops besteht ein dringender Bedarf an der Erstellung berührungsfreundlicher Websites. Darüber hinaus müssen Websitebesitzer sicherstellen, dass ihre Inhalte von immer mehr Geräten angezeigt werden können. Hier kommt jQuery Mobile ins Spiel. Das jQuery Mobile-Framework kann Websites verbessern, indem es berührungsfreundliche Formulareingaben, effizientere Seitenladevorgänge und eine breitere Geräteunterstützung durch die Verwendung progressiver Verbesserungen hinzufügt.
Ich war ein langjähriger Verfechter von jQuery, war aber nicht sofort davon überzeugt, dass der Ansatz von jQuery Mobile der richtige war. Ich beschloss, weitere Untersuchungen durchzuführen, indem ich mit den Entwicklern von jQuery Mobile, Scott Jehl und Todd Parker von der Filament Group sprach. Ich habe sie gefragt, warum sich jQuery Mobile so verhält, wie es funktioniert, und als Ergebnis fünf wichtige Dinge herausgearbeitet, die jQuery Mobile tut, um Ihnen beim Erstellen berührungsfreundlicherer Websites zu helfen, die auf einer Vielzahl von Browsern und Geräten funktionieren:
- Breite Browser- und Geräteabdeckung - Mit der progressiven Verbesserung kann Ihre Website von der größten Anzahl von Browsern und Geräten gesehen werden.
- Berührungsfreundliche Formulareingaben und UI-Widgets - Formulareingaben werden so verbessert, dass sie berührungsfreundlich sind, einschließlich einer Reihe berührungsfreundlicher UI-Widgets.
- Responsive Webdesign fertig - jQuery Mobile ist ein "Mobile-First" -Framework, nicht "nur Mobile".
- Layout- und Theming-Engine - hoch erweiterbare und anpassbare Theme- und Layout-Engine.
- Ajax-Seitennavigationsmodell - Laden Sie neue Seiten mit Ajax und HTML5 Pushstate schneller als mit vollständigen Seitenaktualisierungen.
Lassen Sie uns jeden dieser fünf Gründe genauer untersuchen:
1. Breite Abdeckung von Browsern und Geräten
"Das Web nicht brechen" war das Mantra von jQuery Mobile. Das große Versprechen des Webs war, dass jeder auf der ganzen Welt auf Inhalte zugreifen kann, indem er eine URL eingibt oder auf einen Link klickt.
jQuery Mobile ist das einzige wichtige UI-Framework, mit dem sichergestellt werden kann, dass jeder auf der Welt über eine URL oder einen Link auf Inhalte zugreifen kann. jQuery Mobile greift die Konzepte des Webs auf und arbeitet damit, nicht dagegen. Es umfasst eine progressive Verbesserung, bei der Basis-HTML für Geräte bereitgestellt wird, die nicht mit CSS und Ajax umgehen können, und anschließend die Geräte verbessert werden, die dies unterstützen.
2. Berührungsfreundliche Formulareingaben und UI-Widgets
Wenn Sie jemals versucht haben, ein Kontrollkästchen in einem nicht für Handys geeigneten Formular zu aktivieren, wissen Sie, wie schwierig es sein kann, hinein- und herauszuzoomen, um schlecht gestaltete Formularelemente zu treffen. Sie möchten sicherstellen, dass Ihre Formularelemente und UI-Widgets mit Touch gut funktionieren. Touch ist jetzt in Laptops und Desktops enthalten, sodass es jetzt völlig unentschuldbar ist, Websites zu erstellen, die nicht dafür ausgelegt sind, den Ansturm neuer berührungsfähiger Geräte auf den Markt zu unterstützen. jQuery Mobile wurde mit dem ersten Tastendruck entwickelt (funktioniert jedoch immer noch hervorragend mit einer Maus), sodass Sie große, klobige Tippziele erhalten, die für alle Formelemente und UI-Widgets fingerfreundlich sind.
jQuery Mobile verbessert Ihre Formulare automatisch, um berührungsfreundlich zu werden.Kontrollkästchen sind in ein sehr großzügiges Etikett eingewickelt, um eine schöne Tap-Zone zu schaffen, sodass Sie das vorgesehene Kontrollkästchen leicht drücken können. Textbereiche sind auf Mobilgeräten problematisch, sobald Sie den zugewiesenen Textbereich überschritten haben (Sie müssen mit zwei Fingern scrollen, um Inhalte in einem scrollbaren Textbereich anzuzeigen). Daher vergrößert jQuery Mobile Textbereiche automatisch, sodass der Benutzer den eingegebenen Inhalt leicht sehen kann jederzeit.
In jQuery Mobile gibt es viele Arten von einfach zu gestaltenden und erweiterten Formularelementen, z. B. den Schieberegler, das Kontrollkästchen und die Funkgeräte, die Sucheingabe und Auswahlmenüs. Außerdem wird jedes dieser Formularelemente mit einer alternativen Mini-Version geliefert, die sich ideal zum Einfügen in Kopf- und Fußzeilenelemente auf Ihrer Seite eignet (z. B. ein Mini-Auswahlelement für die Navigation).
jQuery Mobile verfügt auch über Widgets wie permanente Symbolleisten, Schaltflächen, Dialogfelder und, mein persönlicher Favorit, das neue Popup-Widget, mit dem Sie alle Arten von Inhalten an der Stelle einfügen können, an der Sie sie auslösen. Dies ist nützlich, um In-Page-Formulare, Dialoge, Fotos, Karten und Videos usw. anzuzeigen. Mit jeder Version von jQuery Mobile werden weitere Widgets hinzugefügt, die alle berührungsfreundlich sind und auf einer Vielzahl von Geräten und Browsern funktionieren.
3. Responsive Webdesign freundlich
Sie waren immer in der Lage, reaktionsschnelle Websites auf jQuery Mobile zu entwickeln, da es sich um ein "Mobile-First-Framework" handelt ... NICHT um "nur Mobile". In der 1.3-Version von jQuery Mobile wird viel mehr Wert auf reaktionsschnelle Webdesign-Funktionen gelegt.
Neues Panel-Widget
Sie kennen die Menüs, die von der Seite herausgleiten? Dieses von der mobilen Anwendung von Facebook beliebte Benutzeroberflächenmuster ist den meisten Benutzern auf Mobilgeräten sehr vertraut. Zeigen Sie die Bedienfelder in Aktionen an.
Responsive Tabellen
Tabellen können bei schmalen Bildschirmbreiten zu einer gestapelten Etiketten- / Datenstilpräsentation wechseln. jQuery Mobile ruft diesen Tabellen-Reflow auf.
Responsive Grid
Die Raster für jQuery Mobile bestehen aus einfachen Rasterblöcken, die auf kleineren Displays übereinander gestapelt werden können.
4. Layout- und Theming-Engine
jQuery Mobile betrachtet Ihre Daten-* Attribute in Ihrem HTML und erweitert es mit Verhalten und Stil. Zum Beispiel durch Bewerbung Datenrolle = ”Listenansicht” In Ihre ungeordneten Listen werden CSS-Klassen automatisch in Ihre Listen eingefügt, sodass sie wie eine mobilisierte Liste aussehen. Wenn Ihre Listenelemente Links enthalten, wird der Pfeil in der Liste hinzugefügt, um anzuzeigen, dass Sie klicken können, um zu einer neuen Seite zu gelangen, indem Sie dieses bestimmte Element berühren.
Das Daten-* Attribute bieten Ihnen eine grundlegende Formatierung und Struktur, aber alles in jQuery Mobile ist optional und die CSS-Klassen sind erweiterbar, sodass Sie nicht an das Standarddesign gebunden sind.
Das erste, was Sie tun sollten, um mit dem Anpassen Ihrer Anwendung zu beginnen, ist, mit dem jQuery Mobile Themeroller zu beginnen. Es ist so einfach Sie können Ihre eigenen Themenfarben erstellen, indem Sie Farben aus der Farbpalette direkt auf das zu gestaltende Element ziehen und dort ablegen. Themeroller hat sogar das Kuler-Tool von Adobe integriert, mit dem Sie die besten vom Benutzer bewerteten Farbschemata auswählen können.
Im obigen Beispiel habe ich ein A- und ein B-Thema erstellt. jQuery Mobile bietet die Möglichkeit, Ihre Themen mithilfe von rekursiv auf Elemente anzuwenden Datenthema Attribut. Wenn ich möchte, dass meine Seite das Standardthema "A" und mein Formular das Thema "B" verwendet, würde ich mich einfach bewerben Datenthema = "b" zu meinem Formularelement und alle Elemente im Formular werden automatisch mit dem Thema "B" versehen.
5. Ajax-Seitennavigationsmodell
Anstelle des vollständigen Neuladens von Seiten sucht jQuery Mobile nach lokalen Links zu der Domain, in der Sie sich befinden, und ruft den neuen Seiteninhalt mit Ajax ab. Wenn ein Benutzer auf einen Link klickt, wird der Inhalt der neuen Seite in eine neue Seite geladen div und dann in das aktuelle Ansichtsfenster übergegangen.
Nehmen wir an, Sie sind eingeschaltet index.html und Sie klicken dann auf einen Link zu page.html und der Link zu page.html hat das folgende Markup:
a href = "page.html" data-Transition = "Folie"> Link / a>
Beachten Sie das Datenübergang Das Attribut ist hier nicht erforderlich. Dies ist nur eine Demo zum Ändern der Seitenübergangsanimation in "Folie" anstelle des standardmäßigen Überblendungsseitenübergangs. In jQuery Mobile sind viele andere Seitenübergänge integriert, von einem einfachen Überblenden zu einem komplexeren Flussübergang.
Wenn der von Ihnen verwendete Browser HTML5-Pushstate unterstützt, wird die URL-Adresse in Ihrem Browserfenster auf aktualisiert yourdomain.com/page.html Sobald die neue Seite fertig ist, wird während des Ladens der neuen Seite eine sich drehende Ladeanzeige angezeigt, um dem Benutzer eine Rückmeldung zu geben, dass der Link getroffen wurde.
Der Hauptvorteil dieser Art des Ladens von Seiten besteht darin, dass Sie nicht alle JavaScript- und CSS-Anforderungen beim Laden der zweiten Seite neu initialisieren müssen. Selbst wenn diese Assets aus dem Cache geladen werden, können Ausführungszeiten auf Mobilgeräten eingespart werden.
Beim Laden der ersten Seite mit jQuery Mobile werden alle Ihre Skripte und Stile bereits auf Ihrem Gerät initialisiert, sodass wir diese Funktion beim Laden einer neuen Seite nicht erneut ausführen müssen. Das einzige, was zum Rendern einer neuen Seite benötigt wird, ist das neue HTML-Fragment. Mit dieser Methode zum Laden von Seiten erhalten Sie schnellere nachfolgende Seitenanforderungen, die für die Entwicklung eines großartigen mobilen Erlebnisses von entscheidender Bedeutung sind.
Weitere Informationen finden Sie im Seitennavigationsmodell von jQuery Mobile.
Tipp: Laden Sie sofort neue Seiten (keine Ladeanzeige)
Es gibt verschiedene Möglichkeiten, wie Sie das Laden neuer Seiten noch schneller machen können ... sofort. Der erste Weg ist, wenn Sie wissen, dass der Benutzer wahrscheinlich als nächstes eine bestimmte Seite besucht, können Sie die hinzufügen Prefetch Datenattribut für Ihre Links, damit jQuery Mobile sie nach dem Laden der aktuellen Seite lädt.
a href = "page.html" Daten-Prefetch> Link / a>
Dies wird auf der neuen Seite nach dem Laden des Fensters still im Hintergrund geladen.
Die andere Möglichkeit besteht darin, die Struktur der Seite zu ändern und Seiten in die aktuelle Seite einzubetten. Seien Sie jedoch vorsichtig, da dies Ihre anfängliche Nutzlast erhöht und nicht direkt über die URL zugänglich ist. Aber mit dem Erstellen von separaten divs Mit eindeutigen IDs und Datenrollenseiten (mehrseitige Struktur) werden Ihre neuen Seiten sofort geladen, wenn Sie auf einen Link klicken. Stellen Sie einfach sicher, dass sich diese Seiten auf derselben DOM-Ebene wie Ihre Hauptseite befinden.
div id = "newpage" data-role = "page"> Neue Seite / div>
Verknüpfen Sie dann die eingebettete Seite mit einem Hash und einer Seiten-ID auf Ihrer aktuellen Seite.
a href = "# newpage"> Neue Seite anzeigen / a>
Dies wird in den Seiteninhalt innerhalb der geladen div mit id neue Seite.
Mit diesen beiden Methoden ist der gesamte neue Seiteninhalt sofort verfügbar und es sollte keine Ladeanzeige angezeigt werden.
Das neue Seitennavigationsmodell, das uns von jQuery Mobile zur Verfügung gestellt wurde, arbeitet mit dem Web zusammen, damit neue Seiten noch schneller geladen werden können als herkömmliche vollständige Seitenladevorgänge, indem nur das HTML-Fragment geladen wird, das Sie zum Rendern neuer Seiten benötigen, und bietet Ihnen auch einige Möglichkeiten, diesen Prozess für den Benutzer unmittelbar erscheinen zu lassen.
Web Delivery für alle
jQuery Mobile ist ein Beispiel dafür, dass das Web sein Versprechen erfüllt, dass jeder gleichberechtigten Zugriff auf kostenlose und öffentliche Inhalte hat, die im Web veröffentlicht werden, unabhängig davon, welches Gerät er verwendet. Es ist nicht nur für Handys gedacht, es ist "Mobile First", NICHT "Mobile Only", sodass es als Basis für reaktionsschnelles Webdesign verwendet werden kann. Alle diese großartigen berührungsfreundlichen Formulareingaben und Widgets sind vollständig themenfähig und funktionieren unabhängig vom Gerät (mobil oder Desktop) hervorragend.
Weitere Informationen und Informationen zu diesen Punkten finden Sie in meinem Vortrag auf YouTube mit dem Titel "jQuery Mobile, Web Delivery for ALL".
