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

ultimate_zc:

rbarbour:

This would be no different than creating a desktop website template, a tablet website template and a phone website template.

Again you would be managing the code for 3 website templates.

ultimate_zc:

:yes:

I agree with this above.

ultimate_zc:

Once again taking Bootstrap for example. Lets just say that I decide on displaying tabs on desktops, regular Zen Cart style on tablets and accordion on smartphones.

Using only CSS media queries means loading the same content three times hiding two versions of it. Now that is counter productive.

ultimate_zc:

One thing we do agree upon and it is the fact that you are designing three themes and not just one regardless. You have no choice. Perhaps you are designing for more than three if you also take into account landscape and portrait modes.

The biggest obstacle (of mine) since I rolled out the Responsive DIY Template Default for v1.5.x is getting not only shop owners but contributors and developers to understand the difference.

Responsive Design is a (minimal) design and one should build their website (template) with that in mind.

If one chooses to use responsive code and media queries, they choose minimalism, 1 template file, 1 module file, 1 css file.

Counter productive to ME (IMO) is creating the same page 3 times to produce an outcome. When the only outcome that matters is that the (add to cart) button gets clicked.

If Bootstrap is your building ground (great), I started their as well. But Bootstrap is a CSS framework that offers (4), yes (4) media queries to build a responsive design, however Bootstrap hasn't even tapped into the media query expressions available.

Media Query Expressions that are very much similar to those used in the Google device detect code.

Are Media Queries enough? That is the question.

This is the answer.
If you want one website template, one file to edit, a minimal design focused on selling products and providing a consistent but minimal user experience. Then Yes, media queries are enough.

If you want multiple templates and files to manage, then No, media queries are not enough.

ultimate_zc:

There are several reasons why in the example above CSS media queries alone may not be a good idea. Lets say that the desktop visitor does not have a fast enough connection, while the website is loading the page content, the user may very well see the display of the content three times making the site look unprofessional.

A good responsive design will scale down from desktop to tablet without major changes only hiding the (access) not so important information from phones.

This is a discussion that has been going back and forth with developers and designers for years.

I put my 2 cents in, I have heard all the "arguments", I weighed the pros and cons. I choose media queries over several different template designs.

If one doesn't understand media queries and media query expressions:
http://www.w3.org/TR/css3-mediaqueries/

If one is still ignorant to the tools available for testing media queries:
http://www.we-are-gurus.com/tools/responsive-design-tester.php
http://responsivepx.com/

All popular browsers offer build-in user agent switchers, so you can change your user agent without installing any extensions. Google Chrome and Internet Explorer both include user agent switchers in their developer tools, while Firefox offers an about:config option.

Websites identify browsers by their user agents. Modify a browser’s user agent and it will appear as a different browser – or even a browser running on another device, such as a smartphone or tablet.

rbarbour:

Media Query Expressions that are very much similar to those used in the Google device detect code.

Are Media Queries enough? That is the question.

This is the answer.
If you want one website template, one file to edit, a minimal design focused on selling products and providing a consistent but minimal user experience. Then Yes, media queries are enough.
We've talked about the mega menus and the fact that touchscreen devices do not support onHover functions. You provided Anne with a solution to this since she uses the Mega Menu quite a bit in her templates. And if I understand the solution correctly, the menu will now support onClick.. I wasn't fully clear, but it sounded like in the solution onHover still works for devices that can support onHover (correct me if I am wrong on this..)

But I've been looking at popular add-ons like Image Handler and the various lightbox contribs, and wonder how can media queries solve some issues with these add-ons on small screen as well touchscreen devices.

Image Handler has that image hover feature that is VERY popular with folks who use Image Handler. (don't want to debate the merits of the image hover feature -- it doesn't matter what folks SHOULD do, only that it's a GAP I identified) I've been testing, and found that I can "supress" the image hover using media queries, but IMHO that is not a fully desireable solution. Comparing the net effect of using a media query to "supress" the image hover suceeds in two different experiences on my 10" tablet versus my 10" netbook.. In the case of the netbook, the hover effect is disabled (NOT what I want), while the image hover is still active on my 10" touchscreen tablet (again NOT what I want..).. This is due to the differences in screen resolution between the two devices. So riddle me this.. theoretically, how can I solve this usability issue using ONLY media queries??

Now in the case of the various lightbox add-ons in use, the lightbox "popup" does not re-size to the device resolution, images open up at the full desktop size. I am not seeing a way to do so using only media queries.. I am happy to admit that it's possible to do it, but at the moment I am not seeing it..

DivaVocals:

We've talked about the mega menus and the fact that touchscreen devices do not support onHover functions. You provided Anne with a solution to this since she uses the Mega Menu quite a bit in her templates. And if I understand the solution correctly, the menu will now support onClick.. I wasn't fully clear, but it sounded like in the solution onHover still works for devices that can support onHover (correct me if I am wrong on this..)

That is correct - although lat9 and myself have found that IE11 is being difficult. No surprise there.

DivaVocals:

But I've been looking at popular add-ons like Image Handler and the various lightbox contribs, and wonder how can media queries solve some issues with these add-ons on small screen as well touchscreen devices.

Image Handler has that image hover feature that is VERY popular with folks who use Image Handler. (don't want to debate the merits of the image hover feature -- it doesn't matter what folks SHOULD do, only that it's a GAP I identified) I've been testing, and found that I can "supress" the image hover using media queries, but IMHO that is not a fully desireable solution. Comparing the net effect of using a media query to "supress" the image hover suceeds in two different experiences on my 10" tablet versus my 10" netbook.. In the case of the netbook, the hover effect is disabled (NOT what I want), while the image hover is still active on my 10" touchscreen tablet (again NOT what I want..).. This is due to the differences in screen resolution between the two devices. So riddle me this.. theoretically, how can I solve this usability issue using ONLY media queries??

You answered your own question :smile:

DivaVocals:

This is due to the differences in screen resolution between the two devices.

Using correct media query expressions will work min-width for the laptop and min-device-width for the tablet.

DivaVocals:

Now in the case of the various lightbox add-ons in use, the lightbox "popup" does not re-size to the device resolution, images open up at the full desktop size. I am not seeing a way to do so using only media queries.. I am happy to admit that it's possible to do it, but at the moment I am not seeing it..

Not all appearance plugins are designed to be responsive. I have posted examples a free light-boxes that do respond to screen size.

I'm not going to break down media queries and expressions for I have spent the last week commenting these examples in 2.0 of the Responsive DIY Template Default for v1.5.x

rbarbour:

You answered your own question :smile:
Not even close to answering my own question.. What I discovered is that media queries are not a FULL (acceptable) solution to the problem I am trying to solve with regards to the image hover feature in Image Handler.. You don't agree and that's clear.. So we WILL have to agree to disagree on this point.. I know the solution I want, and I see that there are potential options to get me there so I will pursue those..

rbarbour:

Using correct media query expressions will work min-width for the laptop and min-device-width for the tablet.

Not all appearance plugins are designed to be responsive. I have posted examples a free light-boxes that do respond to screen size.Sorry I don't buy this.. Some of my old colleagues I worked with in the early days of web-based app development insisted that web-based apps would never be able to replace client/server apps in the workplace.. They couldn't have been more wrong.. So again, we will have to agree to disagree.. I KNOW that there ARE solutions to the issues I am finding.. So I will keep poking until I get solutions to my particular business problems.. You clearly don't agree with this, and that's fine.. I know from experience that just because a solution doesn't exist right now doesn't mean that one doesn't exist at all..

By the by.. I don't recall seeing any posts about responsive lightboxes.. Even knowing what these lightboxes are, I am positive that it will be well over my head (and the heads of many others here) to adapt these lightboxes for Zen Cart.. and for folks using IH4, there is still the question of integration with IH4..

rbarbour:

I'm not going to break down media queries and expressions for I have spent the last week commenting these examples in 2.0 of the Responsive DIY Template Default for v1.5.xRight.. I really wasn't asking you do anything like this.. Was simply posing a question using explicit examples.. Trust and believe I am perfectly able to do my own research..

DivaVocals:

Not even close to answering my own question.. What I discovered is that media queries are not a FULL (acceptable) solution to the problem I am trying to solve with regards to the image hover feature in Image Handler.. You don't agree and that's clear.. So we WILL have to agree to disagree on this point.. I know the solution I want, and I see that there are potential options to get me there so I will pursue those..

Agree to disagree - I was responding to the 10" tablet versus the 10" laptop issue we have been discussing via email for 3 days. And correct me if I'm wrong but the last email from you said "Hey haven’t had a chance to test this yet". So for you to say that media queries are not a FULL (acceptable) solution is jumping the gun, wouldn't you say.

Enlighten the rest of us to what you want and maybe a solution will present itself regarding IH4 because IH4 wasn't part of the original 10" issue.

DivaVocals:

Sorry I don't buy this.. Some of my old colleagues I worked with in the early days of web-based app development insisted that web-based apps would never be able to replace client/server apps in the workplace.. They couldn't have been more wrong.. So again, we will have to agree to disagree.. I KNOW that there ARE solutions to the issues I am finding.. So I will keep poking until I get solutions to my particular business problems.. You clearly don't agree with this, and that's fine.. I know from experience that just because a solution doesn't exist right now doesn't mean that one doesn't exist at all..

It's not that I don't agree, I don't care to waste my time on solutions I know don't exist at present. I do my research on the possible solutions just like everyone else and I put my 2 cents in whether you or anybody else agrees with it just like you and everyone else on the forum.

DivaVocals:

By the by.. I don't recall seeing any posts about responsive lightboxes.. Even knowing what these lightboxes are, I am positive that it will be well over my head (and the heads of many others here) to adapt these lightboxes for Zen Cart.. and for folks using IH4, there is still the question of integration with IH4..

Correct - the responsive light-box was discussed via email between you and I.

IH4 integration? Replacing the onHover with onClick.

DivaVocals:

Right.. I really wasn't asking you do anything like this.. Was simply posing a question using explicit examples.. Trust and believe I am perfectly able to do my own research..

Then continue on and I really do wish you the best of luck finding the solutions you are looking for. I am sure you will post for community consumption.

rbarbour:

Agree to disagree - I was responding to the 10" tablet versus the 10" laptop issue we have been discussing via email for 3 days. And correct me if I'm wrong but the last email from you said "Hey haven’t had a chance to test this yet". **So for you to say that media queries are not a FULL (acceptable) solution is jumping the gun, wouldn't you say.**Hadn't had a chance to test, and I will do so when I get back from my appointment.. as far as I knew we were NOT testing Image Handler functionality.. So no, I dont think I'm being premature yet in regards to the issue I'm trying to resolve with Image Handler.. which is what my entire post TODAY and response were regarding.. I'm not seeing a solution YET.. Perhaps I will feel differently after testing what you asked me to test when I return..

rbarbour:

It's not that I don't agree, I don't care to waste my time on solutions I know don't exist at present. I do my research on the possible solutions just like everyone else and I put my 2 cents in whether you or anybody else agrees with it just like you and everyone else on the forum. and that's fine.. you don't see a solution for some problems.. I do.. It's the nature of the beast with me given my day job..

rbarbour:

**Correct - the responsive light-box was discussed via email between you and I.**and the rest of my prior response is still the same.. Out of my wheel house to make any lightbox solution work with Zen Cart AND Image Handler (as currently available lightbox solutions do)

rbarbour:

IH4 integration? Replacing the onHover with onClick.Not quite.. the latter can be accomplished by simply not turning the feature on (it's admin enabled). I simply want to disable it on devices that don't support it..

rbarbour:

Then continue on and I really do wish you the best of luck finding the solutions you are looking for. I am sure you will post for community consumption.I've no doubt I will get what I need.. Already got one solution for another issue I discovered in the can.. I will ONLY post those for solutions community consumption that I do not have to outsource (ie: PAY for).. Unless my clients explicitly give permission to do so..

rbarbour:

Correct - the responsive light-box was discussed via email between you and I.

Found the emails.. the last word on this was that you were going the let me test your lightbox.. hint.. hint.. hint..:laugh:

DivaVocals:

Found the emails.. the last word on this was that you were going the let me test your lightbox.. hint.. hint.. hint..:laugh:

I will forward, admin sql included.

rbarbour:

I will forward, admin sql included.

Gracias!:hug:

ultimate_zc:

By detecting whether the device is mobile or not, we can deliver a better experience to the user by making mobile sites even faster using touch events yet making sure those touch events are not loaded on desktop sites rendering the pages unusables (if that is even a word).

And this is similar to what I was speaking of when looking at Image Handler's image hover feature.. The image hover feature is admin configurable (on/off), but that doesn't mean it should be applied to all devices, in particular touchscreen devices. I've experimented with media queries. At first, this looked like the solution.. The issue I discovered in testing was that the media queries did not behave fully as I would like on some desktop devices. The media queries disabled the image hover on my 10" laptop, but not on my 10" tablet. Because the media queries only looked at dimensions this contributes to the difference in outcome. What I wanted was for the image hover code to be replaced with an onClick action but ONLY on tablets or phones. This would mean that on my 10" netbook the image hover should work, but on my 10" tablet it would not.

So following your posts, I tried using php-mobile-detect to kill the onmouseover effect for mobile devices only. My initial syntax was incorrect, and with the help of a fellow Zenner:smile: (who hopefully very soon will take over Image Handler's care and upkeep:cool:), I now have a means to get Image Handler's image hover behaving as I wish. The image hover now works on my 10" netbook, but not on my 10" tablet or my smartphone.

The point I'm really trying to make with this is that there is more than one way to skin a cat, and I'm a believer of finding the right solution to resolve your business problem. The more research and discussion I have on this topic, the more I am discovering that a combination of methods may be needed to get me the results I want. I think I will not be the only one to come to this conclusion..

Just stumbled upon Device.js. "Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile)." Thought it may be of some use. I will for sure take a look at it once I'm done with my current project. Click here for more information.

ultimate_zc:

Just stumbled upon Device.js. "Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile)." Thought it may be of some use. I will for sure take a look at it once I'm done with my current project. Click here for more information.
The code in that script to detect orientation fails on desktop (FF, IE 9/10) and mobile (FF). Detection of orientation does appear to be working in Chrome...

Mobile vs Desktop does appear to be working using that script in FF, IE, and Chrome. Do not have a "tablet" handy to test detection of "tablets".

lhungil:

The code in that script to detect orientation fails on desktop (FF, IE 9/10) and mobile (FF). Detection of orientation does appear to be working in Chrome...

Mobile vs Desktop does appear to be working using that script in FF, IE, and Chrome. Do not have a "tablet" handy to test detection of "tablets".

Give me a URL, and I can tell ya..:smile:

DivaVocals:

Found the emails.. the last word on this was that you were going the let me test your lightbox.. hint.. hint.. hint..:laugh:

I knew I posted this somewhere :smile:

I used it for the product quick view feature in my THE PRESTA-WHO RESPONSIVE TEMPLATE FOR ZC 1.5.X

Anyway - packaged and will email it to you.

Whoo hoo!!

rbarbour:

I knew I posted this somewhere :smile:

I used it for the product quick view feature in my THE PRESTA-WHO RESPONSIVE TEMPLATE FOR ZC 1.5.X

Anyway - packaged and will email it to you.

DivaVocals:

And this is similar to what I was speaking of when looking at Image Handler's image hover feature.. The image hover feature is admin configurable (on/off), but that doesn't mean it should be applied to all devices, in particular touchscreen devices. I've experimented with media queries. At first, this looked like the solution.. The issue I discovered in testing was that the media queries did not behave fully as I would like on some desktop devices. The media queries disabled the image hover on my 10" laptop, but not on my 10" tablet. Because the media queries only looked at dimensions this contributes to the difference in outcome. What I wanted was for the image hover code to be replaced with an onClick action but ONLY on tablets or phones. This would mean that on my 10" netbook the image hover should work, but on my 10" tablet it would not.

So following your posts, I tried using php-mobile-detect to kill the onmouseover effect for mobile devices only. My initial syntax was incorrect, and with the help of a fellow Zenner:smile: (who hopefully very soon will take over Image Handler's care and upkeep:cool:), I now have a means to get Image Handler's image hover behaving as I wish. The image hover now works on my 10" netbook, but not on my 10" tablet or my smartphone.

The point I'm really trying to make with this is that there is more than one way to skin a cat, and I'm a believer of finding the right solution to resolve your business problem. The more research and discussion I have on this topic, the more I am discovering that a combination of methods may be needed to get me the results I want. I think I will not be the only one to come to this conclusion..

Would you be able to post the fix you used on image handler? I have a few sites that use IH4 with image hover turned on - and also have responsive templates. Had a customer say that the image hover showing up on her phone was a PIA! :no:

THANKS!

stellarweb:

Would you be able to post the fix you used on image handler? I have a few sites that use IH4 with image hover turned on - and also have responsive templates. Had a customer say that the image hover showing up on her phone was a PIA! :no:

THANKS!

My code ULTIMATELY was the wrong execution and caused other issues.. So I removed it from my client's site which is why I never shared it..

A better way would be for using a conditional statement with the php-mobile-detect script to simply NOT load the javascript and CSS files which support the image hover.. When my time permits, I may experiment with what is needed..