I've been doing a series of tests with visual output, running these through some automated routines focusing on things search engines go wild with these days, and there's one thing which is a bit frustrating.
While main navigation appears fine, thanks to the off-canvas menu for devices, list based links or sidebar buttons / dropdowns are getting in a bit of a pinch. The common error message is "tap targets too small", indicating that the touch area defined for a link is too small. Or, people's fingers are too big. One of the two.
Now bear in mind, I'm a novice at this type of code, but it strikes me that it should be possible to get around this. Questions are: where specifically, and what are the best practices.
See, I don't fancy tweaking the parent theme. Customising via a child theme should be possible, but ideally - somewhere down the road - I'd probably prefer to keep such modifications in a functionality plugin. Now if I understand things correctly beans compiless any css to less. So where I insert custom css should not matter that much, correct?
The other thing, as alternative approach, I'm not that deep into UIKit at this point, but would I run into issues (conflicts, dependancies) if I were to just tweak the specific css for (ordered) lists for margin/padding?
never make changes to core files. And add paddings and margins properly on your offcanvas button. Then it should not show that problem. Also add the meta viewport tag correctly. One of my client had this problem it was the fix. So i guess it'll work for you too. And one more thing Beans comes with that that meta tag but if you have removed it from the core file add it again. And if you have made changes to the core file i recommend you to download a new version and replace with the old one.
If your site is live and you have a cache plugin or cloudflare disable them and select the purge from cache option before doing another test.
Well, the off-canvas menu is not the problem, except on really small devices (but that is a statistic virtually neglegible). Good point on the viewport tag though, I was experimenting with layouts, and that one got me in a bit of trouble.
Where it comes to content though, so that which visitors actually see/read, that's where I'm bumping into these tapping problems. For example, when I have a list of service options, as an unordered list the individual items are too close together. As it appears.
I'm working on a local site, I should add. I did run into staging & caching issues with other tests, hence why I'm keeping things as simple as possible 🙂 It's a big enough learning curve here already!
Alright, so I won't be tweaking the core files. That leaves adding css, which is then put into less.
Actually, I may have figured something out.
Adding a .uk-list-space class to a ul tag increases the vertical space between list items. Combined with using .uk-button for the a href's the result is no further Tap errors.
Doesn't strike me as very elegant though. Particularly since this way I have to manually add it for each list & item.
And crap. While that works fine for list items with links within post/page content. I'm currently not seeing a way to solve this for sidebar / widget area content. While it appears possible to dabble in CSS rules, I'm thinking that beans may very well be capable of a more elegant approach. But how.
Did some testing, it seems this is pretty much a UIKit issue. I went on a search for online pages & sites built with it, running them through automated mobility tests, but they all share the same fundamental issue. Might very well be that the baseline UI vision was put in place before Search Engines last year started to process this as a datapoint.
There's some other aspects of that visible as well. Legible Text Guidelines are also a (severe) mismatch for UIKit out of the box.
The good part is that for Legible Text modifying matters via CSS is relatively simple. The bad part is that Tap Size is a real issue. I'm still chewing through UIKit css dependancies but a lot thus far seems very connected, making simple changes to margins & paddings very tricky. An alternate approach is duplicating classes and tweaking those before using them depending on viewport.
To give a few examples. An important link element should be a minimum of 48 CSS pixels tall/wide (7mm). Search Engines acknowledge that not all tap target can be or should be 48 CSS pixels.
They note that if your tap targets are less than 48 CSS pixels, there should at least be 32 CSS pixels (5mm) between any tap targets. Yeah.
Simply put: size matters, but it matters less than the space between targets.
This counts for - apparently - more than half of typical "tap target size" errors people get on seo tools. The tap targets are too close together, rather than the actual tap target being too small.
I've figured out the CSS bit to pretty much solve the UIKit Tap issue with list items without resorting to complex CSS/Viewport drama's, but I'm not sure where this should best be used: child theme styles.css? functions based custom loading? Help?
li a{line-height:1.8;}@media(min-width:60em){li a{line-height:1.2;}}Obviously proper viewport declaration is always required. Depending on whether you made other Legible Text style changes you may need to tweak the ratios in the above. But this is pretty much the minimum.
Hey J.C
You would advise to check this discussion which covers how to change UIkit LESS variables available which might help you making changes globally.
For stuff which is purely UIkit related, I would suggest to address your concerns on the UIkit Github issues.
Thanks,