Mobile and tablet problems with published site and exported site

Hello,
the published and exported version of my website is driving me crazy when it comes to mobile and tablet view.
@cyberdave could you please take a look ?
the main problems:

  • slides do not autoplay on home slider (and slidenav not even showing)
  • tabs not working… this is actually very bad as most of pages have a tabs structure
  • desktop view of the exported site on crome behaves strangely (navmenu is on the right, while i made it float on the left and the grey upper section is not showing)

    the sandwich menu was not working as well, but i just replaced it with the standard navbar

In addition it is extremely slow when loading… i checked various discussions on the forum and other than compressing images (to the point they are actually bad to look at now), compressing css and js i am not sure what to do.
I wonder if maybe i produced too many classes and the css is now heavy and messy?
Can you give me some info to improve?

Below the public share link.
Here is the exported website link: www.typhoon.solutions

Look forward to your feedback
thank you
F

Here is my public share link: https://preview.webflow.com/preview/umu?preview=bd28e98791b6608248907ae5582834c3
(how to access public share link)

Hi @francikina, sorry for the delay in my reply :-/ Could you let me know what browser and operating system you are using? I will be happy to check on this.

Thanks in advance!

Regards,
Dave

Hi @cyberdave ,
the problems are spread to both safari and android OS. i am using iphone 5 and 4, a huawei phone and ipad 2 to check.
starting from the most important problem:

  • tabs not working on mobile and tab view (both android and safari).
    the problem is repeating on 3 websites i created (on webfow preview and on the exported sites)
  1. https://preview.webflow.com/preview/karbine4?preview=fe245ceb888648b1b908fd3670c8ac1f
  2. https://preview.webflow.com/preview/umu?preview=bd28e98791b6608248907ae5582834c3
  3. https://preview.webflow.com/preview/konftel3?preview=be3fe4a3d027ba7f2266607254cf3269
    and the exported konftel.cn.com
  • slides do not autoplay: still having problems
  • very slow when loading: still extremely slow. any way to make my coding lighter?
  • i uploaded a font to display some icons (Unititled font 1): is that additionally slowing down the website?
  • navmenu misplaced on desktop view: solved

thanks a lot,
i really need to fix the above problems!
F

Hello @cyberdave!
Found anything relevant?

Thanks a lot
F

Hello @cyberdave,
just to update you :

  • i have solved the problem with the slow loading. I was using Montserrat and some other google fonts on my website, and since i am connecting from China this was slowing down all the loading process. Or i guess so, since after removing them and using only Arial, the website is much faster.

However the bug on tabs and slider persists…
I tried to make a test website with a very simple settings, just slider and tabs structure… and even in that case they are not working.

I really await for your feedback on this,
thank you
F

Hi @francikina, thanks for getting back to me. Could you post a screenshot of the tabs that are not working and confirm the site/page/link? I was checking the three links above, but not sure where the tabs are that are having the issue. Thanks in advance!

Hello @cyberdave ,
the problem is present in all the tabs of the websites.
But as example:

  1. https://preview.webflow.com/preview/karbine4?preview=fe245ceb888648b1b908fd3670c8ac1f
    → any link you click in the navmenu will lead to a page with tabs structure. they all have problems
  2. https://preview.webflow.com/preview/umu2?preview=f77062934228bb691a8461072770a54b
    → i highlight the links which lead to pages with tabs structure

It is very awkward indeed.
I also just checked with a friend based in Australia and from her phone all seems to be working fine. But connecting from China - and testing with multiple devices- all the tabs are dead (while other buttons and links are working fine).
If i could understand the slow loading - due to the google ban here - for the tabs i don´t see how connecting from china could be a problem…

Thanks again for your help
F

Hi @francikina, thanks a lot for getting back to me. I did check out the webflow site umu2.webflow.io, but I am unable to reproduce the issues, the tabs are working for me on iPhone 5s and higher and Android phones 4.4 (I tested a few different devices.)

I cannot really see anything wrong, but it might be due to fact you are in China. If the CSS is not loading fully, or the webflow.js is not loading fully, that might affect to this.

Although probably not related, I noticed that you are using vh for the sub-nav-section, while the tabs sections are having height auto. I might look at that and perhaps try using % based height to see if that helps.

Hi @cyberdave,
i tried all that i could but the tabs structure (as well as the slider for umu2) continue to fail me.
I will work around the tabs problem using some buttons and links to sections (less elegant but seems to be working)
There is no real alternative to the slider - not that i am aware of at least. I will try to re-design it one more time, then i guess i must give up.

thank you
Francesca

hi @cyberdave,
yes, it´s me again!
as you previously suggested i think the reason why the slider is not working is a problem with the webflow.js loading.
I am unfortunately not an expert in coding and javascript, but to my understanding this part of code in the index.html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
calls for a javascript library on google.
And there it comes the problem of the great firewall!
So my question is: would it be possible to load a different library, but still compatible with webflow?
I have found this article:

but i am not sure which library i could load, and how. maybe add all of them?
so for example it could become something like:
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"> src="http://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.js"> etc etc </script>

I would be really grateful if you could take a look ,
谢谢!
Francesca

Hi @francikina, thanks a lot for getting back to me, sorry for the delay. At the moment the only version of jQuery that Webflow supports is jQuery 2.2.0 and for sites hosted in Webflow, this is served from Google’s CDN, which as you pointed out, may have issues with the firewall in China.

One thing to try is to see if there is a private content delivery network in china that you could use, to upload the jQuery 2.2.0 distribution files to that server and link to the jQuery 2.2.0 from there.

One possible CDN to check out is http://en.chinacache.com. I do not really know anything about this CDN, only that they claim to be specifically targeted towards the chinese market.

I hope this helps !

Hi @cyberdave,
thank you for the additional info! I am not hosting my sites on webflow but exporting them and hosting on a server which is China friendly.
When you say: " … upload the jQuery 2.2.0 distribution files to that server and link to the jQuery 2.2.0 from there."
do you mean that i could upload the distribution files directly on my server?
If so, how would the code to link to the JQuery 2.2.0 look like?

In alternative:
i see on jquery.com that in addition to Google CDN there is also Microsoft CDN (and usually Microsoft works fine in China).


Is it viable to substitute the microsoft script to the google one (i guess updating jquery-1.9.0 to jquery-2.2.0)?

thank you
Francesca

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