Westminster New

DivaVocals:

I am testing with three Android devices and the behavior is corrected on all three..

I click the hamburger icon, menu displays, I scroll to the bottom of the menu and the menu does not collapse.
I click on the text of a top level menu item, and the menu collapses and takes me to the link associated with the top level menu item
I click on a submenu arrow and the sub menu appears. Again scrolling down does not cause the menu to collapse.
I click on the text of a sub-menu item, and the menu collapses and takes me to the link associated with the sub-menu item

Works perfect on all devices.. My test group Android and Apple users report that the functionality works as expected.

I did not expect that tapping the text and tapping the arrow icons would yield the same result.. neither did my test users (and I do not tell them what to expect because I want their GENUINE reactions)..

I expected that the arrows would open/close menus or sub-menus, I expected the text would take me to an associated link.. Perhaps this is because this is how a similar desktop menu would have behaved. So I don't expect DIFFERENT behavior on a mobile device.. I do expect that hover will likely not work on a mobile device..

I think we may be talking about 2 different screen presentations.

Android tablet, landscape mode, 1280 px wide x 800 px tall.
No hamburger icon. MegaMenu options.
The downarrow icons are too teenie for my fingers, so I usually end up tapping the text and Menu opens/collapses.
IF I happen to get the arrow, menu does not collapse.

Android tablet, portrait mode 800 px x 1280 px.
Tap hamburger, 3 item menu is displayed (Categories, Information, Contact Us)
Tap categories text tab
Menu returns to default main page
Tap arrow, menu expands and does not collapse. This is no different than before.

Desktop menu does not behave differently for text or arrow, except click on downarrow and it changes to uparrow & viceversa.
Either text or arrow opens the category menu; thus my expectation for either to do the same on the tablet. Like you, not expecting a different behavior.

I have not tested using our Android mobile device.

RixStix:

I think we may be talking about 2 different screen presentations.

Android tablet, landscape mode, 1280 px wide x 800 px tall.
No hamburger icon. MegaMenu options.
The downarrow icons are too teenie for my fingers, so I usually end up tapping the text and Menu opens/collapses.
IF I happen to get the arrow, menu does not collapse.

Android tablet, portrait mode 800 px x 1280 px.
Tap hamburger, 3 item menu is displayed (Categories, Information, Contact Us)
Tap categories text tab
Menu returns to default main page
Tap arrow, menu expands and does not collapse. This is no different than before.

Desktop menu does not behave differently for text or arrow, except click on downarrow and it changes to uparrow & viceversa.

Nope talking about the same things.. I think however you may be looking for behavior to occur that will not occur. The changes Anne made to update Slimmenu addresses a known bug with scrolling causing the expanded menu to collapse on touch devices. The fix she posted opens the menu on touch as before, but the menu will not close unless you touch it again..

Also I might suggest adjust the size of the Font Awesome arrow icon to make touching it a bit easier for you..

RixStix:

Either text or arrow opens the category menu; thus my expectation for either to do the same on the tablet. Like you, not expecting a different behavior.Except there WILL be slight differences because there is no hover on the tablet.. So hovering over the menu text or arrow and then clicking WILL do something different on the desktop than the tablet.. Because if I hover over categories, the sub categories menu drops down.. If I move my mouse horizontally across the "Categories" text and hover over the arrow, I can CLEARLY see that whether I hover the text of the arrow, BOTH take me to the same place.. (going to the home page can be fixed VERY EASILY by editing the menu code..

Desktop or tablet, the arrow is an indicator that there is a sub menu, but in a hover menu where the hover off behavior collapses the menu, I would NOT expect that clicking the arrow will collapse the menu.. Instead I would expect it might redirect to a URL.. and honestly this is pretty consistent with how my users interacted and EXPECTED to interact with the mobile versus desktop menu.

On a tablet on the other hand because it is not a hover event controlling the menu I will expect to see SIMILAR behavior, but with some differences which are a function of a menu controlled by touch on/off functions.. The arrow is STILL an indicator of a submenu, but I expect that tapping it will open and collapse the submenu. I expect the menu text will take me to specific links NOT close the menu

Can't disagree with any of your comments. I guess I am just looking at things in a way that we receive comments from frustrasted customers. You can't please everyone, though sometimes we try too hard to do that.

Heck, we have "lots"of customers who haven't a clue the function of the hamburger icon. They can figure out what the "buggy" icon means. Some customers have just said "It's easier to go buy an iPad than to fool with the Android frustrations."

At times, I just feel like abandoning the responsiveness for a traditional desktop only site. It is on my todo list to see if abandoned carts have increased or decreased since implementation.

RixStix:

Can't disagree with any of your comments. I guess I am just looking at things in a way that we receive comments from frustrasted customers. You can't please everyone, though sometimes we try too hard to do that.

Heck, we have "lots"of customers who haven't a clue the function of the hamburger icon. They can figure out what the "buggy" icon means. Some customers have just said "It's easier to go buy an iPad than to fool with the Android frustrations."I get that, but you have to separate noise from what is useful information.. Some of the comments may REALLY be a function of folks not understanding how things should/can work on a mobile device.. It's truly not an Android versus iOS thing.. And a LOT of the feedback comments I am getting are really more of a function of folks being NEW to shopping on a mobile device. Many do not realize that the visual cues that work well on desktops don't work or can't be used t all on the mobile device.. many expect the mobile device to behave JUST LIKE the desktop device, and that's not possible as there are HUGE differences between touch and click interactions..

There are new standards being set for mobile, the hamburger icon is one of these new standards. Users and site devs are learning.. As standards firm up and adoption increases, people will come to KNOW that a hamburger icon will ALWAYS mean a menu is present. I know that I am getting A LOT of feedback on confusion about the "person" icon in this template and what it means.. So I am going to take a look at other online shops and see what icon they use to signify "login", and replace the one used in this template accordingly..

RixStix:

At times, I just feel like abandoning the responsiveness for a traditional desktop only site. It is on my todo list to see if abandoned carts have increased or decreased since implementation.
And this would be a mistake as you WILL lose your mobile clients for sure.. the desktop version of a site on a mobile device (with the exception of the larger tablets perhaps) WILL be a much more frustrating experience. Additionally desktop drop menus will NOT work (well) on a touch device.. You have to take the feedback and figure out how to improve the things that REALLY need improving.. The test users for the site I'm working on with this template have provided some valuable input, but not EVERYTHING they've commented on is necessarily something worth acting on..

Bottomline is the fix Anne posted finally addresses the REAL issue with the Slimbox menu..

DivaVocals:

Bottomline is the fix Anne posted finally addresses the REAL issue with the Slimbox menu..

Agree. Thanks Anne. I think Anne wins the trophy for most hijacked or frankenthreaded topics on the forum.

DivaVocals:

I get that, but you have to separate noise from what is useful information.. Some of the comments may REALLY be a function of folks not understanding how things should/can work on a mobile device.. It's truly not an Android versus iOS thing.. And a LOT of the feedback comments I am getting are really more of a function of folks being NEW to shopping on a mobile device. Many do not realize that the visual cues that work well on desktops don't work or can't be used t all on the mobile device.. many expect the mobile device to behave JUST LIKE the desktop device, and that's not possible as there are HUGE differences between touch and click interactions..

yep. That's why we changed the color of 'some' of those cues in an attempt to help direct folks to areas needing their attention.

DivaVocals:

There are new standards being set for mobile, the hamburger icon is one of these new standards. Users and site devs are learning.. As standards firm up and adoption increases, people will come to KNOW that a hamburger icon will ALWAYS mean a menu is present. I know that I am getting A LOT of feedback on confusion about the "person" icon in this template and what it means.. So I am going to take a look at other online shops and see what icon they use to signify "login", and replace the one used in this template accordingly..

Preaching to the choir. New standards like the hamburger comes easier for some age groups than others. The 'person' or 'torso' icon mixed with the 'power on/off' icon can be a bit confusing.

DivaVocals:

And this would be a mistake as you WILL lose your mobile clients for sure.. the desktop version of a site on a mobile device (with the exception of the larger tablets perhaps) WILL be a much more frustrating experience. Additionally desktop drop menus will NOT work (well) on a touch device.. You have to take the feedback and figure out how to improve the things that REALLY need improving.. The test users for the site I'm working on with this template have provided some valuable input, but not EVERYTHING they've commented on is necessarily something worth acting on..

Probably so. And somethings just do not lend themselves to be viewed on a mobile device. I don't know how Anne and others do as well as they do when you look at the number of **different Android device screen sizes **which show up in a monthly report vs the number of different Apple devices. Add to that the Android browser combinations, Android/Chrome, Android/FireFox, Android/custom flavor browsers. Need we throw in the variants of Internet Explorer?

RixStix:

Preaching to the choir. New standards like the hamburger comes easier for some age groups than others. The 'person' or 'torso' icon mixed with the 'power on/off' icon can be a bit confusing.Sorry I don't agree.. Older age groups don't get a PASS on "not understanding all this new fangled technology":laugh:.. It's not that younger folks can learn easier, it's that some folks DON'T want to learn something new.. It's actually real simple.. "hamburger icon = MENU".. PERIOD.. This really isn't THAT difficult a concept to grasp regardless of age.. But yes using the SAME icon for two very different functions would be confusing for ANY age group..

RixStix:

look at the number of **different Android device screen sizes **which show up in a monthly report vs the number of different Apple devices. Add to that the Android browser combinations, Android/Chrome, Android/FireFox, Android/custom flavor browsers. Need we throw in the variants of Internet Explorer?Except the differences between Android devices really isn't that DRASTICALLY different.. I see more BEHAVIOR differences between Apple and Android..

DivaVocals:

Sorry I don't agree.. Older age groups don't get a PASS on "not understanding all this new fangled technology":laugh:.
Didn't say anyone got a PASS. Just said that change doesn't come quite as easy for some age groups.

DivaVocals:

it's that some folks DON'T want to learn something new.
A store owner implementing a new software has the ability to MAKE learning the new software a condition of employment. Either employees learn the new software with minimal grumbling that "the old software did it this way" OR they choose to be employed elsewhere.

You can't really be quite that harse on customers wanting to spend money. You can try to guide them but you can't really take the same stance as you could with employees.

RixStix:

Preaching to the choir. New standards like the hamburger comes easier for some age groups than others. The 'person' or 'torso' icon mixed with the 'power on/off' icon can be a bit confusing.
?

If you have any specific suggestions about what you think would work better, please post them. You can see tons of available icons on the font awesome site:

http://fortawesome.github.io/Font-Awesome/icons/

Thanks,

Anne

RixStix:

Didn't say anyone got a PASS. Just said that change doesn't come quite as easy for some age groups.Right, but I am not going to create a solution where one is NOT needed because of this.. If a customer is not willing to adjust their expectations that mobile interactions will NOT be like desktop interactions, I can't (and won't try to) solve that issue because it's not REALLY an issue.. What I AM going to do is follow best practices so that I do not have processes that are drastically different than similar processes on other sites..

RixStix:

A store owner implementing a new software has the ability to MAKE learning the new software a condition of employment. Either employees learn the new software with minimal grumbling that "the old software did it this way" OR they choose to be employed elsewhere.

You can't really be quite that harse on customers wanting to spend money. You can try to guide them but you can't really take the same stance as you could with employees.
Okay as an example, mobile apps and websites have CLEARLY adopted the hamburger icon as an indicator of a menu. So a customer NOT understanding that the hamburger icon means "this is a menu" isn't a problem I'm going to try and solve by changing the icon to something they think it should be nor am I going to try and come up with a different solution which may confuse OTHER customers.. The reason is not a matter of being "harsh" on customers.. The fact of the matter is it's not a problem at all.. It's a matter of this being an educational moment.. So I am going to EDUCATE the customer so they understand..

DivaVocals:

So I am going to EDUCATE the customer so they understand..

I am not arguing with the philosophy.
I am not disagreeing with your comments.
I agree that the hamburger is pretty much universally known to indicate MENU.

We DO educate the customer WHEN we get a chance. We have also found that the majority of customers seem to have failed "Reading 101" and "Comprehension 101" and have a boatload of "Entitlement". Sometimes tactfully educating customers is a challenge.

RixStix:

We DO educate the customer WHEN we get a chance. We have also found that the majority of customers seem to have failed "Reading 101" and "Comprehension 101" and have a boatload of "Entitlement". Sometimes tactfully educating customers is a challenge.

:laugh: Oh trust me!!! I DO get that!!! I call it the "Short Bus Folks" syndrome..

Just saying you have to keep at it..:smile: It's hard, and you may need some cocktails afterwards... But stay vigilant..:smile:

So make it easy for them by adding "Menu" to jquery.slimmenu.min.js file

RixStix:

I am not arguing with the philosophy.
I am not disagreeing with your comments.
I agree that the hamburger is pretty much universally known to indicate MENU.

We DO educate the customer WHEN we get a chance. We have also found that the majority of customers seem to have failed "Reading 101" and "Comprehension 101" and have a boatload of "Entitlement". Sometimes tactfully educating customers is a challenge.

rbarbour:

So make it easy for them by adding "Menu" to jquery.slimmenu.min.js file

<div class="collapse-button"><span class="icon-bar"> **YES, This mean MENU! :laugh:**</span>

:laugh: Don't tempt me!!!

RixStix:

MegaMenu options.
The downarrow icons are too teenie for my fingers, so I usually end up tapping the text and Menu opens/collapses.

Hey wanted to share some changes I made based on subsequent feedback from my testers that you might find useful.. Some reported that they were not always able to hit the arrow accurately on a consistent basis when interacting with the mega menu on touchscreen devices.. (this issue is platform independent.. both Apple and Android users reported the same issue..) The mobile dropdown menu doesn't have this same issue as the area around the arrow is a little wider.. So I made some refinements to the mega menu styles on tablet device displays to adjust for larger fingers and aggressive tappers.. I have the following in my responsive tablet CSS.

ul.slimmenu > li, ul.slimmenu1 > li {margin-right: -4px;width: 13%;}
ul.slimmenu li .sub-collapser, ul.slimmenu1 li .sub-collapser {width: 50px;right: 15px;}
ul.slimmenu li ul li, ul.slimmenu1 li ul li {width:200px;padding-left:2px;/*font-size:95%;*/padding-right:15px;}

You may need to adjust for your own site.. But what this did was to add some width to the area surrounding the arrow so that it is now a bigger target for larger fingers or more aggressive tappers.. HTH..

Hello,

I am trying to change the name of "categories" in the header menu navigation.

Also,

I am trying to change the content under the "Information" tab.

Any specifics or an example on how to achieve this would be beyond great.

Daba_do:

Hello,

I am trying to change the name of "categories" in the header menu navigation.

Also,

I am trying to change the content under the "Information" tab.

Any specifics or an example on how to achieve this would be beyond great.

You can use the admin--tools--developers toolkit to search for text that you want to change. The header menu "categories" is defined in includes/languages/english/extra_definitions/override/westmisnter_new_defines.php

To change the menu you can edit includes/templates/override/templates/tpl_modules_mobile_categories_tabs.php

Thanks,

Anne

Hello,

Would someone have a moment to please take a look at my site using Chrome, I have a css issue that I am stumped on that is only present in Chrome.

There is a large space between the Categories header and the "All Products" menu item when viewing my store in Chrome however it is not there in Firefox. I have used Firebug and web developer in these browsers and I just can not seem to find what piece of my CSS is causing this.

I appreciate your time to take a look and point me in the direction of the code that I need to be correcting please :-)

http://www.beehavendesignz.com/shop/index.php?main_page=conditions

Hi Anne,

Could you please confirm for me the correct way in which to remove the search box from the header area and turn it on in the left sidebox space?

Do i remove the code from tpl_header.php at approx line 127:

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

Or is there another way? I have tried turning off search box in the layout box control and renumber orders but this is not having any affect to achieve what I wish to do, which is move the search box from the header area to the left sidebox area.

I appreciate your assistance and thank you in advance for your time to help me with this please.

missesbeehaven:

Hi Anne,

Could you please confirm for me the correct way in which to remove the search box from the header area and turn it on in the left sidebox space?

Do i remove the code from tpl_header.php at approx line 127:

You need to turn off the "single column" status to turn it off in the header.. DO NOT remove the default code.. there's no reason to.. just turn it off..

Yay I found the solution, and thought I would post for others in case anyone else would like to move the search box from the header area.

Login to the zen cart admin.

Tools Menu -> Select Layout Box Control from the Tools menu

Click on sideboxes/search_header.php

Adjust settings as follows:
Left/Right Column Status: On
Location: (Single Column ignores this setting): Left
Single Column Status: Off
Show this Box @ Min-Width: Off

You will also need to add / amend the stylesheet with adjustments for the search box to appear as the other side boxes do.

missesbeehaven:

Hi Anne,

Could you please confirm for me the correct way in which to remove the search box from the header area and turn it on in the left sidebox space?

Do i remove the code from tpl_header.php at approx line 127: