Hi,
I am happy with the layout on the desktop, but Google has sent me an email advising me that my clickable elements are too close together on a mobile screen.
Please can you advise how I can set up my stacks or which ‘add-on’ I can buy, to solve this problem?
It would be great to be able to keep the desktop screen as it is, but to have the mobile layout showing the paintings in a single column. Can this be done?
It’s difficult to see from screenshots what is “clickable”. Is it the image or all or part of the text or something else? It might be more obvious on the live site, if not that’s a usability issue. A URL would be helpful.
Touch targets need to be easily identifiable to the user. Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.
Nielsen Norman Group ( World Leaders in Research-Based User Experience) research shows a minimum touch target should be around 0.4 inches.
UXMovements research puts the highest accuracy was found with buttons between 42-72 pixels.
Now, what size does Google want? Who cares, its about usability to the site user. Make an easy to identify, easy to touch target. Is it obvious what’s clickable and what’s not clickable on the page? Can the user easily “touch” the clickable targets? Is this true on any size screen? Even smaller than the iPhone?
I did find it peculiar that you have the images separate from the text. Do the three columns never stack to a single stacked display? Can’t imagine three wide on an iPhone SE or some of the smaller Android phones.
Hi Teefer,
I didn’t use to have such a peculiar layout. I have done it this way to make the website layout look more uniform. Because each image has a different height, I couldn’t find a way to make the images line up, then the text been in a uniformed line underneath. I was having to use ‘spacers’ to shunt the text into position you see. Doing it that way didn’t work as the lay out moved around depending on the screen width. It looked a mess. This is my ‘solution’. The only clickable element is the word ‘Zoom’. If you have any advice to make the layout work as, I have described - be it using different stacks, or buying add ons - I’ll do it. I just want the layout to looks like it does when you click the URL on all screen dimensions. However, I’m happy to have the images be presented in a single file on a mobile if that improves usability…
Here is the URL: https://deborahgriceartist.uk/
Btw, the site stays 3 wide on all phones, It’s a problem when holding the phone it a portrait position (which if course is normal) - I really need to find away for the stack to become a single column when loaded on a phone.
The original ‘column’ stack has unfortunately no settings for desktop and mobile, but it stacks the the columns below 400 pixels, which is great for small devices, but everything modern, like the iPhone Plus (6,7,8…) and iPhone X Max and others, interact more like a Tablet size.
You have a couple of options if this is not the desired behavior:
.Hope this helps.
I user Marathia’s SmartColumns2 stack on non-Framework themes. It offers greater control over positioning and you can set the breakpoint (where the columns stack on top of each other) manually. Not expensive either.
Okay, so that’s the main issue from a usability perspective. In modern website design, it’s always an easier approach to start with the smallest screen size and work your way up to the larger sizes.
I know that the original topic was about the size of the clickable target that Google console gave you, btw, the “zoom” isn’t obvious that it’s clickable and it’s a tiny target for touch even on an iPad. So it does need work.
But right now I’d put that much lower on the list of what needs to be reworked.
You certainly don’t need a framework to address columns. There are a number of none-framework solutions for column breakpoints. Most frameworks are great for having total control of the layout, but it’s overkill for simple column stacking.
I’d also never use a two layout approach, where you “hide” one layer on some screen sizes and replace the same content for another screen size. Several reasons, first you only are hiding the duplicate content. Both sets of content get sent to the browser, so it effectively doubles the weight it adds to the page, slowing down your page. Keep in mind that over half of website traffic is non-human. Search engine crawlers and other robots might not distinguish part is hidden and part is displayed. Not to mention the maintenance nightmare you are creating for yourself. Ever future change would need to be done twice.
So function before beauty, even if you can’t easily get the text and images to space correctly, you still need to stack the columns on smaller screen sizes.
I’m not near a real computer right now(on iPad) so I can’t give you the solution for stretching the images from the text when the columns aren’t stacked, but it can be done.
Now for the “Zoom” issue, I’d probably make it a button. Right now it’s tiny on mobile and it’s not obvious that it’s clickable. Easy to touch target that’s apparent that it’s a target.
Hi Teefer,
Thanks very much for your reply. I’m going to get on with the ‘button issue’ straight away. Please can I ask you to send me your solution for “stretching the images from the text when the columns aren’t stacked, but it can be done” when you get a near a computer screen.
Thanks, Debbie
Or if you want each individual item to be clickable, you could put them inside this - LinkBox | Stacks4Stacks
This looks perfect! Thank you! 
It definitely can be done. I’m pretty busy over the next few of weeks and won’t be near a Mac much.
From a coding standpoint, the solution is really quite simple, it called CSS Flexbox. It’s nothing new (2009 even IE11 supports it), and I could give you native CSS and Html to do the columns and the “stretching” the column content pretty effortlessly.
The problem comes in trying to use most of the column stacks available. Most of the stacks to make columns or sometimes called grids use an old technique (called float and clearfix), that fakes even ancient browsers into allowing responsive page layout.
I can’t tell you what stacks use what technique, without manually checking everyone out there, and I don’t know what stacks you have. Now I know for instance Foundation 6 uses Flexbox for responsive layout, Foundry like the column stacks that come with stacks still uses the former Float and Clearfix.
Now, normally I could simply give you some simple code (~10 lines) to add to any column that could easily create a column body that would separate the image evenly from the text. Kind of a header, body, and footer. The problem, flex ox to work relies on a direct Parent siblings relationship. Normal stacks put all these stacks-out, stacks-in divisions in place that break that direct relationship that Flexbox (and CSS grid) rely on.
I know this sounds very technical, but it’s a limitation of most stacks (Foundation 6 is one exception).
Now I could give some code that would work if you could tell me the fixed height of the tallest column you are using.
Others out there might know of a solution, there are tons of stacks that I don’t use or even know about.
I think the more important thing is that you stop using non-responsive columns. Usability always should be more important that styling. Right now your site with 3 column wide layout on small screens (about half of the users are on mobile) is almost unusable. I can’t tell one image from the next on my iPhone 7.
What you’ve said has been super helpful, thank you. The above info is perhaps a bit advanced for me, but has given me enough of a kick to seriously consider re designing the building blocks of my website. I’ll have a look through what stacks I have and I’ll go from there. Thank you. D
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
