it-swarm-eu.dev

Eine Website für mehrere Client-Auflösungen

Ich denke immer wieder, dass das Erstellen einer einzelnen Website für mehrere Client-Auflösungen oder Bildschirmgrößen zwar harte Arbeit sein kann, aber weitaus wartbarer ist als das Erstellen einer separaten Website für jedes Gerät oder jede Auflösung.

Welche Design- oder Website-Bearbeitungsanwendungen kann ich gegebenenfalls verwenden, um bestimmte CSS- oder sogar Markup-Funktionen für Zielgeräte einer bestimmten Größe zu erstellen?

6

Dreamweaver CS5 unterstützt HTML 5-Medienabfragen, sodass Sie bestimmte CSS- und Vorschaufunktionen pro Bildschirmauflösung verwenden können. Das ist das einzige, was mir in den Sinn kommt, aber ich habe Dreamweaver noch nie gemocht und würde es nicht empfehlen.

2
fluxd

Eine einzelne Website für mehrere Kunden ist sicherlich wartbarer.

Das erste, was zu tun ist, ist, mehrere CSS-Dateien zu haben, die der Browser gemäß dem Attribut media aufnimmt:

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Sie können das Layout von Elementen und ihre Größe anpassen und einige davon sogar für kleinere Geräte ausblenden.

Wenn große Teile Ihres Layouts auf kleinen Geräten entfernt werden müssen, ist es besser, sie auf dem Server zu entfernen, um etwas Bandbreite zu sparen.

Die Bildschirmauflösung und Fenstergröße kann auf dem Client in Javascript bestimmt werden (dies ist der zuverlässigste Test screen.width/screen.height Und document.body.clientWidth/document.body.clientHeight). Während Sie sich auf dem Server befinden, müssen Sie sich hauptsächlich auf den Header HTTP_USER_AGENT verlassen (testen Sie ihn hier zusammen mit anderen Headern).

Eine weitere wichtige Technik besteht darin, die Verwendung von HTML-Tabellen für das Seitenlayout zugunsten von schwebende Blöcke aufzugeben, die sich besser an unterschiedliche Bildschirmauflösungen oder Fenstergrößen anpassen.

Achten Sie auch auf die tatsächliche Bildschirmgröße, da kleine Geräte in der Regel eine viel höhere Auflösung (DPI, Punkte pro Zoll) haben, die dazu führen kann, dass Dinge unlesbar werden.

Beide Techniken müssen kombiniert werden (Client- und Serverseite), um die besten Ergebnisse zu erzielen. Das Beispiel Responsive Web Design ist beeindruckend, aber Sie müssen die Techniken wirklich beherrschen, um dies zu erreichen, und es gibt immer noch Einschränkungen.

Ich denke, dass diese Frage, selbst wenn sie aufgrund neu verbundener mobiler Geräte gestellt wird, sogar für Computer in Betracht gezogen werden sollte, da der Benutzer die Größe des Browserfensters ändern kann.

5
Mart

Dies ist eine unverzichtbare Präsentation, die einen Mangel an der Art und Weise abdeckt, wie viele Medienabfragen verwenden: Überdenken des mobilen Webs .

Kurz gesagt, Mobiltelefone, die keine Medienabfragen unterstützen (und es gibt viele davon), können ein Styling für Desktop-Browser erhalten. Der hier empfohlene und von mir verwendete Ansatz beginnt mit Basisstilen für alle und fügt dann nach und nach Stile für Browser hinzu, die Medienabfragen unterstützen .

Siehe meine Antwort auf eine verwandte Frage bei Stack Overflow .

3
David Oliver

Nur CSS funktioniert dafür nicht, da Sie für die mobile Benutzeroberfläche und für PC/Mac ein sehr unterschiedliches Layout haben können. Nur eine kleine Idee liegt im serverseitigen Layout. Beispielsweise müssen Sie einen Teil der Seite rendern (Datenraster, Seitenleiste, Navigationsleiste usw.). Beispielsweise verwenden Sie ASP.NET als serverseitigen Prozessor. Dann schreiben Sie in Ihr Seitenlayout:

Für die Navigationsleiste:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Für Datagrid:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Dann im Codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

und so weiter.

Dann müssen Sie verschiedene Renderer für verschiedene Auflösungen schreiben (mobil/etc ...). * Für eine große Auflösung rendern Sie sortierbare Header, Sucher, Filter, Sortierer, scrollbare Inhalte, JQuery-Plugins usw. * Für eine kleine Auflösung rendern Sie nur ein einfaches HTML.

Hoffe die Hauptidee ist klar.

0
Genius

Sie benötigen nicht mehrere "Websites" für verschiedene Kunden (ich glaube nicht, dass dies jemand tut), aber Sie sollten mehrere Portale für verschiedene Besuchersegmente haben, z. B. Desktop/Laptop, Netbook/iPad/Smartphones und andere Handy, Mobiltelefon.

Während Sie mit CSS verschiedene Stylesheets für verschiedene Gerätetypen angeben können, ist dies in der Praxis problematisch. Viele Smartphones greifen nicht auf das mobile Stylesheet zu oder verwenden sowohl das mobile Stylesheet als auch das Bildschirm-Stylesheet.

Zweitens suchen Ihre verschiedenen Zielgruppensegmente nach unterschiedlichen Informationen. Beispielsweise ist ein mobiler Benutzer wahrscheinlich nicht daran interessiert, lange Artikel zu lesen oder hochauflösende Bilder oder Videos anzusehen. Ein separates Portal mit einer gezielten Benutzererfahrung wäre daher optimal. Aus diesem Grund bieten die meisten beliebten Dienste separate Portale für mobile Benutzer.

Drittens geht es bei der Wartbarkeit mehr um Organisation und Einfachheit als um Quantität. Sicher, Sie könnten ein einziges großes Stylesheet verwenden, das viele Cascading- und Browser-Hacks verwendet, um Ihre Hauptwebsite auf alle Clients zu übertragen. Dies ist jedoch wahrscheinlich schwieriger zu pflegen als 2-3 einfachere Stylesheets, die jeweils auf eine bestimmte Kundenklasse zugeschnitten sind.

Wenn Ihre Anwendung mithilfe der Domänenisolierung ordnungsgemäß modularisiert und unter Berücksichtigung von Bedenken entworfen wurde, sollte es recht einfach sein, neue benutzerdefinierte Portale für verschiedene Geräteklassen einzurichten. Wenn Sie ein MVC-Muster verwenden, müssen Sie lediglich neue Ansichten hinzufügen und weiterhin dieselben Modelle und Controller verwenden. Wenn Sie eine AJAX -Anwendung) entwerfen, können Sie die meisten Ansichten sogar wiederverwenden, indem Sie Webdienste erstellen.

0
Lèse majesté

Es würde von Ihrem Inhalt abhängen, aber Sie könnten Ihren Inhalt modularisieren.

Jedes Inhaltselement kann in einem schmalen Modul angezeigt werden, das in drei Spalten auf einem breiten Bildschirm angezeigt werden kann. Bei niedrigeren Auflösungen können Sie weniger Spalten verwenden.

Ein gutes Beispiel hierfür ist: http://colly.com/ Es gibt drei Layoutanpassungen, wenn Sie die Breite der Seite verringern. Wenn Sie dies als Richtlinie für Ihre eigene Site verwenden, können Sie jedes Modul und Seitenlayout mit 3 Variationen für jede dieser Breiten entwerfen.

Um dies zu implementieren, könnten Sie Module mit fester Größe (möglicherweise als Li) in einem Container haben, der die Größe anpasst. Sie können die Größe der Container mithilfe von jquery anpassen, um die Bildschirmbreite (und die Breitenänderung) zu ermitteln und dann eine Klasse hinzuzufügen/zu entfernen. Sie können Variationen der Elemente im Container erstellen, z. B.: ul.product_list li und ul.product_list_wide li

0
Leah

Wie andere bereits gesagt haben, würde ich CSS3-Medienabfragen verwenden, um auf mehrere Auflösungen abzuzielen. Abhängig von Ihrer Site/Anwendung ist dies möglicherweise nicht möglich. Dies setzt voraus, dass Sie für alle Erlebnisse denselben Inhalt verwenden und ihn je nach Bildschirmgröße unterschiedlich anzeigen (dies ist für ein mobiles Erlebnis nicht immer optimal).

Einige Ressourcen für die Verwendung dieser Technik wären:

Ein Artikel über Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/

Überdenken der mobilen Web-Diashow: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript zum Aktivieren von CSS3-Medienabfragen für Browser, die dies nicht nativ unterstützen: http://code.google.com/p/css3-mediaqueries-js/

Eine Auswahl von Medienabfragen für verschiedene Geräte und Größen: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Einige andere Beispiele: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- Website /

Leider gibt es kein WYSIWYG, das solche Dinge erledigt - Sie benötigen das Wissen und die Fähigkeiten, um dies von Hand umsetzen zu können.

Obwohl ich dagegen vorschlagen würde, gibt es Dienste wie Mobify, wenn Sie sich nur um Desktop-/Mobile-Ansichten kümmern. http://mobify.me/

0
RussellUresti