Share
Als Tablets und Smartphones zum ersten Mal auf den Markt kamen, entwickelten viele Publisher deutlich getrennte Websites oder zumindest eindeutig generierte HTML-Codebäume, um das Erlebnis für Besucher auf verschiedenen Geräten anzupassen. Sicherlich sind Lösungen entstanden, um es einfacher zu machen, wie dieses mobile WordPress-Theme-Plugin:
Um den Besuchern auf allen Geräten wirklich ein solides Erlebnis zu bieten, mussten die meisten Projekte doppeltes oder dreifaches Design, Kodierung und Testen durchführen.
Das Konzept des responsiven Webdesigns zielte darauf ab, den Codebaum zu vereinheitlichen, Codegabeln zu eliminieren und einen einfacheren Ansatz zur Bereitstellung einer hochwertigen Benutzererfahrung für alle Geräte bereitzustellen. Am Anfang waren ein wenig Experimentieren und frühzeitiges Fachwissen erforderlich, aber heute ist es zum Mainstream geworden. Es ist ein Beweis für die Orientierung an der DRY-Technik.
Als ich meine persönliche WordPress-Site startete, war die Auswahl des responsiven Designs immer noch ein kleiner Sprung - und viele Websites wurden mit unterschiedlichen Qualitätsstufen für die Besuchererfahrung dargestellt.
Die Open Source-Version von Bootstrap von Twitter hat die Reaktionsfähigkeit im Webdesign enorm verbessert. Wahrscheinlich haben Sie wie ich ein responsives Thema auf Ihrer Website und kennen die allgemeinen Konzepte der dynamischen Präsentation. Aber wissen Sie, wie responsives Webdesign unter der Haube funktioniert? Wissen Sie, wie Sie von Grund auf etwas Reaktionsfähiges bauen können? Möchten Sie mehr erfahren??
In diesem Lernprogramm möchten wir Sie dazu ermutigen, das neueste Whitepaper von Telerik zum Responsive Web Design (RWD) zu lesen. Must-know-Techniken zum Erstellen von HTML5-Apps für jede Bildschirmgröße, die Sie jetzt kostenlos herunterladen können, bieten eine äußerst detaillierte Anleitung, um diese Fragen zu beantworten und Ihnen zu helfen, sich auf den neuesten Stand zu bringen.
Es gibt viele Gründe, warum responsives Webdesign nicht mehr als Trend bezeichnet wird, sondern als Synonym für bewährte Webmethoden. Dies ist eine schnelle und kostengünstige Möglichkeit, Desktopbenutzern und mobilen Webbenutzern eine maßgeschneiderte Erfahrung zu bieten. Sie können Ihre vorhandenen Fähigkeiten nutzen, eine Codebasis, einen URL-Satz und eine Designsprache haben.
In diesem Whitepaper erfahren Sie, was Sie über responsive Web-Praktiken wissen müssen, damit Sie Apps für jede Bildschirmgröße erstellen können. Sie lernen, wie man:
In diesem Tutorial werde ich Ihnen nur eine kurze Zusammenfassung dessen geben, was das Whitepaper bietet. Ich nehme auch an den folgenden Diskussionen teil. Wenn Sie einen Fragen- oder Themenvorschlag haben, schreiben Sie bitte einen Kommentar oder einen Tweet an me @reifman oder senden Sie mir eine E-Mail.
Hier sind einige Bereiche, über die Sie im Whitepaper informiert werden.
Medienabfragen sind Teil von CSS3 und ermöglichen das responsive Webdesign.
Im Wesentlichen helfen Medienabfragen dem Browser dabei, Bedingungen in Ihrem CSS-Code zu erkennen, wie Sie Elemente des Inhalts formatieren, ausblenden oder enthüllen.
Hier ist ein Beispiel für die kleinste Gerätegröße bis zu einer mit einer Breite von mehr als 768 px:
/ * Basisstil für kleine Geräte klein und höher * / .hero-Text Schriftgröße: 22px; / * Für große und größere * / @media-Bildschirme und (min-width: 768px) .hero-text font-size: 48px;
In populären Frameworks wie Bootstrap, Foundation und Telerik RadPageLayout werden Medienabfragen häufig verwendet, um leistungsfähige Rastersysteme zu erstellen.
Mithilfe von Medienabfragen in Ihrem Code können Sie Stylesheets mit Rastern erstellen, die fließend auf Geräte reagieren. Dabei wird dynamisch angepasst, was und wie der Besucher Ihren Inhalt basierend auf seinem Gerät und der Breite des Browsers sieht.
Die Syntax kann zwischen den Frameworks variieren, das allgemeine Konzept ist jedoch dasselbe. Jede Gerätegröße verfügt über entsprechende Medienabfrage- und Stileigenschaften, die den gewünschten Layouteffekt erzeugen. Diese Medienabfragen werden als Haltepunkte bezeichnet. Bootstrap identifiziert seine Haltepunkte als xs (extra klein), sm (klein), md (med), lg (groß). Diese beziehen sich auf die Gerätegröße.
Hier einige Bootstrap-Beispiele und was sie auf Geräten unterschiedlicher Größe darstellen können:
Oben links sind kleine Geräte und kleinere Tablets, oben rechts mittelgroße Geräte. Niedriger sind größere Geräte und Desktops.
Ein weiteres allgemeines Konzept ist der grundlegende Inhaltscontainer. Das Containerelement ist das äußerste Element des Layouts. Sein Zweck besteht darin, einen weißen Raum zwischen dem Layout und dem Rand des Browserfensters zu schaffen.
Das Whitepaper zeigt auch, dass Sie durch responsives Webdesign Inhalte entsprechend der Anzeigegröße des Besuchers erweitern oder verkleinern können:
Ich glaube, dass die Auswahl von Standards für eine erfolgreiche Softwareentwicklung unglaublich wichtig ist. Es hilft Teams bei der Kommunikation und ermöglicht es neuen Mitarbeitern, sich schnell auf den neuesten Stand zu bringen. Es macht die Einstellung von Mitarbeitern einfacher, wenn sie wissen, was sie mit Standardtechnologien beherrschen. Außerdem wird das Upgrade im Hinblick auf Sicherheit, Leistung und Funktionen im Laufe der Zeit einfacher, insbesondere bei der Verwendung von Open Source-Technologien.
Die Auswahl eines Standard-Frameworks für responsives Webdesign kann den Erfolg oder Misserfolg Ihres Projekts entscheidend beeinflussen. Das Telerik-Whitepaper führt Sie durch die Vor- und Nachteile eines der beliebtesten Bootstrap:
Bootstrap bietet erstklassige Funktionen wie ein solides responsives Grid, Mobile First Design, CSS-Hilfsklassen, adaptive JavaScript-Komponenten und vieles mehr. Das Raster ist standardmäßig ein 12-Spalten-Standardraster mit einer einfachen Syntax zum Erstellen von Layouts, die mehrere Bildschirmgrößen unterstützen.
Das Weißbuch beleuchtet auch die Zurb Foundation. Es ist ein Open-Source-Framework, das sich aus Bootstrap entwickelt hat.
Foundation verfügt über erweiterte Funktionen, die für Teams mit erfahrenen Front-End-Entwicklern geeignet sind, insbesondere für diejenigen, die Sass verwenden.
Das Whitepaper behandelt auch einige fortgeschrittene Themen:
Ohne zu weit zu gehen, gibt es den meisten von uns eine sehr detaillierte Einführung in die wichtigsten Aspekte, die Sie wissen müssen.
Ich hoffe, ich habe Sie so fasziniert, dass Sie mehr erfahren möchten. Als Projektmanager, der regelmäßig Mitarbeiter mit Fachwissen in diesen Fragen verwaltet, fand ich dies eine super, leicht verständliche Anleitung für responsives Webdesign und wie es funktioniert.
Willst du eintauchen? Besuchen Sie die White Paper-Sammlung von Telerik und laden Sie sich Must-know-Techniken für das Erstellen von HTML5-Apps für jede Bildschirmgröße herunter.
Diese responsiven Frameworks sind wichtige Ausgangspunkte und enthalten UI-Komponenten, um Ihr Projekt zu starten. Die Komponenten enthalten normalerweise die grundlegenden Funktionen, die zum Betrieb und zum Erstellen von Prototypen erforderlich sind. Ihre fortschrittlicheren und komplementäreren Anwendungen erfordern jedoch robustere Funktionen der Benutzeroberfläche. Bald suchen Sie nach einer responsive-webfähigen UI-Suite.
Die Benutzeroberfläche von Telerik Kendo umfasst ein responsives Raster, Diagramme, Scheduler und weitere Komponenten, die nahtlos mit jedem von Ihnen verwendeten responsiven Webdesign-Framework zusammenarbeiten. Es wurde von unserem Sponsor erstellt, der das obige RWD-Whitepaper erstellt hat.
Ich möchte Ihnen nur einen kurzen Überblick geben, was Sie von der Kendo-Benutzeroberfläche erwarten können:
Das Erstellen erweiterter interaktiver Rastersteuerelemente ist nie einfach. Kendo UI bietet ein leistungsfähiges, flexibles Gitter aus der Box:
Es gibt eine Zeitplan- oder Kalenderansicht:
Kendo UI enthält integrierte Diagramme:
Und es gibt einen funktionsreichen, einfach konfigurierbaren Editor:
In der Tat gibt es eine Bibliothek mit 73 weiteren UI-Widgets, die hinzugefügt werden können:
An dieser Stelle gibt es im Wesentlichen zwei Dinge, die Sie tun müssen:
Ich hoffe, Sie sind fasziniert von dem HTML5-Whitepaper von Telerik (und dem Kendo UI Framework). Bitte schreiben Sie unten Ihre Erfahrungen sowie Fragen und Kommentare. Sie können auch bei mir @reifman twittern oder direkt eine E-Mail an mich senden und auf meiner Envato Tuts + Instructor-Seite nach anderen Tutorials suchen, die ich geschrieben habe.
Accentsconagua