Pixate Debuts A Framework For Designing Mobile Apps With CSS

Pixate, a Y Combinator-backed startup allowing mobile developers to style their native applications using CSS, is today launching to the public after several months of beta testing with hundreds of developers. The new framework is meant to combine the best of both worlds in mobile development: the richness and feature set accessible through native applications and the ease and flexibility offered by web technologies like CSS.

It’s an intriguing idea, to say the least. Today, mobile design is very image-focused, explains company co-founder Paul Colton, who previously co-founded Live Software and, later, Aptana Studios, the latter of which was acquired by Appcelerator in January 2011.

“Graphic designers have to do everything with graphics and images, so there’s often hundreds if not thousands of images required [in mobile apps],” he explains. “It’s more that it’s a huge burden – a change in the UI requires that a new image be created that has to be added into the project, and the app has to be rebuilt. It’s a much more tedious process.”

With Pixate, the designer can just focus on editing stylesheets, which can be independent from the project itself. The framework has two big pieces: the CSS for styling apps and a vector-scalable graphics engine behind the scenes. The technology can be integrated into an existing mobile app via an SDK.

“What we realized is that we needed to build a CSS engine, just like in the web browser,” Colton explains. “We needed to read standard CSS – or at least as close to standard CSS as possible.” He says that Pixate’s CSS is W3C-complaint and is 99 percent the same as CSS on the web. “Then, we just made it work for native,” he says.

Pixate is initially available for iOS applications, including those built using the usual tools (Xcode), as well as a few others which are popular among developers such as Ruby Motion, Xamarin’s MonoTouch, and of course, Appcelerator Titanium. Colton says the idea is to be platform-agnostic, which is why the big focus post-launch is on porting the technology to Android.

He acknowledges that there, Pixate may even be more relevant since it can help to render graphics on the fly across different screen sizes. This is an issue that’s even more of a challenge in the Android ecosystem than on iOS, which only has a handful of form factors to design for at present. In addition, when Pixate arrives on Android, it will also make it easier for app developers to maintain more consistency cross-platform because of this ability.

The end result is that apps created with Pixate have significantly less code and fewer images included with the app.

pixate-1

pixate-2

It’s interesting to note that the startup emerged from Y Combinator’s call for “no idea” startups, which, if you remember, was an experiment announced in March where the incubator famously sought startup founders in need of ideas. Colton says he was curious about participating in an accelerator – his first company was self-funded, and the second was VC-backed, but he had never been through an incubator program before.

After joining YC last summer, Colton brought in co-founder Kevin Lindsey, also previously of Aptana, and they interviewed the other YC founders about their mobile development needs and pain points. “What really came across to me is this whole notion that there’s plenty of really smart people – that is, there are great engineers who can write anything – but what we ended up hearing is that it doesn’t matter how good an engineer you are, it’s really hard to engineer your way to a great design.”

Designers basically asked Pixate’s founders for a way to build more beautiful apps with ease. “Can you make mobile design as straightforward as web design?” they wanted to know. The founders realized the best way to do this would be to simply bring CSS to mobile.

Palo Alto-based Pixate has seed funding from Y Combinator/YC VC, but it also raised an additional $60,000 on Kickstarter, half of which came from strategic investors, Walmart Labs, Appcelerator and Grupo.mobi, which put in $10,000 each (the donation limit).

The campaign reportedly caused some confusion when an earlier version was cancelled and backers transitioned to a new page with a reduced goal. But that piece is a bit unfair – especially when we’re talking about a startup that’s actually trying to solve a real pain point in mobile development today – that is, they’re taking on the challenge of designing a mobile app that looks good and flows well by merging web and native technologies.

I’ve lamented before that too many apps today are relying on crutches like the “walkthrough” to explain themselves to users – a problem that can be, in many cases, solved by better design. By making it possible to design an app using CSS, the mobile industry potentially opens to a wider set of designers who can now translate their web skills to native apps.

In any event, Kickstarter’s non-corporate backers gained access to the early beta, and it seems that most of the early commentary was around why a serial entrepreneur – in YC, no less – needed to be on Kickstarter. Still other questions remain about Pixate’s performance and stability, but those are things that only wider public testing will really answer. And as is often par for the course, YC’s Hacker News’ post about the startup veered away from discussing the company’s offering itself and instead debated whether or not CSS itself is any good, or just “a big stupid mess.”

Okay then.

Given the corporate interest, it sounds like Pixate has an easy exit ahead of it, if they so desired, but Colton says that’s not the route they’re taking right now. “We want to see how broad this can be,” Colton says. “It’s really a big change in how you can build apps,” he adds.

The team of four also includes a graphic designer, Justin Belcher, and product manager.

Pixate is open now to interested developers, and pricing starts at $199 for the one-user “indie” license, then goes up to $599 for the enterprise version, and $1,299 for the enterprise version with priority support.

pixate-3