Best way to detect touch screen

Smaller, more robust code. Benefit of it working universally.

We can help you if you need help.

I would only bother if developing an app or a mobile only version.

A normal responsive site doesn’t really need much extra for mobile apart from the hamburger menu which can be done with a line of jquery (or vanilla js) to toggle the menu off and on. The rest is just css.

Your collapsible menus are nice and save space but they do mean that you have to stop and tap to open when I may just want to slide the normal content up and down which I find easier on mobile.

Thank you guys for your help with that. I have done the two column layout earlier, and a bit more css to tidy things up.
I did leave the query.mobile in there if you land on it at < 400px - but I will think twice on my next one.

Now, can I ask for your advice on my next site - bedandbreakfastinherefordshire dot info .

My thinking is, that at 800px it should go from 3 column down to one, and the vertical search becomes horizontal along the top? (I can forget about the ads for now)
At the moment, after the header, I use a #doublecolumn div floated right, which contains the #centrecol (the b&bs) and the #rightcol (the search) both floated left. My reasoning was for SEO - the b&b listings are the main content so I wanted that first (and we do really well on google, so I don’t want to change too much).
To get the search box to the top I would need to either

  • swap that order over
  • use javascript to swap the order if < 800px
  • use javascript to insert a new search box if < 800px
    Or is there a better css way of doing it ?

Any advice appreciated…thanks

HiI,

! would think about making the middle column fluid so that you can get down to 800px without the horizontal scrollbar appearing. This shouldn’t be too hard to do.

At 800px approx then I would go down to 2 columns and lose the left column and stick with the middle column and search column. That should allow you to get down to about 500px width with the 2 columns and still look reasonably good.

At under 500px I would move the search bar under the results. Recent mobile survey usage has shown that mobile and small tablet users want to see the content first and would not prefer all your search data being at the top meaning that they have to scroll down to see the results. (You could if you want absolutely place the search results at the top of the page but you would have to allocate space for the absolute elements using ems which means that you would need to take care that the content fits as you lose the flow. However as I mentioned above research has shown that mobile users want the content at the top even in preference to menus so I would just let the search bar fall underneath ).

All the above can be achieved with css and media queries and no javascript. I would almost never move content around with javascript as that means using the resize event which throttles the page and makes it sluggish.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.