Responsive Design: How to address differences between touchscreen and desktop devices

[DivaVocals]

Wanted to recap the salient parts of the other discussion:

I know you have worked hard to put these responsive template together and it is difficult to anticipate every possible scenereo. Nice look Anne from desktop computers. I finally got tired of futzing around with Resp Shefield Blue and Resp AB and thought to try this one, which seemed fitting since most of our sales are Sterling.

Stirling installed without a hitch, I have yet to obtain a good functional install of the other 2.

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

What screen resolution is your windows tablet? If it is greater than 1024 pixels wide then you will see the full size version which uses the css mega menu. The css mega menu is not touch friendly. You would have to either change the menu or convert the mega menu to be touch friendly.

I have tested on the following: iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9. If you are viewing on a different device then it has not been tested. This is a free template and while I will do my best to always improve it, I would be surprised if it were perfect on every mobile device ever created ;)


Thanks,

Anne

Please, don't get me wrong, I love your templates and know that you spend a lot of time working through them. I know that it is impossible to test every possible combination of hardware/software. It is even more difficult when users start futzing around on their own and then asking how to fix their mistakes.

I'm sorry that I was confused because I was thinking the responsive templates were mobile device friendly/touch device friendly and didn't know that the menu bar was not intended to be touch friendly.

Both Windows 8 Pro tablet and Windows RT tablets are 1368 x 768 or 768 x 1368 resolution.
RazR-M resolution is 540 x 960

picandnix
Your site is setup a bit differently since it has sidebars on each side of the homepage. Screenprints of Windows 8 Pro tablet attached of HomePage both portrait and landscape. Login page portrait. I forgot to powerdown the RT and it's dead this morning.

Your install has a button to get back to the homepage where the demo does not.

Attachment 13171Attachment 13172Attachment 13173

I have the same issue with the mega menu on my phones and tablets. The biggest issue is that there is no such thing as an "onhover" or "onmouseover" event for touchscreen devices.. To remedy this, when I use this template (hoping to do so soon), I'm thinking that I'm gonna swap the included mega menu out with a responsive megamenu which supports "onclick". This will work well for both desktops and larger touchscreen devices..

The issue with that Anne is the larger touchscreen devices which may have the SAME screen resolution as a desktop computer (like my Netbook or Surface device, and even my Android tablet).. I don't necessarily want to replace the mega menu with the responsive drop menu for all devices.. I rather like the mega menu. I think the solution for me will be a mega menu presented on larger mobile/touchscreen devices which supports onClick versus onHover actions.

Basically I'm looking for a responsive mega menu similar to the one you are currently using, but I need one that does more than simply use media queries to detect screen resolution.. I would prefer that the menu also detect whether or not the viewing device is a mobile/touchcreen device and present an alternate version of the mega menu which supports onClick actions. That kind of functionality requires some javascript or jQuery magic to make it work.

Ideally this would mean that if the device detected is a mobile/touchscreen device, and IF this device is one of the larger mobile/touchscreen devices (meaning that it will not hit one of the media queries which presents the responsive drop menu), THEN present a mega menu which the action for the menu will be an onClick action versus onHover.

I just wanted to note that I can not test all touch screen devices in existence. On the list of handheld devices I have tested my responsive free template packages on, the only place where the mega menu is shown in on the full screen resolution of a desktop. On the tablets, ipads, and smaller the menu always switches to the touch friendly menu. Your's was the first time I saw the full resolution with the mega menu showing on a hand held device. Since this has been brought to my attention, I have been working on a solution.


Thanks,

Anne

Creating different menus for different devices is very easy.

Anne, I apologize for the hijack of your support thread. Last post regarding this.

Take a look at the responsive classic to see how swapping the category tabs for a select is done.

Take a look at the responsive cold steel to see how the product listing header is swapped for the SNAF filter.

Simply using the minWidthHide and minWidthShow CSS classes at the appropriate CSS media query handles swapping with ease.

Keep the current mega menu for desktop.

Using minWidthHide and minWidthShow CSS classes to hide (ids and classes for the on hover CSS) and adding new (ids and classes for the on click CSS)

Example of new on click link

<a id="WHATEVER" href="<?php echo zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params()); ?># " onclick="('');return false;">

Then using minWidthHide to hide both above and minWidthShow for the toggle menu on phones.

I have several new responsive plugins, just trying to find the time to get them packaged up.

Okay.. playing the devil's advocate here, I have some questions.. Are media queries going to REALLY be enough??? Why not include javascript to detect when the device is a touch screen device versus a desktop device?? How does this code distinguish between my 10" tablet and my 10" netbook?? Which device will use an onClick action and which one will use an onHover action?? How does this code know when I am viewing from my HP - ENVY TouchSmart 23" Touch-Screen All-In-One computer versus my HP desktop computer with a 23" monitor??



I agree.. There's no way to test for ALL devices.. I personally don't own a iPhone or a iPad.. So while I could have my client's who own these devices test things for me, or I could enlist friends and family who own these devices to help me test, this isn't really a realistic or reliable means to test..

What about a device independent testing tool like the Responsive Design Mode tool that comes as a part of the Web Development tools built in to the latest versions of Firefox. The Responsive Design Mode tool will allow you to test what your site looks like a certain resolutions.. Couple that with the Web Developer tools other features which will allow you to tweak your stylesheet live and see what those changes yield before you add them to your stylesheet. The tool covers the most common device resolutions, and allows you to enter in custom resolutions if the resolution of the device you are testing isn't included.

Then there's a whole slew of site's with webbased responsive testing tools popping up:
http://beta.screenqueri.es/
Brief Description: Pixel Perfect Media Query Debugging Tool* Test Responsive Designs Across 60+ Device Viewports. Also allows you to enter custom resolutions
if the resolution of the device you are testing isn't included.
This one rivals the functionality of the FireFox Responsive Design Mode tool.

http://mattkersley.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


http://www.studiopress.com/responsive/
Brief Description: This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page.


I wanted to add to this that on my tablet (Samsung Galaxy Tab 2), the mega menu displays the full menu in landscape, and a "partial" mega menu in portrait. This is just fine except for the onHover vs onClick "issue".. On my LG Optimus Pro smartphone, the mobile menu displays in both portrait and landscape.. The Samsung Galaxy Tab 2 tablet isn't what I'd consider a terribly LARGE tablet at all.. In fact it's the size of my 10" netbook. (which also displays the mega menu at full size)