[Pro] Webkit & Android

Hello.

I’ve read through a couple of previous threads on the subject of text going a little haywire on some Android devices - adding a blank GIF etc - but, to be honest, I didn’t fully understand them. Could someone talk me through it in basic terms?! :slight_smile:

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you have a specific example? And are we talking about Html text?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave

Not sure if this works:

http://postimg.org/image/twr09zncj/

Yes, it’s HTML text.

Gavin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

With the blank GIF / PNG ‘fix’, is it just a case of adding one to the entire background of the page or just behind the offending text boxes?

On Extras | Jane McIntyre it’s text boxes ‘HelloText’ and ‘Item 10’ that are not displaying correctly.

Gavin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Anyone?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Gavin,
I’d be inclined to take the preview you are seeing from BrowserStack with a pinch of salt as they are running an Android emulator rather than the real deal. On my Android phone the page looks almost perfect and the two text columns that are thinner on the BrowserStack preview look fine. If you want to set up Android testing on your Mac I’d suggest installing VirtualBox (https://www.virtualbox.org) and an Andriod VM (http://www.vmlite.com/index.php?option=com_content&view=article&id=69:vmlite-android&catid=21:vmlite-workstation&Itemid=178).

The virtual machine listed above will give you a pretty accurate idea of how an Android tablet will render your site;

The biggest issue I think you have with the current page construction is that all of the items are absolutely positioned on the page. In other words they are all layers. Increase the text size using your browser and you’ll see that the text panels overlap each other as the font size grows. On my Android phone I can see that the text is being rendered slightly larger than on my Mac which is causing some of the text to overflow the parent boxes. Ideally you’ll want to make sure that the layout remains intact when the text is scaled which means switching to either a layer-less (table-based) or inline (sometimes called inflow or box model) construction. Either of these will ensure that the page design holds together when the text is zoomed.
Take a look at the Relative Page Layout Action (a core Action) as this may convert your layered page into an inline construction easily.
Regards,
Tim.

On 18 Feb 2014, at 20:07, gavtro wrote:

On Extras | Jane McIntyre it’s text boxes ‘HelloText’ and ‘Item 10’ that are not displaying correctly.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for that, Tim - appreciate it.

Always did wonder how accurate BrowserStack is; does your comment apply to desktop browsers viewed through it too? Do you recommend anything in its place?

Having spoken to the client, who isn’t tech-savvy, she was using Samsung’s own browser to surf the web; as you say, it’s fine in Chrome and Opera.

I really do need to take the plunge and teach myself the box model method; I’m sure it’s not as scary as it looks!

Have tried, briefly this morning, the RPL action and it does seem to work on most of my recent sites (although when I add it to Jane’s pages, I get the word ‘undefined’ in the top left… although the action itself seems to work fine. Any ideas?).

Did something slightly change between FW 5 and 6 because I notice that the text overflow wasn’t such an issue with my earlier sites? Maybe I was just lucky!

Thanks again.
Gavin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Gavin,

On 19 Feb 2014, at 17:03, gavtro wrote:

Always did wonder how accurate BrowserStack is; does your comment apply to desktop browsers viewed through it too? Do you recommend anything in its place?

Most browser testing services like this use browsers embedded in virtual servers which are sent a request to render a page, take a screen shot and return the image to the user. BrowserStack is using an emulator for Android mobile which will give you an impression of what the page will look like on the device but since it isn’t actually the device it can only approximate the result. Nothing beats getting hold of an actual device (beg, borrow or steal) to test your sites on although you may find other testing services actually farm the work out to real Android devices.

Having spoken to the client, who isn’t tech-savvy, she was using Samsung’s own browser to surf the web; as you say, it’s fine in Chrome and Opera.

I really do need to take the plunge and teach myself the box model method; I’m sure it’s not as scary as it looks!
Give it a go. Thomas’ screen casts are worth their weight in gold; http://kimmich-dm.de/wordpress/?cat=10

Have tried, briefly this morning, the RPL action and it does seem to work on most of my recent sites (although when I add it to Jane’s pages, I get the word ‘undefined’ in the top left… although the action itself seems to work fine. Any ideas?).
That sounds like a bug that was fixed in the Action for Freeway Pro 6.1.1;
http://freewaytalk.net/thread/view/137627

Did something slightly change between FW 5 and 6 because I notice that the text overflow wasn’t such an issue with my earlier sites? Maybe I was just lucky!
Maybe. A LOT changed between 5 and 6 but nothing I can think of that would have any bearing on these issues.
Regards,
Tim.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Tim - you’ve been a huge help. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options