Will web developers start to develop for Safari first?

The launch of the iPhone will be a tipping point in web development, marking the day that web developers start taking the Safari browser seriously for developing web applications.

When building web sites it's pretty typical to develop for Firefox first then IE and leave the rest out, or maybe code for other browsers if there's extra time in the project (as if that ever happens). Firefox has a great set of development tools that IE6 was lacking, although IE7 is catching up. Apple's Safari hardly enters the equation with less than 5% marketshare and no good developer tools, but I think that is about to change. Safari is build atop Webkit which is the exact same foundation as the browser in . . . The Apple iPhone.

I believe Safari's marketshare is about to skyrocket when the iPhone is released. Unlike traditional smartphones the iPhone has a full browser on board that, in theory, should be able to run full AJAX powered web sites, secure web sites and just about anything you can throw at it. No one but Apple and Co. really know for sure since the iPhone is not out yet, but it is powered by a slimmed down version of Mac OS X and uses Webkit to drive the browser. This means that any developer who makes their sites work in Safari should have their sites then work on the iPhone with little to no code modification. That's powerful.

This is all great but what about developer tools? A developer can't develop for Safari first if there are no good development tools for them to troubleshoot with. Part of the reason that Firefox is so powerful when it comes to web development is the developer toolbar and DOM inspector. Safari is lacking a developer toolbar and the DOM inspector is not nearly as powerful as the one in Firefox and only available in the nightly Webkit downloads. What many may not realize is that Safari also has extensions, they are just done a bit differently than Firefox. There is no reason that a crafty developer could not create development tools equal to or better than those found in Firefox and make them available for all to use.

Don't get me wrong, there are some problems with Safari such as the inability to capture right clicks (I kid you not). Being that Webkit is open source maybe someone will fix those issues. Problems aside, with the release of the iPhone using Webkit users are going to want to have web sites work correctly on their mobile device. It won't happen right away but I think the web development community will start to take a much closer look at Webkit and begin to develop for Safari first, then Firefox and then gripe about IE. The missing elements here are the developer extension, which I believe will be forthcoming and the release of the iPhone itself.

The iPhone is Apple's trojan horse into not only the development community, but also to ensure that web sites work best on a Mac. If developers really want to make their sites run on the iPhone, and I think they will, they will need to purchase a Macintosh and an iPhone to make that happen (Safari is iPhone and Mac only). Why not just buy an iPhone and stick with Windows? Apple has closed the iPhone architecture and won't allow developers to write for it, so they will need a Mac to get the extensions they need for Safari development. A few developers will gripe and complain, but even more may enjoy the challenge start developing other apps for the Mac or possibly suggesting the platform to family and friends. The key to any computer manufacturers success is software, and with the iPhone Apple may be able to woo other developers to their side. This could be the best thing for the Macintosh platform since the introduction of the iMac.

1) That iPhone will be more than a toy for rich people living in a few select areas of the US.

2) That people will care more about having their web sites look good on iPhones than they ever did on previous WAP and 3G phones.

3) That they won't notice that iPhone uses one UI architecture, and all the other fashion-victim touch-screen phones use a different one, based on Flash and therefore presumably highly portable.

I will quit web development before I develop for Safari. Use IE or Firefox people! Seriously, I can only test it so much, two is enough! The real problem is dev tools and test time. Trying hard to follow standards doesn't seem to be 100% solution either.

I always develop for Firefox first. Then I use conditional comments for the various vector versions of IE. Then, if the client wants, I look at Safari. Although Safari is general a great browser in standards compliance like Firefox. Once in a while it gets something wrong. Actually, once in a while even Firefox renders something incorrectly. All browsers at some point have rendering bugs, that's the nature of software. The point is, if you develop to standards on Firefox, 99% of the time you should be fine for Safari. It's that 1% of the time that you'll need to address.

I see how quickly people forget that Nokia adopted webkit as well and uses it in its S60 based phones. There are already several "Safari" like browsers out there. I see much more support for Safari in the near future.

Safari usage will continue to grow, as will the drive to view web pages on a smart phone's browser. Add to that the potential of things like 'OSX-Mini', 'Safari-Mini', Dashboard widgets (these are the next gen web pages in many respects...), and voice recognition (which Apple hasn't mentioned for the iPhone, but if you think they're gonna make you use a keyboard rather than your voice on your iPhone, then you're not thinkin' like Steve...) and you've got plenty of compelling reasons to design for such devices. I firmly believe that if you're not planning for this transition to a mobile web, you'll end up left behind in a few years as a web designer.

As a web developer myself, my process has been (for a couple years now) to develop first for Safari, as it usually always looks fine in Firefox as well. With that part out of the way, it's usually pretty easy to tweak it for IE without affecting the initial design. Then again, I make a point to design simple, accessible sites with standards compliance and backwards compatibility always a priority. Designing first for Safari/Firefox simply helps keeps those goals in mind.

Not gonna deny that Firefox has better tools. Firebug alone is astoundingly good. But if you're after standards compliance, you'd be hard pressed to find a better browser to work against than the webkit nightlies. They've even implemented a number of the CSS3 functions, including broad support for shadows and columned text. Font rendering is more appealing, too. Safari needs better development tools, but it's where I prefer to start.

Safari has a DOM Tree Inspector that can be enabled using Tinker Tool. THere is an entire Safari Debug menu added to the right of the Help menu.

It includes:
DOM Tree
View Tree
Render Tree
Chach Debuging
Java Script
Changing User Agent
and much more...

Interesting thoughts. I do some Web site development and ONLY develop for Safari. If someone complains about something not working in IE or the others, I'll try to fix it. But I use Safari all the time, so the site has to look good for me first.

I realize this is heretical and self-limiting, but life is short, and I have no time for fools (Internet Explorer!).

In addition to Nokia smartphones, WebKit is also the rendering engine behind, guess what, the upcoming Adobe Apollo x-platform runtime. So Apple + Nokia + Adobe. Hmm.

Ummmm......who develops for Firefox first? I have not seen any statistics that point to Firefox having more than 10% of browser share. When I cruise through the stats on the 40 sites my business has developed, even the ones at Universities show less than 5% Firefox used.

Don't get me wrong - Firefox is a great browser, and I personally use it, but sites must still comply with IE primarily. It is the reality of the web.

"In addition to Nokia smartphones, WebKit is also the rendering engine behind, guess what, the upcoming Adobe Apollo x-platform runtime."

When i do design work, I use Firefox and Safari. Firefox seems to be far more forgiving, especially with nested tables. In my experience, Safari and IE have the same rendering issues. I once did some pages that looked fine in Firefox and I passed on checking them in Safari. A Windows buddy alerted me to table blowing out. I checked it in Safari, and it was indeed blown. I made the fix, IM'ed my friend and he reported the pages were displaying as intended.

Interesting philosophy indicated here, developing for specific browsers. Who would do such a thing. I develop all of my work to run withina standards compliant environment environment, actually a couple of standards back (not bleeding edge), and avoid all browser specific tricks and workarounds, as they only get in the way of users and unnecessarily complicated what should be a dirt-simple bit of workmanship: a web site.

Everything I develop runs great on any v4.0+ browser. What are you guys doing that requires bleeding edge tricks that are browser spcific, and non standards compliant, and are worth alienating even one user for your clients?

I develop for the standards FIRST, and specific browsers second. I had my fill of browser workarounds back in the late 90s, so I try to use good clean CSS layout and open source, cross platform Javascript libraries. Most of the time, all the site needs is a little tweaking for IE - I find Firefox and Safari tend to agree mostly on layout issues.

FWIW I'm a full time web developer, but I don't actually use Firefox that much. I don't like it's almost-but-not-quite Mac look and feel, and generally flakey appearance. OmniWeb is my current choice.

That's a typically arrogant stance joe. Why should I use Firefox (that is unstable) or IE (can't even use on the Mac even if I wanted to). Safari is fine. If you can't be bothered to do your job as a developer properly, then you shouldn't be one.

no good developer tools?
How about the Debug menu?
How about Drosera?
How about the Web inspector?

Although I develop *in* Safari, I can't say as I develop *for* Safari. I develop *for standards*. Since Safari has great standards compliance, it is a great place to start.

I believe that the Safari inspector is nightly Webkit only and does not come with the shipping version of Safari. I also don't believe it's as powerful as Firefox's DOM inspector either, but I may be incorrect.

Based on the feedback here I would say that maybe I'm too late to the party. It sounds like a fairly large number of people already develop for Safari first. I think the sample may be a bit too small though.

As for developing for web standards and browsers second... That's nice in theory, but each browser renders code differently, even standards based code. For bleeding edge code to really work, it has to be browser tested in each major platform and chances are it will be developed on one platform first and ported over. Every developer has their own workflow, but I've hardly ever seen one change their testing browser every 2 minutes :) I'm partial to sites like the property search on http://www.coloradohomestop.com To get that level of code it takes a great deal of work.

[...] there are some problems with Safari such as the inability to capture right clicks (I kid you not). This is news to me. I've been bothered by several sites that trap right-clicks to prevent access to the "View Source" contextual menu item. If you're experiencing an issue in capturing right clicks it would be great if you could report a bug so that it can be investigated by WebKit developers.

Now that's cool. We had just thought it was intentional. I will absolutely report a bug if it's not. We use right-clicks to trigger a different event on Google maps to make it easier to navigate. Left clicks are fine, but we don't even know what the mouse ID is for the middle or right buttons! We're not the only ones: http://www.unixpapa.com/js/mouse.html

Ok, so it turns out I was aware of that issue. As that bug report notes, it is the mousedown/mouseup events that WebKit is not sending. It's still possible to respond to right-clicks by listening for the contextmenu event.

Also, while desktop-class Safari bundled with the iPhone is a welcome departure from the pathetic browsing experience with most cell phones, it should be noted that Opera's device support now is quite impressive (with Opera Mini and Opera Mobile). And this is not WAP...it is flash, ajax, and ACID2.

It's interesting to read various shortsighted comments above developing for IE...in 2007, no less. I guess we have to be pragmatic if IE still has 80% share (and falling); but it doesn't mean anyone actually prefers using it, given the ~100 usability features (and growing) found in Opera9, Firefox and Safari, not found in IE.

Comments

1. Posted by: brad on March 12, 2007 10:36 AM:

I was under the impression that it was typical - or even necessary - to develop for standards-based browsers first (Firefox, Safari, et al) and then move on to the non-standard browsers (Internet Explorer).

But I suppose what you are implying is that the standards-based browsers work similarly enough that if it works in Firefox, developers don't really need to bother checking the other standards-based browsers, as they followed standards. Which is quite an endorsement, really.

Required fields marked with: *
Name*:

Email Address*:

URL:
Remember personal info?

Comments*:

HTML Tags you can use in your posts:
<b>Bold</b> = Bold
<i>Italicized</i> = Italicized
<a href="http://www.othersite.com">Link to Other Site</a> = Link to Other Site

Please keep comments on-topic. Contact authors or other commenters
directly for off-topic conversations.

Notify me of future comments via e-mail

Technology Evangelist Digest - Free Newsletter

Sign up for the free Technology Evangelist Digest to receive daily updates, editorials, and practical advice on emerging technology trends in hardware, software, webware, marketing and beyond.

Technology Evangelist Digest will keep you up to date on the technology trends that will help make you more productive and efficient both in business and your personal life.

Let's face it: If you made it to this line, you must have found something valuable on this page, right? Think about how cool it would be to have something free and interesting to read every day from Technology Evangelist by signing up today.

1. Fill in your email below,
2. Then click on the confirmation email you receive.
3. That's it. Your first Technology Evangelist Digest will arrive within 24 hours.