Finally netted version 1.5 of this landing page/digital business card – though I have deviated from some of the plans that I had for this iteration of the card (SVG primarly), I have been able to pull off some things happening beyond the tiles that’s pretty neat.
On the Tiles
As much as I have liked v1.4, there were just some of the tiles that I know that I needed to address.
There’s been the addition of tiles for my Carnival of the Mobilists postings and my profile over at SpeakerSite.
Both the MMM and SpeakSite tiles see me using the subscript and superscript HTML elements alongside the CSS to product some variations on the respective site’s logos. I’ve kept the colors, but totally had to go creative in order to make these work (was so close with SpeakerSite but I couldn’t keep it readable).
There’s also the removal of the QR code image, leaving my logo as the only image to load on this page.*
The link for the Ovi tile has been changed from pointing to Nokia BetaLabs to Ovi Share. I’ll want to do something different for BetaLabs as I’m picking up some decent conversations/ideas there.
Behind the Tiles
One of the reasons for doing this exercise is that I get to lean on the shoulders of some of those who have been doing fancy (and over-the-top) things with CSS3. The tiles are basically designed completely in CSS, meaning that none of the processing of these happens on my mobile web server – your web browser does the work.
This is good from the perspective of a mobile web server to some degree, but I’ve tweaked the recipie a bit. In this version 1.5, some of the cards are actually not just created via CSS, but there’s some PHP running behind them to create the link based on the site that its pointing to.
In short terms, anytime that you click on a link to Blog.AntoineRJWright (WordPress), MMM, LinkedIn, Carnival of the Mobilists, Last.FM, or Ovi, you’ll get a link to the latest update pushed to that site. This could be a blog post, picture, or status update. In this way, instead of making you take the extra step of vetting through to the site, then the latest posting, you just go straight to the latest posting (hopefully, it is something that makes you dig deeper). The technology behind this is the impressive RSS2HTML engine found here.
Metadata Is My Friend
Again with the “under the hood stuff,” there’s a good bit more attention paid to metadata since v1.4. I’ve added all kinds of data, and improved things still by making the site/page description better align with other web properties.
The page is also still encoded as a vCard, however there’s no indicator to this fact. I’ll put on the board of doing some kind of small icon that makes it clear (at least to those with browsers that can read vCard data) that the page is a digital business card beyond the URL you might take to get to it.
You might have noticed that there’s no longer a list of the latest posts/songs on the page (which made an appearance in v1.49). These are pulled into the icons and get the page back to a simpler format.
I have also trimmed some of the text in the description to make it a bit easier to read/search.
Overall, I’m actually really happy with this update. I didn’t think that I would be and hence the putting it off for a while. I debated adding a number of items, which might still make it later, but needs better thought before coming out with them.
In terms of an exercise of my brain and a mashup of neat technologies, this still serves to me as something that’s a bit more innovative than most. You’ve got a website on a phone playing the role of a social graph and communication point. It is liable to be up and down – and hence the fun/challenge of doing something like this. I believe that there’ll be an update to my server software before I can nail out another update, and who knows, maybe I’ll fix a standing issue and solve a few more before then. Should be another fun session.
*Edit/Add/Note: I never noted this before, but this landing page/digital business card is best viewed with Safari, Chrome, and Opera. There are some issues in Firefox, and some breaking of things in IE7 and lower. If you have the Firefox extension Operator, you’ll see some of the hidden goodness in this page. Mobile browser fare ok, but not all. Hence the image at the top, that’s what it should look like.