Screen/Device Simulators

Hello all,

Rather than trial/error, I was wondering if there are any screen simulators, overlays or other tools that can be used to develop screen layouts for various devices. Thanks to all in advance.

The iOS simulator that comes with Xcode is handy for iOS based devices

Those should help as well

Thank you Norman!

Funny you ask. I’ve written a few classes with Xojo which help me develop web apps for all the typical phone, tablet, and desktop layouts. Part of that is a screen size/orientation emulator that works on the desktop. I’ll post a link to a project in the wild that uses it later this weekend.

That, would be really really COOL Brad!

I just this weekend started looking at having to use alternative devices/screens. Testing is a real PIA when you don’t have all of them! I have only an iPad and notebook. I briefed my pages on a friends Andriod something… and my daughters iPhone. But without being able to see and have a reasonable facsimile for dev work, testing with any device outside of the device running the IDE is arduous at best! Afterall, each attempt has to be compiled, uploaded, permissions set and most often restarted or reset before any testing can be done. Lots of time just to test!

Please do share and advise when something to try is available!

Thank you again! I am sure the entire community will be grateful for your contribution!

Tim, if you have a wireless LAN, you can test on these devices against your debug build. Just point them at [local address of dev computer]:8080 (or other debug port if you’re using).

Also, there’s being able to view on all these devices and see what’s going on, and then there’s the whole task of actually supporting them. I’ve found that splitting a page into phone, tablet, and dekstop paths, with landscape and tablet configurations for phone and tablet, is a good way to split up the work. The framework I’ve built reflects that and lets me build a page by filling in some control arrangement details incrementally. Typically, a phone UI will be less complicated than a tablet UI, which will be less complicated than a desktop UI. That’s how your web app can scale up and down the screen space continuum. Final detail is that you will see all kinds of weird widths and heights, so you have to take a very dynamic approach to control layout. Relying on LockLeft, etc. is pretty useless with a device orientation change when the aspect ratio is bigger than 4:3.

Thanks for the info Brad. Your explanation of page layout approach is interesting. I had not gotten into any of that yet - just getting my toes wet, little by little. One of the big issues is, not having the hardware to test with. So getting close with some kind of simulator or screen design guides and/or emulator would be a huge help - just getting started.

I did not realized that an external device can test when the debug build is running. I thought only the local machine could access it. I most certainly will try and use this!

From the little bit I have seen and tried, it seems there will be an awful lot to learn and to consider when designing web pages. I look forward to your project link when your time permits.

Thank you again!

Search around the web. This is a universal web design problem and your answers/approaches to solving it will likely be found outside the Xojo universe. WE can do a lot of things for you, but this isn’t one of them.

@Tim Seyfarth: Here’s an app I’m in the middle of building. It’s a book club for some Twitter friends. Think of it as a brochure-ware app that others can explore to find and purchase interesting books. The books are all linked to Amazon with an associates link. The app displays nicely on phones, tablets, and desktop. On the front page, click the “Enter” button to get to “Members”, click a member thumb to get bigger photo, click “Books” button for a selected member to see books they like, click book thumbs to see bigger covers, etc,

If you’d like the desktop version that emulates different sizes (popup menu at top), click this link instead:

Notice that the layouts for landscape vs. portrait iPhone (4 and 5) are different. Controls are arranged on a resize or orientation changed event. Custom events tell the WebPage subclass the configuration for which it needs to arrange controls. That code style is drill down, so you could just do a quick and dirty implementation of ArrangeControls event to get started and implement ArrangeControls_Phone_Landscape and ArrangeControls_Tablet_Portrait later.

If you try the app and it’s not responding, hit me up on Twitter url= BradHutchings[/url]. The app is under development and has all sorts of issues, but it demonstrates the concept now, which is why I’m sharing the link.


Does this mean that a single page my be used, but populated with more or less objects depending… But what do you do, if all of the objects are necessary? Do you then use multiple pages for the small screens? It also seems that no WYSIWYG can be used, other than for rough layout. As you wrote [quote]you have to take a very dynamic approach to control layout[/quote] must be used. But that is also very very difficult without having some on-screen reference during design time, to know what the coordinates are.

I did try your links, they did not load at all. I also tried to send a tweet, but admittedly, I that was the first time using twitter (I have resisted most of the social networking trends), so not sure if it went through or not.

Again, thank you for your feedback!

@Tim Seyfarth The app has been running well all since I posted that. If you can’t reach it, there might be a firewall, security software, or a router getting in the way on your end. Didn’t get anything from you on the Twitter. It’s just the easiest way to find me most days :-).

It’s really going to depend on the app. The example I shared scales up and down well because pictures of people and books take up most of the display no matter what it’s shown on. Controls get arranged differently for phones, tablets, and desktop, and for landscape/portrait on phones and tablets.

One design paradigm that a lot of developers use with phones/tablets… On a tablet (landscape), select on left, edit/view on right. On phone, select on one page, edit/view on another page. With my framework, the main page shows list and editor/viewer on tablets, just list on phones. A second editor/viewer pages shows editor/viewer on phones.

And yes, you do trade WYSIWYG (other than rough layout) for flexibility and organization. I’ve found the trade more than worth it, especially when you consider that Chrome and Firefox on Android devices report what seem to be very odd sizes. They’re not odd once you get what’s going on, but they look it when you don’t. Most any layout you can imagine is gonna need some tweaking to fit well on a range of phones and tablets.

Many Companies only allow following ports open to the internet for the user: 80 (http) and 443 (https) And some might allow you access to port 8080 (Apache tomcat default web site). So yes it might be a firewall that is stopping you for access the URL.