Adaptives Layout: Was es ist und wie man es verwendet. Möglichkeiten zur Implementierung der Schnittstellenanpassungsfähigkeit Was ist responsives Webdesign?
JavaScript ist in Ihrem Browser deaktiviert
„Seit vielen Jahren arbeiten wir an der Produktoberfläche und versuchen, sie für Benutzer bei der täglichen Arbeit der Website-Verwaltung einfach und bequem zu gestalten. Wir berücksichtigen auch die Interessen von Webentwicklern, die vor der schwierigen Aufgabe stehen, schnell funktionale Websites mit unterschiedlichsten Designs zu erstellen.
Und egal wie sehr wir es uns erhoffen, jeder Kunde möchte sein eigenes, individuelles Design und seine eigene Struktur der Website. Und natürlich möchte jeder, dass die Website schnell geöffnet wird und hohen Datenverkehr bewältigen kann. Um diese Probleme Schritt für Schritt zu lösen, haben wir ein Konzept entwickelt, das Technologien und Schnittstellenlösungen kombiniert, und es „1C-Bitrix: Hermitage“ genannt.
„Hermitage“ ist: Neugestaltung der „Haube“ – Re:HermitageDie Benutzeroberfläche des Verwaltungsteils des Produkts ist stilvoll und ausdrucksstark, aber vor allem ist sie auf den ersten Blick verständlich und erfordert keine Schulung. Die Arbeit mit dem „Admin-Panel“ ist angenehm und einfach. Das Design ist an die Touchscreen-Schnittstellen mobiler Geräte – Smartphones und Tablets – angepasst.
Gestaltung des Verwaltungsbereichs
Das Designkonzept wurde von AIC entwickelt. Die intelligente Benutzeroberfläche ist ästhetisch ansprechend und weckt beim ersten Blick auf das „Admin-Panel“ sofort angenehme Emotionen. Selbst wenn Sie sich schnell mit dem „Admin-Panel“ vertraut machen, können Sie die wichtigsten Steuerelemente schnell identifizieren, ihre Funktionsweise verstehen und die Schulungszeit erheblich verkürzen.
Kontrolle
Konzept der Website-Management-Schnittstelle Informationsmanagement ist eine tägliche Aufgabe, und wir tun alles, damit diese Arbeit Spaß macht! Jede neue Version des Produkts erfordert Schritte zur Entwicklung des Control Panels. Dabei werden die Erfahrungen mit der Nutzung dieses Panels sowohl von Entwicklern als auch von Kunden von 1C-Bitrix berücksichtigt. Dadurch wird das Control Panel verbessert – es erhält nicht nur ein neues Aussehen, sondern auch neue Funktionen.Das Panel enthält zwei Lesezeichen, zwischen denen Sie problemlos wechseln und Inhalte genau dort verwalten können, wo Sie sie benötigen. Natürlich stehen das Control Panel und seine beiden Modi nur registrierten Benutzern zur Verfügung und werden sofort angezeigt, sobald Sie sich auf der Website anmelden.
Site-Kontrollfeld. Schnittstelle „Hermitage“
Die Site-Verwaltung ist in zwei Hauptmodi unterteilt:
Arbeitsmodus „Über der Baustelle“
„Hermitage“ umfasst in puncto Management folgende Funktionen:
Funktionalität des Control Panels im Rahmen des 1C-Bitrix: Hermitage-Konzepts Bitte beachten Sie, dass die Funktionalität des Control Panels von den Ihnen als Nutzer der Seite eingeräumten Rechten abhängt. Sie können den Abschnitt „Administration“ jedoch von überall auf der Website und in jedem Modus der Systemsteuerung aufrufen. Bearbeitungsmodus Durch Klicken auf die Schaltfläche Bearbeitungsmodus wechseln Sie in den Bearbeitungsmodus. Und was besonders zu beachten ist, ist, dass Sie die Einbindung dieses Modus sowohl mit als auch ohne Neuladen der Seite konfigurieren können. Verwalten Sie alle Elemente und Komponenten auf öffentlichen Seiten! Schließlich umfasst der Bearbeitungsmodus nicht nur die Möglichkeit, die aktuelle Seite oder Elemente von Informationsblöcken, wie beispielsweise Nachrichten oder Produkte im Katalog, zu ändern. Im Bearbeitungsmodus können Sie genauso einfach – direkt „über der Site“ – die in der Site-Vorlage enthaltenen Komponenten und im Hauptarbeitsbereich einer bestimmten Seite verwalten.
Fügen Sie Komponentendaten direkt im öffentlichen Teil der Site hinzu, bearbeiten und löschen Sie sie. Für diese Aktionen ist es absolut nicht erforderlich, den Abschnitt „Verwaltung“ aufzurufen. Sie können jedes Element in der Liste bearbeiten oder löschen, indem Sie die Schaltflächen verwenden, die angezeigt werden, wenn Sie mit der Maus über diese Elemente fahren.
Sie können die letzte Aktion „rückgängig machen“.
Sie müssen keine Angst davor haben, auf der Seite etwas falsch zu machen, da Sie jederzeit die Möglichkeit haben, die letzte Aktion rückgängig zu machen. Diese Implementierung der Warenkorb-Funktionalität auf Ihrer Website deckt alle Vorgänge an deren Inhalt ab. Nach dem Hinzufügen und ggf. Ändern der Seite brechen Sie einfach Ihre letzte Aktion ab. Minimierter Modus Der minimierte Betriebsmodus ist praktisch für diejenigen, die bereits wissen, wie man mit dem System arbeitet. Minimieren Sie einfach die Systemsteuerung, um Platz auf dem Bildschirm freizugeben. Gleichzeitig behält auch ein minimiertes Panel die Verwaltungsfunktionen bei!
Sie können mit dem Menü arbeiten, das Produkt aktualisieren, den Bearbeitungsmodus ein- oder ausschalten, den Cache zurücksetzen oder in den Verwaltungsmodus wechseln. Kurzum: Das gefaltete Paneel ist weiterhin funktionsfähig! Übrigens können Sie das Panel mit dem üblichen Doppelklick ein- und ausklappen.
Verwaltung Der Verwaltungsbereich des Produkts ist für die umfassende Verwaltung des gesamten Internetprojekts konzipiert. Der Desktop im administrativen Teil ist individuell anpassbar, mit Gadgets ausgestattet und mit einem Menüsuchsystem ausgestattet. Sie können im Produkt beliebig viele „Desktops“ erstellen.
Entwickler können ihre eigenen Gadgets erstellen und diese dann ihrem Desktop hinzufügen. Mithilfe von Gadgets können Sie beispielsweise Listen aktueller Bestellungen, Unternehmensnachrichten, Dokumentensammlungen usw. anzeigen. Die „Live-Suche“ funktioniert direkt vom „Desktop“ im Verwaltungsmenü aus. Durch die Suche gelangen Sie sofort zum gewünschten Menüpunkt. Dabei spielt es keine Rolle, wie viele Abschnitte und Unterzweige das Menü enthält. Transliteration
Sie müssen sich keine Gedanken darüber machen, welchen Dateinamen Sie einer Seite zuweisen möchten! Und Sie benötigen keine Übersetzungsprogramme, um den Namen ins Englische zu übersetzen. Erstellen Sie einfach eine Seite und legen Sie ihren Titel fest – Sie erhalten den Dateinamen automatisch.
Der Seitenerstellungsassistent transkribiert und übersetzt den Seitentitel automatisch und schlägt ihn zur besseren Suchmaschinenoptimierung als Dokumentdateinamen vor. Zugriff auf die Seite Eine neue Seite der Website sollte der Welt nicht sofort angezeigt werden. Zuerst müssen Sie es überprüfen und mit Kollegen besprechen und es dann vom Management genehmigen. Veröffentlichen Sie es nicht – aktivieren Sie beim Erstellen einfach das Kontrollkästchen „Zugriff auf Seite beschränken“. Geben Sie die Benutzergruppen an, denen Sie es zeigen möchten – wählen Sie einfach diese Gruppen aus.
Wem möchten Sie die Seite zeigen?
Die Möglichkeit, Zugriffsbeschränkungen für eine Seite sofort bei ihrer Erstellung festzulegen, wird die Arbeit von Content-Managern erheblich erleichtern, wenn sie mit Inhalten arbeiten, die eine langwierige Koordination und Bearbeitung erfordern.
Schnittstelle
Verwalten Sie Ihre Website einfach und professionell! Die Hermitage-Produktoberfläche passt sich Ihrer täglichen Arbeit mit der Website an, merkt sich Ihre Vorlieben und ermöglicht es Ihnen, weniger Zeit mit technischen Aufgaben zu verbringen. Die Benutzeroberfläche scheint über der Website zu „schweben“, sodass Sie sehen können, was Sie tun, und die Ergebnisse sofort angezeigt werden.„Bewegen Sie den Mauszeiger über die Website, führen Sie Aktionen einfach aus, verlieren Sie nicht den Kontext Ihrer Arbeit und erzielen Sie sofort sichtbare Ergebnisse.“ Die Benutzeroberfläche merkt sich Ihre Präferenzen – Listeneinstellungen, Filter, Eingabeformulare … Und beim nächsten Mal werden Sie weniger Zeit mit dieser Aktion verbringen.
Verwenden Sie die bekannte „Menü“-Schaltfläche, um mit einem Klick auf alle Funktionen Ihrer Website zuzugreifen. Für Anfänger ist alles klar und für Profis bequem. Man gewöhnt sich nicht an die Seite, aber die Seite gewöhnt sich an Sie, passt sich Ihren Gewohnheiten und Aufgaben an.“
Generaldirektor, 1C-Bitrix, Sergey Ryzhikov
Ihre ganze Energie gilt der Kreativität, nicht der Suche nach einem Knopf! Das tägliche Verwalten von Informationen wird immer routinemäßiger und Sie investieren Ihre Energie in kreative Aufgaben statt in die technische Veröffentlichung von Seiten, Abschnitten und Menüs.„Von Version zu Version erscheinen immer mehr Funktionen im Produkt, immer mehr Aktionen in der Benutzeroberfläche. Wir haben viel Arbeit in die Neugestaltung der Produktoberfläche gesteckt, insbesondere des Benutzerkontrollfelds.
Die neue adaptive Schnittstelle vereinfacht die Suche nach der gewünschten Aktion, gruppiert Aktionen nach Benutzerrollen und hebt die häufigsten hervor, um das Arbeitsfeld nicht zu überladen und es für den Benutzer leichter verständlich zu machen.“
Vadim Dumbravanu, Projektmanager bei Bitrix
Eine adaptive Schnittstelle ist:- Kontextbezogene Bearbeitung – Inhalte direkt auf der Website verwalten. Wenn Sie die Seite korrigieren müssen, klicken Sie direkt dort auf „Bearbeiten“. Wenn Sie einen Abschnitt hinzufügen müssen, klicken Sie auf „Erstellen“. Verlieren Sie nicht den Kontext Ihrer Arbeit. Die neue Benutzeroberfläche schwebt über der Website, sodass Sie sehen können, was Sie tun, und sofort Ergebnisse anzeigen.
- Individuelle Anpassung an den Benutzer – die Produktoberfläche merkt sich die neuesten Aktionen, Filtereinstellungen und komfortable Darstellungsmöglichkeiten von Informationen. Die Benutzeroberfläche passt sich Ihrer täglichen Arbeit an und ermöglicht es Ihnen, jeden Tag immer weniger Zeit damit zu verbringen.
- Die Schaltfläche „Menü“ ist ein vertrauter und schneller Ein-Klick-Zugriff auf alle Funktionen Ihrer Website. Es ist sehr bequem! Wenn Sie über die Schaltfläche „Menü“ zu „“ wechseln, wird außerdem die Seite gespeichert, von der aus der Übergang vorgenommen wurde – das ist nicht weniger angenehm!
- Rollenanpassung – für eine sichere Ausführung der täglichen Arbeit. Entwickler haben Zugriff auf alle Tools zum Entwickeln und Anpassen einer Website. Site-Redakteure arbeiten nur mit Inhalten, ohne befürchten zu müssen, die technische Arbeit des Projekts zu stören. Jeder erledigt seine Aufgabe klar und deutlich.
- Assistenten zur Inhaltserstellung helfen Ihnen bei der Auswahl von Datei- und Abschnittsnamen, ergänzen das Site-Menü und helfen Ihnen beim Ausfüllen von Eigenschaften. Komplexe tägliche Handlungen werden einfach. Wir können den Inhalt einfach nicht für Sie schreiben; der Master erledigt den Rest für Sie.
- Reduzieren Sie die Kosten für die Schulung neuer Benutzer – es ist keine Schulung erforderlich, Sie benötigen lediglich Zeit, bis sich die Website an Sie gewöhnt hat. Die Eingewöhnungszeit an die Schnittstelle beträgt nur 1 Stunde!
- Verwandeln Sie Routineaufgaben in einen kreativen Prozess und investieren Sie Ihre Energie in kreative Aufgaben statt in die technische Veröffentlichung von Seiten, Abschnitten und Menüs.
- Reduzieren Sie den Zeitaufwand für die Website-Verwaltung, indem Sie das tägliche Projektmanagement zur Gewohnheit machen.
- Beseitigen Sie die Ängste neuer Benutzer, das Projekt zu zerstören, und vermeiden Sie die meisten Fehler bei der Verwaltung von Inhalten.
Die Arbeiten an der Verwaltungsschnittstelle des Produkts werden fortgesetzt. Benutzer von 1C-Bitrix: Site Management können alle Schnittstellenaktualisierungen mithilfe der SiteUpdate-Technologie herunterladen. Über neue Möglichkeiten erfahren Sie stets auf der Website sowie in unseren Newslettern.
Integrierter visueller Editor Der visuelle HTML-Editor ist bereits in das Produkt integriert und muss nicht installiert werden. Mit diesem Editor können Sie Ihre Seiten auf der Website in Echtzeit ändern – direkt über Ihren Browser. Mit dem Editor können Sie nicht nur normalen Text bearbeiten und formatieren, sondern auch mit visuellen Komponenten arbeiten.
Der visuelle Editor ist bereits in Ihre Website integriert!
Der visuelle Editor verfügt über eine leichte, schöne und ergonomische Benutzeroberfläche. Über benutzerfreundliche Editor-Skripte können Sie bequem und schnell mit Inhalten arbeiten, beispielsweise Links und Bilder einfügen.
Wenn Sie also ein Bild in eine Seite einfügen, können Sie dessen Position und Größe sofort auswählen. Wie es im Text aussieht, sieht man sofort.
WYSIWYG (ausgesprochen „wee-zee-wig“, aus dem Englischen „What You See Is What You Get“ – „Was Sie sehen, ist, was Sie bekommen“) ist eine Bearbeitungsmethode, bei der das korrigierte Material während des Bearbeitungsprozesses genauso aussieht wie und das Endergebnis.
Bearbeitung in Echtzeit Der Editor umfasst alle Tools, die ein Content-Manager benötigtPlatzieren Sie Komponenten auf der Seite, indem Sie sie einfach mit der Maus aus einem speziellen Bedienfeld ziehen, und konfigurieren Sie sofort ihre Parameter, die das Erscheinungsbild der Informationen festlegen, die sich auf Ihrer Website dynamisch ändern.
Visueller Editor: Bearbeiten von Komponentenparametern
Ein praktischer Suchmechanismus hilft Ihnen dabei, sofort die erforderliche Komponente zu finden, die Sie auf der Seite platzieren möchten. Beim Kopieren von Text aus dem Web und anderen Quellen, beispielsweise Word, wird der Code von überflüssigen Tags „bereinigt“. Darüber hinaus wird dieser eingefügte Code zu gültigem und korrektem HTML5-Code. Dabei ist das Ergebnis der Arbeit des Redakteurs immer das gleiche – egal welchen Browser Sie verwenden!
Basierend auf den Ergebnissen der Bearbeitung von Nutzerwünschen wird der Editor ständig verbessert. Es ist bequem, viele Vorgänge darin auszuführen und an der Erstellung von Seiten und der Formatierung von Texten zu arbeiten!
Codehervorhebung und ZeilennummerierungEs ist sehr praktisch, Seiten wie PHP zu bearbeiten, da der im System integrierte Editor den Code hervorhebt und die Zeilen nummeriert. Und die Seiten selbst werden „im Ajax-Stil“ „vor unseren Augen“ gespeichert – ohne die Seite neu zu laden und ohne den Fokus zu verlieren!
Dunkles Editor-Schema
- Syntaxhervorhebung HTML + PHP + Javascript + SQL;
- Die Hintergrundbeleuchtung ist umschaltbar und Sie können sie ausschalten, ohne die Seite neu laden zu müssen.
- 2 Farbthemen – hell und dunkel;
- schneller Sprung zu einer Zeile anhand ihrer Nummer;
- Tab/Umschalt+Tab zum Einfügen und Rückgängigmachen von Tabulatoren.
Informationsmanagement ist eine tägliche Aufgabe, wir tun alles, damit diese Arbeit Spaß macht!
„Split“-Modus Vertikal und horizontalJetzt verfügt Ihr Editor über zwei vollwertige „Split“-Modi – vertikal und horizontal. Es ist sehr praktisch, im kombinierten Modus zu arbeiten.
Sie können den Seitencode und seine Anzeige gleichzeitig sehen. Sie können in jedem Teil des Fensters Änderungen vornehmen – die Seite visuell bearbeiten oder ihren Code bearbeiten.
Teilen – Aufteilen eines Fensters in zwei Teile – visuelle Bearbeitung und Codebearbeitung.
Bequemes Suchen/Ersetzen. Finden Sie eine Komponente in Sekundenschnelle!Der Editor verfügt über eine integrierte praktische Such-/Ersetzungsfunktion – der Traum eines jeden Content-Managers. Jetzt können Sie beispielsweise die gewünschte Komponente sofort finden und auf die Seite „ziehen“. Sie müssen sich nicht merken, wo es sich in der Komponentenstruktur befindet. Dies ist besonders wertvoll, wenn eine große Anzahl an Komponenten verwendet wird.
Der im Produkt integrierte visuelle Editor ist mit allen gängigen Browsern kompatibel. Der Editor funktioniert in allen gängigen Browsern gleichermaßen korrekt und nutzt die gleichen Funktionen. Sie können Seiten der Website in jedem Browser bearbeiten – das Ergebnis ist das gleiche.
„Aufräumen“ des Codes beim Einfügen von Code bereinigen!Der Editor übernimmt das Einfügen von Texten aus verschiedenen Quellen mit automatischer Inhaltsbereinigung. Beim Kopieren von Texten, beispielsweise aus Word, wird der Code in HTML5 konvertiert. Alle unnötigen – unbedeutenden Tags – werden aus dem Code entfernt.
Webentwickler werden die Implementierung der Funktionalität des Komponenten-Panels und des Snippet-Panels (in einer Folie) zu schätzen wissen. Sie erhalten außerdem die Möglichkeit zur Anpassung auf JS-Ebene und ein erweitertes Ereignismodell.
Gültiges und korrektes HTML5. Mit Validierung – alles in Ordnung!HTML5 kommt nicht erst, es ist bereits da. Mit Ihrem integrierten visuellen Editor müssen Sie sich keine Gedanken über die Gültigkeit und Richtigkeit des Seitencodes auf Ihrer Website machen. Der Editor generiert genau den Code, der von modernen Browsern korrekt wahrgenommen wird.
Es ist nicht erforderlich, den richtigen Code manuell zu schreiben
Dieser Editor ist in Ihre Website integriert und Ihr Content-Manager muss sich keine Gedanken darüber machen, welche Strukturelemente zum Markieren von Texten verwendet werden.
Warum benötigen Sie gültiges HTML5?
Die Vorteile der Umstellung auf gültiges HTML5 sind unbestreitbar; sie werden seit langem von Webentwicklern diskutiert (z. B.
All dies ist der neuen verwalteten Caching-Technologie (Cache Dependencies) zu verdanken, die genau der komfortablen Bedienung des Inhaltseditors und der automatischen Aktualisierung der Daten unmittelbar nach der Änderung dient. Mit dieser Technologie können Sie Änderungen auf der Site anzeigen, ohne auf die Aktualisierung des Caches warten zu müssen, die das System in bestimmten Zeiträumen durchführt. Aus diesem Grund ist dies eine der wichtigsten technologischen Komponenten für ein komfortables Benutzererlebnis auf der Website.
- Um die Website zu beschleunigen und das Projekt zu skalieren, empfehlen wir die Unterstützung der Autocaching-Technologie und die Verwendung der Managed Caching-Technologie.
- Automatisch+verwaltet
Für Entwickler
„Hermitage“ für Webentwickler Das „Hermitage“-Konzept umfasst eine ganze Reihe technologischer Empfehlungen für Webentwickler. Dies ist eine beeindruckende Liste mit Empfehlungen für die „richtige“ Erstellung Ihrer Anwendungen. Dies ist ein Hermitage-Konzept für Entwickler, das genau zeigt, wie Anwendungen für die Bitrix-Plattform entwickelt werden. Entwickeln Sie diese Anwendungen so, dass sie Komfort und Benutzerfreundlichkeit in der Hermitage-Benutzeroberfläche bieten. Die meisten dieser Empfehlungen sind erfahrenen Entwicklern wohlbekannt.Empfehlungen für Webentwickler:
- Design. Durchgeführt gemäß. Besonders in jenen Momenten, die sich auf die Erstellung einer eigenen Designvorlage und deren Anwendung beziehen. Wir haben versucht, Steuerungsschnittstellen so zu entwickeln, dass Webentwickler nicht in den Layout- und Gestaltungsmöglichkeiten eingeschränkt werden.
- Es wird empfohlen, Standardmenükomponenten mit Caching in der Site-Vorlage zu verwenden. ()
- Es wird empfohlen, eine Website mit zu erstellen. Verwenden Sie entweder Standardkomponenten oder erstellen Sie für die Zwecke des Projekts benutzerdefinierte Komponenten für dessen spezifische Anforderungen.
- Wir empfehlen es, wenn Sie das Erscheinungsbild anpassen. Dadurch wird ihre Sicherheit bei der Aktualisierung des Produkts gewährleistet. Sie können die Vorlage im Bearbeitungsmodus direkt von der öffentlichen Schnittstelle kopieren. Eine Komponente kann eine unbegrenzte Anzahl von Vorlagen haben.
- Wenn Sie die 1C-Bitrix-Komponente ändern oder eine eigene Komponente erstellen, empfehlen wir Ihnen, diese zu erstellen.
- Bei der Entwicklung von Komponenten können Sie berücksichtigen.
- Der Einsatz wird bei der Erstellung komplexer Funktionen oder mehrseitiger Ansichten empfohlen, wenn die Verknüpfung einzelner Komponenten für Benutzer schwierig ist.
- Um die Website zu beschleunigen und das Projekt zu skalieren, empfehlen wir die Unterstützung der Autocaching-Technologie und die Verwendung der Managed Caching-Technologie.
- Beim Einrichten von Komponenten empfiehlt es sich, die Komponentenparameter auf „Automatisch+Verwaltet“ mit einer langen Caching-Zeit einzustellen (1–12 Monate, wenn Sie vollständig mit der Cache-Abhängigkeitstechnologie arbeiten).
- Es ist wünschenswert, dass die Komponente im Autocaching-Modus keine Abfragen an die Datenbank ausführt oder nur solche Abfragen ausführt, für die das Caching irrational ist.
- Wo möglich ist eine Unterstützung zur Suchmaschinenoptimierung wünschenswert.
- Wir empfehlen Unterstützung für die Verwaltung von Listenelementen über die Produkt-API. Dadurch können Benutzer Elemente direkt auf den Seiten der Website bearbeiten und löschen.
- Es wird empfohlen, große Entwicklungen in eigene Module mit einer API zu konzipieren und eigene Komponenten darin einzubinden. Mit ihrer anschließenden Platzierung in MarketPlace und der Möglichkeit zur Aktualisierung mithilfe der SiteUpdate-Technologie. ()
- Es wird empfohlen, die Plattform-API zu verwenden, um mit Systemobjekten zu arbeiten. Höchst unerwünschte direkte Abfragen an die Datenbank. Dies kann dazu führen, dass Produktaktualisierungen nicht mit der Implementierung des Partners kompatibel sind.
- Wahrung der Integrität des Produktkerns und Nutzung unserer Empfehlungen bei der Umsetzung des Projekts, um die Fähigkeit zur Aktualisierung des Produkts mithilfe der SiteUpdate-Aktualisierungstechnologie sicherzustellen. Nutzen Sie das interne Ereignissystem, um die Logik des Produkts zu ändern oder das Erscheinen neuer Ereignisse anzufordern. (
Derzeit sind etwa 11–12 % der 100.000 meistbesuchten Websites responsiv, und es besteht kein Zweifel, dass diese Zahl in den nächsten Jahren noch steigen wird.
Da immer mehr Unternehmen die Ärmel hochkrempeln, um die Realitäten des Internets über mehrere Geräte hinweg zu nutzen, lohnt es sich, einen Blick auf die verschiedenen Strategien zu werfen, mit denen dieses Nirvana erreicht wird:
Adaptive ModernisierungBeim Responsive Redesign handelt es sich um den Prozess, eine vorhandene, nur für den Desktop verfügbare Website zu übernehmen und sie im Wesentlichen „responsiv umzugestalten“.
Bei vorgefertigten Websites (insbesondere kommerziellen) haben Teams nicht immer die Möglichkeit, alles zu verwerfen und neu zu erstellen.
Dan Cederholm
Für die meisten Unternehmen kommt die groß angelegte Erstellung eines neuen Designs von Grund auf noch nicht einmal in Betracht. Aus diesem Grund ist die reaktionsfähige Modernisierung ein beliebter Ansatz, um ein gutes Erlebnis für mobile Geräte zu schaffen.
Vorteile- Relativ schnell.
Es gibt viele Möglichkeiten, eine responsive Modernisierung durchzuführen. Diese Strategie könnte darin bestehen, der Site eine Datei „small-screens.css“ hinzuzufügen. Trotz dieses eher groben Beispiels ist die adaptive Modernisierung für viele Organisationen eine attraktive Option, da nicht alles von Grund auf neu aufgebaut werden muss. - Vertraut.
Verwirrt Benutzer nicht. Die Menschen haben Jahre damit verbracht, sich an die Benutzeroberfläche zu gewöhnen, und durch die Modernisierung der bestehenden Benutzeroberfläche behalten Unternehmen einen vertrauten Ansatz bei und verbessern gleichzeitig das Leben von Menschen mit mobilen Geräten. - Organisatorisch schneller.
Politisch gesehen ist eine Modernisierung der Schnittstelle sicherer, als bei Null anzufangen. Es wird weniger Debatten darüber geben, welchen Grünton man wählen soll, welche trivialen Stockfotos man verwenden soll, und das Management muss sich nicht die Arme verdrehen. Dadurch können Teams reaktionsfähige Websites schneller starten.
- Betrifft nur einen kleinen Teil.
Auch hier gibt es viele Möglichkeiten für einen Umbau, aber das Ziel der meisten davon besteht darin, „es hübsch zu machen“. Durch die Konzentration auf die Neugestaltung des Layouts werden bei Neugestaltungen häufig die unzähligen anderen Faktoren außer Acht gelassen, die bei der Erstellung eines erfolgreichen Designs für eine Vielzahl von Geräten berücksichtigt werden müssen. - 10 Liter Wasser in einem Drei-Liter-Glas.
Da Desktop-Sites nur für Desktop-Computer konzipiert sind (und oft eine lange Lebensdauer haben), können sie viel Unordnung enthalten. Und da die Modernisierung hauptsächlich darin besteht, das Layout neu zu verschmelzen, werden die meisten inhaltlichen Probleme nicht vollständig berücksichtigt. - Leistung.
Es ist seltsam, Code zu schreiben, um kleine Geräte besser zu unterstützen. Das Entfernen unnötiger Dinge kann zu weit gehen, aber ohne Fokus auf die Produktivität wird es nicht von alleine wachsen. - Schlechtester Support.
Medienabfragen, die ursprünglich für Desktop-Computer entwickelt wurden, werden auf den meisten Mobilgeräten nur unzureichend unterstützt. - Vorübergehende Korrekturen.
Ich sterbe, wenn ich höre, wie Leute mich bitten, etwas „responsiv“ zu machen, als wäre es nur ein Kontrollkästchen im Projektplan (was manchmal tatsächlich der Fall ist). Diese Art des begrenzten Denkens lässt die echten Chancen außer Acht, die Responsive Design bietet.
Responsive mobile Websites, oder wie ich sie nenne, „Samen für eine responsive Zukunft“, sind die Praxis, eine separate Website im Format „m.yourdomain.ru“ mithilfe von Responsive-Design-Techniken zu erstellen. Websites wie The BBC, The Guardian und Entertainment Weekly (an denen ich gearbeitet habe) verwenden diese Strategie.
Die mobile Version gibt Ihnen die Möglichkeit, einen Samen zu pflanzen, der aus Ihrer alten Website wachsen wird.
Im Laufe der Zeit kann eine veraltete Website entfernt werden, und die Website wird sich von einer mobilorientierten, reaktionsfähigen Website unter Berücksichtigung zukünftiger Trends weiterentwickeln.
- Geringeres Risiko.
Die meisten Unternehmen betrachten den Datenverkehr über mobile Geräte immer noch als eine Minderheit. Die Einführung einer auf Mobilgeräte reagierenden Website ermöglicht es diesen Organisationen also, die Möglichkeiten auszuprobieren, ohne sich direkt in das Thema stürzen zu müssen. - Eine Gelegenheit zu lernen, flexibel zu sein.
Designer können lernen, flexibler zu denken. Entwickler lernen die unzähligen Tricks von Android-Geräten kennen. Manager können herausfinden, wie sie sich von der Pixelperfektion entfernen können. Eine responsive mobile Website kann eine großartige Sandbox zum Lernen sein. - Infrastruktur.
Teams können lernen, wie sie Content-Management-Probleme wie die Bilderstellung ein für alle Mal lösen können - Überschuss entfernen.
Dieser Ansatz bietet Teams eine großartige Gelegenheit, sich zu fragen: „Brauchen wir das wirklich?“ und sich gleichzeitig auf die Leistung zu konzentrieren. Warum? Denn ihr Hauptaugenmerk liegt auf der Verbesserung der Benutzererfahrung ihrer Website auf Mobilgeräten. - Die Zukunft sind Mobile-First-Websites.
Obwohl es diesen mobilen Websites zunächst an Inhalt und Funktionalität mangelt, können sie mit genügend Zeit und Mühe schließlich ihre Ganzseiten-Vorgänger ersetzen.
- Es ist immer noch eine mobile Website.
Unabhängig davon, ob es responsiv ist oder nicht, weist dieser Ansatz immer noch zahlreiche Nachteile mobiler Websites auf: Probleme mit der URL-Umleitung, der Inhaltsverwaltung, konsistenten Inhalten, Konsistenz, SEO-Optimierung und anderen. - Vorübergehende Korrekturen.
Viele mobile Websites werden als Pflaster entwickelt, um die Blutung zu stoppen. Solche Websites werden mit dem Ziel erstellt, den wachsenden Datenverkehr von Mobilgeräten zu entlasten. Diese Lösungen erfüllen möglicherweise immer noch bestehende Anforderungen, aber angesichts zukünftiger Trends ist es unwahrscheinlich, dass sie Ihnen auf lange Sicht eine Rettung bringen. - Die Wahrscheinlichkeit, dass der Weinstock verdorrt.
Manche Organisationen starten solche Projekte möglicherweise, schaffen es zur Hälfte und lassen das Ganze dann fallen, bis der Haushalt für das nächste Jahr verabschiedet ist. - Design für kleine Bildschirme.
Da der Fokus zunächst auf kleinen Bildschirmen liegt, kann die spätere Portierung der Schnittstelle auf größere Displays ohne Qualitätsverlust eine Herausforderung darstellen.
Studierende, Doktoranden und junge Wissenschaftler, die die Wissensbasis in ihrem Studium und ihrer Arbeit nutzen, werden Ihnen sehr dankbar sein.
Veröffentlicht am http://allbest.ru
1. Adaptive Modernisierung
2. Responsive mobile Websites
3.Responsives Design nativ für mobile Geräte
4. Stufenstrategie
1. Adaptive Modernisierung
Unter Responsive Redesign versteht man den Prozess, bei dem eine vorhandene, nur für den Desktop verfügbare Website übernommen und im Wesentlichen responsiv gestaltet wird.
Derzeit sind etwa 11–12 % der 100.000 meistbesuchten Websites responsiv, und es besteht kein Zweifel, dass diese Zahl in den nächsten Jahren noch steigen wird. Da immer mehr Unternehmen die Ärmel hochkrempeln, um sich den Realitäten des Multi-Device-Webs zu stellen, lohnt es sich, einige Strategien in Betracht zu ziehen, um das Nirvana zu erreichen:
Bei vorgefertigten Websites (insbesondere kommerziellen) haben Teams nicht immer die Möglichkeit, alles zu verwerfen und neu zu erstellen. Für die meisten Unternehmen kommt die groß angelegte Erstellung eines neuen Designs von Grund auf noch nicht einmal in Betracht. Aus diesem Grund ist die reaktionsfähige Modernisierung ein beliebter Ansatz, um ein gutes Erlebnis für mobile Geräte zu schaffen.
Vorteile:
· Relativ schnell. Da es nicht erforderlich ist, alles von Grund auf neu zu erstellen.
· Vertraut. Verwirrt Benutzer nicht. Die Menschen haben Jahre damit verbracht, sich an die Benutzeroberfläche zu gewöhnen, und durch die Modernisierung der bestehenden Benutzeroberfläche behalten Unternehmen einen vertrauten Ansatz bei und verbessern gleichzeitig das Leben von Menschen mit mobilen Geräten.
· Organisatorisch schneller. Das Aktualisieren der Schnittstelle ist sicherer und einfacher, als bei Null anzufangen.
Mängel:
· Betrifft nur einen kleinen Teil. 10 Liter Wasser in einem Drei-Liter-Glas. Viel Inhalt
· Produktivität.
· Schlechtester Support. Medienabfragen, die ursprünglich für Desktop-Computer entwickelt wurden, werden auf den meisten Mobilgeräten nur unzureichend unterstützt.
2. Responsive mobile Websites
Unter Responsive Mobile-Websites versteht man die Erstellung einer separaten Website im Format „m.yourdomain.ru“ mithilfe von Responsive-Design-Techniken.
Die mobile Version gibt Ihnen die Möglichkeit, einen Samen zu pflanzen, der aus Ihrer alten Website wachsen wird. Im Laufe der Zeit kann eine veraltete Website entfernt werden, und die Website wird sich von einer mobilorientierten, reaktionsfähigen Website unter Berücksichtigung zukünftiger Trends weiterentwickeln.
Vorteile:
· Geringeres Risiko. Der Verkehr von mobilen Geräten ist eine Minderheit.
· Eine responsive mobile Website kann eine großartige Sandbox zum Lernen sein.
· Entfernen Sie unnötige Dinge. Dieser Ansatz bietet Teams eine großartige Gelegenheit, sich zu fragen: „Brauchen wir das wirklich?“ und sich gleichzeitig auf die Leistung zu konzentrieren.
· Die Zukunft sind Mobile-First-Websites. Obwohl es diesen mobilen Websites zunächst an Inhalt und Funktionalität mangelt, können sie mit genügend Zeit und Mühe schließlich ihre Ganzseiten-Vorgänger ersetzen.
Mängel:
· Dies ist immer noch eine mobile Website. Unabhängig davon, ob es responsiv ist oder nicht, weist dieser Ansatz immer noch zahlreiche Nachteile mobiler Websites auf: Probleme mit der URL-Umleitung, der Inhaltsverwaltung, konsistenten Inhalten, Konsistenz, SEO-Optimierung und anderen.
· Vorübergehende Korrekturen. Viele mobile Websites werden als Pflaster zur Blutstillung entwickelt. Solche Websites werden mit dem Ziel erstellt, den wachsenden Datenverkehr von Mobilgeräten zu entlasten. Diese Lösungen erfüllen möglicherweise immer noch bestehende Anforderungen, aber angesichts zukünftiger Trends ist es unwahrscheinlich, dass sie Ihnen auf lange Sicht eine Rettung bringen.
· Chance, am Rebstock zu verdorren.
· Design für kleine Bildschirme. Da der Fokus zunächst auf kleinen Bildschirmen liegt, kann die spätere Portierung der Schnittstelle auf größere Displays ohne Qualitätsverlust eine Herausforderung darstellen.
3. Responsives Design nativ für mobile Geräte
Design der Smartphone-Schnittstelle
„Mobile First“ ist ein Prinzip, bei dem eine Benutzeroberfläche entworfen wird, die die Einschränkungen der mobilen Umgebung (kleiner Bildschirm, geringe Bandbreite usw.) berücksichtigt, aber die Vorteile großer Bildschirme voll ausnutzt.
Vorteile:
· Starten Sie mit neuer Kraft. Mobile First – ein Neuanfang.
· Beste Unterstützung. Unterstützung für mehr mobile Geräte, insbesondere ältere, die keine Medienabfragen unterstützen.
· Produktivität. Während die Leistung einer Website in erster Linie eine Funktion ihrer Implementierung ist, geben mobile responsive Designs Teams die Möglichkeit, sich von Anfang an auf die Leistung zu konzentrieren.
· Alles auf einmal berücksichtigen. Ein Mobile-First-Design kann (trotz seines Namens) ein breites Spektrum an Auflösungen unterstützen und ist nicht nur auf eine Geräteklasse ausgerichtet.
· Zukunftssicheres Design.
Mängel:
· Nehmen Sie sich viel Zeit
Bewusstseinswandel
· Organisatorisch schwierig
· Unbekannt
4. Stufenstrategie
Eine schrittweise Responsive-Design-Strategie unterteilt eine groß angelegte Kampagne in mehrere Schritte. Wie bei der Modernisierung (diese Strategien schließen sich nicht gegenseitig aus) ist eine groß angelegte Neugestaltung möglicherweise nicht möglich, weshalb einige Organisationen Schritt für Schritt vorgehen. Es gibt verschiedene Arten der schrittweisen Erstellung einer adaptiven Schnittstelle: Seite für Seite.
Vorteile:
· Auffällig
· Gelegenheit zu lernen, flexibel zu sein. Sie können alles über das Erstellen responsiver Schnittstellen lernen und dieses Wissen dann für den Rest der Website nutzen.
· Höhere Startchancen
Mängel:
Mangelnde Integrität
Möglichkeit des Absterbens am Rebstock
Gepostet auf Allbest.ru
Ähnliche DokumentePrinzipien und Methoden zur Entwicklung von Benutzeroberflächen, Regeln für deren Gestaltung. Klassische Möglichkeiten zum Prototypen von Benutzeroberflächen in Microsoft Expression Blend. Arbeiten mit Text und Grafiken in Expression Blend.
Kursarbeit, hinzugefügt am 19.03.2012
Die Entstehungsgeschichte des Internets und seine Grundprinzipien: Protokolle, Dienste, Dienste. Definition der Konzepte Internetsucht, Trolling, Cyberpunk und Zensur. Klassifizierung und Anordnung von Websites, Entwicklung ihres Designs. Browser Mozilla Firefox und Opera.
Zusammenfassung, hinzugefügt am 10.11.2011
Überblick über Methoden und Tools zum Erstellen und Entwerfen von Websites. Programmiersprachen zum Erstellen von Websites. Analyse der Vor- und Nachteile von CMS-Content-Management-Systemen. Entwicklung von Website-Design und -Layout. Berechnung der Produktentwicklungskosten.
Dissertation, hinzugefügt am 02.06.2016
Analyse grafischer Benutzeroberflächen moderner Programmoptimierungssysteme. Erstellung eines mathematischen Modells und Algorithmus des SBkZ_PP-Steuerungssystems, seines architekturkontextuellen Diagramms. Technische Dokumentation der Software.
Dissertation, hinzugefügt am 18.04.2012
Überprüfung und Analyse der eingesetzten Technologien, Inhalte und Gestaltung universitärer Webseiten, auch solcher, die auf Basis eines CMS erstellt wurden. Recherche des Inhalts der PRIPIT-Website und des Informationsbedarfs verschiedener Gruppen ihrer potenziellen Besucher. Entwicklung des Website-Designs.
Dissertation, hinzugefügt am 11.03.2010
Bildschirmgrafische Komponenten, Systemobjekte und Funktionen. Ein System von Mitteln zur Benutzerinteraktion mit einem Gerät. Geschichte der grafischen Benutzeroberflächen von Personalcomputern, ihre Klassifizierung. X-Window-System.
Präsentation, hinzugefügt am 22.05.2012
Auswahl von Methoden zum Aufbau und Design einer Internetseite zur Entwicklung einer Website für ein Handelsunternehmen. Merkmale der Arbeit mit Webdesign-Elementen: Schriftart, Titel, Grafiken. Gesetzliche Regelung der Erstellung und Nutzung von Internetseiten.
Dissertation, hinzugefügt am 11.11.2010
Eigenschaften von Informcomputerhierarchischer Systeme. Das Prinzip des „Feedbacks“. Eigenschaften, Einfachheit und Regeln zum Erstellen von Hardware-Software-Schnittstellen. Neue Wege im Design von Computersystemen.
Kursarbeit, hinzugefügt am 01.05.2017
Analyse der Medien des Beratungsgeschäfts: Ein Überblick über Programmiersprachen und Software zur Erstellung von Websites, Informationssystemen und Websites von Beratungsunternehmen. Geschäftsprozessmodellierung. Entwicklung einer Internetpräsenz.
Dissertation, hinzugefügt am 11.04.2012
Entwicklung eines Internetdienstes zur Erstellung einer visuellen Schnittstelle für Systemdienste eines Hosting-Unternehmens. Kriterien zur Bewertung der Schnittstelle und Entwicklungsrichtungen. GlideOS-Desktop. Auswahl von Service-Architektur, Programmiersprache und Kommunikationsmethoden.
Adaptives Layout verändert das Seitendesign je nach Benutzerverhalten, Plattform, Bildschirmgröße und Geräteausrichtung und ist ein integraler Bestandteil der modernen Webentwicklung. Dadurch können Sie erheblich sparen und müssen nicht für jede Auflösung ein neues Design zeichnen, sondern die Größe und Position einzelner Elemente ändern.
In diesem Artikel werden die Hauptelemente der Website und deren Anpassung erläutert.
Anpassen der BildschirmauflösungIm Prinzip kann man Geräte in verschiedene Kategorien einteilen und für jede davon ein eigenes Design entwerfen, aber das wird zu viel Zeit in Anspruch nehmen, und wer weiß, welche Standards in fünf Jahren sein werden? Darüber hinaus verfügen wir laut Statistik über eine ganze Reihe unterschiedlicher Auflösungen:
Es wird deutlich, dass wir nicht weiterhin für jedes Gerät einzeln entwerfen können. Aber was tun?
Teillösung: Alles flexibel machenNatürlich ist dies keine perfekte Methode, aber sie beseitigt die meisten Probleme.
Ethan Marcotte hat eine einfache Vorlage erstellt, die die Verwendung eines responsiven Layouts demonstriert:
Auf den ersten Blick scheint alles einfach zu sein, aber das ist nicht der Fall. Schauen Sie sich das Logo an:
Wenn Sie das gesamte Bild verkleinern, werden die Beschriftungen unleserlich. Um das Logo zu speichern, wird das Bild daher in zwei Teile geteilt: Der erste Teil (Abbildung) dient als Hintergrund, der zweite (Logo) ändert proportional seine Größe.
Das h1-Element enthält ein Bild als Hintergrund, und das Bild ist am Hintergrund des Containers (Header) ausgerichtet.
Flexible BilderDie Arbeit mit Bildern ist eines der wichtigsten Probleme bei der Arbeit mit responsivem Design. Es gibt viele Möglichkeiten, die Größe von Bildern zu ändern, und die meisten davon sind recht einfach umzusetzen. Eine Lösung besteht darin, max-width in CSS zu verwenden:
Bild (maximale Breite: 100 %;)
Die maximale Breite eines Bildes beträgt 100 % der Breite des Bildschirms oder Browserfensters. Je kleiner die Breite, desto kleiner das Bild. Beachten Sie, dass max-width im IE nicht unterstützt wird. Verwenden Sie daher width: 100% .
Die vorgestellte Methode ist eine gute Option zum Erstellen adaptiver Bilder. Wenn wir jedoch nur die Größe ändern, bleibt das Gewicht des Bildes gleich, was die Ladezeit auf Mobilgeräten verlängert.
Ein anderer Weg: Responsive BilderDie von der Filament Group eingeführte Technik ändert nicht nur die Größe von Bildern, sondern komprimiert auch die Auflösung von Bildern auf kleinen Bildschirmen, um das Laden zu beschleunigen.
Für diese Technik sind mehrere auf Github verfügbare Dateien erforderlich. Zuerst nehmen wir die JavaScript-Datei ( rwd-images.js), Datei .htaccess Und rwd.gif(Bilddatei). Dann verwenden wir etwas HTML, um große und kleine Auflösungen zuzuordnen: zuerst ein kleines Bild mit einem Präfix .R(um zu zeigen, dass das Bild responsive sein sollte), verlinken Sie dann mit data-fullsrc auf das große Bild:
Für jeden Bildschirm, der breiter als 480 Pixel ist, wird ein Bild mit höherer Auflösung geladen ( largeRes.jpg), und auf kleinen Bildschirmen wird es geladen ( smallRes.jpg).
Das iPhone und der iPod Touch verfügen über eine Funktion: Ein für große Bildschirme erstelltes Design wird in einem Browser mit niedriger Auflösung einfach verkleinert, ohne dass ein Scrollen oder zusätzliches mobiles Layout erforderlich ist. Bilder und Text sind jedoch nicht sichtbar:
Um dieses Problem zu lösen, verwenden Sie das Meta-Tag:
Wenn der Anfangsmaßstab gleich eins ist, entspricht die Breite der Bilder der Breite des Bildschirms.
Anpassbare SeitenlayoutstrukturBei erheblichen Änderungen der Seitengröße müssen Sie möglicherweise die Gesamtanordnung der Elemente ändern. Dies kann bequem über eine separate Styles-Datei oder, noch effizienter, über eine CSS-Medienabfrage erfolgen. Es sollte keine Probleme geben, da die meisten Stile gleich bleiben und sich nur wenige ändern.
Beispielsweise haben Sie eine Hauptstildatei, die #wrapper, #content, #sidebar, #nav sowie Farben, Hintergrund und Schriftarten angibt. Wenn Ihr Layout aufgrund Ihrer Master-Stile zu schmal, zu kurz, zu breit oder zu hoch ist, können Sie dies erkennen und neue Stile hinzufügen.
style.css (Haupt):
/* Grundlegende Stile, die vom untergeordneten Stylesheet geerbt werden */ html,body( Hintergrund... Schriftart... Farbe... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Strukturelemente */ #wrapper( Breite: 80 %; Rand: 0 automatisch; Hintergrund: #fff; Polsterung: 20 Pixel; ) #content( Breite: 54 %; Float: links; Rand rechts: 3 %; ) # sidebar-left( width: 20 %; float: left; margin-right: 3 %; ) #sidebar-right( width: 20 %; float: left; )
mobile.css (untergeordnetes Element):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: Both; /* Zusätzliche Stile für das neue Design */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: Both; /* Zusätzlicher Stil für unser neues Layout */ border-top: 1px solid #ccc; margin-top: 20px; )
Auf einem Breitbildschirm passen die linke und rechte Seitenleiste gut an die Seite. Bei schmaleren Bildschirmen sind diese Blöcke aus praktischen Gründen untereinander angeordnet.
CSS3-MedienabfragenSchauen wir uns an, wie Sie CSS3-Medienabfragen verwenden können, um responsive Designs zu erstellen. min-width gibt die Mindestbreite des Browserfensters oder -bildschirms an, auf das bestimmte Stile angewendet werden. Wenn ein Wert unter min-width liegt, werden die Stile ignoriert. max-width bewirkt das Gegenteil.
@media screen und (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
Die Medienabfrage funktioniert nur, wenn die Mindestbreite größer oder gleich 600 Pixel ist.
@media screen und (max-width: 600px) ( .aClassforSmallScreens ( klar: beide; Schriftgröße: 1,3em; ) )
In diesem Fall ist die Klasse ( eine Klasse für kleine Bildschirme) funktioniert, wenn die Bildschirmbreite kleiner oder gleich 600 Pixel ist.
Während „min-width“ und „max-width“ sowohl für die Bildschirmbreite als auch für die Breite des Browserfensters gelten können, müssen wir möglicherweise nur mit der Gerätebreite arbeiten. Um beispielsweise Browser zu ignorieren, die in einem kleinen Fenster geöffnet sind. Sie können hierfür „min-device-width“ und „max-device-width“ verwenden:
@media screen und (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen und (min-device-width: 768px) ( .minimumiPadWidth ( clear: Both; margin-bottom : 2px solide #ccc; ) )
Speziell für das iPad haben Medienabfragen die Eigenschaft Orientierung, deren Werte entweder sein können Landschaft(horizontal), oder Porträt(Vertikale):
@media-Bildschirm und (Ausrichtung: Querformat) ( .iPadLandscape ( Breite: 30 %; schweben: rechts; ) ) @media-Bildschirm und (Ausrichtung: Hochformat) ( .iPadPortrait ( klar: beide; ) )
Sie können Medienabfragewerte auch kombinieren:
@media screen und (min-width: 800px) und (max-width: 1200px) ( .classForaMediumScreen (background: #cc0000; width: 30%; float: right; ) )
Dieser Code wird nur für Bildschirme oder Browserfenster mit einer Breite zwischen 800 und 1200 Pixel ausgeführt.
Sie können ein bestimmtes Blatt mit Stilen für verschiedene Medienabfragewerte wie folgt laden:
JavaScript
Wenn Ihr Browser keine CSS3-Medienabfragen unterstützt, kann die Stilersetzung mit jQuery erfolgen:
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Wenn die Breite ist weniger als 600 px, mobiles Stylesheet wird verwendet if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Wenn die Breite größer als 600 px ist, wird das Desktop-Stylesheet verwendet $("link").attr((href: "style.css")); ) ) ));
Optionale InhaltsanzeigeDie Möglichkeit, Elemente zu verkleinern und neu anzuordnen, damit sie auf kleine Bildschirme passen, ist großartig. Dies ist jedoch nicht die beste Option. Mobilgeräte weisen in der Regel ein breiteres Spektrum an Änderungen auf: vereinfachte Navigation, fokussiertere Inhalte, Listen oder Zeilen anstelle von Spalten.
Glücklicherweise gibt uns CSS die Möglichkeit, Inhalte unglaublich einfach anzuzeigen und auszublenden.
Anzeige: keine;
display: none wird für Objekte verwendet, die ausgeblendet werden müssen.
Hier ist unser Markup:
Hauptinhalt Eine linke Seitenleiste. Eine rechte Seitenleiste
style.css (Haupt):
#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )
mobile.css (vereinfacht):
#content( Breite: 100 %; ) #sidebar-left( Anzeige: keine; ) #sidebar-right( Anzeige: keine; ) .sidebar-nav( Anzeige: inline; )
Wenn die Bildschirmgröße reduziert wird, können Sie beispielsweise mithilfe eines Skripts oder einer alternativen Styling-Datei den Leerraum vergrößern oder die Navigation für mehr Komfort ersetzen. Durch die Möglichkeit, Elemente auszublenden und anzuzeigen, die Größe von Bildern, Elementen zu ändern und vieles mehr, können Sie das Design an jedes Gerät und jeden Bildschirm anpassen.
Wie Yandex Ihre Daten und maschinelles Lernen nutzt, um Dienste zu personalisieren –.
