Viewing Up-scaling a mobile site for larger devices

Up-scaling a mobile site for larger devices



User: Christopher 9 years ago
I've been developing a mobile site with a width of 400px. Good for most phones including the iPhone 6 (375px) and iPhone 5 (320px). But on an iPhone 6 Plus (414 px), there's gray padding on both sides. I'm seriously considering changing my dimensions to 420px. Is that overkill? I'm sure there's code I can enter to have my site upscale for larger devices. What is it?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 9 years ago
You'll want to make your mobile site larger so that it is scaled down, not up.

-------------------------------
Paul
EverWeb Developer
User: Roddy 9 years ago
Quote:
on an iPhone 6 Plus (414 px), there's gray padding on both sides.


There shouldn't be. Can you post the URL to a page which has this?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Gilly F. 9 years ago
My mobile pages are 480 px (I think this is recommended in the EverWeb tutorial) and they look OK on iPhone 6 Plus and 4S - so I'm guessing they're also OK on 5 and 6.
User: Roddy 9 years ago
You need to decide yourself what is OK. Test you site with all the devices available in the iOS Simulator. See this topic...

http://billing.ragesw.com/forum.php?act=thread&tid=3084

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 9 years ago
Hi Roddy. I checked on the various devices at the Apple store yesterday. Here's the URL - all the pages.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 9 years ago
Quote: Gilly F. - 23/12/2014 3:18:54
My mobile pages are 480 px (I think this is recommended in the EverWeb tutorial) and they look OK on iPhone 6 Plus and 4S - so I'm guessing they're also OK on 5 and 6.

Interesting. I thought about 480. But the page is going to be considerably downscaled for practically everything. Did you just design with larger fonts, etc.?

Here's a good guide for the various smartphone/phablet devices: Click here.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Gilly F. 9 years ago
Main font is Verdana 18. Thanks for link but what does one do with this knowledge? Take a median and design for that? It's just too much information!
User: Christopher 9 years ago
Well a median would hardly be 480px. That's one of the things I take from that. You can see you're generally going to have people using devices between 320px and 414px.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 9 years ago
@ Christopher: Your page looks OK on all the phone devices available with the Simulator. I certainly wouldn't make it any wider.

Trying to create a fixed width website that works well on all smart phones is going to involve compromise. I would still go with around 360px width with a font size of 16px Verdana or similar.

I tried creating a page at 480px wide using a 15px font and it really doesn't work at all on smaller devices. I've looked at other sites which use the 480px width and I don't think any of them give a good visitor experience.

It's not just the text that needs consideration. Most images used on the large site don't translate too well to the small screen. Avoid landscape images. I tend to go for almost square images so that the whole image and its figcaption are visible in portrait mode.

The other thing to consider with font sizes being reduced on smaller screen widths is text hyperlinks. These are next to useless. Replace them with CTA buttons created without using images.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.