website won't display correctly on iphone

Yabazza

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).

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.

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.

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).

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!

daymobrew

Text is appearing on my iPhone now.

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.

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.)

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.

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

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