Website Variants - Main/Tablet/Phone

[SueB]

From another thread, I learned I could add another website variant, so I added the tablet. I can't tell where to adjust the lines to for the new variants, that being the "mobile" and the tablet. The tablet looks like it is small (narrow), like the phone but the variant says between 400 and 720 px when I view the details. I assume I need to change this. And the Phone says up to 400 px but it's as wide now as the main variant, which was fine before I added the tablet.

Can anyone help me to fix this so I can add the tablet variant and make them the correct width? I'm not sure how to do it now that I created it.

Help.....
Sue

[Egg Bramhill]

Here you go Sue:

[SueB]

Thanks for making the video, Egg! My problem was I took a website that was already pretty well done and added the tablet. I think I will delete it for now. I'm not sure what to do since it seems to have not have the right specs. Yours looks right in sizes but mine does not.

Sue

[Egg Bramhill]

Yes, I always create the website in the Desktop version first. Once I happy & it's complete I create the mobile variant.

[SueB]

And how would it work if you had the mobile and main version and went to add the tablet? When I did add the tablet size, it seemed to look like the main size, not a middle between the two. It scared me! I've worked so hard to create this that I didn't want to mess it up just to add the mobile...

If you could guide me as to whether it was the measurements that messed it up, maybe I'd venture there again. But I really don't want to start over just to add a variant.

Sue

[behzad]

When I design the normal desktop version, I make sure that my text is large, and usually take 1250 px width to make the site. It still looks fine on ipad and andriod tablets. I no longer need a variant for it and just create a 480 px for mobile.

[SueB]

Behzad, what size text is large to you? What size font are you using for your desktop version?
And then what size font are you using for your mobile? Just curious..
Sue

When I design the normal desktop version, I make sure that my text is large, and usually take 1250 px width to make the site. It still looks fine on ipad and andriod tablets. I no longer need a variant for it and just create a 480 px for mobile.

[Frodo]

Hi Sue,

This question is always such a tricky one. At the end of the day, it really depends on your taste and idea of acceptable. I have tried and tested so many variations to try and find a happy medium with this exact issue, and I have settled on using the below parameters:

I used to only use 2 variants, but I found that it did not format very nicely on all platforms, so i have upped it to 3 variants:

Desktop Variant: 1333px Wide with Font Size of 14
Tablet Variant: 960px Wide with Font Size of 14, but you can bump this to 16 and still feel confident
Mobile Variant: 400px Wide with Font Size of 14 as well

That's pretty much it, and it works for me so far... As for the formatting, I must say, Egg's advice is spot-on, create the Desktop Variant first, then if you are happy, add the other variants, but you will need to go through the process of re-shifting and resizing some things. If you are using different font sizes across various variants though, be sure to stop sharing those text items to the other variants, by right-clicking on that item and then selecting the menu options like so: Website Variants > Stop Sharing With Variants > All Variants. Otherwise your changes on one variant will affect all the variants that it is being shared with.

Many times, I will need to reformat quite a bit of stuff for the various variants, so what i have started doing now, to save myself from having to right click everything and stop sharing, I created a template that already has all three variants. I then start with Desktop Variant and once I am happy, I select everything, copy it, then on the tablet or mobile variant, i press Ctrl + Shift + V to paste it in exactly the same place, then reformat everything to fit that variant and then I set the repeating objects again etc. etc. So basically I am not making any use of the variant sharing at this point. For me (personally) it is just more work. It might take a bit longer in some regards, but at the end of the day, the various variants serve completely different functions (in my opinion) and they need to be designed individually anyway.

That's just my 2 cents, hope it helps.

[behzad]

Hi Sue, I use 20px for fonts. Really it is up to you, the way I test readability is to view the site in chrome and you can go to the chrome Inspect tool by right clicking anywhere and the menu opens, go to the bottom (Inspect) there you can view your website in different mobile formats at 100% so you will get a better idea as to if your font needs to be bigger for your mobile variant.

[restless]

For whatever it is worth, I set my Main variant to 960px, Tablet to half that - 480px, and Phone to 320 which is the size of my old Apple iTouch. I figured those out 3 or 4 years ago - whenever Xara first came out with Variants - so they might be way out of date by now.

The smallest text size that Google accepts for mobile versions is 13px. When I use 12px to squeeze more type on the page, then the Google mobile tester complains that the text is too small.

I use 13px for my standard body text on all variants.

Ed