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:
- 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
- Make the window narrower. The first thing to disappear is the intro para (as the news would take too much vertical space)
- Keep reducing and the subhead disappears.
- Keep going and it reduce to 1 col, international stuff disappears and sub head disappears.
- 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%23Another 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
__________________