CSS Need To Change Tap Targets

We have a site at http://www.theherbsplace.com and we need to comply with PageSpeed's flagging our links as being too small on a mobile device.

https://gyazo.com/4eb82b8e88d112868a37537a9cef1d80

This is the section on the site that requires the changes
https://gyazo.com/6d252536908390ca0fe994cad33353f2 it can be found at the far left of any page on our site.

@media screen and (max-width: 768px) {
#header_user_info a, ul.tree.dynamized li a, #block_footer_html.block div li a, div.block_content ul#myAccountNav.mobiFooterNav.open li a, ul#cmsFooterNav.mobiFooterNav.open li a, li#shopping_cart a, ul#responsiveAccordion li a, li span.grower.OPEN a, li span.grower.OPEN ul li a.selected {
			 padding:10px;
			 font-size:25px;
			 line-height:48px;
		 }
}

Open in new window

sharingsunshineAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
My experience:
-- Visited theherbsplace.com on mobile (iPhone 5s)
-- Scrolled down
-- Scrolled some more
-- Scroll down
-- Scroll
-- Scroll
-- Scroll
-- Scroll some more (endless menu choices)
-- Never found the menu in question
-- Went away

Your visitors will not be so patient. You might want to re-think the entire mobile experience. Maybe organize the many menu choices into parent groups, create a few larger areas on the page to handle each group of products.
sharingsunshineAuthor Commented:
I appreciate the suggestion and I have made some changes along those lines.  Albeit, due to theme restrictions I have included the categories in the menu box at the top.

However, that still leaves me empty on fixing the elusive tap targets.  Even looking at the source  code I can't find the code in question.

So where do I go from here?  Do you have any suggestions?
Tom BeckCommented:
Can you provide a link where I can actually see the menu depicted in the image you posted? It was not at theherbsplace.com and I'm not inclined to search through 66 menu items to find it myself.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

sharingsunshineAuthor Commented:
It is on any page to the left of content.  I think the problem is that you are seeing the category without the subcategories showing.

Here it is with the categories not showing - notice the + at the end of the heading that expands it.

https://gyazo.com/99396e9e7e2cb59b5ddb8343baf74be3

Here is the same page with them expanded
https://gyazo.com/6546dc0edecb110e35f70bf32297e711 and yes I would love to make the expander more pronounced.  I just haven't found the css to do it yet.

Hope that makes more sense.
Steve BinkCommented:
I'm with Tom Beck - you need to restructure the whole thing.  The experience from mobile is just not very good.  Your navigational menus display underneath your content - they repositioned poorly from desktop.  You should examine some pop-/slide- in/out jQuery menus.  Look into lightboxes, as well.  

The menus suffer from TMI - no one wants to look through that much stuff to maybe find what they want.  What works on a desktop site is horrible on mobile, and usually vice-versa.  

I believe the report is referencing the relative proximity of the sub/category link and the expand/collapse trigger element.  The spacing and size of the links themselves are fine, but I didn't even *see* the trigger element until I read your last comment, and I was looking for something like that when I first visited.  They are sized appropriately on the desktop version - why didn't you resize them along with the links for mobile?  Someone who is visiting for the first time and is already overwhelmed by the weight of the top level of your menu is not likely to see these subtle markers.

For the record, I'm on Android w/Galaxy 5.
Steve BinkCommented:
Also, the selector for your trigger elements looks to be "span.grower", with an additional class of "OPEN" or "CLOSE", depending on state.

The CSS for those selectors appears to be dynamically added through Javascript after page load.  I'm afraid you're in for a bit of research to find it.  You can always try putting some overriding style in your CSS files, but you'll probably need to use !important to make it stick.

A better option would be to style it properly the first time.  (i.e., get rid of the javascript injection)
Slick812Commented:
OK, as near as I can tell, this is the web page <ul> <li> structure for the "Essential Oils - 100% Pure" menu section -

<li >
<a href="http://www.theherbsplace.com/11-Essential_Oils_100_Pure_page_1_c_1">Essential Oils - 100% Pure
</a>
   <ul>
      <li >
          <a href="http://www.theherbsplace.com/36-Essential_Oil_Kits_page_1_c_26">Essential Oil Kits</a>
      </li>
      <li >
          <a href="http://www.theherbsplace.com/43-Essential_Oils_page_1_c_33">Essential Oil Singles</a>
      </li>
      <li >
         <a href="http://www.theherbsplace.com/44-Essential_Oil_Blends_page_1_c_34">Essential Oil Blends</a>
      </li>
      <li >
         <a href="http://www.theherbsplace.com/76-Essential_Oil_Accessories_page_1_c_66">Essential Oil Accessories</a>
      </li>
   </ul>
</li>

Open in new window


but your code has been minimized, and it is a large head ache For me to try an find the CSS that may affect this menu section as a MENU <UL> <LI> section. So I have no CSS for to make it Larger, But as near as I can tell these menus are big enough to tap in mobil.

HOWEVER these pages are NOT good for mobil experience, I agree with Tom Beck saying - "Your visitors will not be so patient. You might want to re-think the entire mobile experience"

You might get some Web structure (theme) that STARTS IN MOBIL, as the beginning of your design phase, and not start in desktop with some giant left column (non-expanding) selections (not really  a menu, just a stack of links <a>)
sharingsunshineAuthor Commented:
I appreciate all the suggestions.  However, I am only one person and I am not an accomplished programmer.  So right now I need to satisfy the pagespeed requirements.  I have mobile users now and our tap targets were much smaller before.  So I expect the ux will be even better than before.

Essentially, I am using a template for Prestashop and there are upgrades that answer all you have detailed but there are several mods that were done so I need to phase in a change switching over the mods on a test server then moving to the new site once it is tested.

I did find the code for the categories and you were correct it was minimized something I forgot to remove before you all looked at it.

#categories_block_left  li {border-bottom:1px dotted #cecece}
	#categories_block_left  li.last {	border:none;}
		#categories_block_left  li a {
			display:block;
			padding:7px 11px 5px 12px;
			background:url(img/arrow_right_2.png) no-repeat 0px 10px transparent
		}
		
	#categories_block_left  li ul {margin-left:13px}
		#categories_block_left  li ul li {border:none}
			#categories_block_left  li ul li a {

			}
		
#categories_block_left li .OPEN,
#categories_block_left li .CLOSE {
	display:block;
	float:right;
	margin:10px 5px 0 10px;
	height:9px;
	width:9px;

	background:url(img/icon/less.gif) no-repeat;
	cursor:pointer
}
#categories_block_left li .CLOSE {		background:url(img/icon/more.gif) no-repeat;}

.blockcategories_footer .OPEN, .blockcategories_footer .CLOSE{display: none !important;}
/* footer */

.blockcategories_footer ul ul {display:none !important}
#categories_block_left li a.selected{font-weight: bold}

Open in new window


Given this code how would I answer the tap targets issue?
Slick812Commented:
Not sure, just a guess? ? in this CSS definition -
#categories_block_left  li ul {margin-left:13px}
		#categories_block_left  li ul li {border:none
/* change the height here maybe? */
height: 50px;}
			#categories_block_left  li ul li a {
/* change the font size here Maybe? ? */
font-size: 200%;
			}

Open in new window

but there may be other CSS levels above that affect this, as height and or font size, and or padding? sorry not much time to experiment with it.
sharingsunshineAuthor Commented:
Slick812 thanks for trying but using your values the category headings overlap.  Using this they are as large as the other category listings that passed.  But they still don't pass on Google pagespeed.

@media screen and (max-width: 768px) {
	#categories_block_left  li ul li {
		border:none;
			line-height:48px;
			}
			#categories_block_left  li ul li a {
font-size:25px;
			}
}

Open in new window

Slick812Commented:
OK, you may need to try the links for size on an actual cell, and judge for yourself the convenient or difficult to tap those things, and miss hitting a neighbor link.

you can increase this -
    font-size:25px;

to a higher value -
    font-size: 32px;

and see if that changes it to be better? ?

But I really have to say you need to get that long list of stacked links to be in an EXPANDING vertical MENU, , and it is very very BAD design to show a web user more than 10 or 12 choices in the top level menu, You can not get around the death knell that your current menu with dozens and dozens of links, will have on your user experience.  you need to organize you pet products in to major categories like "Nutrition", "Herbal Health", "Essence Oil treatments", "Leases and Collars", etc. and then have sub menus that show (slide out) when a category is touched-click.

 If you do NOT change it to an expanding menu, then at least get rid of the small triangular arrows in that menu, , BECAUSE that is a universal sign that it is a touch to just get a menu sub-level to show, and NOT change the web page view.

there are Many expanding menus available from Jquery add-on to the native bootstrap expanders.
sharingsunshineAuthor Commented:
Thanks for the additional suggestions and  will do what I can to make those changes.  Regarding your code,that made it a bit larger but still doesn't pass the pagespeed test.

https://gyazo.com/f09ae0c26d0cc3796cf56da2516f2f5a

so it isn't the font size it appears to be the open and close + signs.  That is what I don't know how to style if that is what is being flagged.
Tom BeckCommented:
Here's what I would try.

1.) Increase the size of the OPEN and CLOSE icons by increasing the width and height to 15px and adding background-size:cover.

#categories_block_left li .OPEN,
#categories_block_left li .CLOSE {
      display:block;
      float:right;
      margin:10px 5px 0 10px;
      height:15px;
      width:15px;    
      background:url(img/icon/less.gif) no-repeat;
      background-size:cover;
      cursor:pointer
}

2.) To fix the Page Speed complaint, I would add a width to the anchors for the menu items. Start with width:195px and re-test. If it still fails, slowly decrease the width by 5 or 10px at a time until it passes. Then decide if you can live with the visual effect of that change.

#categories_block_left  li a {
      display:block;
      padding:7px 11px 5px 12px;
      background:url(img/arrow_right_2.png) no-repeat 0px 10px transparent;
      width:195px
}

It's not that the tap targets are too "close" to each other, they are in fact overlapping.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sharingsunshineAuthor Commented:
Tom, that did the trick.  In case you are wondering Slick812 I commented out your code and it still passed.

I do want to say that I appreciate all the advice and now that I have this optimizing better I will turn my attention to building a test site with the new template and get started in that direction.

Tom, please send me a screenshot of what is overlapping so I can see what you were talking about.  In case, I run into this again.

Thanks,
sharingsunshineAuthor Commented:
Thanks for solving this problem.
Tom BeckCommented:
<a> overlaps the <span>By making the <a> width:195px instead of the full width of the menu, the two tap targets are no longer overlapping.
After the fixes applied
You're welcome. Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.