Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

website won't display correctly on iphone

Options
  • 17-11-2015 9:35pm
    #1
    Yabazza
    Registered Users Posts: 27 ✭


    Hi guys sorry if this is a dumb question - I've been studying web for a couple of years but this has me scoobied. I'm building a website for a mate of mine and I've uploaded it so he can see it. It's not showing up properly on his iphone and I can't work out why.

    Could it be a font issue? I'm using @font-face and it seems fine on Android. I'm using Helvetica, sans-serif as a fall-back. I'm also using flexbox for the layout with -webkit prefix in the css. Just wondering if anyone has had the same issue and how they went about resolving it? (I would post a link to the site but I can't because of my post count).
    Tagged:


Comments

  • Options
    #2
    colm_c
    Registered Users Posts: 2,030 ✭✭✭colm_c


    Define what you mean by 'not showing up properly'?

    It could be any number of issues, from meta tags to css to js to a poorly configured server.

    A link or screenshots will help diagnose the problem.


  • Options
    #3
    Yabazza
    Registered Users Posts: 27 ✭Yabazza


    Hi and thanks for the reply. From the screenshots he's sent me it seems no text is appearing at all. Images seem fine and there's a jQuery menu which opens okay but has no text in the buttons. It's probably something really simple that I'm just missing. The site is at prenups.chrisrussondesign.com.


  • Options
    #4
    daymobrew
    Registered Users Posts: 6,487 ✭✭✭daymobrew


    It displays fine in Chrome's developer tools but the text is not shown on my iPhone 5.

    The font in use is Gotham. First thing I would try is to take that font out, leaving just the fallbacks arial, sans-serif (desktop.css, line 70).


  • Options
    #5
    colm_c
    Registered Users Posts: 2,030 ✭✭✭colm_c


    You have the same issue in desktop safari, not just iPhone.

    Looks like there's invalid css and a javascript error which might be the cause.

    Start debugging from there!


  • Options
    #6
    daymobrew
    Registered Users Posts: 6,487 ✭✭✭daymobrew


    Text is appearing on my iPhone now.


  • Advertisement
  • Options
    #7
    Yabazza
    Registered Users Posts: 27 ✭Yabazza


    Thanks for the replies guys. I've taken out the Gotham font altogether. I also downloaded an old version of Safari and the site shows up fine on that, except for the lack of flexbox support.

    Just as a matter of interest, how much would someone expect to charge for a site like this? I'm doing it for the learning experience more than anything, but just for future reference I'd like to have some idea.


  • Options
    #8
    Creamy Goodness
    Registered Users Posts: 26,556 ✭✭✭✭Creamy Goodness


    Glad you got the font sorted, mobile users - especially safari users - are a huge portion of web traffic.

    Couple of other things you could do to help mobile users more:

    1. Optimise your images, for example your background is 814Kb and the guitar neck image is 166kb 54% of your home page is given to those two images that I - as a user - don't see. In fact the background is 8 times the size of the photo with Philomena Lynnott.
    2. There's a cookie banner, yet the only cookie I see being set is saving the state of whether to show said banner obviously I haven't gone through the full site but if it's the only cookie being set, get rid, they're awful!
    3. Look into OG tags, these really help in displaying and shaping your content when people share the page through social media (FB, Twitter etc.)


  • Options
    #9
    Yabazza
    Registered Users Posts: 27 ✭Yabazza


    Thanks for the advice, I'll look into reducing the size of the image files further. I added the cookie banner in case they want to add analytics or something like that down the line, although he indicated that he isn't fussed about that so I might remove it. I hadn't heard of OG tags before so I'll definitely check that out.


  • Options
    #10
    OfflerCrocGod
    Registered Users Posts: 6,294 ✭✭✭OfflerCrocGod


    Do you have a Mac? Connect an iPhone, bring up Safari and use the developer tools to connect to the iPhone and debug it. Or use Xcode to emulate an iPhone and debug it via Safari.

    If you want to do proper mobile development you have very little choice but to have a Mac somewhere :/


  • Options
    #11
    Yabazza
    Registered Users Posts: 27 ✭Yabazza


    OfflerCrocGod wrote: »
    If you want to do proper mobile development you have very little choice but to have a Mac somewhere :/

    Sadly I don't own a mac or iphone but it will be one of my first purchases when I start making a few bob. I'm in the second year of a Web Dev degree at the moment


  • Advertisement
Advertisement