Mobile friendly - x5_test

Andre E
Logout
Go to content

Mobile friendly

Tutorials
This is still under construction but I set it on my site so people have a reference to start with. If you have questions or want items added, let me know.
To Create a moblie friendly Site for Google you can still use X5, But you need to make a workaround, this means;

  • creating a second project
  • At creating the Mobile Friendly site, some edditing with code and playiing around with settings is needed.
  • after that; you need to update 2 projects if changes are needed on your site. (DUH)

So some work needs to be done, but this takes care of the google mobile indexing problem.
If you ready give it a try, I mad a pritty simply site and got it working in the google check on both projects. I will use it as example and will descripe a step by step procedure, if you have questions you can ask them in Answers.
You need the google check your site often, here is the link.
Part 1
Create in Project selection a second Project by duplicating your original, (use duplicate button)
You will get a second project with (1) in the project name. I have renamed the (1) to mobile. (rename button)

Start your mobile project;
Set in step 1 General settings your website adress with /mobile behind it. -> click next twice 
You are in Step 1 Template style -> click template structure Choose in the second pulldown Menu, 
Note ! -> now note in the size part the Height option, chances are you will need to play around with it after you set your menu to specs from google to get your site to look good. For now we leave it.
Choose in the second pulldown your Header. In the size part you can set the width of your site, Google demands no bigger screen then 640.  I changed mine to 480. So change Header width size to a small width ( I suggest between 320 and 480) -> Click OK

Goto text style, select at Page Item, Page text, Set Font type to 14 pixels Height. This cause all new pages to use this font. -> Click ok
You need to change the font types from already made pages all to 14. (Google demands big letters on mobile sites)

Goto Main menu style, set at Style part Margin to 12 and 12 and set distance between buttons also to 12 -> click ok -> click next.

Now you need to adjust your footer and header items to the smaller template. Also play around with the menu, I can't give you exact pointers here cause everybode has different menus. Just make sure they look alright and that the menu height is set good view  value as mentioned before in the 'note' part.

Goto step 2 and adjust all text from text object to bigger font sizes. Preview your website and see if looks al right after all these adjustments.

For the first test select a FULL Upload in step 5, create after pressing -> NEXT with menu button on top a new folder called it  mobile, select this folder Press START to start the upload in the mobile folder. (say yes to changing the path name)

Test again with Google test tool, you could use other settings (smaller text or menu settings) just change upload test again, do this till your satified.

I hoped after this test to have more errors unfurtanatly, the sites where accepted bij Google as Mobile friendly.... (sorry about that)
So lets take it to Part 2 where we add script to make also the home or parrent or original site pass the google friendly test.
So save the mobile project  - don't forget to make a backup from time to time in step5 export project- set this to another carrier then it is on your PC (USB stick or seceond drive will do nicely)

Part 2

Like I said at the end of part 1, You now have 2 seperate sites, but what if Google searches your normal site, It will fail ! 
Hopefully you don't have any errors left like I did, if you still have check the below for more information.

Open your normal website project, 

For now, use the code that is on this website in the lower part. Cause it's not my script I found it decent to make a link instead of copying the code here, and pretend it's mine.... it's not but it's good and free !

Set this code in step 4, Statisics, Seo and Code,  goto expert tab. Select, -this is important- from the pulldown menu at custom code the After opening HEAD tag option. Enter the code you copyd in the custom code field.
Now chance the site adress you need to change the website adresses in the code to your mobile adress ( 3 times ) like : http://yourwebsite.com/mobile 
and 1 time your noral website adres.

Upload your site to the normal folder (this is your normal site so upload to standard folder, not to the mobile folder.

Now check both sites in Google mobile friendly part.
OK So far I made 3 sites like above and got them all working, but they where all with horizontal menu's. 
One site had more errors. But for now you have a starting point.

Back to content