Thursday, Microsoft launched modern.ie, a site with tools to help developers write better code. The tool is really a set of three different components. The first part of the tool is a subscription to BrowserStack, allowing you to test your code on a multitude of combinations of Web browsers and operating systems. This subscription is usually $19/month alone but they are giving away 3-month trial memberships right now. The second part is a set of twenty best practices for cross-platform coding, authored by Dave Methvin of jQuery fame and Microsoft evangelist Rey Bango. The third tool, an automated scanner that will run against an existing Web site and seek out compatibility issues, primarily for dealing with IE code-arounds and such, but it will check for more than just IE issues. The scanner makes it easy to identify potential problem areas and rather than just telling you it’s broken, it gives you some hints and links to resources to help you resolve the issues. Looking at one of our sites, I found a potential issue with an easy fix. You also get access to interact with the Internet Explorer team – at least through e-mail.
Another great feature is that you can configure and download virtual machines with a few easy clicks if you want to test these environments locally. That’s a nice resource for anyone who has ever needed to replicate and track down issues with some obscure combination of browser and OS.

From the first time I picked up an iPhone, I found the interface intuitive and easy to use. The user experience fit my paradigm for how I would expect to interact with the device, even though I had not interacted with it before that day. Of course, it’s been a few years since that day and using the iPhone is part of my everyday life, as i’m sure it is with plenty of others.
The new Blackberry z10 was just released and I have to admit, it’s got some great specs: very high res screen, great processor with the ability to run multiple apps, and a sleek design. However, what the z10 has introduced is a gesture based-style of navigation. Gestures have been around for a while in Apple and Android devices, but both of those devices have hard buttons, icon-based navigation, and other cues into more traditional computing. With touch-based systems seemingly taking over just about every screen we interact with, it makes me wonder how usable some of these interaction patterns really are. Yes, once you learn “how the system works” you will probably become proficient in tasks you routinely perform, and possibly be able to interact more efficiently, but what is the trade-off? I’m looking forward to some hands-on time with the z10 to try things out for myself.
This week the folks at Mashable hand a blackberry z10 over to some Android and iPhone users to test some simple interactions. Check it out

When the task calls for it and its appropriate, we need to use tables to display tabular data. When formatting these tables, we routinely need to do things like style alternate rows to enhance the user’s ability to quickly identify the data in those rows. In the past this was commonly done with a little bit of either server or client-side programming to apply a class to those alternate rows. Granted, not a difficult task, just something additional to do.
Now, with the advent of some new bits of CSS3, we can take care of all of this without any scripting. First, let’s take a look at these new structural pseudo-classes:

:nth-child(n) - nth child of parent
:nth-last-child(n) - nth child of parent counting backwards
:nth-of-type(n) - nth element of its type within the parent
:nth-last-of-type(n) - nth element of its type counting backwards

Now you’re asking yourself “what values can I use in place of n?” Here are some common values:

odd - every odd element
even - every even element
4 (or any number) - meaning the 4th element in this case
3n - every third element (3,6,9,...)
3n+6 - every third element starting with 6

Let’s do a little example. Let’s style a table of the top 10 films produced by Paramount Pictures.

<table id="paramount">
<caption>Paramount Top Grossing Movies</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie Title</th>
<th>Total Gross</th>
<th>Theaters</th>
<th>Opening Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Titanic</td>
<td>$600,788,188</td>
<td>3,265</td>
<td>12/19/97</td>
</tr>
<tr>
<td>2</td>
<td>Transformers: Revenge of the Fallen</td>
<td>$402,111,870</td>
<td>4,293</td>
<td>6/24/09</td>
</tr>
<tr>
<td>3</td>
<td>Transformers: Dark of the Moon</td>
<td>$352,390,543</td>
<td>4,088</td>
<td>6/29/11</td>
</tr>
<tr>
<td>4</td>
<td>Forrest Gump</td>
<td>$329,694,499</td>
<td>2,365</td>
<td>7/6/94</td>
</tr>
<tr>
<td>5</td>
<td>Shrek the Third</td>
<td>$322,719,944</td>
<td>4,172</td>
<td>5/18/07</td>
</tr>
<tr>
<td>6</td>
<td>Transformers</td>
<td>$319,246,193</td>
<td>4,050</td>
<td>7/3/07</td>
</tr>
<tr>
<td>7</td>
<td>Iron Man</td>
<td>$318,412,101</td>
<td>4,154</td>
<td>5/2/08</td>
</tr>
<tr>
<td>8</td>
<td>Indiana Jones and the Kingdom of the Crystal Skull</td>
<td>$317,101,119</td>
<td>4,264</td>
<td>5/22/08</td>
</tr>
<tr>
<td>9</td>
<td>Iron Man 2</td>
<td>$312,433,331</td>
<td>4,390</td>
<td>5/7/10</td>
</tr>
<tr>
<td>10</td>
<td>Star Trek</td>
<td>$257,730,019</td>
<td>4,053</td>
<td>5/8/09</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total Sales:</th>
<td colspan="3">$3,532,627,807</td>
</tr>
</tfoot>
</table>

Nothing special here, just a well-formatted table. Now let’s put some basic style, color and rounded corners on some elements in the thead and tfoot:

table{
margin:1em auto;
font-size:80%;
}
th {
background: #193441;
}
thead th:first-child { /* selects the first th inside of the thead */
border-top-left-radius: 5px; /* we need to apply the rounding to the th because the tr doesn't support this property */
}
thead th:last-child { /* selects the last th inside of the thead */
border-top-right-radius: 5px;
}
tfoot th:first-child { /* selects the first th inside of the tfoot */
border-bottom-left-radius: 5px;
}
tfoot td:last-child { /* selects the last td inside of the tfoot */
border-bottom-right-radius: 5px;
background: #193441;
font-size: 140%;
height: 2em;
}

Here’s where we’re at now:

Now let’s add some alignment and padding to the cells:

th, td {
padding: .2em 1em;
}
thead tr th:nth-of-type(1), tbody tr td:nth-of-type(1) { /* this selector selects the first th and td in each row...in other words, the first column */
text-align: right;
}
thead tr th:nth-of-type(2), tbody tr td:nth-of-type(2) { /* second column */
text-align: left;
}
thead tr th:nth-of-type(3), tbody tr td:nth-of-type(3) { /* third column */
text-align: right;
}
thead tr th:nth-of-type(4), tbody tr td:nth-of-type(4) { /* fourth column */
text-align: right;
} 
thead tr th:nth-of-type(5), tbody tr td:nth-of-type(5) { /* fifth column */
text-align: right;
}

The table so far:

Not bad. It’s getting there. Now let’s add some color to alternating rows:

tbody tr:nth-child(odd) { /* select the odd-numbered rows */
background: #FCFFF5;
}
tbody tr:nth-child(even) { /* selects the even-numbered rows */
background: #D1DBBD;
}
tbody tr:hover { /* changes styles of the row when hovered */
background: #3E606F;
color: #FFF;
font-style: italic;
}

Here’s the completed table:

That’s really it. What we’re left with is a nice clean table and the styling completely separated from presentation. You can use these CSS3 selectors now as they are supported in all major browsers except ie8 and earlier.

The US Electronic Medical Records System (EMS) contains a lot of information. The problem with the current system is that the data isn’t presented in a way that makes it actionable. In other words, the user interface needs a revamp to present a better user experience.
Last November a design challenged was proposed by the White House – Redesign the Electronic Medical Records system. The challenge drew over 230 submissions and this week, the White House has picked a winner.
Rarely do companies get the chance to propose ideas that could impact millions of people. It’s not just that though. This goes beyond designing just a system to designing something that has the potential to improve healthcare in the US and improve how doctors and patients interact.
One of the key ideas of the winning design is to treat our medical history not as just a linear set of doctor visits, but to present data in a more holistic approach, allowing doctors to track patient issues and results from prescriptions. This tool isn’t just for doctors though. There are tools that will help patients understand what symptoms to be aware of and track medications. And, as could be expected in our ever-increasing mobile lives, this tool will not only be available on your desktop, but also on your phone.
Take a look at the winning design and read more here.

Form Follows Function has put out a growing set of interactive examples using HTML5, CSS3, and JavaScript. What you’ll find there is some really interesting interaction and occasionally seizure-inducing animation.
Are all of the examples practical? No, but that’s not the point. What is being shown off here is that with HTML5, CSS3 and JavaScript, you can accomplish many of the effects, animations, and interactivity that we, as designers and developers, have had to rely on plug-ins such as Flash, Java, and Silverlight. I’d love to have some insight into how some of these examples were created, but other than just looking at the source, nothing is available.
With the number of people accessing the Web via mobile device outweighing accessing it via “computer”, the ability to code once and be fairly certain that it’s going to work on mobile, tablet, and desktop platforms is paramount. No one wants to use plug-ins. No one. It’s going to take some time for interactive designers and developers to convert their skills from some of those traditional tools, like Flash. Primarily, at least right now, because there are very few tools that they can relate to. However, that is changing. Adobe and other companies are developing tools to help fill this void. Of course, there is the old, tried-and-true way…actually learning how to hand code.

Sure to spark some interest at this year’s Consumer Electronics Show (CES) being held next week in Las Vegas, a new smartphone OS has been announced. Ubuntu is no newcomer to the OS space, having released the first desktop version of Ubuntu, which is based on Linux, in 2004 which now has more than 20,000,000 users and adding more every month.
So, does Ubuntu for Phones make a compelling reason to start playing with the development tools? Yes and no. The biggest reason for me, at least is the development flexibility Ubuntu for Phones offers. Developers have a choice to develop apps in HTML5, JavaScript, QML, C++, C, and OpenGL. What this hopefully means is the ability to take existing HTML5 apps built for other platforms and easily porting them for Ubuntu with hooks for native tools like the camera and GPS, while allowing developers to use higher-performing languages like OpenGL for game development.
The OS itself looks to have some interesting UX design patterns that i’m looking forward to testing on an actual device (not in a simulator). Speaking of that, there are no Ubuntu phones available currently and Canonical says it may be late this year or even next year before we see a dedicated Ubuntu Phone. As far as the UX goes, it appears that Ubuntu has taken good notes from other mobile operating systems like iOS, Android, and Windows 8 and put them together to deliver an OS with some of the best features of each. While there are some interesting features, none of them stand out as revolutionary. Most we’ve seen in some form in another OS, but seem to have been improved on, like the pull-down menus and frequently used apps.
What Ubuntu does has working in its favor is the app ecosystem. Ubuntu Software Centre has been the go-to place for all things Ubuntu desktop. Adding in a mobile apps category makes perfect sense to distribute mobile apps.
It’s difficult not to be at least somewhat concerned by the failure of the NexPhone, which missed reaching funding last year…by a long shot.
What is confusing is that Ubuntu for Android also just has launched, but is a separate and different offer.
Is Ubuntu too late to the mobile space? Time will tell.This isn’t the only mobile OS to be announced recently and you’re likely to hear more about those and Ubuntu for Phones here on Spark. This also won’t be the last mobile OS to be launched as companies jockey for marketspace as mobile usage continues on its upward trend, which shows no sign of slowing down.
 

If you’ve ever used social APIs in your mobile or Web apps, you know that managing the connections to multiple APIs as well as being able to make adjustments quickly when they change can be a challenge. To help combat those headaches, Singly has introduced AppFabric. With AppFabric, you get a single interface with access to over 35 services, all of which they manage so you don’t have to. Not only does this make including social features in your app easier, they’ve also introduced Singly Deep Data, which provides full access to all the data from every service provider you have access to. This means your photos, checkins, statuses, links and whatever else those services provide. Singly has also taken the trouble of duplicate information across these networks, making it easy to identify unique information. iOS and Android SDKs are available, but Singly also works with web-based applications.
Pricing is affordable and based per user. Large apps with up to 1 million users are only $99 per month. A trivial amount when you think about how much time you could spend each month managing all of that yourself. For developers, they offer a prototype plan, including up to 99 users for free.
Singly has raised $7 million in Series A funding from The Foundry Group, Esther Dyson and John Batelle.
Check out Singly here.

Let’s face it – getting an Ad-Hoc build to a client of their super-cool-new-app-in-progress can often be time intensive and cumbersome. While the advent of wireless distribution certainly was a huge improvement over having your client download the .ipa file, import it into iTunes, and physically sync their device via USB to get the application installed, Kickfolio looks to make it even easier to hand out those dev builds to clients. Instead of having to gather and manage all of the UDIDs and compile them into an .ipa, developers just need to upload the simulator build to Kickfolio and send out a link to view and interact with the app.
Unlike other solutions which used Flash to render the app, Kickfolio requires no plug-ins, just a HTML5-compatible browser. What this also means is that you can embed previews of your apps on your Website, Facebook, Google+ or the like, letting prospective clients see and interact with your work.
This certainly looks promising and I’ll be trying this out over the coming weeks and reporting my findings.