| Comments

My blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want.  I’ve had my own custom theme since 2009.  I figured I was due for an update.  I was further strengthened by a post from Jon Galloway last week.

Now when I saw this I figured it was another nudge.  I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog.  Now a while back I was inspired by what Scott Hanselman had done on his site with a designer.  I reached out to a few designers that I admired, but frankly never heard back :-(.  I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer.  So I went looking for things on the web that I could do myself.  I did want some subtle design tweaks to represent some things I’m currently passionate about.

Bootstrap your CSS

After some digging I saw a ton of pointers to Bootstrap.  This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness.  The documentation was some of the better docs I’ve seen for a library.  Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior.  I liked what I saw and went to work.

When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks.  One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes.  By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone.  There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device.  Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted.  Here’s what my site looks like on an iPhone as an example:

timheuer.com on an iPhone

Notice the menu at the top is gone but replaced with a little icon (which is a drop-down).  Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view).  I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.

The other thing I wanted was to implement my primary navigation links in a little-more-than-text style.  I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area.  Here is the image in entirety:

Notice how the normal and hover states are the same image. 

NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.

What I do then is just define a style for the <a> tag like:

   1: #follow {
   2:     background-image: url("navbarglyphs.png");
   3:     background-position: -195px 0px;
   4: }
   5:  
   6: #follow:hover {
   7:     background-image: url("navbarglyphs.png");
   8:     background-position: -195px -70px;
   9: }

Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS.  A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using.  Once that forehead-slap moment was done, I was set. 

I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design.  It is very simple for sure, but I like it.  I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen.  If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.

| Comments

The Silverlight team today posted some information about what the future holds for rich Internet apps and where we have come with SIlverlight, where we see HTML5 playing a role and how Silverlight will be a part of the future of this next evolution of rich Internet apps.

Brad Becker, Director of Product Management, provides some information behind the value of Silverlight in a world where HTML5 will also co-exist:

Expect to see more from Silverlight in these areas especially in our focus scenarios of high-quality media experiences, consumer apps and games, and business apps.

When you invest in learning Silverlight, you get the ability to do any kind of development from business to entertainment across screens from browser to mobile to living room, for fun, profit, or both. And best of all, you can start today and target the 600,000,000 desktops and devices that have Silverlight installed.

I would encourage you to go and read “The Future of Silverlight” (frankly which I think should be titled The Future Includes Silverlight) as it provides some good information about what exists today, capabilities of platforms and where these technologies can grow into in the future.  Be sure to leave comments for Brad on the post as well!

| Comments

At the Google I/O conference this past week, they announced Google Wave.  Almost immediately, I started seeing Twitter replies, blog posts and various articles talking about how Google Wave is going to kill Flash/Silverlight/JavaFX.  None of these made sense to me…and at that point I’d yet to see anything about Wave anyway.  I posed a few questions on Twitter as to why people felt Wave was an RIA platform killer (that’s what I was reading into a lot of the buzz against things like Silverlight).  I got more confused with all the replies :-).  So I had a moment this morning to listen to the Google I/O Wave keynote.

I first heard Vic Gundotra come out and describe Wave as a “…personal collaboration and communication tool…” followed very soon by an introduction of Lars Rasmussen who immediately also came out and introduced it as a “…communications and collaboration tool…” as well.  Hmm, okay, so it’s a tool?  This is where I was at so far less than 10 minutes of the presentation.  In fact everywhere it is being described so much as a tool rather than a platform.  In their post they help differentiate a bit more calling it a product, platform and protocol.  The keynote session finally got to this point as well.  Great, now I get to learn about the platform.

After about 40 minutes of the presentation I’ve seen a very interesting project/product, but haven’t seen it as a platform that is replacing anything like Silverlight.  Stephanie Hannon, the lead product manager, unveiled the Wave product as an HTML5 application built using Google Web Toolkit (GWT).  Since GWT can be used today, I was curious what aspects were HTML5 in the app – I didn’t feel they elaborated at all – someone correct me if they did please.

At least 40-50 minutes of the demonstration was all about the Wave experience, a lot of looked to me like a tight(er) integration of Gmail and Google Talk…both of which are products I admire and are great examples of rich web applications.  There absolutely were some cool features such as the real-time communication updates (no more waiting for Tim is typing).  The “playback” feature was pretty cool/fun to see as well, but I’m not sure how much I’d use it.  Obviously demos at conferences are contrived and so as cool as it was, I can’t wait to test it out in the “real” interwebs.

The drag/drop feature of images from desktop to the Wave was also cool and raised my eyebrow.  Then Stephanie points out that this is something HTML5 cannot support and that feature requires Google Gears.  They mentioned they are working on a proposal to HTML5 to accommodate.

The other promise of Wave was that it would be “open” – a phrase that seems to have become a buzzword among anything web.  Open at what level I wonder?  Even Lars himself mentioned that they would “…open source the lion’s share…” of the Wave product experience (and demonstrated one minor skin customization).  But what isn’t in the lion’s share I wonder.

So the product got a lot of attention then about 20 minutes or less of the platform/protocol.  The platform seemed to have been demonstrated with the use of gadgets (embedding a map in the Wave, embedding the Wave in Blogger, etc.).  In fact the only aspect of the platform I felt was shown was embedding (they even referred to an embedding API).  The protocol also claims to be open.  Great!  There were some minor demonstrations of this (I admit, kind of hard to ‘show’ a protocol), but didn’t really get emphasis I felt.  So of 3 pillars of the Wave announcement, really only one of them (product) got any real depth.  Granted (and they admitted several times) that the whole Wave concept is in early form and limited access given to developers.  Frankly I was surprised no Android-Wave integration was shown.

From a product standpoint, it looks like a fun collaboration tool.  I have some concerns about the user experience like collaborating with LOTS of people.  Their UI seemed to make use of avatars and make the assumption of collaboration of 3 or less.  I routinely collaborate professionally with large groups and personally with groups more than 6 (think homeowner association).  What does Wave look like with groups or large collaboration…could a Wave look so spaghetti that it becomes unusable?  I suppose that is the intent behind playback.

Nothing that I personally saw (and I’ve yet to get my hands on it) led me to draw comparisons/conclusions to Wave threatening RIA platforms like Flash, Silverlight or JavaFX.  Sure, Wave as a product is a demonstration of a great web app/RIA…but that’s an implementation, not a platform.  So is HTML5 really what people are talking about here?  Okay, help me understand how HTML5 Wave in the scenarios they demonstrated?  Even they admitted that some of them were using Gears.

One of the more forwarded articles was one by the Zoho executive staff titled Microsoft Silverlight vs Google Wave: Why Karma Matters.  Sridhar in that article should really change the title.  It’s misleading and he doesn’t prove the point of the title.  What he explains is the buzz behind early alpha like Wave versus early stuff from Microsoft.  The excitement around Google announcements is generally huge and positive (although some don’t think it’s the cat’s meow) contrasted with Microsoft releasing something and everyone usually being a skeptic.  Sridhar tries to draw some analogy to Silverlight, but I think fails.  He’s just throwing more FUD around Microsoft in general.

What I also find interesting is this buzzword of “open” – something Google is praised for.  Let’s take a look at Google Wave Federation Protocol.  What’s open about it is that they’ve created something and put it out in specification form (and put a .org domain around it).  If that is the definition of open, then why is Microsoft hammered for XAML?  We have a spec out there?  What about C#?  Heck, that’s an ECMA standard.  I see a bit of a double-standard here.  I’m not saying that organizations like Google and Microsoft shouldn’t continue this practice…in fact, the opposite.  But it does seem odd that a protocol built to serve a specific need that wasn’t already available in existing standards is being praised when that is what other organizations have been specifically slandered for in the past.  Seems odd.

So is Wave going to threaten RIA platforms?  I don’t know.  Is it even an RIA platform?  I just think that all the messages about how Wave is pushing out things like Flash, Silverlight or JavaFX are unfounded at this point.  They all serve purposes.  Is HTML5 really what people are talking about here?  Fine, then draw that comparison and put some meat around it.  As far as I could tell, HTML5 is a working draft still.  To me as a developer (and as a user) this means that even once ratified as a standard, browsers will have to decide to support that (I know some have already)…and even beyond that-people have to use those new browsers.  The slowness of standards leads me to believe that RIA platforms will be around a while as there is some flexibility in providing RIA frameworks from commercial vendors.

If I’ve misunderstood something, please correct me.  I really want to make sure I’m seeing the whole picture.  But in the short days after a keynote only demonstration that was admittedly baked, I’m not sure the sky is falling for RIA frameworks and platforms.


This work is licensed under a Creative Commons Attribution By license.