Forum Replies Created
- Posts
Okay, I’ll drop the subject. Two short final questions:
- Are you still planning on widening the submenu, as you said on the Beta Feedback thread that you would do?
- Since what I installed was the Beta, will it still alert me when updates come out, or do I need to reinstall the released 2.5 and set my settings again?
Sorry about the multiple topics – I only did that because twice you closed the topic so that I could not respond. Thank you for combining them, and especially for leaving it open this time.
I’m not looking for something more advanced. When you added a toggle menu to version 2.5, its design is such that it is clearly intended to include submenu capability. In the Beta Testing thread you even said you were working on fixes to it, e.g. the width of the submenu and the line spacing. (I’m looking forward to that updated version – I tried fixing that in my child theme but failed to get the right combination of CSS rules.) Meanwhile, even though you gave up on the Beta Testing phase (I don’t blame you a bit – one tester is not enough to have a whole phase!), you invited customers to report bugs in the Bugs forum. So I did. It took me a while to figure out exactly what was happening (my first description was inaccurate – the menu is not folding up, per se), but I kept you informed of my findings. Then you started saying that this issue was specific to a single device that might have an unusual setting or something, and closed my topic (twice) before I had a chance to clear up what seemed to be a misunderstanding. You seemed convinced that the submenu works (even with a parent link) on enough devices that you can claim it as a feature of your theme without further development. That’s the point I have issue with. I tried to help with testing, but my testing results were not treated as valid. If you go ahead and admit that it doesn’t support having a link on the parent item (and I recommend that you put that in your documentation so that you get fewer support contacts from others in the future), that’s fine. I would have changed my menu to avoid parent links (or studied how to make it work and edited the child theme), and we would have been done talking. But you didn’t do that, so I thought you still intended for even that combination of content to work okay. That’s why I kept writing back – I’m not trying to be difficult; I’m trying to help by providing Android testing and feedback, since you apparently only have Apple devices.
Currently, worldwide market share reports state that Android has about 80% of mobile sales and growing steadily, while iOS is dropping. In the U.S. it is less so, but Android is still over 60%. In May, the Samsung Galaxy S5 was the second-best selling smartphone in the U.S., and Samsung as a single brand sells more than Apple, with 37% of sales over the most recent 3-month reporting period. (Source: http://news.yahoo.com/despite-iphone-6-hype-android-continues-dominate-ios-175728413.html, http://www.businessinsider.com/iphone-v-android-market-share-2014-5, etc.) Apple has been proudly claiming that despite much lower sales their devices are still used more on the web, but very soon that will no longer be true either. (Source: http://bgr.com/2014/07/01/android-market-share-q2-2014/)
Given that reality, I would think that supporting Android would be at least as important as iOS, or even more so. However, as I have said in https://startupwp.com/topic/toggle-menu-with-submenus/ and https://startupwp.com/topic/page-refreshes-if-submenu-on-toggle-menu-is-open/, I have tried to use three different Android devices:
- Samsung Galaxy S5 (the top-selling Android cell phone by far)
- Fujitsu ARROWS cell phone (an example of a different brand)
- Acer Iconia Tab A100 (7″ Android tablet)
All of them behave exactly the same way with the new toggle menu on StartupPro 2.5. If a menu item has both a page link (or custom link – anything except just “#”) and a submenu, you cannot use the submenu on any Android device I have tested.
You keep closing my threads because you say that it works on “the most popular devices”. Really? Are those only Apple devices, or do you plan to support Android, too? Have you tested it with the Android browser at all? (If so, you have not mentioned it so far – you have only talked about iPhone and iPad.) My 3-out-of-3 observations would lead me to believe that this is not about individual models of devices, but about the fundamental behavior of Android’s standard browser – it sends a “click” event when the parent of the submenu is tapped, which your theme does not cancel, so the page is refreshed with the parent link. I totally agree with you that a simple CSS-only implementation would be cool, but it may not be possible – many other developers have tried to find simple solutions but in the end found it necessary to use Javascript to cancel the click event.
You closed this topic, but I think that is premature. I would have talked to you privately about this, but there is no way to contact you except the forum. (You’re welcome to get my email address from your forum registrations and write to me offline if you prefer.)
Although your final post on that thread seemed to indicate that you thought I was asking for a redesign, if you read the first two paragraphs of my final post on that thread, you’ll see that all I specifically asked for was one more minute of help with troubleshooting (the rest of the post was clarification and additional information that I had learned by internet research and experimentation with the themes that come with WP). All I know so far about the issue at hand is that the menu works on some undisclosed testbed on iPhone and iPad (your demo site has two submenus, but neither parent has a page link), but it doesn’t work on my site with three different brands of Android devices. So I asked you to please do one of the following (both would be even better):
- Try my site on your iPhone
- Give me a link to the site that worked for you, so that I can try it with these Android devices
Even if it weren’t “unique, original and experimental” new code (using your own words), I don’t think that’s too much to ask from the support department of a business I paid money to.
We’ve tried both tapping a parent element that has no link set (or just a #) and one that actually links to a page…
…Unfortunately, this appears to be a problem at the device level. iPhone and iPad work fine.Before we assume it’s an Android vs. iOS thing, did you try my site? http://thinkword.com
I found an old WP forum thread where iOS users were having my problem with the TwentyThirteen theme. It was supposedly fixed, so I tested with my Android tablet. The demo they cited (on WP.com) does work, but my site running TwentyThirteen does not. Either WP.com added a hack to their copy of the theme that is not in the WP.org release, or there is something hinky with my site.If my site fails on your devices, can you share a link to a site of yours that works, so I can try it with devices I have access to?
We’re unable to find any resources on Galaxy tapping, why it would work differently from other popular devices or how to adjust those settings.
It wasn’t just my husband’s Galaxy; my Acer tablet does it, as does a friend’s Fujitsu smartphone.
One popular option that many use for their mobile menu is to simply hide sub-menus…
Why would hiding submenus be a solution? That would mean no access to the submenu items at all for anyone using a mobile device. The TwentyFourteen theme goes the opposite direction, making the entire menu “flat” (everything open, just indents for sub-items) when in toggle-menu mode. The designers of that theme apparently felt it was too hard to make open/closing submenus work without Javascript, or maybe flat menus are the new style this year…
I’m not sure what you mean by “both scenarios”. You added a link to the parent menu item of the submenu, and then on a touchscreen device were able to tap on the parent item to open the submenu, and the site didn’t go to the parent item’s link a couple seconds after opening the submenu? Is that on a demo site somewhere that I can try myself?
Yes, of course the behavior would be different, as tapping is impossible with a mouse, and clicking is impossible with a finger. All the descriptions of the problem were from testing on the mobile devices I mentioned – a smartphone of unknown type, a Galaxy S5 using the default Android browser, and an Acer Iconia Tab A100 7″ Android tablet. The issue is with tapping, i.e. the use of a touchscreen. In those cases there is no such thing as hover, so the only way that a user can open the submenu is by tapping the parent item.
The only thing I did with my desktop browser was use it to confirm that your demo site had no link on the parent (I clicked and nothing happened). If your theme will not support a link on the parent item, you will need to make that very clear in your v. 2.5 documentation.
New information: I figured out why your demo doesn’t do it – you apparently don’t have a page associated with the “parent” menu item of the submenu, but I do. I just now realized that it is not simply refreshing the same page – it is going to the parent link. So whatever code opens the submenu on a single tap needs to stop the event from triggering the action that would happen if a mouse clicked on the parent. I assume the desired behavior would be that a double-tap, long-press, or some other different touch action would trigger going to the parent page, right? I don’t own a smartphone myself, and do very little web browsing on my tablet, so I don’t really know what the customary tap actions and behaviors are for this situation.
Hmm, the plot thickens… No, it doesn’t refresh on your demo site. So then I thought, “I must have screwed something up in my child theme.” But if I switch my site to the parent StartupPro (whose code I have not touched – I swear!), it still does it. Perhaps there is a setting in StartupPro Options that is different between your site and mine that is causing this – I don’t know.
I don’t know what kind of smartphone my friend was using who first noticed the problem – it could have been either iPhone or Android (I can ask her if it’s important). My husband’s phone is Android and I have an Android tablet.
The site is (currently, while in development) at http://thinkword.com – take a look. If you want admin access, let me know how to give it to you securely.
Hmm, am I the only beta tester? Anyway, I noticed an unexpected behavior (intended by you or not, I don’t know). When using on mobile, after tapping “Menu” to open the menu, if that’s all one does, the menu stays open until you tap again to close it (that’s what I would expect it to do, since it is a “toggle menu”). But if you then tap an item that has a submenu and the submenu opens, you only have a few quick seconds to decide what to do, or the whole menu will close up on its own! Is that intended? It seems quite inconsistent – the behavior should be the same – either have a timeout or not (I would prefer not, since you still have the toggle button available), but it seems bizarre to have a timeout only if a submenu is open (that affects the whole menu, not just the submenu).
And if you plan to have a timeout at all, I think the time is way too short – I don’t know how many seconds it is, but the person to whom I was showing the site felt rushed looking at only two submenu items – imagine if there were half a dozen or more!
I noticed another issue with submenus at the mobile size. You reduced the width from 180px to 150px, and that got my attention, because one of my first couple of submenu items is forced to wrap on the mobile screen. When that happens, the line spacing is such that it’s not obvious that it’s a single item.
Take a look at http://thinkword.com/wp-content/uploads/temp/StartupPro-2.5-mobile-submenu.jpg – it is two cropped screenshots of my developing site in Screenfly on the iPhone 3/4 setting. On the left is the current StartUpPro and on the right is version 2.5. Two concerns:
- Is there a reason why the submenu needs to be that narrow? Yes, some of the main menu need to be accessible on the left of it, but mobiles less than 360px wide are rare these days. Also, a fixed width in pixels makes the submenu a long way over from its parent on mid-size screens (like a 7″ tablet in portrait mode). My suggestion is to use a percentage in the media query – something around 70% looks pretty good to me.
- When the menu item “Children’s Sunday School” wraps, it’s hard to tell that it is one item. I suggest that the line height be reduced – you are currently using the line height to separate the menu items, but that should be possible with some combination of padding and margins, so that line height can be used for the text itself. I failed in a short attempt to whip up an example, but you know your theme’s CSS better than I do, so you can probably get it to work with no trouble.
I’m so sorry! I wasn’t originally testing it on anything, because I don’t own a smartphone. I was simply observing the behavior at small widths and in the Screenfly simulator, and I assumed that if hover worked, tap would not (because I thought it would act like a mouse click, which would open the parent item instead of the sub menu). But my husband does have a smartphone, so after your last post I asked to borrow it and tried it. Amazingly, it does work as you say! Apparently tap on a smartphone (at least on a brand new Galaxy S5) is a distinct event from a click – that’s great.
But one new problem occurs on the real hardware that was okay in the simulator – on the Galaxy S5 (default browser), the little arrow that indicates that a menu item has a submenu is not visible for some reason. There is no visible scrollbar, so that isn’t the cause. Here are screenshots with and without the submenu open.
I guess I’m the first to give feedback. Thanks for adding an toggleable Menu link for small sizes (instead of having the whole menu taking up space all the time). But to fully serve touchscreen users, you need to do one more thing (and it should probably be done at all sizes, because of iPads and such): change the way submenus respond to events. Right now only hover will show submenus, and touchscreens cannot hover – they can only click, double-click, and long-press. (There may be other places in the theme where hover is used, but the nav menu it where I noticed the issue.)
I have not personally done the programming for solving this problem, but doing a bit of googling and reading some of the hits, here were a few pages that looked informative:
- http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/ (except that he didn’t try to detect touchscreen devices, which is the approach I would think most effective)
- http://callmenick.com/2014/03/19/touch-events-instead-click-hover-javascript/ (after I refined my search to look for touchscreen detection)
Another page, although applying it for something else, had this neat little function for detecting a touch screen, without using Modernizr:
function is_touch_device() { return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); }I don’t know if it works on all devices, but it looks promising – I like simple.
But then http://jeffschuette.com/2014/01/15/detecting-touch-devices/ is a simple blog post that points out the weaknesses in all current attempts to solve the problem – argh!
Anyway, perhaps some of this information might be helpful to you. Any move toward more support of touchscreens for the nav menu is appreciated.
Good to hear. If you need testers, feel free to give me a holler. I’m also building it into a bilingual site with Japanese, so I can make sure it does localization correctly.
Pardon me for jumping into an old discussion, but I have a comment on this, and a suggestion that, if coded, you probably would want to deploy universally in the theme. Standard practice for mobile layouts these days is to start by showing just a link/button with the word “Menu” and/or a menu icon (typically three horizontal lines), and when touched/clicked on, the whole menu (including sub-menu items) would open below it (and close when the Menu button is touched again). That would solve the problem James was having in February (which would indeed be a universal problem for anyone trying to access a site with submenus on a touchscreen device), as well as my concern, which is that the menu fills the whole screen on a small device, so every page change requires scrolling before any content can be seen.
Would you consider implementing this very common style of menu behavior?
Never mind. When I started changing the labels of some of the items and it didn’t have any effect, I figured out that something else was fishy. I eventually figured out that I have to add the menu to the “theme location” for it to work. What threw me off is that there is apparently some magically created menu with all your static pages that appears in the main menu location if you haven’t assigned an actual administered menu to it yet.
That simplified the code, but didn’t change the symptom. However, I assumed the widget areas weren’t working because nothing was showing in the header – I didn’t check the Admin side (duh!). I don’t know what the situation looked like while I was putting the theme together, but at the moment the widget areas are all there; the reason nothing was showing correctly (and my tagline was appearing in the sidebar, which was crazy), is that at some point WordPress pushed all the widgets “down” two areas from where they were before! So my Banner Center widget was in Sidebar Widget Area, the Banner Right widget was in Left Sidebar Widget Area (which doesn’t actually appear), and my real sidebar widgets were in Right Sidebar Widget Area (which doesn’t appear). I have moved them all back now, and all is well. :-)
Okay, I get the idea. I don’t currently have StartupPro, as I’m not even sure whether the site I’m working on (an old Joomla site that needs to be migrated) will end up in WordPress, and if WP, whether this will be THE theme for it. So far I basically like it, but there are some hitches to be worked out. All that to say, I don’t currently have a Custom CSS box (no Advanced Editing in the non-pro version), so I created a child theme and am working in the editor on that. But if we go with this theme, I’ll probably spring for Pro for the long haul.
Thanks for the clues.
True – that’s simple for those of us who know CSS. I was hoping there was some sort of setting, to keep it flexible for the people in whose hands I will leave the site when I’m done setting it up – they probably won’t ever venture into the Editor section. I guess you are saying there is nothing for non-programmers, that I somehow missed?
