Flogging English » safari

Designing mobile websites for the iPhone

retsoced — Sat, 24 Oct 2009 14:32:27 +0000

Even before I finally had an iPhone magically bestowed upon me (thanks to the fam!), I had a HP iPaq mobile player – and have been fascinated with designing and building sites for the mobile web. I’ve been designing and developing websites for more than a decade now, and while I wouldn’t say it’s old hat just yet, I do get into a routine often enough that it gets to be “been there, done that”, and can get a little tedious.

Mobile browsers have their own set of problems, and if you thought you had it rough with IE, Opera, Firefox, and Safari, then you’ve got another think coming my friend. There are so many variables with mobile devices that it is a real challenge to get it right, and it would be damned near impossible to do it across all devices. That being said, if you have a solid understanding of standards oriented design, then you have an excellent start.

Before you start building, the first thing you should do is examine your site analytics to determine who is on your site, what content they are accessing, and with what mobile OS and browsers. If 98% of your site’s visitors are using Safari on the iPhone/iPod, then why spend a lot of time getting it to look perfect on another device or devices? I’m not saying ignoring those other devices, but they would not be the primary viewer, so the bulk of the time should be spent developing for the primary target. Analyzing the site’s statistics will also tell you what content to focus on for the mobile site. Since bandwidth, screen resolution and speed are important on mobile devices, you should trim the fat of your site, and not delivering everything but the kitchen sink; that’s what your regular site is built for.

Once you have determined what platform(s) you are developing for, then you can start in on the design and build. For the sake of argument, I am going to focus on the iPhone. Keeping in mind that the screen size of the iPhone is 320 x 480 (pixel size), work through the design and make choices based on those dimensions. Be sure to plan for large buttons too, I can’t tell you how much of a pain it is to hit some of the little text buttons on some sites, and even some iPhone apps. Take for instance this screen shot of the Facebook app, and the little text link you have to hit to view your post when someone comments on it from the update screen – that’s something you want to avoid. If you are in need of some inspiration check out Smashing Magazine, they have a truck-load of great information compiled. In specific I recommend these two articles; Mobile Web Design Trends for 2009 and Showcase of Designs Optimized for iPhone. Now is also the time to decide if you want to support both landscape and portrait modes in your layout.

Let’s assume you have your layout planned out now, and are ready to start coding.The first thing you should code and implement is a way to determine if your visitor is on a desktop or mobile device, and I have some code that works quite well. In a post from earlier this month, I showed off some code I have been working for mobile device detection in .net. Of course not everyone is a slave to Microsoft, and I really don’t use much of it outside of my day job, so having something for a PHP solution would be handy as well. I found some useful PHP and JavaScript code earlier this year as well.

Of course, there are also specific elements you need to add to the head of the page(s) to ensure that your site fits properly within the viewport of the iPhone, otherwise your site will scale by default in Safari, and not look or work as intended. The first meta tag viewport, does just that and ensure a proper fit, while the second simply includes an image for bookmarking.


iPhone site | hooray!

This is the bare minimum, mind you, and there is more that you can code in page if you want deal with orientation as well. Here’s another great post from Engage Interactive on building a website for the iPhone. The majority of the site should just be well written, valid code and you will be able to support the iPhone and beyond.

For you WordPress folks out there, WPTouch. It’s a great plugin that transforms your blog into an iPhone application styled site. I’ve had it running on Flogging English for a few weeks now, and while there are some plugin incompatibilities, it handles that well and I haven’t had any issues with WPTouch not working.

IE 8 Web Standards Support – exceptional fail

retsoced — Mon, 22 Jun 2009 03:21:05 +0000

IE 8 has been a huge step forward for Microsoft in their browser development, and also a step back. But this latest bit of marketing drivel has to make you stop and go “hmmmm.”

So IE now supports web standards eh? Does that mean it passes the Acid 3 test? Surely it must, I mean it has a check mark next to the Web Standards bit. Ummm. No. Not so much.

I think the guys on the marketing team for IE 8 need to stop drinking the bujiboo juice and figure out that they still suck in this department. Check out the results for the Acid 3 test. Not even close.

Now, to be fair Opera only hit an 85/100, and Firefox came in at 72/100 but both Safari (4 beta) and Chrome nailed it with 100/100. I’ve read that Opera should be at 100/100, but even the latest 9.6 download doesn’t get any higher for me.

Developers don’t really need another test to tell them that IE is not all that and a bag of chips, but the average web user doesn’t know any better. That’s the real problem; 67% of all of my visitors still use some version of IE, and that means I still have to code for 3 versions of it now. For all my work, I could care less, if you want to use IE 6 you deserve to a get crappy web display – but from a business sense, IE 6 really can’t be ignored. Now there’s IE 7, IE 8, and even IE 7 compatibility mode (which differs from the real IE 7) in IE 8. Great one there Billy.

At least they’re on board with a new browser test application for Expression Web called SuperPreview, which, while still in beta, makes cross-version testing in IE moderately tolerable. There’s an excellent write-up on the Expression Web team Blog, where there is also a download link.

Now if only we could get the IE team to follow along and play nice….

Mobile device support through JavaScript and CSS

retsoced — Thu, 18 Jun 2009 11:01:54 +0000

If you are in the business of designing, building or maintaining a website these days, you should also be concerned with making sure the maximum number of people are able to view the content on those sites. Meaning that if you aren’t doing something to support mobile web browsing than you are a bit behind the curve. It’s really an accessibility issue, not too far off from the ideas implemented in making websites accessible to people with disabilities. We’re just talking device accessibility, so let’s take a look at a couple of really simple ways to get this done.

JavaScript

If you go the JavaScript route, I found this little gem some time ago, that covers both the client and server side detection using JavaScript and PHP. Here is an example page of what the output looks like if your detection should fail. If you are on a mobile device, the page redirects you to the root of FloggingEnglish.com. I know some older and low-end devices may not support JavaScript, but since it’s pretty freakin’ ubiquitous these days, so I think it’s pretty safe. There are other JavaScript solutions out there, but this is one is clean, simple and easy to update.

This would be a good solution to incorporate into a Flash site as well, especially since the iPhone doesn’t support Flash yet. I know the iPhone is not the most widely used device, but that doesn’t mean you shouldn’t consider that too. With the output from the example you could place special tags or content based on the type of device, offer alternative viewing solutions for your visitors, or simply redirect to a CSS based solution for faster viewing.

CSS

Working a well written CSS style layout into your site is always an excellent option whether you’re primarily concerned about mobile devices or not, but with CSS 3 it’s becoming easier for developers to target mobile devices accurately and reliably. Media Queries are relative newcomers to the CSS scene and they are becoming more supported and in the case of Apple, the way they recommend you target the iPhone. They are currently Supported by all main stream browsers that are standards compliant, and supposedly IE is even on board with this one, but Opera, Safari and Firefox all support media queries.

So what is it then?

Yup. That’s it. The above code would target any mobile device where the viewport measures 320px or wider, like the iPhone for example. Granted that’s a simplistic example, but you get the idea. Dean over at Bushido Designs posted a great article Bulletproof Mobile device detection. In fact that example doesn’t really convey the strengths of media queries and how flexible this method really is. If you take a look at the W3C recommendation, you will see the following features:

width
height
device-width
device-height
orientation
aspect ratio
device-aspect-ratio
color
color-index
monchrome
resolution
scan
grid

So you can begin to see the strengths of this method and how it could be the key to blissful mobile CSS support. Using the color feature for example would allow you target a specific stylesheet for devices capable of rendering in color, while using aspect-ration you could target 16:9 devices as well, like the PSP (480 x 272).

Of course none of this would be an issue if Apple and Opera hadn’t decided to ignore the handheld media type with their mobile browsers. With the two biggest mobile browsers off the tabel, that pretty much renders the use of handheld useless. A move that is decidedly Microsoft-esque.

The over-reactionary web – iTunes update hysterics

retsoced — Mon, 24 Mar 2008 01:26:55 +0000

The one thing I have come to loath about a (seemingly) good portion of folks who use the web, is the basic principal that every opinion should be taken as fact, any opposing view is a personal assault upon whomever authored or has read the original opinion, and everything is an over-reaction. Just look at any of the community driven news sites, every new product is a something killer, and just about any time [insert your favorite hated company here] releases a new product, service or changes a policy it’s the end of the world and an inexcusable injustice to the world community.

The latest is an assault on Apple for adding Safari to the iTunes update application. In efforts to get more folks to try and hopefully like the new Windows version of Safari, Apple has decided to add it to the iTunes updater application, and here’s the real kicker; they selected it for you by default! HOW DARE THEY! They are now acting like Microsoft, this shady underhanded manipulation of the trust of their loyal user base! How dare they make me, deselect a checkbox for a browser I do not want! Well, I never…..

I hope you’re catching my sarcasm here, because I’m laying it on pretty thick. This isn’t any different than Microsoft adding Live Writer, Family Safety, or Spaces to the last Messenger Update I downloaded. When I first started reading headlines about it, I thought for a minute that they were just installing by default in the background without permission – see; now that would be a bad decision. But instead what I found was that they were simply making people to commit to a positive opt out of the download. This is just one small example among hundreds – they’re easy to find.

This post on John’s Blog probably one of the most level-headed posts about it, and I would have to say I agree with what he finally concludes – but ultimately I don’t care enough to rant or rave about it. The real biting issue for me is how every post, article, or discussion has to always degrade to how it sucks, or how someone’s an idiot (or worse) with the consensus finally ending in a string of comments that you wouldn’t really want your kids to read.

An intelligent argument doesn’t always have to degrade into a WWE Cage Match.