[ANSWERED]Noob (Planning migration from HS) - Control Pages

[jay (support)]

how about a way of grouping multiple versions of the same page content? EG a control page for controlling the tv. One version is the default landscape, one is the default portrait, both have a version that’s retina which is identical to the standard version but loads the @2x image versions, and so on with different flags for different device types..

Yep, we've discussed a variety of options along those lines. If we keep it iOS focused, there are probably a variety of things we could do. If we expand it to consider the much larger variety of screen sizes out there, it becomes a much bigger fish to fry. Not only for Adam's Android client, but also for web browsers. Lots of things to consider when we start doing our next round of control page changes (whenever that might be).

It would be a pain, but you could achieve the device type distinction by using the inbuilt iOS URL paths (whose proper name I've forgotten). Or if you really wish - and had far too much time on your hands - one per device as well.

You'd make one set of pages for iPhones, one for iPads and optionally a separate one for Desktops. Then add a custom shortcut (aka webclip) on each device that opens up indigo://controlpages/iPhoneHome, indigo://controlpages/iPadHome.... (Again, I can't remember correct syntax). Each page would link to its own set of pages, never knowing the others existed.

I'll update this thread in a moment with link to the thread that discusses this.

[Edit: Link here: viewtopic.php?t=12028]

Peter

thanks Peter, hadn't seen that info anywhere

So I did a bit of experimenting

Basically, I want something that's going to "scale" (by that I mean adapt the layout) smartly among tablet sizes and tablet to average desktop res. (Phone to tablet is going to be a stretch). I'm also real tired of having to make loads of icons in different sizes, and more to show different states, and being stuck with raster images. There also needs to be the ability use expressions for properties (e.g. left is (screen width - object size) / 2. I also want an easy way to change themes, so the wall mounted displays can change from light to dark colors (for example) based on time of day (nighttime in bedroom) or a state (watching movie in media room)

So I mocked up a test for responsive design and much more efficiency. It's no where near complete and just part of my home page is done.

Salient points:

• Layout adapts to virtually any size. (questionable whether it's usable on phones, but early days and lots of possibilities)
• Content reduces as screen gets smaller. Detail is hidden, columns disappear, etc. (News is color coded to make it easier to see and so that color changes to match theme. Would never leave it like that )
• Can change theme at will (menu in top right)
• Icons are vector (SVG)
• Icon colors driven by themes
• Reflections are CSS (I'm sticking with webkit borwsers for now)

The icon stuff in particular is a massive time saver. The amount of time taken to style icons, and then make reflections is way too high. There are a ton of really good fonts out there now (like font-awesome) and many can produce SVG or PNG--if you;re OK with raster)

You can see it here: http://www.andersonintegrations.com/hatest/index.html. Most of it works in IE (except reflections from what I can see), but I'd recommend a webkit browser such as Chrome or Safari (works on iOS)

Best way to test is on desktop in large window. Make the window narrower and see how news detail disappears and eventually one column disappears. (The bizarre colors should help see what's disappearing.) Basically the following occurs:

1. There are two columns of news to start, with US on left and International on right (ignore font sizes for now). Each news story has a head, subhead and intro. These are all visible on large screens
2. Make the window narrower. The first thing to disappear is the intro para (as the news would take too much vertical space)
3. Keep reducing and the subhead disappears.
4. Keep going and it reduce to 1 col, international stuff disappears and sub head disappears.
5. Change themes and notice that when you switch to a light colored theme (like United), the icons change to a dark colors.

You can also go here and get a snapshot of how it would look on different devices (doesn't show reflections). http://www.responsinator.com/?url=ht...Findex.html%23

Another good place is here: http://www.browserstack.com/responsive and paste in first URL.

As I said it's just a proof of concept, so I'm doing nothing with the vertical spacing or size of icons (yet) and haven;t even thought about the best approach for adapting to phones. The HTML is very verbose, but would be produced by a view (or view model) in the end

Interested to hear people opinions

Regards

mark
__________________