Antworten auf deine Fragen:
Neues Thema erstellen

touchscreen device vs. hover

K

kornyclown

Guest

Hallo miteinander,

ich stehe gerade vor einem Problem mit dem ich noch keine Erfahrung hab und konnte auch noch nichts hilfreiches im Netz finden.
Ich habe meine Seite gemacht () und dort ist, für den Profi leicht zu erkennen, ein Hovereffekt eingebaut. Jetz wollte ich letztens meine Seite jemandem zeigen der gerade nur sein Handy zur Hand hatte deshalb hatten wir uns das dann auf dem Handy angesehen. Dort wurde mir dann klar, dass ein Hovereffekt auf einem Gerät mit Touchscreen nich wirklich gut kommt weil der Nutzer beim Versuch die untergeordnete UL zu erreichen ja immer auf den Button touchen muss, wodurch er dann ja direkt zu diesem Hyperlink geleitet wird. Der Nutzer hat also garkeine Chance diese Menüpunkte zu erreichen.
Vorweg sei noch gesagt dass mir responsive Design schon ein Begriff ist und ich bin auch schon dabei Mobiledevice Versionen zu erstellen alledings habe ich dort ein Problem. Diese Designs sind in Schritten unterteilt, in verschiedene Auflösungen bis hin zu meiner Desktop Version die zuständig ist für Weiten ab 1100 px aufwärts und nur hier soll der Hovereffekt stattfinden, die Versionen darunter haben ein anderes Design ohne Hovereffekt. Es gibt blöderweise auch Tablets die eine Auflösung deutlich über 1100 px Weite haben, was ja bedeutet das diese dann wieder auf die Desktop Version zugreifen und wieder den Hovereffekt haben, auf einem Touchscreendevice wo der Hovereffekt nicht geht.

Kennt jemand eine kompetente Lösung für sowas? Kann man mit seinem responsive design auch ganz speziell eine Version für Touchscreenendgeräte erstellen.
Irgendwas wie:
Code:
@media touchscreen {
...
...
}
Ich konnte sowas leider noch nicht finden.
 
Zuletzt bearbeitet von einem Moderator:

patrick_l

Hat es drauf

AW: touchscreen device vs. hover

Es sind "nicht" die Pixel der einzelnen Devices relevant, sondern viel mehr die des eigentlichen Viewports. Also der Bereich ohne Browserleiste, Scroolbar etc. Auch ist es sinnvoll bereits bei der Konzeption der Website zu überlegen, ob und wie die Website für mobile Devices angepasst werden soll.

Du kannst unter anderem mit Media Queries arbeiten und so einzelnen Geräte mit Auflösungen XY ansprechen. Je nachdem welche Anpassungen du definiert hast, werden diese nur von Geräten mit Auflösungen "von bis" berücksichtigt. Zum Thema Responsive Webdesign hat hier bereits einige gute Tutorials bzw. Video-Trainings veröffentlicht. Ich habe dir mal den 4 Teil heraus gesucht. Dort geht es um die besagt Media Queries.

-

Dann hier noch ein nützliches Framework:

- Skeleton Boilerplate » Responsive, Mobile-Friendly Development

Grüße Patrick
 
Zuletzt bearbeitet:

randacek_pro

Mod | Forum

AW: touchscreen device vs. hover

Hallo Korny,

in Simons verlinktem Artikel stehen die relevanten Tipps schon alle drin und auch Patrick hat dir schon wichtige Ansätze nahe gelegt... :)

Ich wollte nur noch ganz besonders auf die Deklarationen hinweisen, die dir bei Touchscreengeräten helfen können mit einer Displayauflösung +1100px, diese von normalen (Desktopscreens, etc.) zu unterscheiden.
Verwende doch etwas nach diesem Schema:
Code:
@media only screen and (min-device-width: 768px)
and (orientation : [B]portrait[/B])
oder
Code:
@media only screen and (min-device-width: 768px)
and (orientation : [B]landscape[/B])
Da diese Touchscreengeräte über Lagesensoren verfügen (im Gegensatz zu einem "normalen" Bildschirm auf dem Schreibtisch), kann man sie anhand dieser Werte identifizieren; geben sie als orientation "portrait" (Hochformat) aus, gilt dann dieses CSS, sind sie im Querformat (landscape), gilt jenes CSS.
Da diese Ausdrücke einer logischen Grammatik folgen, kannst du hier verschiedene Bedingungen so verketten, dass sie nur für das bestimmte Ausgabemedium gelten - ist also, wie im Beispiel, der Screen breiter als 768px, gibt aber keinen orientation-Wert zurück (landscape, oder portrait), da es sich nicht um ein entsprechendes mobiles Touchscreengerät handelt, wird an diese dann auch dein "normales" (hoover) CSS ausgeliefert.

Viele Grüße
 
K

kornyclown

Guest

AW: touchscreen device vs. hover

Hallo Korny,

in Simons verlinktem Artikel stehen die relevanten Tipps schon alle drin und auch Patrick hat dir schon wichtige Ansätze nahe gelegt... :)

Ich wollte nur noch ganz besonders auf die Deklarationen hinweisen, die dir bei Touchscreengeräten helfen können mit einer Displayauflösung +1100px, diese von normalen (Desktopscreens, etc.) zu unterscheiden.
Verwende doch etwas nach diesem Schema:
Code:
@media only screen and (min-device-width: 768px)
and (orientation : [B]portrait[/B])
oder
Code:
@media only screen and (min-device-width: 768px)
and (orientation : [B]landscape[/B])
Da diese Touchscreengeräte über Lagesensoren verfügen (im Gegensatz zu einem "normalen" Bildschirm auf dem Schreibtisch), kann man sie anhand dieser Werte identifizieren; geben sie als orientation "portrait" (Hochformat) aus, gilt dann dieses CSS, sind sie im Querformat (landscape), gilt jenes CSS.
Da diese Ausdrücke einer logischen Grammatik folgen, kannst du hier verschiedene Bedingungen so verketten, dass sie nur für das bestimmte Ausgabemedium gelten - ist also, wie im Beispiel, der Screen breiter als 768px, gibt aber keinen orientation-Wert zurück (landscape, oder portrait), da es sich nicht um ein entsprechendes mobiles Touchscreengerät handelt, wird an diese dann auch dein "normales" (hoover) CSS ausgeliefert.

Viele Grüße

Cool danke, das klingt doch nach genau dem Workaround nach dem ich gesucht hatte. Die Verschiedenen Viewportdimensionen oder Gerätedimensionen als Grundlage für die Endgerätanpassung zu benutzen war mir klar aber ich hatte keine Ahnung wie ich Laptops und PCs von Tablets und Smartphones unterscheiden kann aber das ist echt ein cooler Trick.

So nebenbei kennt vielleicht jemand ne Lösung wie ich auf meinem PC ein mobiles Gerät simulieren kann um in der Entwicklungsphase die funktionen zu testen. Ich meine damit nich einfach nur eine Simulation der Größe sondern alles, sprich Simulation der Größe, der Touchscreenfunktion, der Orientation, alles sowas. Gibt es sowas.
Sachen wie das hier kenn ich schon und helfen mir nich weiter, weil sie im Prinzip nur ein Browser in Form eines Smartphones sind. Ich brauche eine Simulation die die entsprechenden Funktionen eines Smartphones genau nachstellen. Andernfalls müsste ich immer den Kram auf den Server hochladen, übers Telefon testen, änderungen durchführen, hochladen, testen, und so weiter. Das kann keine Vorstellung von effektivem Workflow sein.
 

randacek_pro

Mod | Forum

AW: touchscreen device vs. hover

Wenn du ein mobiles Gerät auf einem PC simulieren willst, gibt es dafür schon Software, eben Emulatoren oder Simulatoren - das Touch-Verhalten genau zu simulieren dürfte aber schwierig sein, mangels eben jenes Features am "normalen" Desktop-PC
Über solche Emulatoren kannst du ja auch deinen lokalen Server ansprechen, womit der Upload entfällt...

Um mal ein paar Sachen für Androids zu testen, habe ich persönlich schon mal BlueStacks oder genutzt - ich glaube, so was gibt es auch für iPad-Simulationen (Ipadian), kann ich aber im Moment noch nicht soviel dazu sagen, da ich solche Simulatoren nie genutzt habe.

Viele Grüße
 
K

kornyclown

Guest

AW: touchscreen device vs. hover

Wenn du ein mobiles Gerät auf einem PC simulieren willst, gibt es dafür schon Software, eben Emulatoren oder Simulatoren - das Touch-Verhalten genau zu simulieren dürfte aber schwierig sein, mangels eben jenes Features am "normalen" Desktop-PC
Über solche Emulatoren kannst du ja auch deinen lokalen Server ansprechen, womit der Upload entfällt...

Um mal ein paar Sachen für Androids zu testen, habe ich persönlich schon mal BlueStacks oder genutzt - ich glaube, so was gibt es auch für iPad-Simulationen (Ipadian), kann ich aber im Moment noch nicht soviel dazu sagen, da ich solche Simulatoren nie genutzt habe.

Viele Grüße

Also es geht mir ja nicht darum die Touchfunktion so zu simulieren, dass ich jetzt hier auf meinem schönen Röhrenbildschirm rumditsche, so war das nicht gemeint. Ich habe jetzt schon hier http://www.mozilla.org/de/mobile/ das Entwicklerwerkzeug runtergeladen, welches das Touchverhalten eines Smartphones nachempfindet (mit der Maus! selbstverständlich). Wenn es sowas jetzt gäbe mit verschiedenen Auflösungen und drehbar, sprich so als würde ich mein Smartphone drehen dann wäre ich schon glücklich.
 

patrick_l

Hat es drauf

AW: touchscreen device vs. hover

Ich frage jetzt erst einmal nach deinem Editor mit dem du arbeitest. In Adobe Dreamweaver kann die Entwurfsansicht dafür eigentlich ganz gut genutzt werden. Das reicht in der Regel schon aus.

Ansonsten gibt es im Safari Browser aber auch in anderen Browser die Möglichkeit die Ausgabe zu simulieren. Wenn du dir mal das von mir verlinkte Video-Training anschaust, dürften die meisten Fragen schon geklärt sein. Rein schauen, staunen und selber machen ;)

Edit:
Du machst für mich aus einer Mücke einen Elefanten ;) Du musst dich doch nur etwas näher mit den Media Queries beschäftigen. Entsprechende Quellen wurden dir ja bereits dafür genannt. Wenn du das Prinzip dahinter komplett verstanden hast, machst du dir auch um dein iPhone keine Kopf mehr. ;)

Grüße Patrick
 
Zuletzt bearbeitet:
K

kornyclown

Guest

AW: touchscreen device vs. hover

Ich frage jetzt erst einmal nach deinem Editor mit dem du arbeitest. In Adobe Dreamweaver kann die Entwurfsansicht dafür eigentlich ganz gut genutzt werden.

Edit:
Du machst für mich aus einer Mücke einen Elefanten ;) Du musst dich doch nur etwas näher mit den Media Queries beschäftigen. Entsprechende Quellen wurden dir ja bereits dafür genannt. Wenn du das Prinzip dahinter komplett verstanden hast, machst du dir auch um dein iPhone keine Kopf mehr. ;)

Grüße Patrick

Nein, ich benutze Editra, ein Freeware Editor. Es ist mir wichtig als Anfänger einen Editor zu benutzen, der mir nich alles ins Maul legt und ich von Anfang an auf Schreibfaulheit konditioniert werde. Ich will erstmal das Skripten richtig verstehen und beherrschen, dann kann ich anfangen bequem zu werden.

Vielleicht mach ich das wirklich wichtiger als es ist aber es ist für mich halt wichtig ein entsprechendes Feedback zu bekommen ob das richtig is was ich mache. Manchmal setzt man eine Klammer oder Simikolon falsch und nichts funktioniert mehr, gerade bei mir als Anfänger. Und nur weil mein Desktopbrowser sagt: "Alles funktioniert." muss das ja nicht heißen, dass mobile Browser das auch so sehen.

Bitte, ein Emulator, der ein Android Smartphone emuliert:
http://developer.android.com/tools/help/emulator.html

Damit kannst du schon mal sicher sein bei Android Handys. Aber so schwer ist das auch nicht anzupassen.

Cool, danke das sieht echt gut aus. Habs jetz mal getestet. Man kann es nicht drehen aber ich habe Orientation Support als Hardwarekomponente angegeben. Orientation Support wird als boolean angegeben also ja oder nein, soll das bedeuten, dass es sich zwar nicht drehen lässt aber einen Orientationwert ja oder nein übergibt? Is das richtig oder hab ich die Drehenfunktion übersehen??
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.349
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben