Viewing content width for mobile websites

content width for mobile websites



User: Brigitte M. 11 years ago
my name is brigitte. former iweb user form germany. i've trouble with the content width for mobile sites. i created my ever web site by myself, so i have to do this also for the master template for mobile phones. in the tutorial i heard that the mobile contend width has to be 480 px. but this is to small for the iPhone (o sx). i tried 600 px. this is ok for o sx but to wide for android mobiles. has somebody an idea for the best width? are there some widgets creating mobile sites easier? thanks for your answer - greetings form munich!



http://www.hypnomuellerwolf.com

this the link to my ever web site. actually the mobile width is 600 px

Last edit 11 years ago
User: James G. 11 years ago
A quick reply- I use 400px width. I found it looks good on iphone 3, 3gs, 4, 5, samsung gs3 and 4, nexus 7.

This section is a huge help for mobile
User: Brigitte M. 11 years ago
thank you for your reply. ups 400 px only! I'll try it.
User: Roddy 11 years ago
You need to decide on the best width yourself by trying out different ones and view the result in the iOS Simulator on all the various phone devices.
Use a web safe font such as 15px Verdana. The wider you make the page width the larger the font size has to be so that it is readable on narrower screens.

A page width of 360px is a good compromise and a starting point for your own tests.

See THIS page for how to download, install and use the iOS Simulator.

Once you have it installed you will see it as an option when you hit the Preview button in the bottom toolbar of EverWeb.

-------------------------------
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: Roddy 11 years ago
If you want to know more about creating mobile websites, see this section of the EverWeb Codebox site.

The are also some widgets specifically for smart phone website design HERE.

For the best possible SEO for your website, use HTML5 elements to create your layout. The can be used on both the large and mobile versions of the site to speed up page creation.

-------------------------------
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 11 years ago
Hi Brigette. if you google you can find the css pixel dimensions of the popular smartphones in use. Iphone 5 is 325 wide. Iphone 6 is 375. iPhone 6 plus (the biggest one on the market in terms of screen dimension is 414. For this reason I went with 420 pixels wide and chose a larger font - Verdana 15-17. The General goal is to have your site look good and the text legible across all devices (so not too big on the Galaxy or 6 plus but not too small on everything else.)

Last edit 11 years ago

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

www.cleetche.com


Post Reply
You must login or signup to post.