How to make your website content "responsive" / mobile friendly

marc33 wrote: CKEditor allows the choice of specific size fonts. Where would you select a %?

Well, that is the challenge... CKEditor 4.x was never really designed for responsive layouts--it only gives you fixed pixel selections for fonts. The developers know that and the next major version (version 5.x) is supposed to address that, but it is really a huge departure from version 4.x so it may take me a while to figure out how to make use of it in FTH. There are some plugins for the editor (like ckeditor.com/cke4/addon/imageresponsive ) but plugins are sometimes not well supported and sometimes buggy.

The short answer on how to change fonts to percentage is that you will need to do that in Source View. There are a variety of font size conversion charts available online that you can reference that can help... For example: here is one of several I found: websemantics.uk/articles/font-size-conversion/

These sorts of issues are why I probably will implement some sort of new Web Page Tool at some point to help with the responsive content conversion. Most people do not want to have to get into the Source View / underlying HTML.

Since Source view is where you suggested we go to modify videos, I played around with percentages in Source view and came away with a satisfactory result. The average user would look at the code though and be clueless. If V 5 does in fact have font sizes as % like for pictures, a lot more people will be served. What you’re doing is superhuman and we all thank you.

Hi Steve,

SteveTheTechie wrote: 2. Iframes and Embedded Objects

This wrapping approach should also work for Flash and embedded objects. There is some responsive styling (CSS) "magic" applied to the elements with the "video-container" class name.

Thank you for all the handy tips. Our website is now mobile phone-friendly. The only tricky bit is that our image slideshow now needs some vertical scrolling to see the caption. Specifying a longer height doesn't do anything. Is this something that can be addressed by some responsive CSS-styling of the <div> or class name? Otherwise, maybe I should just crop images shorter next time?

Many thanks,
Carmen.
Club #8036

cbb wrote: Hi Steve,

SteveTheTechie wrote: 2. Iframes and Embedded Objects

This wrapping approach should also work for Flash and embedded objects. There is some responsive styling (CSS) "magic" applied to the elements with the "video-container" class name.

Thank you for all the handy tips. Our website is now mobile phone-friendly. The only tricky bit is that our image slideshow now needs some vertical scrolling to see the caption. Specifying a longer height doesn't do anything. Is this something that can be addressed by some responsive CSS-styling of the <div> or class name? Otherwise, maybe I should just crop images shorter next time?

Many thanks,
Carmen.
Club #8036

I would probably have to take a look at it... Could point me to specifically what you are referring to? (which page, which element, etc.) Your case could maybe help me figure out what I should do for a web page responsive conversion tool.

All this additional stuff that has to be done on content is why it took me so long to do a responsive version of FTH... I suspected it would be more involved than everyone thought.

Thanks, Steve.

It's right on our homepage with the following slideshow iframe:

<iframe width="500" height="1200" src=" citymiddaytoastmasters.toastmastersclubs...path=firstslide.html " >style="border: none; margin: 0; padding: 0;"

I've tested different height values, along with not specifying height at all. I also tried to replace that CSS style with iframe-specific attributes. The iframe size seems to have been frozen since wrapping the code in the <div> container that you've specified. So now the slideshow needs scrolling in both my flipbook and phone.

Anyway, would be good to get rid of scrolling, eventually. Will be consulting Dr Google while you work your magic. Very happy with the new FTH2 template. Thanks for dragging it over to the 21st century!

Carmen

Ok, I am going to tell you what I think you should do...

Instead of using:

<div class="video-container">
<iframe ... ></iframe>
</div>

Use:

<div class="video-container" style="padding-top:75%;padding-bottom:0">
<iframe ... ></iframe>
</div>

Adjust the padding numbers above as needed to get a good result. The percentage number should be equal to (iframe height / available width * 100%) and the padding-bottom should be any extra fixed height that should always be included. You should be able to use 670 for the "available width". The defaults for these are pre-set for the video container class in my style sheet, but they are set as 56.25% and 30px which works for most YouTube videos, but in your case it looks like your height is a bit larger (as a percentage), so you should override the defaults.

This is a good example of where having a tool may help since I could make the code get the actual iframe dimensions and adjust the wrapper accordingly.