I’ll admit that I haven’t done a lot of actual development for mobile browsers (mostly I’ve done user experience design, visual design, and usability). But this week I ran into a “fun” little loading error with Mobile Safari on the iPhone, iPad, and iPod Touch.

Apparently, Mobile Safari doesn’t like images (PNG, GIF, and JPG) larger than 3 megapixels (3 * 1024 *1024). This means any background image you want to show up on Mobile Safari needs to be height * width ≤ 3145728. This is only valid for iOS 3.0 (for below 4.0 is it okay to refer to it as iOS?) and above. Less then 3.0 can only handle 2 * 1024 * 1024.

So my 7900 x 1000 image needs to slimmed down a lot.

The reason I ran into this issue is that the client has many IE6 users and needs to fit their needs. His design is very nice, but has a lot of rounded corners and drop shadows. Rather than write two versions of the site, I’ve been making really large background areas in the sprite to avoid any potential issues with IE6.

I think I got a little heavy handed with this and didn’t create empty header and footer divs in the markup for just the bottom and top images, which I’ll be doing to solve the problem now. I am not terribly comfortable with this. The purist in me hates mark-up that has no real bearing on the content. Another solution would probably have been code a CSS3 version with rounded corners and had fallbacks for IE and non CSS3 compatible browser versions.

Thanks to the following articles for helping me fully understanding this issue more and come up with an appropriate solution:

• Shrinking large background image bug in iPhone Safari
• Mobile Safari Background Image Scaling Quirk
• Creating Compatible Web Content

Internet Explorer 8 came out today. The office was all a buzz, most of the conversations revolved around its lack of CSS3 support and whether or not it should start in “Standards Mode”. While all of these are valid discussions, they fail to recognize that Microsoft finally did it right for once. They built a browser that supports all current standards.

I was in the CSS3 panel at SXSWi on Sunday afternoon, and there were 3 companies on the panel: Mozilla, Opera, and IE. When the IE guy came up to speak, the first thing he said was, “I am not here to talk about IE and CSS3.” He went on to explain how IE8 had passed every test out there and was fully compliant with CSS2.1. And you know what happened? People applauded. They were friggin elated. I was expecting people to boo this poor guy out of the room. His message was really that IE is in the present now, and because of that, we can all move into the future together.

I think Microsoft is tired of being the whipping boy of the internet and is ready to be open with the web developer community at large, not just those that use their products. One of the major factors in the IE’s inability to move forward was being able to support old products that Microsoft had made in 90s, and I think they finally realized the segment of society still using those products has really shrunk. Oh, and their constantly shrinking market share.

While Microsoft may be moving in the right direction, they haven’t forced everyone to upgrade yet. IE8 is only available via download direcly from the IE website. And for those of you reading this right now who can upgrade, please do so (here). Otherwise, you might be seeing this in your browser the next time you come back.

Okay, so I have finally gotten to this post. I guess I took the whole week off. I gotta be more disciplined. Anyway…

One thing that angered me about Safari 3.1 was its @font-face support. This allows developers to load fonts that may not already be on someone’s computer and use them anywhere in the site. This could be a totally awesome tool, however, I thought, “Why the hell is Safari trying to become IE?” Read the rest of this entry »

This is hands down the issue that will covert me to using Safari. I live and die by Firebug at work. It has so many applications, the most amazing of which is the ability to edit styles and see live updates without switching between programs. Plus you get to see all your CSS properties right next to each other, so if you over somehow over-ruling a style you can see how best to go about fixing your problem. Plus you got the DOM right there to help your JavaScript. Read the rest of this entry »

Lately, I am becoming more and more a fan of Safari.

The Past

One of the reasons I never really used it in the past was because it was just a browser, and, as a developer, while testing in it was necessary, I would never actually use it while I was setting things up. Here are some more reasons I never used it:

• I support Firefox for everything they have done to kill IE
• Camino does the same stuff (and is getting better at it all the time)
• Only one theme/skin
• I really enjoy live bookmarks instead of RSS aggregators
• Sometimes Javascript can be a pain (ever use tinyMCE?)
• Web Developer toolbar
• Firebug

The Present

But now that is changing.

• Its fast
• Safari now supports RSS feeds in the browser, still no live bookmarks, but its a start.
• I’ve fallen in love with Aqua, and I don’t mind the look of Safari in Leopard (but I think some of the buttons are a little large and awkward).
• Firefox is becoming a slow beast that is killing my browsing experience, but I’m really excited about 3.0. I have a whole other post brewing about what went wrong with Firefox.
• Camino is still there, but for some reason, it just not exciting anymore.
• Last but certainly not least… Safari has a Develop Menu in the Toolbar!!!!! Its not as advanced as Firebug (yet) but it gives an amazing amount of depth into how Safari renders everything, which is useful (and awesome!)

Stay tuned for more on the Develop Menu in Part 2…