Problem of Mobile Usability with my site?

HTML & CSS
,
1

hi friends, i have issue with my site designposts.net

http://prntscr.com/6o1dca kindly help me to fix this issue

thanks

2

This is not enough information to solve any issue. Be specific so we can help

3

regarding Content not sized to viewport

here is the screenshot http://prntscr.com/6o2srz

i have opend 1st link for more information

you can check it errors

  1. https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fdesignposts.net%2Fmotivational-quotes-inspiration%2F&hl=en&utm_source=wmx&utm_campaign=wmx_mft

  2. https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fdesignposts.net%2Fbest-free-fonts-for-your-2015-graphic-designs%2F&hl=en&utm_source=wmx&utm_campaign=wmx_mft

at mobile usablity > viewport not configured

http://prntscr.com/6o2tgf

i can give you access of webmaster tool, where you can access the more information, may i know the email plz

thanks

4

One issue I see is that this page has a horizontal scrollbar on the viewport at around 366px which means most mobiles will be getting the wrong sized page. There is also a scrollbar appearing at other dimensions and then disappearing.

You need to ensure that there is never a horizontal scrollbar on the viewport when dealing with mobiles and tablets or the page won’t scale correctly.

5

sir can you tell me screenshot? so i can fixed it, sorry did not clear me.

and how it can fixed this http://prntscr.com/6o3n4e
link ( http://bit.ly/1F1Z7Zg )

Page appears not mobile-friendly

  • Content wider than screen
  • List item Links too close together

thanks

6

Your adsbygoogle is 336px wide and sits in an element that has 20px padding so the total width is 376px width which will never fit on a mobile screen of 320px (I didn’t check if you were hiding this for mobile but I doubt it). I’m not sure what you can do abut that ad but you need a responsive ad that is at max-width 280px for that element.

You basically need to go through your pages and close the wqindow until you see the scrollbar and then look to see what element is too wide to fit and then do something about it.

The same applies for the comment about links being too close and you would need to space them out a bit more with media queries and ensure that the target area is suitable for mobile. There is no quick fix for this.

You should also check that the tool is seeing your page correctly first as the screenshot doesn’t look like the page.

7

@PaulOB
sir i have removed ads, on sidebar ad is responsive!

can you check it now?

The same applies for the comment about links being too close and you would need to space them out a bit more with media queries and ensure that the target area is suitable for mobile. There is no quick fix for this.

Regarding this issue, can you tell me? which code should i edit to fix this

thanks

8

The scrollbar at 366px has gone now so that page should be ok.

Make sure resources aren’t blocked from the test.

How Googlebot sees this page

This page uses 131 resources which are blocked by robots.txt.

9

i have done few things on .httaccess file and robots and tested on other tool

i got few results on it.

i want to fix this Size tap targets appropriately -

kindly help me, what code should i edit ? so it can help to view things good for mobile users

thanks

10

Unfortunately , that’s something you will need to go through one step at a time as it nvolves going through the whole site and adjusting the tap targets of significant items (main menus, footer menus, side menus etc).

For example when your screen is at small widths your text menu at the top of the page is very small (11px) and for mobile you really want text to be at least 14px and for main menus around 16px with some space around them.

If the elements are icons then then they should be around 48px x 48px (or have target areas of 48px x 48px) so that they can be tapped easily. Obviously all links can’t be this big but for main menus (header and footer) then you should follow this approach.

You would then need to look at all pages and see where you have other menus and other series of links and ensure that you resize them in your media queries. I can’t give you a quick fix as you need to look at the elements, decide how they can best fit the smaller screen, and then ensure they have good ‘tappable’ areas.

In the end its a compromise between design and best practice which is why it needs to be your decision. I can only point you in the right direction :smile:

1 Like
11

thanks, i got your point, will try to solve it

12

Paul sir
what i come to know? plz see this difference

  1. http://bit.ly/1NCRzk8 ( it is mobile friendly page) of my site ( http://designposts.net/using-html5-and-jquery-to-upload-files/)

problem is images of articles! if i removed all images , it will clear from mobile friendly tool.

i dont know, whats wrong with images format? can you check out this issue ? sir

see other post ( http://designposts.net/online-graphic-design-courses/ ) and test on tool, it will show same error :frowning:

kindly help me to fix this issue , it is not issue of adsense, which i already fixed at night!
thanks lot,

13

Might if have something to do with the validation errors?

http://validator.w3.org/check?uri=http%3A%2F%2Fdesignposts.net%2Fusing-html5-and-jquery-to-upload-files%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

http://validator.w3.org/check?uri=http%3A%2F%2Fdesignposts.net%2Fonline-graphic-design-courses%2F&charset=(detect+automatically)&doctype=Inline&group=0

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.