Creating device layouts for touch screens

I have a provisional site now well advanced in the making. It uses lots of mouse over popups which work beautifully on my desktop and laptop but not so well on touch screen, such as my iPad. It would work much better if I were able to implement things in a slightly different manner for touch screens.

In theory I can do this by creating a custom layout. However layouts seem to be entirely size and orientation driven. For very small screens such as phones and small tablets this is not a problem as screens this size size are likely by default to be touch screen devices and I can treat them as such.

However, larger tablets can overlap with smaller laptops and desktops in terms of resolution so size alone is not able to tell me if the device is touch screen or not.

Is there a way I can create a custom layout for touch screens that is not size dependent?

That’s something web technologies have not really caught up to, and there’s nothing of that sort in Sparkle. It is the reason Sparkle’s standard menu doesn’t offer click actions for the top item of a drop down sub-menu.

When coding websites these are generally solved on a case by case basis. So on the buttons that do mouse hover actions, what does a click do? Could that be used for an equivalent touch-based action?

Thanks Duncan. I’ll reply properly later on. Busy right now.

Hi again Duncan.

The problem is less one of function than one of style. Both desktop/laptop and tablet do work in their manner but what works beautifully with mouse or track pad is clumsy on touch screen and what works perfectly with touch screen is less attractive and stylish with mouse and track pad.

Can I send you a single page extract from my site which contains both the different mouse/touch ‘conflicts’ I am having?

I really don’t want to impose but previewing it will show my dilemma far more clearly than any amount of explanation can do.

Of course. Email it over to feedback@sparkleapp.com

Thank you. On the way.