iPhone Stylesheet for MetaFilter

November 5, 2009 3:18 PM

MetaFilter has a new look on iPhones.

Today we started serving up a new stylesheet for iPhones. It's based on the print stylesheet, and tweaked for the iPhone. The pages themselves have a few extra linebreaks here and there, and there's a new menu for navigation at the bottom of the page. Here's what MeFi looks like in the default theme (front, thread, menu) and the plain text theme (front, thread, menu).

We've been testing it behind the scenes for a couple months, and we've found it's quite a bit more readable than the standard site. But if you're on the iPhone and want to go back to the standard site, click the "Switch to Standard Site" link at the bottom of any page. Not everything is available via the iPhone site, so there might be times you need to switch to standard for some features. There's no link to add a new post, for example.

For background here's a brief history of MetaFilter on the iPhone. In January, 2008 we launched mobile.metafilter.com as an experiment. It looked sort of like a native iPhone App, but it was for reading only. At some point we decided to discontinue development of a separate space for the iPhone, and tweak the main site to make it more iPhone-friendly instead. (Most recently discussed here.) This new site style is a continuation of that idea. Instead of duplicating features at a separate subdomain, we're trying to make reading and commenting at the main sites more iPhone-friendly.

Right now we're focusing on the iPhone, but once the bugs are worked out we'll start playing with turning the stylesheet on for other devices.

Oh, I should also note that if you have opted-out of the November Experiment in your web browser, you'll also need to set that cookie in your iPhone by saving your preferences on the iPhone. To do that, scroll to the bottom menu, click Preferences, make sure the box is checked next to "Show comment favorite counts?", and click Save. That will set the opt-out cookie for Mobile Safari.

If you spot problems with the new iPhone stylesheet, please let us know here.

posted by pb to Feature Requests at 3:18 PM (172 comments total)

I think it looks great, but any chance you could add a link at the top of the page to the bottom of the page? I feel like I'm trying to give my phone a happy ending scrolling to the navigation menu.
posted by Riki tiki at 3:24 PM on November 5, 2009 [17 favorites]

It's awesome. Having it sized perfectly both ways is great, no more tap-tapping, pinching and flicking to get the content oriented correctly.
The only weirdness is having to scroll scroll scroll down from the Front page to get to the links to the other parts of the site. Nice job, though.
posted by chococat at 3:26 PM on November 5, 2009

Oh come on, turn it on for Android too at least. Please? I have way more pixels than an iPhone. And I could always test all the support screen resolution for Android in the emulator in a few minutes.
posted by GuyZero at 3:26 PM on November 5, 2009 [3 favorites]

This is great! Thanks! Although yeah, it's kind of weird having to scroll all the way down to the navigation
posted by brundlefly at 3:30 PM on November 5, 2009

Sure, we can add a link to the bottom menu at the top somewhere. You can always double-tap the top of Mobile Safari to get back to the top, but yeah there's no way to jump down.

Sorry, GuyZero, we're going to tackle this one step at a time. If you can change your Android browser User-Agent to iPhone, you'll get it. But I'd like to get it working well for iPhones before we start tweaking for other devices.
posted by pb (staff) at 3:31 PM on November 5, 2009

Good stuff, thanks pb.
posted by dhammond at 3:33 PM on November 5, 2009

Oh yeah... where are my manners?

Thanks, pb!
posted by Riki tiki at 3:35 PM on November 5, 2009

Slick, thank you!
posted by jamaro at 3:36 PM on November 5, 2009

This is great! Many thanks, pb!

Riki tiki -- if you are on an iPhone, you can tap the bar at the top of Safari to quick-scroll to the top of the page.
posted by JohnFredra at 3:36 PM on November 5, 2009

Could something be done about the ads? They're in this awkward place where they waste a bunch of space but are completely impossible to actually read at the default viewport and text size. Might as well disable them or find something that's legible.
posted by floam at 3:38 PM on November 5, 2009

Or I could log in...
posted by floam at 3:39 PM on November 5, 2009 [2 favorites]

Yeah, I know about the scroll-to-the-top thing (and oh what a wonderful day it was when I discovered it). Would be nice if Safari used some of the ample space on the bottom toolbar to hide a "scroll to the end" button, but in the meantime the shortcut at the top of the page would be a big help.
posted by Riki tiki at 3:39 PM on November 5, 2009

floam, if you log in the ads will disappear.
posted by pb (staff) at 3:40 PM on November 5, 2009

Ooh, very nice.

But because we're in MetaTalk, I need to follow that up with some loud reactionary grumbling: THIS IS A COMPLETE OUTRAGE THAT DISRUPTS SITE USABILITY, SLAUGHTERS WHALES FOR "RESEARCH PURPOSES" AND BLEACHES MY FUCKING CLOTHES
posted by killdevil at 3:41 PM on November 5, 2009 [9 favorites]

Also, the top-ads actually cause the viewport to be too-zoomed out to start with, making tap-to-zoom still necessary if you want to waste as little space as possible.

Looks great in your screenshots, but not-logged-in, notice all that blank area on the right. There's even more if you switch to landscape. Is there a fixed width somewhere?
posted by floam at 3:45 PM on November 5, 2009

Thank you, this is much nicer.
posted by Blazecock Pileon at 3:45 PM on November 5, 2009

Err, no, there's not actually more landscape.
posted by floam at 3:46 PM on November 5, 2009

Well it looks good on Steel on Android (which can fake the UA) but I agree the bottom nav is sorta far away. A minor issue as it's otherwise much better.
posted by GuyZero at 3:51 PM on November 5, 2009

Also, gah, can't type huge comments on that tiny keyboard, but there's a bunch of empty space to the right both logged out and logged in. Not sure if it's an android-specific issue though so feel free to worry about actual iphones for the moment.
posted by GuyZero at 3:53 PM on November 5, 2009

Ooh this is great. Thank you!
posted by rhapsodie at 3:53 PM on November 5, 2009

Very nice! Direct links to specific comments finally work too! Thanks!!
posted by yellowbinder at 3:54 PM on November 5, 2009

ok, added a "skip to menu" link in the upper-right corner of every page for iPhones.
posted by pb (staff) at 3:55 PM on November 5, 2009 [2 favorites]

Wonderful job!

Now the only barrier to staying glued to MeFi AT ALL TIMES has been lifted!

*And a very soft tapping and finger dragging noise was heard throughout the land!*
posted by greekphilosophy at 3:55 PM on November 5, 2009

Awesome, thank you!! I've been waiting for this.
posted by pravit at 3:56 PM on November 5, 2009

LOVING IT - thank you SO much!
posted by tristeza at 3:59 PM on November 5, 2009

Nthing that putting the navigation at the bottom is very confusing. It might help to avoid future grousing If you posted the rationale behind that rather odd style change.

Other than that, good show. The regular site was hard to navigate on my iPhone.
posted by Antidisestablishmentarianist at 3:59 PM on November 5, 2009

Gah! Now that I actually look at the menu it makes perfect sense.

The buttons are bog enough to tap and thus take up a LOT of real estate. The link is the perfect solution!

Thanks again.
posted by Antidisestablishmentarianist at 4:02 PM on November 5, 2009

And as long as I'm nagging about every single thing that could possibly ever be better:

You should redo the top-left logo so that it's at the actual size the iPhone ends up scaling it to somehow, so that the "community weblog" isn't so blury. Not sure how you'd get it to actually have that phenomenon in both landscape and portrait, without some tricks or just choosing one or the other. svg?

Also, thanks, this is way more handy.
posted by floam at 4:02 PM on November 5, 2009

pb: "You can always double-tap the top of Mobile Safari to get back to the top"

Well... yeah... of course I knew that...

*coughs*
*shuffles feet*
posted by brundlefly at 4:02 PM on November 5, 2009 [2 favorites]

The menu is at the bottom because this wall of menu isn't very welcoming. With this style you can start reading the site without scrolling past a large menu.
posted by pb (staff) at 4:02 PM on November 5, 2009

on non-preview: oh. yeah, ok.
posted by pb (staff) at 4:04 PM on November 5, 2009

I spoofed the iPhone agent on the Palm Pre. Looks perfect (as it should, as they both use Webkit and have the same resolution). The 'skip to menu' link doesn't work, though.
posted by zsazsa at 4:07 PM on November 5, 2009

This is the prettiest pony I have seen in a long time, and I didn't even know I'd asked for it! Thank you!
posted by rtha at 4:12 PM on November 5, 2009

Ohhh, that IS nice. Thanks!
posted by gemmy at 4:21 PM on November 5, 2009

Lovely, thanks.
posted by ottereroticist at 4:26 PM on November 5, 2009

Awesome! Thanks.
posted by chinston at 4:30 PM on November 5, 2009

pb: You can always double-tap the top of Mobile Safari to get back to the top

A single tap will do.
posted by SAC at 4:32 PM on November 5, 2009

You can always double-tap the top of Mobile Safari to get back to the top

holy shit
posted by brain_drain at 4:32 PM on November 5, 2009 [5 favorites]

Thanks! My bathroom MeFi-ing can continue in a better to use layout.
posted by fijiwriter at 4:34 PM on November 5, 2009

*iFaves*
posted by chinston at 4:34 PM on November 5, 2009

omg. daddy like.
posted by special-k at 4:40 PM on November 5, 2009

This looks really nice, thanks.
posted by advil at 4:46 PM on November 5, 2009

Love it, thanks PB.
posted by doctor_negative at 4:57 PM on November 5, 2009

Right now we're focusing on the iPhone, but once the bugs are worked out we'll start playing with turning the stylesheet on for other devices.

Seems to work great on my Nokia N810. Errr...oh wait, mobile.metafilter.com works great, but I guess I'm not getting the stylesheet, which is for iPhone. I'm behind the times!
posted by DU at 4:58 PM on November 5, 2009

Is this something I'd have to

oh never mind that joke is stupid anyway
posted by dersins at 5:00 PM on November 5, 2009

This is really awesome. I know there's like a thousand other peope who are also using it but it feels like a pony just for me, which is a tremendous feeling, even if it's false. Thanks.
posted by MCMikeNamara at 5:19 PM on November 5, 2009

Looks terrific, pb, thank you so much!

If I had to find something to grouse about -- and you knew I would at least try ;) -- I'd go with the fact that the width isn't iPhone-optimized on Mefi Mail message pages, for me at least. It's fine on the inbox listing, but then again there the username and timestamp type is too small to read, or else barely legible.

But in all earnestness, thank you ever so much for the good work.
posted by goodnewsfortheinsane at 5:28 PM on November 5, 2009

This is awesome, and I truly appreciate it.

Minor request, though. One thing I love about the iPhone is true web browsing. This is especially useful for MetaFilter because it's faster to scroll to the the bottom of a long thread, should I need to do that. For this "app", is it possible to add pages for comments (1-50, 51-100, etc)? It'd make it a lot easier to scroll through a thread, while being able to enjoy this new look.

Really great.
posted by SeizeTheDay at 5:30 PM on November 5, 2009

Wow, this is great. Thanks much.
posted by fixedgear at 5:30 PM on November 5, 2009

snaps to pb!
posted by blue_beetle at 5:44 PM on November 5, 2009

This is awesome! I'm so used to opening a thread, then automatically double-tapping to zoom to the width of the comments.
posted by evilcolonel at 5:48 PM on November 5, 2009

Very nice pb. Vast improvement. Thanks.
posted by eyeballkid at 5:52 PM on November 5, 2009

killdevil - at least it didn't bleach your anus...

(also, I love this... waiting for a tram, "I wonder if there's anything interesting going on at MeTa", "wow, that looks nice", and here's the announcement... all good...)
posted by russm at 5:58 PM on November 5, 2009

Thanks for your hard work pb. This really is great.

Maybe size the text entry field smaller?
posted by jefficator at 6:09 PM on November 5, 2009

ok, added a "skip to menu" link in the upper-right corner of every page for iPhones.

I am in your debt. Please come to Austin so that I can buy you a drink.
posted by popechunk at 6:13 PM on November 5, 2009

Okay, this is excellent. Would it be possible to add 'Popular Favorites' links to the menus for the various sub-sites?
posted by the duck by the oboe at 6:31 PM on November 5, 2009

Bug report, maybe: when I'm in Mefimail inbox and hit the menu link, it takes me to the bottom of the page...where there is no menu.
posted by rtha at 6:31 PM on November 5, 2009

I spoofed the iPhone agent on the Palm Pre. Looks perfect (as it should, as they both use Webkit and have the same resolution). The 'skip to menu' link doesn't work, though.

Could you provide steps or links to how to accomplish this on the Palm Pre?
posted by odinsdream at 6:34 PM on November 5, 2009

Spectacular. Thanks, pb!
posted by magicbus at 6:43 PM on November 5, 2009

Perfect.
posted by empath at 6:49 PM on November 5, 2009

Very nice.

*throws laptop out the window*
posted by clearly at 6:52 PM on November 5, 2009

ok, added a "skip to menu" link in the upper-right corner of every page for iPhones.

I don't like this phrase. Can you change it to "has menu"?
posted by clearly at 6:53 PM on November 5, 2009 [4 favorites]

Thank you - it's perfect!!
posted by TochterAusElysium at 6:57 PM on November 5, 2009

Awesome. Many thanks!
posted by fourcheesemac at 7:02 PM on November 5, 2009

Great!

But for me when I click on skip to menu it opens a new window and then skips to the menu on that page.
posted by birdherder at 7:02 PM on November 5, 2009

Thank you, thank you, thank you, thank you.
posted by R. Mutt at 7:02 PM on November 5, 2009

Checked it out earlier—it rules. Thanks!
posted by defenestration at 7:07 PM on November 5, 2009

Metafilter: bog enough to tap
posted by Riki tiki at 7:16 PM on November 5, 2009

This is excellent! pb gets a gold star!
posted by JDHarper at 7:33 PM on November 5, 2009

I like this pony very much. It is magical and pretty.
posted by Drastic at 7:36 PM on November 5, 2009

I don't love the mobile version, BUT! This is very much not a complaint. I find plain old mefi very usable on the iPod. So thanks for that. :)
posted by rusty at 7:46 PM on November 5, 2009

Thank you very much, pb. This is awesome.
posted by k8lin at 8:06 PM on November 5, 2009

The one thing that sucks about content-heavy sites with the iPhone is that it's hard to skip down into a thread you're revisiting. I don't think it needs paging, but links or a select list at the top allowing you to skip to message 50, 100, etc. would be handy.

Also, the text input isn't sized right, at least for portrait mode, so it scrolls around annoyingly.
posted by bjrubble at 8:17 PM on November 5, 2009

Wonderful, it's far more readable now. Perfect for when I have some quality alone time.
posted by beowulf573 at 8:31 PM on November 5, 2009

So nice. Thanks for making this!
posted by howrobotsaremade at 8:32 PM on November 5, 2009

Oh sweet!
posted by TwoWordReview at 9:01 PM on November 5, 2009

odinsdream: You can enable iPhone user agent spoofing on the Pre with WebOS Quick Install under 'Tweaks.'
posted by zsazsa at 9:04 PM on November 5, 2009

The only thing I miss about the old version is that tilting to landscape mode used to get you more characters per line, while now the text just gets bigger, which results in the same number of characters per line but a lot fewer lines per screen. Any chance of keeping the old landscape behavior?
posted by Partial Law at 9:11 PM on November 5, 2009 [3 favorites]

Expertly done. I like.

I discovered the tap-to-top thing quite by accident and thought it thoroughly cool.
posted by middleclasstool at 9:30 PM on November 5, 2009

Thanks for making this! This new interface reminds me of the very well executed ESPN mobile site.
posted by limited slip at 9:32 PM on November 5, 2009

I feel foolish asking, but if I "switch to standard site", but then want to switch back to the iphone version, how do I do that?
posted by johnstein at 9:40 PM on November 5, 2009

Not foolish at all johnstein, there was no way to do it. woops. Go to the footer of any page on your iPhone now, and click the Mobile link at the bottom of the Links list to switch from standard to mobile on the iPhone. I just added it.

bjrubble, not sure I understand what you mean about the text input size. Would you want to see it bigger or smaller? When you click into a textarea to type, the iPhone automatically zooms in and we can't control that behavior. Is that what you mean by scrolling around?

Partial Law, interesting idea. It's not a matter of old vs. new behavior because this iPhone stylesheet is entirely new behavior. You can always switch to standard mode to get that old behavior. We might be able to come up with something new for the iPhone view such as changing the font size when the orientation changes. Maybe we could test that.

A single tap will do.

Oh, the taps I've wasted.
posted by pb (staff) at 10:25 PM on November 5, 2009

Ahh. Thanks pb! I'm a satisfied customer now :)
posted by johnstein at 11:03 PM on November 5, 2009

Oh.
My.
God.

This is fucking awesome! Not only can I now read MeFi on my phone without either waiting forever and constantly re-sizing the page or not being able to comment from the mobile site, I have learned that I can tap to go to the top of a page! I was a bit concerned when scrolling down vanished the title bar of Safari, but then relieved when I found I could just tap on the bar at the top of the phone (that displays carrier data, time, battery status etc) and it does the same thing. I've nearly worn a track in the middle of the screen scrolling up and down.

Today is a good day on MetaFilter.
posted by dg at 12:59 AM on November 6, 2009

Thank you, pb.
posted by cj_ at 1:14 AM on November 6, 2009

Thanks a lot, PB, this is really, really nice! One thing, though, is the post box is so wide you can't see a whole line of text in it, and it scrolls horizontally while you're typing. I wonder what it'd be like narrower, so you could see your whole message on-screen at once.
posted by bonaldi at 1:49 AM on November 6, 2009

Looks good on an HTC Dream aka Android G1 pretending to be an iPhone (using Loccy's Better Browser enhancements to the stock browser).
posted by zippy at 1:53 AM on November 6, 2009

This is really neat, thanks pb!
posted by gmm at 2:57 AM on November 6, 2009

You know, this is really cool and makes a world of difference! Thank you very much!
posted by Brandon Blatcher at 3:24 AM on November 6, 2009

Very nice; how much?
posted by theredpen at 3:54 AM on November 6, 2009

This is so lovely, what a big difference! Thanks very much!
posted by ukdanae at 4:35 AM on November 6, 2009

YAY!! Thank you!!
posted by mimi at 4:50 AM on November 6, 2009

This is killer. The site worked nicely before, better than most, but now it's buttery smooth.

Anyone tried loading up that gargantuan "Faves" thread with this? 1.. 2... 3... NOT IT.
posted by dirtdirt at 5:31 AM on November 6, 2009

Bug report I just realized from your screenshots: I have no "admin" link. Fixpls.
posted by middleclasstool at 5:41 AM on November 6, 2009

Memail and a few other pages haven't got the menu but otherwise supremely awesome!
posted by By The Grace of God at 5:54 AM on November 6, 2009

We might be able to come up with something new for the iPhone view such as changing the font size when the orientation changes. Maybe we could test that.

That would be neat if it works, but if it results in weird refreshings or other problems, I'd understand.

Unrelatedly, the in-the-margin highlighting of original posters' responses in Ask now results in weird indenting of those comments (plain theme, if it matters).
posted by Partial Law at 6:36 AM on November 6, 2009

Could this be opened up to any Webkit engine instead of just the iPhone?
posted by odinsdream at 6:41 AM on November 6, 2009

When I first saw this I had a visceral "change is scary and bad" reaction. But approximately two minutes into using it I realized that this particular change is quite good.

I'm with Partial Law on the landscape text sizing. It's great to be able to read Mefi comfortably in portrait orientation, but I still tend to read most other sites in landscape, so smaller text in landscape would make for less switching of orientation when following links offsite.

The ability to jump to the bottom of the page is awesome. Thanks for this change!
posted by yarrow at 6:56 AM on November 6, 2009

Yay! My Monkey thanks you for this pony.

Yes, I named my iPhone. Yes, his name is Monkey. Got a problem with that?
posted by grapefruitmoon at 7:02 AM on November 6, 2009

My eyes thank you!
posted by matildaben at 7:16 AM on November 6, 2009 [1 favorite]

bonaldi, as far as I know that's default iPhone behavior. It zooms into the textarea so you can see your words as you type.

If anyone knows some sites with textareas that don't do this, or have the textarea sized perfectly so you can see a single line of text as you're typing please share the link here. I can take a look at the code and compare to see if we could do the same.
posted by pb (staff) at 7:20 AM on November 6, 2009

As the author of the aforementioned mobile thread, I vigorously approve of this message.

pb, this is exactly what I wanted to see, for what it's worth, and the quality of the work is astonishing. Thanks so much for all the work you must have put in for this.
posted by ChrisR at 7:28 AM on November 6, 2009

Love. It. Thank you!!
posted by Kimberly at 7:55 AM on November 6, 2009

This rocks my iPod Touch. Love the choice of a stylesheet rather than a separate site. *high fives pb*

/wait, you're not pb, who the hell are you and what are you doing here? *runs away
posted by azpenguin at 8:33 AM on November 6, 2009

grapefruitmoon: "Yes, I named my iPhone. Yes, his name is Monkey. Got a problem with that?"

Not at all. Mine is named Gojira.

I like to name hardware after famous monsters.

I once had a thumb drive named Minira.
posted by brundlefly at 8:35 AM on November 6, 2009 [1 favorite]

YAY! I love it as well.
posted by yeti at 8:37 AM on November 6, 2009

Me and my shiny new-ish iPhone are very happy - thanks pb!
posted by ersatzkat at 9:05 AM on November 6, 2009

This is great. Thanks!
posted by Tin Man at 9:08 AM on November 6, 2009

To the iPhones!
posted by blue_beetle at 9:34 AM on November 6, 2009

mine is named kPhone
posted by ersatzkat at 9:43 AM on November 6, 2009

pb: they do zoom, but the trick is to make the box so small that when it's zoomed up, it fills the screen. ILX's iPhone.css stylesheet does this, but I think you have to be logged in to set it.
posted by bonaldi at 9:54 AM on November 6, 2009

Now if there were only a way to change safari settings on the iPhone to not snap to a new page you open. That is frustrating (not a MeFi-related problem, however).
posted by chinston at 10:42 AM on November 6, 2009

Sweet! Who needs meatspace now?

Srsly, tho, thanks a skadillion, pb. You are our special angel.
posted by Halloween Jack at 10:59 AM on November 6, 2009

Yay yay yay yay YAY! I love this. Thank you.
posted by 8dot3 at 11:40 AM on November 6, 2009

Yup. This rocks.

Thanks, pb!

I like that it preserves my "professional white background" settings, too. And the font size in landscape mode is just right for these old eyes. Phenomenal. Excellent, great superlative stuff. Yay!
posted by BitterOldPunk at 11:43 AM on November 6, 2009

Nice going, I was just about to ask, as it happens....
posted by Scoo at 12:09 PM on November 6, 2009

This is really exceptional. Thanks a million - I use the iPhone often and this is all up-side.
posted by From Bklyn at 1:35 PM on November 6, 2009

You know how the "front page" of the mobile site doesn't slide side-to-side if you don't move your thumb perfectly up and down? I wish the "interior" pages were like that, too. It's seriously the only reason I don't use the mobile version---if you scroll down wrong, the page slides left or right, making it so the words are butted up against the border on the left. If the new site isn't zoomable, why does it flop left and right if you scroll it wrong?
posted by interrobang at 4:33 PM on November 6, 2009

why does it flop left and right if you scroll it wrong?

hmm, I can't reproduce that. Which particular subsite is flopping left and right on the iPhone, all of them? Can you send a screenshot of the text butted up against the border?
posted by pb (staff) at 4:42 PM on November 6, 2009

Sure, just a second.
posted by interrobang at 4:45 PM on November 6, 2009

OK, e-mailed.
posted by interrobang at 4:48 PM on November 6, 2009

ahh, we're talking apples and oranges. You're looking at mobile.metafilter.com which we have discontinued development on. This post is about a new stylesheet for the iPhone that is just at the regular site. So if you load metafilter.com on the iPhone, you'll get the site with a new stylesheet specifically for the iPhone.

Yeah, the old mobile site wasn't ideal and that's why we've moved toward this new stylesheet. But we don't want to take the old site down in case anyone is addicted to it. I imagine we'll take it down someday.
posted by pb (staff) at 4:51 PM on November 6, 2009

Oh! Sorry! I look at metafilter on my iPod Touch all the time; I haven't noticed anything different today, so I guess, uh, I'm just an idiot, never mind, sorry.
posted by interrobang at 4:53 PM on November 6, 2009

I had to reload metafilter! It looks way better!
posted by interrobang at 4:53 PM on November 6, 2009

So for those of us who are iphone deprived, can we get an idea of what it looks like?
posted by IndigoRain at 5:00 PM on November 6, 2009

Yay! Thanks! I like it!
posted by fiercecupcake at 5:06 PM on November 6, 2009

It's nice on my Kindle, too! Not as full featured, but the skip to menu business is invaluable.
posted by ocherdraco at 5:16 PM on November 6, 2009

Thanks so, this is very much appreciated!

I noticed yesterday that it was easier to read but couldn't put my finger on why & thought I'd been imaging things.
posted by goshling at 5:44 PM on November 6, 2009

1) If I have clicked "Switch to Standard Site", how do I switch back to the mobile version again?

2) It is missing the "3 links and 305 comments posted since your last visit" which is very useful to find out how much new stuff there is since last visit, esp. on ask.meta
posted by flif at 6:03 PM on November 6, 2009

can we get an idea of what it looks like?

Sure, there are screenshots in the post. They're the front, thread, menu links.

how do I switch back to the mobile version again?

Scroll all the way down to the footer and click "Mobile", the last link in the Links column.
posted by pb (staff) at 6:44 PM on November 6, 2009

Loving this. Threw me for a loop though as the change went in just after my iPhone showed up - day 1 normal, day 2 mobile layout...
posted by caution live frogs at 8:26 PM on November 6, 2009

Right now we're focusing on the iPhone, but once the bugs are worked out we'll start playing with turning the stylesheet on for other devices.

Why not just let people pick the stylesheet? the built in android browser isn't sophisticated enough to fake being an iPhone or allow user stylesheets or whatever.

Scroll all the way down to the footer and click "Mobile", the last link in the Links column.

Does that only show up on iPhones?
posted by delmoi at 12:52 AM on November 7, 2009

Thanks pb, this looks great
posted by motdiem2 at 3:15 AM on November 7, 2009

Great work pb. Thanks very much.
Interrobang, don't feel bad: I was looking at Mefi-Mobile on the iPod too, wondering what everyone was going on about.
posted by peacay at 7:00 AM on November 7, 2009

Phew!
posted by interrobang at 7:49 AM on November 7, 2009

I didn't see a way to hit "recent activity," which I miss. And if you hit the "take me to the menus" (or whatever it's called), before the page loads the iPhone hates that. Lastly, once you duck into standard view, how do you go back?
posted by cjorgensen at 8:06 AM on November 7, 2009

There's a link to Recent Activity in the menu on the front page of each site, but not in thread menus. Yeah, you have to wait for the page to load before the skip to menu link will work. I think that's preferable to only showing the link once the entire page has loaded.

Once you're in standard view, you go back by scrolling all the way down to the footer and clicking "Mobile", the last link in the Links column. That link is only available on the iPhone in standard view. I'd like to iron out the problems with the iPhone before I start tweaking for other devices.
posted by pb (staff) at 8:42 AM on November 7, 2009

This is pretty slick. Nicely done.

How do you view 'recent favourites'? That tab is gone in the recent activity page now?
posted by chunking express at 8:56 AM on November 7, 2009

Thanks PB!! This is just wonder-tastic!! I really appreciate your efforts that make everything better around here. Big hug!
posted by pearlybob at 11:23 AM on November 7, 2009

Thanks! Excellent.
posted by salvia at 11:37 AM on November 7, 2009

Awesome, guys. I like it - I always found it annoying to have to rotate my screen to read things properly.
posted by adrianhon at 4:19 PM on November 7, 2009

chunking express, unfortunately recent favorites is one of those features you'll have to switch to the standard site to use. Or bookmark that page specifically on your iPhone so you can bring it up quickly.
posted by pb (staff) at 6:21 PM on November 7, 2009

Okay - here's one question. If I click on a username to go to their profile and then click on "View all activity" in about the middle of the page, it looks like I can only see their posts, not comments. Is there a way to have comments displayed as well?
posted by chinston at 6:28 PM on November 7, 2009

chinston, right now, no. That's another one you'll need to switch to the standard site to view. Once you start getting deep into the site like that there are quite a few pages that are simply inaccessible. It's one of the trade-offs we made to make reading posts and comments drop dead simple on the iPhone.
posted by pb (staff) at 7:18 PM on November 7, 2009

Okay, just wanted to make sure I wasn't missing something. Thanks again for all the hard work.
posted by chinston at 8:50 AM on November 8, 2009

I'm beginning to prefer reading MetaFilter on my iPhone. Amazing.
posted by roger ackroyd at 10:34 AM on November 8, 2009

It looks great. Thanks!
posted by malocchio at 1:20 PM on November 8, 2009

Fascinating. (Posted from my brand new iPod Touch.)
posted by IndigoRain at 5:13 PM on November 8, 2009

This is AWESOME. I use my iPod Touch to read mefi regularly and this is MUCH better. Thank you!
posted by olya at 6:33 PM on November 8, 2009

Just out of curiosity, aside from installing User Agent Switcher on Firefox, any way to manually switch to this view in a non-iPhone browser?
posted by WCityMike at 8:50 PM on November 8, 2009

No, the switch is based on the reported User Agent.
posted by pb (staff) at 9:19 PM on November 8, 2009

But if you want to get close to the iPhone version you could install the current iPhone stylesheet as a local user-defined style. You would lose some additional page-level formatting, but using that stylesheet would be very close to the iPhone experience.
posted by pb (staff) at 9:31 PM on November 8, 2009

pb: But if you want to get close to the iPhone version you could install the current iPhone stylesheet as a local user-defined style. You would lose some additional page-level formatting, but using that stylesheet would be very close to the iPhone experience.

Well, I tried setting that up as a Stylish userstyle, which pretty much got it near there, but some of the UI differences that I was looking for evidently don't come from the CSS. Ah, well.
posted by WCityMike at 9:53 PM on November 8, 2009

Love it!
posted by espire at 9:48 AM on November 9, 2009

Lovely, thanks! Can we add search to the menu or have I missed it somewhere?
posted by Iteki at 1:08 PM on November 9, 2009

Nope, you haven't missed it. Search is one of those features you'll have to switch to the standard site to use. You could also bookmark search and bring it up that way. We'll consider adding more menu options and links to deeper areas of the site in another round.
posted by pb (staff) at 1:31 PM on November 9, 2009

Ok cheers!
posted by Iteki at 1:37 PM on November 9, 2009

Not my cup of tea. But congratulations on making a pretty decent iPhone stylesheet which people are loving very much. On the plus side it preserves deep links when it treats MobileSafari as a second class citizen which is my "mortal outrage" button pusher.

When I switch to standard site I guess the question is will it stay that way? Or could it be implemented as its own preference. The reason I use an iPhone is because it delivers such a good desktop-a-like experience. If I wanted to seek out mobile specific sites I would do so.

Also: 
posted by Talez at 2:10 PM on November 9, 2009

Talez, your preference for the standard site is set as a cookie that doesn't expire. So you will continue to get the standard site until you clear your cookies.
posted by pb (staff) at 2:13 PM on November 9, 2009

Thank you very much! I don't typically clear my iPhone cookies so I'm good.

I never really see how people could really complain about Mefi on a iPhone though. It's not like Slashdot where the nesting and retarded margins quickly turn comments into 24px wide text boxes. Flat discussions don't have to be shoehorned into the 900px wide virtual canvas that Safari uses and it looks pretty sweet stock in landscape.
posted by Talez at 2:18 PM on November 9, 2009

If anyone else is on an Android device and wants a quick way to change user agent, Steel is an Android browser which has user-agent options in its settings.
posted by ocherdraco at 2:34 PM on November 9, 2009

Much improved. Thanks Metafilter.
posted by backwards guitar at 7:23 PM on November 9, 2009

if you use Chrome on PC you can append this to a shortcut and Chrome will tell the world (including MetaFilter) that you are on an iPhone.

-user-agent="Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
posted by dirtdirt at 6:46 AM on November 10, 2009

But if you want to get close to the iPhone version you could install the current iPhone stylesheet as a local user-defined style.

Wait. Could this be an option along with the "professional white background?" (People are using both at the same time?)
posted by Pronoiac at 5:33 PM on November 10, 2009

People are using both at the same time?

Yes, you can choose either theme on the iPhone. The iPhone stylesheet mostly just hides parts of the page like the header and sidebars and makes fonts bigger. I'm not sure why you'd want to use it in a standard web browser.
posted by pb (staff) at 8:58 PM on November 10, 2009

I thought it would simplify enabling & disabling it, or just make it more obvious. So, it doesn't work as a separate theme, because it works with the other two, but perhaps presenting it as a separate but nearby checkbox near the themes makes sense?

As for who could use this: It looks like other mobile devices are finding this handy, & it might make troubleshooting easier on a desktop system.
posted by Pronoiac at 10:13 PM on November 10, 2009

We plan on enabling it for other mobile devices, but they each have their own quirks that we'll likely need to work around. I have a to-do list for getting the iPhone version up to speed, and then we'll turn on the stylesheet for other user-agents.

I'm picturing a rash of MetaTalk threads titled "Where did the header go?" if we have this as a standard profile preference. I think that pref would make it too easy to make the site extremely confusing in a standard browser.
posted by pb (staff) at 10:23 PM on November 10, 2009

This fantastic redesign kills my biggest beef with reading the site on my iPod, which means my second biggest has bubbled to the top: losing my place on the page when I follow a link and come back, because Safari decides to reload the page from scratch when I return. Is there any workaround for that?
posted by Lazlo at 10:23 PM on November 10, 2009

No workaround that I know of, but I'd love to hear one. That's one of my peeves about the iPhone too, drives me crazy.
posted by pb (staff) at 10:25 PM on November 10, 2009

Press the timestamp for the comment you're about to follow, then follow the link. If, when you return, it goes up to the top out of sheer dumbassery, tap the time to go to the top, select the location, & hit "Go." It will probably reload the page, but at least it'll go back to the right comment.
posted by Pronoiac at 10:52 PM on November 10, 2009

Thanks for the tip. Even with a full page refresh, mobile safari finds the right comment if you have it set in the URL.
posted by pb (staff) at 9:04 AM on November 11, 2009

Days late and dollars short, but I wanted to chime in with yet another "yay". While I love the fact that the iPhone is generally just as capable as a desktop browser, I really appreciate iPhone/Small Screen stylesheets that drop some of the cruft for a more pleasant experience.
posted by Kyol at 11:16 PM on November 13, 2009