Mobile viewport resolution for mobile?

I am setting up the size of my new mobile website. I am using the horizontal centering option. I am not skilled enough to use the relative options so I will have only one size mobile site. The base size of my desktop site is 800 wide and 900 long (on the guides in the SSP work window). I am trying to determine what the best mobile size would be best to use. I looked up the world's most popular viewport sizes which far and above most popular are 375 x 667 (750 X 1334?) and 414 x 736 (1080 x 1920?). Any suggestions about the size I should use that will work the best for most viewers. Forgive my dummyness...ugh.

Original Post

Steve, don't you use StatCounter?  Do they track your visitor's screen resolutions? If so, I'd rely on that info to target your customers.

If they don't track that stat, then I'd do a test page at 420px and one at 720px to se how it looks. Also, don't make the mobile page centered. For maximum compatibility, your mobile page should be left justified.

In that case, I'd say your original 800px wide project should work fine with the 50% that use 1024px and higher and 320px would catch the other 50%.

On a side note... You use Comic Sans, which works with virtually all desktop browsers, but not for mobile devices; they don't have that font installed.

If you do not want to embed your desired font, you can select one of the standards:

  • Arial/Helvetica.
  • Courier/Courier New.
  • Georgia.
  • Times/Times New Roman.
  • Trebuchet MS.
  • Verdana

For many years you  have been able to use almost any font if you included some code to embed the font into your web site so browsers can access it. Check out Google Fonts for some fonts you can use. When you find a font, you can get code to put into a code object so your page can use it. To use that font in SS, you also need to install that font on your computer.


Add Reply

Likes (0)