Simulator recommendation

Freeway
1

We use iPhone Simulator as testing tool for responsive websites in FW7 preview, which works pretty fine.
Which tools do you use for tests of devices other common phone brands?

Thanks for sharing!
Hanna

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

2

I tend to use the iPhone, iPad itself for preview and testing but combine this with Ghostlab Zugriff deaktiviert whereby I can navigate the site in desktop Safari, Firefox, windows and differing sizes etc and the iPhone and iPhone match the clicks and navigate automagically to the same page and vice versa. A real time saver when tweaking CSS.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 3 Dec 2014, at 16:24, sonjanna email@hidden wrote:

We use iPhone Simulator as testing tool for responsive websites in FW7 preview, which works pretty fine.
Which tools do you use for tests of devices other common phone brands?

Thanks for sharing!
Hanna

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

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

3

Thanks David, that’s possibly a good idea.

Firefox,
Chrome,
Safari,
Internet Explorer 8 & above,
Opera Mobile,
Opera 11,
FireFox Mobile,
Blackberry,
Windows Phone,
Safari mobile and
Android 2.3 & above

are included.

Ghostlab costs 44,99 € which is ok when it’s a time saver and you have access to many mobile browsers.

I`ll give it a try.
Hanna

PS: BTW Your tip somewhere here in the forum of Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar is very helpful when clients need to see responsive results in a single browser.

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

4

This is useful http://breakpointtester.com/ because it renders your actual breakpoints, not just a predefined screen size which is kind of the point.

Todd

BTW Your tip somewhere here in the forum of Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar http://lab.maltewassermann.com/viewport-resizer/ is very helpful when clients need to see responsive results in a single browser.

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

5

Maybe I did misunderstand you. I just bought and quickly tried Ghostlab. But it gives me the browsers I already have on my Mac, but I am interested especially in the mobile browsers.

Can I have previews of mobile browsers (Opera Mobile,
FireFox Mobile, Blackberry, Windows Phone,
Safari mobile, Android 2.3 ) within Ghostlab on my Mac at all And how?

That was my intention in the first place - something like iPhone Simulator. Otherwise this is not what I am looking for.

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

6

Todd, thanks but I am looking for phone simulators not for online viewport resizers.

In fact I am struggling over the question, how can I get a quick check, if my designs / functionalities are ok in common mobile browsers / phones.

Naturally I don’t want to buy them all :wink:

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

7

This covers just about everything http://www.browserstack.com/ http://www.browserstack.com/.

Todd
http://xiiro.com

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

8

No Ghostlab assumes you’ve got the device on your local network. It’s not a viewport resizer.

Ghostlab enables any local device to visit a local server address it generates for you to visit and test on the actual real world device.

David

On 3 Dec 2014, at 17:27, sonjanna email@hidden wrote:

Maybe I did misunderstand you. I just bought and quickly tried Ghostlab. But it gives me the browsers I already have on my Mac, but I am interested especially in the mobile browsers.

Can I have previews of mobile browsers (Opera Mobile,
FireFox Mobile, Blackberry, Windows Phone,
Safari mobile, Android 2.3 ) within Ghostlab on my Mac at all And how?

That was my intention in the first place - something like iPhone Simulator. Otherwise this is not what I am looking for.

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

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

9

Found this (to cover the opera mobile):

and what I get is - hmmm - interesting?

There is only ONE big concern I have (and ever had) which is called CSS-menu. Apparently, it breaks more than often on several devices/browser situations and there is not really much we can do.

A flawless working menu is essential!!! All the rest is progressive enhancement (as long it doesn’t break functions).

But there we are:

  1. Is it now the simulator causing the problems?
  2. Is it probably OK on a real device world?
  3. Is it me missing something?

This project has my own hacked menu and works (apparently) pretty fine:

(and a screenshot):

This project uses CSS Menu action and seems to break in the above mentioned emulator:

http://backstage.kimmich-digitalmedia.com/templates/walk-through-the-park/index.html

(and a screenshot as well):

Conclusion? Doing my own hand-hack? I’m pretty sure that is me missing something however I’m not aware what.

###A suggestion

While this list is pretty helpful, it has one big, big disadvantage:

Bundle knowledge!!!

Everybody is opening his own list or personal therapy (which is fine) but in some circumstances it simply sucks. There had been some lists already reporting problems - but honestly I haven’t bookmarked them or had been able to read em in detail.

And bundle knowledge could help us in many ways! We can’t afford having all required devices. But we together have them (perhaps).

On the other hand we can’t check each single project.

But what we could do is creating a reference project with the major functions and construction methods - checking - testing - reporting what parts are working or not.

As reference for us but as well for the developers.

A GitHub something?

Cheers

Thomas

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

10
  • Thomas, thanks lot for your insight. These are very interesting ideas indeed.

I did the 30 min trial with www.browserstack.com and did some further research for other services, but haven’t found yet a final solution.

The quick first test at http://validator.w3.org/mobile/ was a disaster.
One strong point has been the heavy file sizes of (retina ready) images, but many other errors occurred which I am not capable to even understand why they happen and what they stand for.

(I have one FW7 file based on the template HEALTH with standard media width (320, 490, 768, 1000px) use pass-throughs for a 1000px wide header, that automatically resizes in the smaller media width tabs - and 3 other smaller images.)

Maybe this is a very stupid question, but could I in this inflow-design somehow NOT let display the images in smaller media width tabs, in order to massively reduce file sizes? But still have them in 768 and 1000 px media width tabs?

Or does this require an absolute layout (which I did not test in FW7) with non-inflow items, which is even NOT recommended in the extended reference for FW7 by Softpress.

Or does this require - what would be in fact NO fluid workflow – 2 or 3 FW7 files for different designs / end devices.

Or do I just accept the shortcoming for older mobiles and slow connections?

Personally I am bit stuck…

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

11

It’s not a stupid question, but no, the way that responsive design works is that the CSS is switched, not the resources. You’re not building multiple sites (one per breakpoint), you’re building one site, and multiple stylesheeets or rule-sets within a single stylesheet. Each @media rule makes the same HTML look a different way. Which stylesheet applies depends on how the browser interprets its viewport dimensions.

What might make your wish come true is if your images were defined as background-images (applied to a DIV or other block-level tag) rather than foreground <img /> tags. Then, the different @media-sized stylesheets would reference only the (presumably right-sized) images required at that breakpoint, and the whole thing might be smaller in total “weight”. To be clear, Freeway does not offer any way to do this, and it does not output multiple images at different sizes for each breakpoint. As a generator, this would certainly be within its realm of possibility (in a future version), but it does not do this at the moment.

Of course, then you would have a bunch of “why don’t my images print when I print the page” questions here…

Walter

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

12

What might make your wish come true is if your images were defined as background-images (applied to a DIV or other block-level tag) rather than foreground `` tags.

… or (more) support of the ‘srcset’ attribute, because this could even let a browser decide what the “best size” of an image is???

Uhh - dance on the razor-blade. I mean - ah - it’s not just file-size - it’s even more cropping images correctly without losing context if it’s served on a smaller devices.

And even a user knows what he does, he could set the browser to load images bandwidth related?

Could you guys think of a highly experimental action which adds the srcset attribute to the Tag, a picker included (two of them) allowing to load some alternatives?

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="gosh">

Cheers

Thomas

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

13

*Walter, thanks a lot for your explanation.

I can use the image as foreground tags, very well.
Am I right when I say that this method has disadvantages, for which I probably did not choose it in the first place?

No “fluid” behaviour of images “in between” standard breakpoints (100% fixed width), which is my intention for other displays sizes than the standard

For every single image I need to create and import at its equivalent media width tab an extra file in its different size: 1 x 320, 1 x 420, 1 x 768, 1 x 1000 px. Sort of how WordPress acts automatically.

Am I right?

It is an option of course.
Perhaps I should try to reduce the sizes of the retina images at first more.

One question here. I don’t have retina displays for testing only the iPhone-Simulator. Is it accurate on a non retina screen? As far as I know the retina display shows us twice the pixel or so.

  • Thomas, I totally agree. I would wish for an action like this from the bottom of my heart

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

14

Found this (to cover the opera mobile):

http://www.opera.com/de/developer/mobile-emulator

and what I get is - hmmm - interesting?

I found your comments very interesting Thomas. I would like a CSS Menu in a FW7 template to work on all devices. I noticed FW’s own site is working in Opera Mobile Emulator, but not their template. The difference that I can see is the CSS for the menu seems to be with the FW generated CSS on the Softpress site.

Does this make any sense?

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

15

Let me try to clarify a couple of things here:

There are in total two (web spoken) and three (Freeway spoken) methods to apply images in Freeway:

####Method 1

The “graphic” item. This is producing an Tag with fixed width and height.

####Method 2

The “pass-through” option. This is producing an Tag as well but with flexible width (100%) and an automatic height.

Both methods are creating a code string with inline attributes (which is normal in this case). So you can’t simply change this reference to this resource, neither by adding additional stuff in the @media by hand nor in Freeway itself. And even if you could, it won’t be very effective cause it would download ALL image alternatives - so no bandwidth win situation.

Method 3

Applying an image as background-image to a DIV (HTML item). This is CSS, so the image is applied via css property.

The downside on this method:

You have to apply an extra property which is

background-size: cover;

This is forcing the browser to “fit” the image into its parent (the best he can) and may end in “different picture details” (depending on browser window width).

Such as full-background proportional action does.

But - and that’s what Walter referred to enables you to change the background-image on each breakpoint in order to serve smaller images on smaller devices.

But you need to adjust this by hand, cause it is not supported by Freeway natively.

Cheers

Thomas

####Appendix

To change the src attribute, it requires some JavaScript and a bit of tweaking in the extended item dialogue. I set up an example following Chris Coyier and apparently it works.

The example is based on jQuery and uses picturefill.min.js, furthermore the srcset attribute.

And naturally it requires “different” resources for different situations.

I don’t want to go in detail here but that’s the result:

http://backstage.kimmich-digitalmedia.com/templates/walk-through-the-park/imageresize.html

The trick here is, that a device is initially only loading its assigned resource.

I have to admit that I haven’t understood all of it so here is the related article:

I’m not aware if an action could do this job.

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

16

… probably being pedant and correct myself:

NOT based on jQuery - isn’t required.

Cheers

Thomas

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

17

This is a nice overview, thank you Thomas.
I find it helpful to describe advantages and disadvantages to give the full picture, but this would be a good thing to do in a more advanced manual or as you suggested combined with a reference project.

(But who would have the time and resources to create such a thing???)

Simulator recomendations:

I have found http://mobiletest.me, it is beta and free, but after login it seems pretty nice to use and as far as I can see till now it correspond to real devices. Perhaps it will not be a free account in future, but … Anyway.

What do you think?

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

18

This is a nice overview, thank you Thomas.
I find it helpful to describe advantages and disadvantages to give the full picture, but this would be a good thing to do in a more advanced manual or as you suggested combined with a reference project.

(But who would have the time and resources to create such a thing???)

This will be for sure part of my BoxModel Version 7 screencast series and even (once it fits) worth an episode for my “Code Episode” series.

Simulator recomendations:

I have found http://mobiletest.me, it is beta and free, but after login it seems pretty nice to use and as far as I can see till now it correspond to real devices. Perhaps it will not be a free account in future, but … Anyway.

What do you think?

Looks promising - and apparently my page works (for whatever reason) fantastic fine. Still one question left:

Does this really emulate all those different OSes?

If yes - cool found.

Cheers

Thomas

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

19

*Thomas, this exactly was troubling me. I have send already yesterday an Email to mobiletestme, if this a classical resizer or a real emulator. Till now no answer… But I am aware that this is beta…

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

20

On 5 Dec 2014, 8:10 am, Matt wrote:

Found this (to cover the opera mobile):

http://www.opera.com/de/developer/mobile-emulator

and what I get is - hmmm - interesting?

I found your comments very interesting Thomas. I would like a CSS Menu in a FW7 template to work on all devices. I noticed FW’s own site is working in Opera Mobile Emulator, but not their template. The difference that I can see is the CSS for the menu seems to be with the FW generated CSS on the Softpress site.

Does this make any sense?

Oops - Matt, I missed your comment.

Honestly I can’t explain - because I am not really able to look under the hood that detailed. But I recognized exactly the same and have to leave you with a scratching head - unfortunately.

Maybe the towers can spend a word?

Cheers

Thomas

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