it-swarm.com.de

Ist dies ein Fall, in dem ich Responsive Design anwenden sollte?

Ich bin kein großartiger Grafikdesigner oder UI-Designer. Ich entwickle ein Plugin mit einem Popup-Fenster beim Klicken auf einen Link auf Webseiten. Der Effekt ist ähnlich wie dieser:

enter image description here

http://fancybox.net/

Anstelle von Bildern wie bei Fancybox besteht unser Inhalt jedoch aus Text, der möglicherweise mit kleinen Bildern gemischt wird.

Wenn Sie auf einen Link klicken, wird das Popup angezeigt und der Hintergrundinhalt ausgeblendet. Ich weiß nur nicht, wie groß dieses Popup sein soll und ob es reagieren soll oder nicht. Das heißt, wenn die Größe des Fensters geändert wird, sollte die Größe des Popup-Felds geändert werden.

Warum sollte ich ein Popup-Fenster aktivieren? Wann sollte ich Responsive Design anwenden? Welchen Zweck erfüllt es? (Ich habe bereits eine alternative mobile Version, so dass aus der Gleichung herausgenommen werden kann)

Mein Popup ist hier zu sehen:

enter image description here

http://jacksongariety.com/ (Klicken Sie auf das Wort "Hipster" in der Kopfzeile)

6
Jackson

Pop-up-Boxen funktionieren mit reaktionsschnellen Designs normalerweise nicht sehr gut. Für größere Bildschirme funktionieren sie gut, aber auf Mobilgeräten können sie sehr unpraktisch sein und manchmal überhaupt nicht funktionieren. Ich würde mich nicht so sehr um die Größenänderung des Bildschirms kümmern und mich mehr darauf konzentrieren, die Implementierung für kleine Bildschirme anzupassen. Vielleicht könnten Sie den Link dazu bringen, auf Mobilgeräten zu einer anderen Seite zu gelangen, anstatt ein Popup zu verwenden?

3
Shawn

Wie so viele Dinge in UX hängt es wirklich vom Kontext ab. Es hört sich so an, als würden Sie ein echtes Modal erstellen ... was bedeutet, dass Sie alle Seiteninteraktionen blockieren möchten, bis eine Person damit interagiert.

Bei kleinen Geräten sollten Sie dieses Modal so groß wie möglich gestalten, damit es leicht zu sehen/zu lesen/zu interagieren ist. Auf einem Desktop möchten Sie es wahrscheinlich nicht so groß haben.

Für den mobilen Einsatz habe ich in der Vergangenheit Folgendes getan:

  • nehmen Sie die Abmessungen des Ansichtsfensters
  • nehmen Sie die Bildlaufposition der Seite
  • rendern Sie das Modal so, dass es ungefähr 90% der Breite des Ansichtsfensters und etwas unterhalb der Stelle liegt, zu der die Seite gerade gescrollt wird.
  • machen Sie das Modal nicht größer als das Ansichtsfenster (wenn es mehr Inhalte gibt, als passen würden, würde ich behaupten, dass ein Modal hier die falsche Lösung ist)

Dann würde ich für den Desktop alles so lassen, wie es ist, aber nach maximalen Größen suchen. Zum Beispiel würde ich das Modal zu 90% zum Ansichtsfenster machen, bis eine beliebige Größe (z. B. 400 Pixel) erreicht ist. Zu diesem Zeitpunkt wäre es nicht mehr größer.

Was die Größenänderung im Browser angeht, ist es schön, sie zu haben, aber ich würde nicht schwitzen. Denken Sie daran, dass es bei Responsive Design mehr darum geht, mehrere Gerätebildschirmgrößen zu berücksichtigen, als um ein Layout zur Größenänderung von Flüssigkeiten.

3
DA01

Als Plugin wäre es cool, wenn das Popup reagieren würde. Es könnte Ihrem Plugin einen Vorsprung gegenüber anderen ähnlichen geben, die nicht reagieren - betrachten Sie es als Verkaufsargument. Es sieht auch besser aus, wenn jemand es beispielsweise auf seinem iPad geöffnet und dann auf Querformat umgeschaltet hat oder umgekehrt.

Responsive Design hebt ab und ich würde mir vorstellen, dass Kunden bald danach fragen werden. Der Vorteil für sie ist, dass Sie nicht eine Vielzahl von Websites für eine Vielzahl von Geräten erstellen müssen, sondern nur eine, die für die meisten, wenn nicht alle Auflösungen geeignet ist. Mit Benutzern, die das Web von einer Vielzahl von Geräten aus betrachten - Tablets, Mobiltelefone, große Monitore, kleine Monitore, Netbooks usw. - ist das Responsive Design eine fantastische Lösung, um sicherzustellen, dass der Benutzer Ihre Inhalte unabhängig von der Anzeige anzeigen kann auf welchem ​​Gerät sie sind.

0
DBUK