Do the Collapse

“Pretty soon you’ll be using your iPhone”, said the attorney in the elevator just five minutes ago. He’d glanced at me checking things on my (now terribly outdated) Blackberry Pearl. Everyone’s talking about the iPhone. No, _everyone_ is talking about it. Just goes to show how big an announcement it really was.

There are so many thoughts about this thing, but rather than add to the noise, here’s one I hadn’t yet seen mentioned: with a _reliable_ browser on the iPhone (Safari) and all that it brings in terms of standards support, JS, DOM, etc., will we start looking closer at resolution dependent layouts (Clagnut: Variable fixed width layout) (or other methods) for sites that _would or could_ function as well as their larger screen counterparts?

We’re essentially talking about a fully-browsable web and everything that comes along with that in Safari. Just on a smaller screen. I realize that already exists to a certain extent with Webkit on the Nokia, Opera, and probably others, but the typical screen dimensions on a mobile phone are tiny. Seeing Steve Jobs turn the device and browse “widescreen” was eye-opening. That extra horizontal space could really increase the readability of non-mobile-specific sites as is.

The vulcan-death-pinch-squeezy thing for zooming looks great, mind you. Fluid layout for screens this small isn’t optimal, while multiple columns could just get too narrow (in the absence of min-width) — but I could see where leveraging the browser to adjust layout based on screen resolution could make things interesting in certain situations. And it’ll of course be fun to find out what this all means.

Free vintage SimpleBits sticker to the first person who names (without Googling) the band for which the title of this post is named after.

31 Comments

  1. who knew you were a gbv fan? not me.

  2. And the sticker is won :)
    @Joshua, congrats. Send me your mailing address and the sticker will make its way from one Guided by Voices fan to another.

  3. Scott says:

    EXACTLY! That was the first thing I thought of when I saw the demo on Apple.com. After using something like the iPhone who will want to use a WAP Browser again? The tap and zoom, plus scroll looked incredible. No more scrolling around with a wheel or buttons to try and find something on my BlackBerry 8700. Keep a close eye on eBay for the all the smartphones about to be put up for sale.

  4. I don’t know if Safari-on-the-iPhone will use the handheld media type stylesheet if provided but Webkit-on-Nokia certainly doesn’t.
    This is one thing that the mobile version of Opera has been doing for some years now.

  5. Cathal says:

    We already have small screen browsing to some extent with the Sony PSP. I’m not sure how the screen size compares to the new Apple iPhone but it is a fully functional browser. This site renders pretty well on it I might add.

  6. Nate K says:

    I have been discussing this same issue at Cameron Moll’s site as well. I think it will shift the mobile web slightly, and it makes me wonder: will we be able to control a handheld media type? Will we be able to design for mobile devices?
    I already know that the ‘handheld’ media type with CSS is not a catch all solution with rather poor support. However, if the phones will just render the actual site instead of a WAP version – can we really design for the mobile web?
    Honestly, I don’t like the thought of this. Even if I did use my phone for the web, I would use it for specific tasks – not to browse or really ‘work’ on the web. Therefore, I wouldn’t want the distractions of unnecessary images/media/etc in my way. How will we be able to filter this out for mobile devices?
    I would want something that is quick to load, and not need to load all images/page content (especially if you are paying to download all of that). Just as we design for print and remove certain elements, it would be nice to do the same for mobile devices.
    Again, I ask the question – what about support for plugins and javascript? Does the mobile web really need to be a shrinked version of the larger web?

  7. @Thijs: It’d sure be interesting to know the answer to that. I hope so.
    @Cathal: now that’s interesting. I have yet to see a PSP browsing the web, but I’d imagine the screen size is more akin to the iPhone than most other phones.

  8. Assuming that the basic zoom-out view is 50-percent original size and (in wide format) the iPhone screen is 480px wide, would this make the optimum fixed-width layout for the web 960px or less?
    That would seem to make tons of sense, and if it turns out those numbers are more or less correct, it could make for some quick and easy math on fixed-width layouts.

  9. That’s a very interesting view on the iPhone, Dan. I’m still a bit shocked with all that amazing functionality so I haven’t really stopped to think how this could change things. If the iPhone turns out to be at least half sucessful as the iPod is, we could see a great change in how developers plan their websites for the small screens. It’s important to keep in mind that OS X has a PDF-based rendering engine (of which Safari/WebKit make full use) so other PDAs and “smartphones” might not have the same ease to re-create that browsing functionality. Browsing on the iPhone must really be incredible.

  10. Mike Rundle says:

    I’ve always thought that designing for handheld media was a lost cause, because at some point in the not-too-distant future, devices similar to the iPhone would come out with big, high res screens. I’ve thought that for years, and now that a device like the iPhone has come out (it’s called the iPhone!) it’s making handheld media types obsolete. Screens will continue to get better, resolution higher, colors crisper, wireless faster, and designing for the lo-fi equivalent is simply making your own life more complicated for when nobody has tiny mobile screens anymore.

  11. James says:

    Actually, I’d rather read RSS feeds on something like the iPhone instead of browsing actual pages. Is that something that’s being looked at/worked on?

  12. @Josh: interesting! I guess we’ll have to see what the scrollbar + chrome may equal as well. But that could be pretty convenient. And that simple math is what I was getting at. Adjusting a simple two or three column layout may be pretty simple. Not across the board of course for every site — but in general it could be relatively painless (and helpful in the case of the iPhone).
    @Mike: I agree with you for the most part there. Currently, I browse using the Blackberry browser with CSS turned off. This makes things bearable for the most part. But I think that having wide support for the handheld media type would still be really handy for targeting adjustments and optimizations for these smaller screens. Not 100% supported everywhere currently, but if the iPhone supports it, perhaps that’d be a big push.
    I’ve much to learn about the mobile web though. Help, Cameron :)

  13. Sam Hasler says:

    The scrollbars on the iPhone don’t take up any space. If you look carefully at the Safari QuickTour you’ll notice that they appear translucently over the page only during scrolling. It’s most obvious when looking at fandango.

  14. Rich Reuter says:

    Damn! Didn’t get to the post in time to answer. Hailing from Dayton, OH, it’s my civic duty to love Guided By Voices.
    I wonder if the advent of full fledged browsers for mobile devices means the end of WAP-based functionality and layouts. It would be much nicer as an application developer if I don’t need different pages for my sites. I think it will be interesting to see if the iPhone takes off to the extent that the iPod has what the effect will be on mobile devices – if other smart phones will try to follow suit and provide a more complete browser.
    @James: I’ve heard that the iPhone will have the Cocoa framework on it. If so, I’m sure that will be one of the first widgets or applications that somebody produces.
    I like reading feeds on my Blackberry. The portability is great, but I would love to have the nicer display that the iPhone will provide.

  15. Doug March says:

    Who is the electronic newspaper boy?
    Cameron or Dan?

  16. zzap says:

    Do the Collapse? Reminded me of ‘Doin’ the TWiT’ from TWiT.tv podcast, made by Ashley Witt. :P

  17. Shawn Oster says:

    Slightly off topic but not really… as a software developer my first thought was “how successful is a smartphone going to be that doesn’t allow third-party applications?” If it’s not in the box then you’re going to have to wait until Apple blesses you with an update.
    Web-based apps though could get a huge boost if the browser is fully JavaScript-enabled. I imagine small form-factor versions of basecamp and corkd and campfire.
    I’m also picturing a lot of iPhone web-browser simulators for web developers as well so you can preview pages and make sure they look good on an iPhone.
    Rich Reuter: I read that the iPhone OS, while a version of OS X, would *not* allow any third-party applications so it can have all the Cocoa you want, doesn’t mean anyone besides Apple/AT&T is going to develop applications for it. Again, this is where things like newsgator.com’s feed reader come to the rescue for RSS, though I’m sure they’ll have an optimized version of Google Reader that’s the prefered option.

  18. If you like to see the web on a small high resolution display, I’d suggest playing with a Nokia 770 or N800. It has a beautiful 4.13″ 800 × 480 display. That’s 225 dpi by the way.

  19. What css media tag do you guys think it will prefer? Sure it can handle regular layouts with that fancy zoom function, but if it’s presented with a ‘mobile’ style sheet, will it use that first?
    A lot to think about with this baby. But I still want one bad.

  20. gb says:

    Less iPhone chatter… more GBV talk. :)
    (and I still like my Pearl)

  21. Ian Adams says:

    @James: I’ve actually been wondering myself whether or not Safari is going to have any RSS capability, like it does on the desktop. I have to agree with you that RSS would fit the iPhone very well.

  22. pb says:

    While I love all things Apple and would love to have an iPhone, the fact of the matters are that Cingular has no ADA compliant way for a deaf (post-lingually in my case) person to contact them. I tried. Managed to guess and error code that allowed me to have a live (browser) chat with a clueless rep who had difficulty with one simple question.
    If they make this easy for the Deaf, the iPhone will replace millions of Sidekicks.

  23. I, as well, thought GBV when I first saw this in the feedreader. Alas, I was too late.
    But then again, I’m already a proud sticker owner. ;)
    Dan, did I see you say somewhere that you’re a Spoon fan? More the early Matador? Later stuff?
    Back to iPhone… part of me was thinking “oh the possibilities” for third party developers. Another part of me is thinking… holy web apps since it has a full fledged Safari. Granted, Safari support is not top notch for web apps, but maybe this will help that.
    Motoring away…

  24. It’ll be interesting to see how existing variable width scripts handle the iPhone zoom/screen rotation. Will it continually adjust in order to fit the decreasing screen resolution?

  25. Angelo says:

    I’ve been using the PSP as a browser for years. Only big downside is, it’s only a wifi device. I’m assuming the iPhone will have net access anywhere it has cell service. (could be wrong, hope i’m not.)

  26. Bruno says:

    I think I need to start using min-width more, with the rise of devices like these, it really isn’t practical to use what precious screen space you do have with three one-word columns.

  27. I’ve been using the Palm Blazer browser in optimized mode for years. It is HTML not WAP and supports the handheld media type as an addition to the screen media type.
    I find that I actually do around 90 percent of my blog reading with the Blazer browser. It easier for me to read, comprehend and retain. I’m not sure how a wider screen will make this any better.

  28. It’s really a shame that this is only going to be available through Cingular. I’ve got no Cingular coverage out where I’m at (East-central Ohio). Looks like I will be waiting for this to be available from another carrier in my area first. Let me know how it is … ::sniffles off into a corner::

  29. No doubt! I am in Canada and it could be 2 years.. Crazy

  30. Chris Barnett says:

    Just in case anyone’s missed it, Marc van den Dobbelsteen’s recent article on A List Apart on his Adaptive Layout Technique is definitely worth a read for tips on how to design for and deal with different screen resolutions.
    I’ve seen some comments on the PSP but the Nintendo DS can also run the Opera browser, although, again, it’s only a Wi-Fi device and has a screen width of only 256 px compared with the PSP and iPhone’s 480 px.

  31. Anonymous says:

    Hello