Results 1 to 19 of 19

Thread: "Fix mobile usability issues found on ..."

  1. #1
    Join Date
    Jan 2012
    Posts
    965

    Default "Fix mobile usability issues found on ..."

    We received an email from google about my blue park site. When I click through to see the errors I get this:

    1 Viewport not configured 329
    2 Small font size 329
    3 Touch elements too close 329
    4 Content not sized to viewport 8



    Any clues as to what 1 and 3 mean, and how/where we fix these? Our websites don't stray very far from the basic bluepark design, so not a whole lot of customisation there...

  2. #2
    Join Date
    Sep 2007
    Posts
    1,451

    Default

    1. https://support.google.com/webmaster.../6101188?hl=en
    I had to look that one up.
    I think touch elements are links that are too close to click on without the possibly of clicking the wrong one.
    Gill

  3. #3
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

    Default

    Running your site through the Google Mobile Friendly test shows that you do not have a mobile site.

    Run your site through it: https://www.google.com/webmasters/to...gn=landingpage

    Then run another bluepark site. I know http://www.dfordog.co.uk/ has their mobile site enabled.

    Hope this helps.

  4. #4
    Join Date
    Dec 2007
    Location
    Lake District Cumbria
    Posts
    3,708

    Default

    Quote Originally Posted by Pootle View Post
    Running your site through the Google Mobile Friendly test shows that you do not have a mobile site.

    Run your site through it: https://www.google.com/webmasters/to...gn=landingpage

    Then run another bluepark site. I know http://www.dfordog.co.uk/ has their mobile site enabled.

    Hope this helps.
    Run my site through and it says awesome this site is mobile friendly. However, also had email from Google saying their are mobile useability error issues going into the hundreds. So just because running the above says your site is mobile friendly there are other issues coming into play.
    Regards,

    Dave

  5. #5
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

    Default

    Quote Originally Posted by Dave View Post
    Run my site through and it says awesome this site is mobile friendly. However, also had email from Google saying their are mobile useability error issues going into the hundreds. So just because running the above says your site is mobile friendly there are other issues coming into play.
    My point was that LabelKing doesn't appear to have activated a mobile site at all.

    I find that google Page Speed Insights can tell you a lot about your site. It seems that a lot of mobile issues, if your site is awesome for mobile, comes from speed related issues, i.e large picture files, javascript etc.

    https://developers.google.com/speed/pagespeed/insights/

    Run dfordog through Page Speed Insights and it will show "issues" but is still an awesome site. Some issues cannot be fixed easily but do not matter. (Please do not feel offended by me using dfordog as an example. I have used this as it is a very good example and appears to rank well for mobile.)

    There will always be usability issues when you are trying to please so many different platforms. The trick is getting a balance that everyone can be happy with.

    I am not an expert at this and only offer this information from my own observations.

  6. #6
    Join Date
    Jan 2012
    Posts
    965

    Default

    Quote Originally Posted by Pootle View Post
    My point was that LabelKing doesn't appear to have activated a mobile site at all.
    Where/how do I do this. As I said I haven't strayed far from the default design, and other bluepark sites seem to pass the test ok, so have I just missed a setting somewhere? Or have the ones that have passed all done a lot of work to make them mobile friendly?

  7. #7
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

  8. #8
    Join Date
    Dec 2011
    Posts
    560

    Default

    Quote Originally Posted by LabelKing View Post
    Where/how do I do this. As I said I haven't strayed far from the default design, and other bluepark sites seem to pass the test ok, so have I just missed a setting somewhere? Or have the ones that have passed all done a lot of work to make them mobile friendly?
    What have you got assigned as your mobile template at Site>Template Manager?

    Ian

  9. #9
    Join Date
    Jan 2012
    Posts
    965

    Default

    Quote Originally Posted by Les78 View Post
    What have you got assigned as your mobile template at Site>Template Manager?
    That was blank, but have now made it the same as the main template. I've also found out how to add 'mobile blocks' in the layout manager and have disabled the slideshows in those blocks.

    This seems to have fixed a number of problems, however the page still seems slightly wider than the screen and I'm not sure which bit is causing that.

    For example, this page:

    http://www.dymo-express.co.uk/dymo-r...s/1805428.html

    If I run it through googles pagespeed insights utility (which was linked from the error pages) I get this:

    The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.

    The page content is 346 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
    • The element <img src="/user/template…s-logo-100.png"> falls outside the viewport.
    • The element <span class="bp-icon-basket"> falls outside the viewport.
    • The element <div class="cb_divider"> falls outside the viewport.
    • The element <p class="first">Home &gt; Dymo…Rhino Labels</p> falls outside the viewport.
    • The element <span>Dymo Rhino 180…yl Tape - 24mm</span> falls outside the viewport.
    • The element <b>COLOURED VINYL…applications.</b> falls outside the viewport.
    • The element <p>Vinyl 24mm whi…printers ONLY.</p> falls outside the viewport.
    • The element <p>Brand: Dymo R…ve: Permanent</p> falls outside the viewport.
    • The element <span>+</span> falls outside the viewport.
    • The element <button type="submit" class="button b_basket">Add to Basket</button> falls outside the viewport.
    • The element <div class="hrd"></div> falls outside the viewport.





    It seems almost like somewhere the page has been set to 346 wide? maybe? or one of the element is pushing it out and the rest are just filling the available width?

  10. #10
    Join Date
    Dec 2007
    Location
    Lake District Cumbria
    Posts
    3,708

    Default

    Quote Originally Posted by Pootle View Post
    I am not an expert at this
    Neither am I
    Regards,

    Dave

  11. #11
    Join Date
    Nov 2008
    Posts
    2,198

    Default

    Quote Originally Posted by LabelKing View Post
    That was blank, but have now made it the same as the main template. I've also found out how to add 'mobile blocks' in the layout manager and have disabled the slideshows in those blocks.

    This seems to have fixed a number of problems, however the page still seems slightly wider than the screen and I'm not sure which bit is causing that.

    For example, this page:

    http://www.dymo-express.co.uk/dymo-r...s/1805428.html

    If I run it through googles pagespeed insights utility (which was linked from the error pages) I get this:

    The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.

    The page content is 346 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
    • The element <img src="/user/template…s-logo-100.png"> falls outside the viewport.
    • The element <span class="bp-icon-basket"> falls outside the viewport.
    • The element <div class="cb_divider"> falls outside the viewport.
    • The element <p class="first">Home &gt; Dymo…Rhino Labels</p> falls outside the viewport.
    • The element <span>Dymo Rhino 180…yl Tape - 24mm</span> falls outside the viewport.
    • The element <b>COLOURED VINYL…applications.</b> falls outside the viewport.
    • The element <p>Vinyl 24mm whi…printers ONLY.</p> falls outside the viewport.
    • The element <p>Brand: Dymo R…ve: Permanent</p> falls outside the viewport.
    • The element <span>+</span> falls outside the viewport.
    • The element <button type="submit" class="button b_basket">Add to Basket</button> falls outside the viewport.
    • The element <div class="hrd"></div> falls outside the viewport.





    It seems almost like somewhere the page has been set to 346 wide? maybe? or one of the element is pushing it out and the rest are just filling the available width?
    I think its your logo............
    Regards

    Neil.

  12. #12
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

    Default

    Could be the logo or the colour table down the page.

    It could also be that the product image is beside the description (which would be my first guess). It is usually better to have the description and all other info below the product picture.

    Not quite sure how I achieved this on the site I am working on but it is do-able.

    (This is for the mobile version)
    Last edited by Pootle; 19-03-2015 at 16:59. Reason: Additional Info

  13. #13
    Join Date
    Jan 2012
    Posts
    965

    Default

    yes it was the logo. according to our naming convention it should have been 100 pixel wide, but it was 349 for some reason...

    Now I've got this one left on the page:

    Size tap targets appropriately

    Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.

    The following tap targets are close to other nearby tap targets and may need additional spacing around them.•The tap target <a href="javascript:void(0);"></a> and 1 others are close to other tap targets

  14. #14
    Join Date
    Sep 2007
    Posts
    1,451

    Default

    Quote Originally Posted by LabelKing View Post
    yes it was the logo. according to our naming convention it should have been 100 pixel wide, but it was 349 for some reason...

    Now I've got this one left on the page:

    Size tap targets appropriately


    Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.

    The following tap targets are close to other nearby tap targets and may need additional spacing around them.•The tap target <a href="javascript:void(0);"></a> and 1 others are close to other tap targets
    There is nothing you can do about this one. I think it is part of the structure of the template and not something we can change.
    Gill

  15. #15
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

    Default

    Running the mentioned page through Page Speed Insights still shows the description writing going off the screen.

    You get 91/100 User experience but under that it says:

    Consider fixing: The page content is 346 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:

    As I mentioned before, this is caused, I think, by the image being at the side of the product description. Check some of the other pages and the same thing applys.

    i.e http://www.dymo-express.co.uk/dymo-o.../S0898130.html

    The page content is 339 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:

    Most phones wont be 320 wide but if it can be adjusted then Google should like it.

    Also the desktop version only rates 59/100 on the page.

    Tap targets, Javascript and Css are generally out of your control but do not seem to be a problem. Optimising images always seem to help load times and boost ratings.

    Don't become obsessed though with trying to get 100% as it will never happen. Look at the Currys website, they can't get it right.

    At least now you have a mobile site and will get ranked properly for mobile when the new Google rankings come in.

    The only thing is as a smaller retailer we rely more on Google to get the traffic to our site so anything we can do to please Google will surely help.

  16. #16
    Join Date
    Nov 2008
    Posts
    2,198

    Default

    Quote Originally Posted by Gillf View Post
    There is nothing you can do about this one. I think it is part of the structure of the template and not something we can change.
    I have this as well in webmaster tools, although I haven't had an email from google - I imagine everyone who has the mobile template active will have this issue.


    Rich - if you have five minutes do you think you can take a peek.
    Regards

    Neil.

  17. #17
    Join Date
    Aug 2013
    Location
    Exeter
    Posts
    30

    Default

    I'm really stuck with this. I've ticked all of the appropriate boxes but in the help blog http://www.bluepark.co.uk/blog/mobil...k-website.html it says about separating the navigation image from the header image. How would I do this? Just by putting some text into photoshop and linking the relevant links and then uploading?

    Thanks
    www.babynotincluded.co.uk - Funky Clothes from Newborn to Toddler - Picked by a Mum with Mums in mind!

    10% Discount for Bluepark users - Just add bluepark99 into the discount box

  18. #18
    Join Date
    Sep 2013
    Location
    Ely, Cambridgeshire
    Posts
    57

    Default

    Quote Originally Posted by babynotincluded View Post
    I'm really stuck with this. I've ticked all of the appropriate boxes but in the help blog http://www.bluepark.co.uk/blog/mobil...k-website.html it says about separating the navigation image from the header image. How would I do this? Just by putting some text into photoshop and linking the relevant links and then uploading?

    Thanks
    The site they are referring to has an image which combines the Dr Who image and navigation bar. Using css the navigation is floated along this bar. If you are just using a logo above the standard Bluepark navigation bar then this would not apply to your site as the bar and your logo are already separate. The mobile navigation bar will then replace the standard desktop bar.

    What they are really trying to say is that if your logo doesn't fit then you can choose to have something different on your mobile site compared to your desktop site.

  19. #19
    Join Date
    Aug 2013
    Location
    Exeter
    Posts
    30

    Default

    Thanks,

    Mine is all fine now and has passed the mobile testing. Really pleased with the look of it.

    Lisa
    www.babynotincluded.co.uk - Funky Clothes from Newborn to Toddler - Picked by a Mum with Mums in mind!

    10% Discount for Bluepark users - Just add bluepark99 into the discount box

Similar Threads

  1. Help with "Return home" on "Basket Page"
    By ameli911 in forum Bluepark Technical Discussion
    Replies: 4
    Last Post: 31-01-2015, 22:31
  2. Google Webmaster Tools Mobile Usability
    By Gillf in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 06-11-2014, 02:50
  3. Saving "Product detail page" deletes "Additional CSS"
    By Eagle Country in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 28-05-2013, 09:04
  4. The use of "inch" or " as a keyword
    By paul taylor in forum Online Marketing and Promotion
    Replies: 2
    Last Post: 08-02-2009, 10:15
  5. Add new "Create Value" within "Options"
    By roobyroo in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 02-03-2008, 22:41

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...