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

[DivaVocals]

Again you get no argument from me about design approach with regards to responsive design.. doesn't change the fact that changes to some of the popular appearance mods is ALSO required to address some of the usability issues if they are incorporated into responsive templates/sites. The Mega Menu is but one appearance add-on with usability issues on small and/or touch-screen devices..

I've implied no such monopoly or even that device manufacturers are going to agree to any universal spec.. what I did imply/state was that technology changes all the time, and software dev has always responded to those changes.. Given the advances in hardware technology and the usability challenges that they bring, browsers, the W3C, and innovators in software dev are responding with ways to address these issues and close these gaps.. these are not all perfect solutions, but that doesn't mean that there is NO solution.. just one yet to be discovered.. frameworks like Modernizer, and even jQuery Mobile are designed to try and close these gaps.. other solutions will follow.. now you may not believe until you see it, and you are entitled to see things from that POV.. but I look at some of the first webbased apps I was a part of implementing and laugh that the solutions we would use today without batting an eye were seen then as "not doable".. So I know like everything in technology, a change is a-coming..

I saw your posted solution for the Mega Menu.. I am not at home, so I can't look at the code to see, but can your solution also be applied to that categories generator class file used by the Mega Menu (and every other menu module)

I will believe it when I see it, there has never been a universal code for the far less "Browsers" being used.

This would imply that somehow the manufacturers of the world are all going to agree to device specific resolution and browsers. What a monopoly. Will never happen IMO.



I disagree and many world renowned web designers would also.

Media-queries do exactly that - present different content layouts based on browser size.

Back when I started designing using javascript, a fallback using CSS was always implemented (why?) because back then non-javascript users were of the majority. If one is going to use media queries and a responsive design for presenting content correctly in all devices. One should design for the smaller devices and their features first, meaning using onClick instead or as a fallback to onHover.

It is possible for I posted a linked example using the original templates Mega Menu in question.



It it as easy as I say it is, check the original templates support thread, I have also emailed Anne the code used I would expect updated templates to implement this onClick fallback for the whatever % of devices that will use it.

Crystal - @DivaVocals
There aren't many individuals that I even consider their advice, opinions or arguments to be worth validating but yours always seem to be "in truth" to a higher percentage than most.

[rbarbour]

I saw your posted solution for the Mega Menu.. I am not at home, so I can't look at the code to see, but can your solution also be applied to that categories generator class file used by the Mega Menu (and every other menu module)

I only applied the javascript to the top level links of the Mega Menu for an example and that was all I emailed Anne. It requires adding a id to the link so I imagine it can be applied to the category_tree_generater file just like any other category plugin.

Surely you don't expect me to test on "every other menu module".

[DivaVocals]

I only applied the javascript to the top level links of the Mega Menu for an example and that was all I emailed Anne. It requires adding a id to the link so I imagine it can be applied to the category_tree_generater file just like any other category plugin.

Surely you don't expect me to test on "every other menu module".

nope.. because I didn't imply or SAY that you should test every other menu module.. I asked about the category generator class file because nearly EVERY dropdown menu add-on uses the SAME class file.. So logically I would think that fixes/changes to the Mega Menu can be applied to other menus modules..

[rbarbour]

nope.. because I didn't imply or SAY that you should test every other menu module.. I asked about the category generator class file because nearly EVERY dropdown menu add-on uses the SAME class file.. So logically I would think that fixes/changes to the Mega Menu can be applied to other menus modules..

I read very quickly, my apologies.

[DivaVocals]

Wanted to bring over a related conversation from another thread to continue the discussion here.. (this was clearly off topic) Seems more appropriate to continue the conversation here..

This is way off topic but it is the direction this thread has taken...

I’m currently working in a theme for Zen Cart using Bootstrap. Building a responsive theme is a little more tedious than I expected. Building it in what I consider to be the proper way. I have built Bootstrap themes in the past following the Bootstrap guidelines which is “hide this from this device, show it on this other device” as in the example shown below:

<div class=“hidden-lg hidden-md col-sm-6 col-xs-12”>
    <p>Content Goes here</p>
</div>

The html shown above basically says hide it from desktops, display it using half the screen on tablets, display it using the full screen on smartphones. The problem is when it comes to hiding portions from mobile devices using for example the html shown below:

<div class=“col-lg-6 col-md-6 hidden-sm hidden-xs”>
    <p>Content Goes here</p>
</div>

The code shown above says display it using half the screen on desktops but hide it from tablets and smartphones. If we are to hide it, why load it to begin with? For that reason a mobile detection script is much better.

Using Google Code’s mobile detect, I can write the following:

<?php if  (if (!$detect -> isMobile()) { ?>
<div class=“col-lg-6 col-md-6”>
    <p>Content Goes here</p>
</div>
<?php } ?>

The code shown above, displays the content on the desktop and keeps it from loading on mobile devices. This makes it convenient when we don’t need large portions of code, javascript or css files that don’t do any good loading on mobile devices.

As I was thinking about the theme that I’m working on. It is getting a little complicated because of all the bells and whistles that I’m adding to make it themeforest worthy. It seems that adding a truck load of sliders and extra pretty CSS for commerce websites sells... at least there

The essence of building responsive websites is building sites that basically have not one but three templates, at least. One for desktops, one for tablets and one for smartphones. With that in mind, I realize that there is no need to make things so complicated and here is how.

Let’s just say that I need to build the product info page. I need to build three designs, I’ll use three conditionals inside my /My_TEMPLATE/templates/tpl_product_info_display.php

<?php if  (!$detect -> isMobile()) { ?>
    Content for desktops goes here
<?php } ?>

<?php if  ($detect -> isTablet()) { ?>
    Content for tablets goes here
<?php } ?>

<?php if  (($detect -> isMobile()) && (!$detect -> isTablet()))  { ?>
    Content for smartphones goes here
<?php } ?>

I could either add the content accordingly or perhaps, call for three different files maybe named tpl_product_info_desktop.php, tpl_product_info_tablet.php and tpl_product_info_phone.php.

On that same note, I could add new statements into the sql for additional image sizes. Instead of MEDIUM_IMAGE_WIDTH and MEDIUM_IMAGE_HEIGHT, why not DESKTOP_IMAGE, TABLET_IMAGE and PHONE_IMAGE etc. This could be a good idea to use with something like an image handler. There is no use on creating this new sizes if the intent is to serve the same large image. The point is to load a smaller image on mobile devices to make it load faster…

I've been doing a fair amount of research lately on the topic of responsive because I am realizing that many of the popular appearance modules need some massaging to make them mobile/touchscreen friendly.. So I do have a question.. It is my understanding that "Google Code’s mobile detect" code will not work on ALL devices.. If this is true what's the stopgap measure??

I use php-mobile-detect and have used it on my mobile theme for quite some time. I have yet to hear from a customer stating that there are any issues with it. I'm not saying that it is perfect. There are entirely too many different devices, models, brands out there to actually test for. There are other free open source scripts available. I'm sure if you do a google search you'll come up with several.

There are also several paid-for scripts which involves adding a code to your site and pay what I considered to be a really big fee for something that to be honest, I have no way of testing for in order to make sure I'm getting my money's worth.

As stated on the site, you can detect specific devices by using case-insensitive pseudo-methods.

Phones

• isiPhone()
• isBlackBerry()
• isHTC()
• isNexus()
• isDellStreak()
• isMotorola()
• isSamsung()
• isSony()
• isAsus()
• isPalm()
• isGenericPhone()

Tablets

• isBlackBerryTablet()
• isiPad()
• isKindle()
• isSamsungTablet()
• isHTCtablet()
• isMotorolaTablet()
• isAsusTablet()
• isNookTablet()
• isAcerTablet()
• isYarvikTablet()
• isGenericTablet()

Operating systems

• isAndroidOS()
• isBlackBerryOS()
• isPalmOS()
• isSymbianOS()
• isWindowsMobileOS()
• isiOS()
• isFlashLiteOS()
• isJavaOS()
• isNokiaOS()
• iswebOS()
• isbadaOS()
• isBREWOS()

Mobile browsers

• isChrome()
• isDolfin()
• isOpera()
• isSkyfire()
• isIE()
• isFirefox()
• isBolt()
• isTeaShark()
• isBlazer()
• isSafari()
• isMidori()
• isGenericBrowser()

By all means, if you come across any other good sources, please let me know.

[rbarbour]

Wanted to bring over a related conversation from another thread to continue the discussion here.. (this was clearly off topic) Seems more appropriate to continue the conversation here..

The google mobile detect code has actually came along way and it is very close to detecting the majority of devices out there.

It would be counter productive to include with any responsive code that utilize media queries IMO for this renders files based on the device.

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.

HOWEVER, taking the rules under certain media queries and putting them into their own css file and calling that css file for (specific) devices using the google mobile detect code may be just as easy as using media queries.

[DivaVocals]

The google mobile detect code has actually came along way and it is very close to detecting the majority of devices out there.

It would be counter productive to include with any responsive code that utilize media queries IMO for this renders files based on the device.

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.

HOWEVER, taking the rules under certain media queries and putting them into their own css file and calling that css file for (specific) devices using the google mobile detect code may be just as easy as using media queries.

Perhaps (still not sure of I totally agree with this yet..).. BUT.. this might be useful for SOME appearance mods where you might need different flavors of the code depending on the device..

[ultimate_zc]

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

I agree with this above.

It would be counter productive to include with any responsive code that utilize media queries IMO for this renders files based on the device.

HOWEVER, taking the rules under certain media queries and putting them into their own css file and calling that css file for (specific) devices using the google mobile detect code may be just as easy as using media queries.

I don't agree with the latter.

It is true that using a mobile detect script with a responsive design may very well be somewhat of an overkill, however, website owners are much more concern about the look of their site for multiple devices yet when they test, they do so by increasing and decreasing the size of a browser on a desktop site. There is a small percentage of website owners that are aware of the multiple tools to test their site by either visiting actual websites that provide agent switchers or even have the time to install additional extensions to their browsers to test as well.

A website owner and for that matter, their developers are concern with "does it look good, yes, no, move on". To develop a "useful" and fast website for mobile devices, I do not think is enough to use CSS media queries because it only hides the content you don't want shown on the device.

Take for example Bootstrap. For a desktop, I could very well design a product info page with the regular Zen Cart default style or give the option from the admin to use tabs. On a tablet I could do the same, therefore I could use the mobile detection script to load the tabs.js file for both desktops and tablets. As for smaller mobile devices such as the smartphone, tabs may not necessarily be a great idea so I could just give an option from the admin once again between the default or an accordion therefore, for small mobile devices I would use the detection script to load only the accordion.js. Why load both scripts if I'm only using one of them. That is additional bandwidth that the mobile user is using and more time to load risking losing that user.

The same goes for scripts that belong only in the mobile device. There are plenty of scripts that will enhance the performance of the scrolling, touch events etc... Why load those scripts on a desktop if there is no need for them?

In my opinion, a responsive website should use both, CSS media queries and mobile detection.

[ultimate_zc]

For the sake of my argument above. 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.

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.

The website may also be penalized by search engines for stuffing content. Remember the search engines are going to read the entire content. They don't care whether the content is visible or not, it is all about the source code.

If I don't want the same content to load several times on a desktop in addition to the extra CSS and javascript on a desktop, why would I do so on a mobile.

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.

[ultimate_zc]

The same goes for the subject of the thread. There are several ways that I'm aware of to make sites responsive to either click events or touch events. For this instance you may need to totally redesign all of the link tags on the site using jQuery. This is another good example that shows how mobile detection is a handy tool.

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).