Trying to get my head around making pages responsive

I like that. I wrestle with font sizes all the time. If I start with a 960, with lots of wide boxes and text at 14 which is what a client wants, I move to the 320 and end up on my knees. Then I discovered In 320 you can click off everything, and start new with a font of 20 and up, but remember to hide that text in the 960, or “for this device only”. Adjust the menu and you’re on your way. Once one gets their head around that it works well. Workflow is always personal.
I’m sure in the future Sparkle will work on the variant discussion as mentioned.
W

Hi.

I use this technique for non-text elements, for example the menu or elements that are too big for the 320 px layout.

For text I do it differently. Styles are a great help! The text size is adjusted upwards and saved in the style. This is then only valid for this device.

You can see an example in Duncan’s Youtube video: Time slot 6:10 - 9:00
Making a page responsive

Mr. F.

2 Likes

That’s correct. Your site is not responsible and that’s why google webmaster is not optimized your site. I’ve just checked. Will you like a tutorial?

I feel like this should be specifically mentioned in the text styles portion of the documentation: turn off “synchronize text attributes across devices” if you want to change font size in in a style on another device and not have it affect other versions. I spent a good deal of time with a 960 and 320 version, increasing text size in 320, but it only worked if I did NOT apply changes. But that meant I had to go through every piece of text and increase or whatever. So I would apply the changes, which would then affect the other version. I also tried creating new styles specifically for the 320 version, but that didn’t work either. The new style was then applied to the 960 version. A vicious circle. Fortunately, I found several posts regarding this very thing. The documentation states “if you have used text styles properly you can set a new text size on the mobile device, apply to style and it will only apply to the current device, resizing all your text instantly.” And that did happen, but ONLY after I unchecked the box to “synchronize text attributes across devices.”

1 Like

That’s incorrect. The “synchronize” checkbox does not apply to the text size, which is always independent across devices.

With a little bit of forethought and planning I have never had any issues with my fonts not working correctly across devices. Just saying…

I work on the one device first to get all the font styles correct and don’t introduce any new font styles to say on the 320 device when introduced.