Refined by Fire » Mobile Web

Why it’s a Good Time to Play with Webkit CSS Properties

Chris — Sat, 26 Apr 2008 19:02:57 +0000

So, after getting an email from Sitepoint this past week, I decided to drink some of the Webkit CSS kool-aide. If you’re in a Webkit browser, go ahead, rollover the links and navigation.

To give a very quick background, Webkit is the foundation for the Safari Web browser. Additionally, many OS X apps use Webkit to display Web content. NetNewsWire, Mail.app, the Dashboard, are just a few. Site-Specific Browsers (SSBs) like those built on Fluid are also using Webkit.

Basically, if an OS X app’s Web integration has a tight feel to it, you can bet that it’s using Webkit.

Webkit is a strong platform. The only thing I see potentially harmful is that they stray away from W3C standards with their modern functionality. However, even as a relatively strict standardista, I don’t fault them. It takes forever for the W3C to get anything done and then the adoption rate takes even longer. This is why we have programming strategies like progressive enhancement⁽⁸⁾.

The new Webkit CSS properties are relatively simple to implement and ignored by the other browsers. (Well, I tested only in FF3 beta and I don’t think I have the patience for IE… no wait, I’m SURE I don’t..)

For me, the only tricky thing was understanding where the actual properties would live in the style sheet. The transition property I’ve used on the navigation areas and links is actually set in the selector that will change.

For example:

#tertCol a {
	display:block;
	color:#D1570D;
	font-size:.8em;
	line-height:1.2em;
	border-top:1px solid #BBB;
	padding:4px 0 4px 4px;
	-webkit-transition: color .25s linear;
	-webkit-transition: background-color .25s linear;
	}

#tertCol a:hover {
	background-color: #D1570D;
	color:#FDE792 !important;
	}

This seems a bit counter-intuitive to me. Time-based event effects such as animations and transitions seem like they should go on the event handler such as hover. It makes sense that static effects would be handled in this way, but not dynamic ones. Anyway, minor annoyance, not a deal-breaker.

Photo by bartmaguire.

Why Is Now A Good Time?

Before jumping in and adopting proprietary technology, it’s always good to second-guess. Thing is, Webkit is not propietary. It just seems that way because there is only one prominent player. It’s actually open-source.

See the Billowing Steam?

As mentioned above, Webkit has gained some good ubiquity on the Mac OS X platform which itself is gaining steam in both the consumer and business markets. Additionally, perhaps more importantly, Apple has beat out Dell in the education market. That means even more people in the coming generations will have a preference to OS X.

Webkit is the engine that drives Safari and it’s mobile sibling on the iPhone, which has gained an enormous share of the PDA market. The iPhone is no doubt here to stay and after Apple’s enterprise initiatives take this summer, forget about it. Every executive wants one, but is bummed they can’t connect it to the corporate email. That’s going to change soon. (Not to mention after 3G hits)

Apple is not the only major company adopting Webkit, though. Nokia and Adobe have adopted Webkit as their rendering engine of choice as well with the Nokia S60 and AdobeAIR, respectively. And, not saying it’s going overthrow the great, bloated behemoth that is IE, but Safari is now available for Windows as well.

High Zippiness Factor

Webkit renders HTML/CSS at blazing speeds and it handles Javascript like a champ⁽⁴⁾.

I used to use Firefox for years because of its vast array of plug-ins and added functionality. While I miss the Web Developer toolbar, I stay in Safari for all my browsing because it so stinkin’ fast.

Easy to Implement

Webkit is easy to include in your apps because it is well documented for the Xcode and MS Visual Studio IDEs (as well as Express). I even found that some developers find using Webkit a perfectly legitimate tactic to create desktop apps using Web technologies. This is where guys like Todd Ditchendorf and Jon Crosby are making plays. Don’t think they’ll be the only ones because even I – a hack of a programmer – grokked that one from the moment I started playing with Xcode.

Hardcore Compliance

Yeah, Yeah, say what you will about The Great Browser War of the ’90s happening all over again. The fact is, when it comes to current standards compliance, Webkit is hands down, above the rest⁽⁷⁾. So, zip it Chicken Littles. (besides, the browser war has never ended.)

Photo by Killer App

Furthermore, there is a difference here. This is more a matter of stylistic enhancements, not structural and behavioral integrity as it was between Netscape and IE. When considering a 4-layer approach to design; that is, separating content, structure, style, and behavior from each other we’re looking to keep visual enhancements away from disturbing the accessibility to content. Which is what these properties are for.

Again folks, it’s called Progressive Enhancement⁽⁸⁾. I was shocked to find that some people are still unfamiliar with this notion. Essentially, progressive enhancement, means that, if you’re going to add some modernity and flare to your code, make sure it degrades gracefully to non-supporting browsers by adding enhancements to already sound, accessible code. (I won’t flag you if you ignore IE, though.;-) jk

If you’re worried about non-webkit support on a Blackberry or some other mobile device: again, you haven’t taken the time to ensure best coding practices for degrading gracefully and if you’re not coding with best practices, then you have a lot more to worry about than non-compliance to Web standards.

Add it to Your Toolbelt

The features I toyed with are rudimentary. Webkit can do masks, gradients, transforms, rounded corners, all sorts of goodness. There are many possibilities to help shorten your dev cycle as you design for the future Web.

The Web is in a constant state of flux; expanding and contracting. As architects and builders, we’re going to be charged with taking applications to mobile devices and creating stand-alone apps that access the Interwebs via Javascript APIs, etc. Coupled with coding for graceful degradation, Webkit is going to be the easiest path we have.

Being in this biz for over 12 years and seeing technologies come and go or stay, I’m predicting that if you want to retain, or gain, some credibility as a Web designer/developer, do not waste any more time, put Webkit at the front-end of your development process.

Now, if we could just see more cool plug-ins!

Linkage

iPhoneDevCampNYC pt.2 – Sessions and Explorations

Chris — Sun, 20 Apr 2008 18:51:47 +0000

Session One “Installing SDK and ‘Hello World’” (or Bonjour Monde :-) with Shawn Van Every and Eric Redlinger

Photo by cstoller

Well, I wanted to get my hands dirty in the IDE. So, I went to the SDK installation, and xCode introduction. I’ve been through the tutorials, but thought that some real face-time instruction would be good.

It was pretty straight forward, but this was way cool, though: Bonjour technology can connect other phones over WiFi. There is some sample code that allows you see how this works on the wiki page. (Link Below)

I didn’t get my “Hello World” to even say “hi,” but I also had to cut it short before tweaking it because we wanted to get into what we thought would be the app for us: Interface Builder.

IB is tricky, definitely fun, but I don’t see how I could use it in my workflow just yet. It’s still really buggy and not complete. Some where saying that it’s the weakest part of the SDK. Certainly didn’t do it for me at this point.
(See Links at end of post for notes.)

Session 2: User Experience with Chris Fahey and Rob Marini

This, for me, and perhaps many others because the room was packed, was the headline event. The iPhone is in such infancy that we’re all starving and grasping for what it takes to make a great app for the device. In case you don’t know, Apple (they’re not the only one’s, though, they’re just one of the more well-known) puts User Experience at the front-end of the development process. I reiterate this as it’s a relatively new notion for software developers who are used to system-driven UI design.

Which is kind of a “duh.” I mean, if you’re creating something for an audience, shouldn’t you have a deep understanding of that audience? Anyway, another topic for another day.

Photo by bisceglie

Chris showed off his densely-layered Photoshop interface prototype maker – complete with moveable finger (unfortunately not shown)– from which he hand-stiched various screen shots he found on the Web (he’ll be releasing to the public soon, watch graphpaper.com). He was quick to point out that he did his protoype Pre-SDK release with InterfaceBuilder (IB), but Rob actually advised against using IB for making prototypes anyway. There’s just too much time involved. Perhaps it will get better/easier, but right now, as designers,we should stick with what we know.

Prototyping is an extremely important part of the design process, but not the first. It’s best to start of with a graph-paper sketch pad. Chris suggested to use one the size of an actual handheld. I think this might be what he’s talking about: Moleskine (scroll to bottom of the page).

The photoshop file was definitely an undertaking on his part, but the take-away from Fahey’s presentation is this: design is sometimes the “Art of taking features out.” Sure, in the initial phases, jam-pack a concept with features, but then give it a critical look to take out stuff; what I like to call “design triage.”

Actually there is another take away, “Get pixel-perfect as soon as you can.” Many designers are coming from desktop or Web design where screen real estate is a luxury compared to the iPhone. So, it’s really important to see what it’s truly going to look like.

Rob Marini really got some great discussion going. One of Rob’s points was that once a prototype is really fleshed out and the experience is coming together, then start bringing things into UI Builder.

Rob’s posted his notes on his site: The New High Standard.

Warning For the Developer

Eric Redlinger, creator of CrossWalk a handy Subway map app for NYC, pointed out to programmers: if you worked with pre-beta “unofficial SDK” don’t be surprised if everything gets thrown out. Apparently, Apple’s made a ton of changes to the CocoaTouch’s (iPhone rendition of Cocoa) methods and syntax.

Photo by cstoller

Webkit Areas for Native Development

Here’s an interesting idea. Something I was pondering as I’ve played with xTools: design and develop using Webkit with a “thin CocoaTouch layer” and then turn it into a iPhone app. Apparently, the guys were saying that this is a perfectly valid way to develop because “Webkit views” will run with the benefits of a native app having that thin Cocoa layer, but easy enough for Web technologists to get apps rapidly built. Some features like camera, corelocation are not available through Webkit, but that’s where the native aspect can come in.

Eric allowed us to rip up his CrossWalk app, but unfortunately I had to jet off to a friend’s Seder. So, I couldn’t participate much.

Here’s some other helpful Webkit topics:

SproutCore – OpenSource framework for Web. Think of it as Cocoa for the Web.
iUI – is another option, but a little immature.

Anyway, this iPhoneDevCamp was my first BarCamp experience. It was awesome, definitely will be attending more in the future. If you’re in the technology dev/design industry in any capacity, either go to one or get one started if they’re not available in your area.

Thanks for the volunteering and sponsorship:

iPhoneDevCampNYC pt.1 – Oh, the People You’ll Meet

Chris — Sun, 20 Apr 2008 18:51:09 +0000

So, made it to another NYC tech event. On a Saturday no less. Anyway, this was the first BarCamp I’ve ever attended. I’ve been wanting to attend one for quite some time and was bummed to miss the big one a couple months ago. This however, made up for it because we covered one of my favorite topics: experience design. Oh wait, yeah, on the iPhone. So, even better.

Anytime I attend these smaller homegrown/grassroots events, I try to be one of the first there for a couple reasons:

1) Coming in from NJ and going somewhere different (like Brooklyn), it’s good to pad time. That’s obvious, but
2) There’s usually a ton of things that need setting up and that’s a great opportunity to pitch in and meet the lead volunteers before things get hectic.

oh and the refreshments are at their freshest. :-)

All the Smart Peeps

It was great to catch up with a couple folks such as Joshua Keay and his brother, Dave from Magnetism Studios and Chris Fahey from Behavior Design plus met a few new ones. These people are brilliant and lots of great discussions get going.

Tell ya what’s funny, though is organizing the day. It’s truly an organic process. During the meet and greet, everyone suggested the topics for the day.

Then after introductions, we organized the topics into a schedule. There is nothing more hilarious than a hundred+ technology/experience professionals/enthusiasts creating what will ultimately be the “unconference” ad-hoc experience that are BarCamps.

There we were, deliberating over what order the topics should be in, which should run concurrently with what, who’s going to teach and miss out on a topic in another room. I was getting worried as I wanted to see UX and InterfaceBuilder in the beginning because I had to leave early. Then once we got it all figured out, we wound up starting all over again because… well, just because someone had to say something. Yeah, there was nothing planned up front!

But you know, something that could typically take event planners weeks to figure out, we did it in a matter of minutes. Experts surfaced, presentations were crafted on the fly, and the event was great.

Lunch

(We actually went on to the sessions first and then came back for lunch. Just wanted to group my topics.)

Good pizza; good discussions. Met some great folks and caught up with Patrick Ewing, brill rubyist working for Gary Vaynerchuk. Talked up some good ideas with him and Robert Marini who I just met for the first time. That guy’s smart. Look for good things to come from him. Also, got to meet Mac coder, Buzz Anderson creator of PodWorks and Cocoalicious. We got to chatter on general usability and development for the phone and some history growing up with the Mac. Ahh, the nostalgia…. Met wit one of the sponsors, Mike Sharon from socialight, about his move from South Africa to NYC and the cultural differences. So, it’s not all tech jabber, which is way cool.

Anyway, meeting people at these events is perhaps my favorite part (there were so many, I’m not going to be able to link to everyone, sorry!) There’s always either some new ideas or refinements to existing ideas that come out the cross-pollenization.

Read on the Sessions.

Don’t Miss

Please, by all means add more local groups, events, blog posts, reviews, software downloads, help files, (whatever) in the comments and I’ll update.

Oh, and anything you post elsewhere, use the tag iPhoneDevCampNYC (especially if you twitter it, use a hashtag)

Technorati Tags:
iPhoneDevCampNYC,iPhone,barcamp, coworking

List of Silicon Alley Start-Ups

chrispy — Sat, 01 Sep 2007 00:08:27 +0000

Hey! Silicon Valley, Pipe it Down Already Will Ya? We’re working over here!

Thanks to our noisy friends in “The Valley,” we here in “The Alley,” need to crank it up a few decibels in the blogosphere. This is one of my contributions.

Requirements for this list: must have started this business after the dot-com-kaboom in 2001 and not been bought by Google, Yahoo!, MS (or any other Internet behemoth).

tumblr – Rapid-blogging

Etsy – Artsy Ecommerce, Web 2.0 Style.

Oddcast – Talking Avatars

Instant Information – Information Management

AdaptiveBlue – Browsing enhancement for Firefox browsers.

Joost – Real TV with the Internet’s social spin.

Paltalk – Serious Video Instant Messaging

Clickable – Online Advertising management

Tacoda – Targeted Marketing

CooperBricolage – Co-Creative, Collaborating, Shared Workspace with Killer Cuban Cuisine.

Angelsoft, LLC – CRM for Angel Investors

Rosenfeld Media – Agile Book Publishing head up by Information Architecture Expert, Lou Rosenfield

KickApps – Social Apps made easy.

Silicon Alley Insider – Reporting on all the Action

blip.tv – Helps to the budding videoblogger, podcaster, or Internet TV producer.

Vimeo – Video Sharing, for tight-knit groups OR the public at large.

CenterNetworks – News and information for Web 2.0ish entrepreneurs and start-ups.

The Hatchery – Bringing the spirit of innovation through collaboration to NYC.

swatchbox – Design tools to help contractors, interior decorators, retail stores, and homeowners build their projects. (spotlight project: DesignMyRoom.com)

Got somebody you want to ad? Go for it, contact me with a description.

On this list and want more info here? Send it in.

I goofed something up? Not the first time. Just let me know, and I’ll look into it.

I started a ma.gnolia group too.

Blue Flavor Announces iPhone Apps Service – Leaflets

chrispy — Mon, 16 Jul 2007 15:14:07 +0000

Wow. Here’s an interestingly bold move by Seattle-based mobile Web design firm, Blue Flavor. Brian Fling, CEO, announced a sweet collection of Web 2.0 favorites implemented for iPhone-iddy goodness.

Check the discussion Here’s the site: Blue Flavor Leaflets

Frankly, it’s a tight little app collection. Just as Fling noted that the iPhone has set the bar for what Mobile Design can be, Blue Flavor set a pretty good precedence for just what that said design could be like.