0

I will be spending the next several weeks transitioning content for my webpage into a mobile version AND a tablet version. I have a few questions to this affect:

  1. What is the accepted way to send users to their correct site, depending on the device/browser they are using? (i.e. do we check in PHP for some kind of browser type or something)? I've looked into nice CSS grids that display great on all devices/resolutions - but at this time I'm not ready to make that full switch - so I'm looking to just have a reduced-version of my current site (whether it's via redirection or something else).

  2. How do we account for hover/mouseover effects in the mobile and tablet space?

Thanks all.

Update: I did find this for #1: http://code.google.com/p/php-mobile-detect - looks like it's perfect actually.

Shackrock
  • 4,601
  • 10
  • 48
  • 74
  • Can I suggest that you also provide a way to get to the full site. I get so frustrated when a site thinks my Galaxy Tab 10.1 is a mobile, and automatically redirects without ANY way of getting to the main site. Sorry, not an answer, but just a general point – freefaller May 29 '12 at 15:28
  • @freefaller Great point, one that I overlooked as well =). – Shackrock May 29 '12 at 15:31

1 Answers1

0

  1. You should redirect the user based on the user agent, in PHP you can use $_SERVER['HTTP_USER_AGENT']. Using server side detection is by far the most reliable way to redirect someone. In the future you may consider using a responsive style sheet to change the way your layout is displayed (based on screen size, in a sense is more reliable for future devices)

  2. Touch devices do not have a hover state, that doesn't mean you can't do it with some Javascript onTouch events but it's either on or off when you touch something like an anchor

David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • For #2, I thought I read somewhere that ipads/ipods/etc. had a built in event that was used for any mouse over effects. So the first click is the mouseover effect, and the 2nd is the link effect...is this true? – Shackrock May 29 '12 at 15:25
  • This is true, however it isn't reliable (doesn't happen to 100% of the links) – David Nguyen May 29 '12 at 15:33
  • Got any links to some examples/tutorials for something like this? Basically I'd like to FORCE that kind of behavior if possible. "All mouseover / css hover events turn into clicks for touch devices." basically.... just not sure how to make that kind of behavior (make a hover a click). – Shackrock May 29 '12 at 15:36
  • This is a fix to force click it: http://stackoverflow.com/questions/2741816/is-it-possible-to-force-ignore-the-hover-pseudoclass-for-iphone-ipad-users , don't use anything that reads ontouch because if you touch it for the intent of scrolling, it will still fire off the link – David Nguyen May 29 '12 at 15:41
  • From what I can tell, that post only removes all `:hover` for tablets/smartphones/etc... I would like to force the behavior he describes: One click - hover effect is activated if one exists, second click - link is engaged. – Shackrock May 29 '12 at 16:12
  • Oh, in that case look at this one: http://stackoverflow.com/questions/5507964/ios-automatic-hover-fix – David Nguyen May 29 '12 at 16:34