• Hey Guest. Check out your NeoGAF Wrapped 2025 results here!

Ever wish GAF looked good on your iPhone or iPod Touch? I've got good news for you!

Status
Not open for further replies.
J

Juice

Member
YouTube link: http://www.youtube.com/watch?v=CviyEOJJxxU

So I've been playing around the last few days with a proof-of-concept I've been meaning to do ever since I got an iPhone: improve my mobile GAF experience.

For those with an iPhone, you'd probably agree that navigating GAF can be a little tedious, but the more annoying factor is the frequency with which GAF's awesomeness causes Safari to crash, which also motivated me to try wedging GAF onto an iPhone in a neat browser layout.

When Apple released the iPhone SDK, they also quietly updated DashCode with a lot of iPhone web application boilerplate code, so I used that as a starting point for the front-end. I'll save the how-to until later, in part because I'm not making the iPhone-happy view of GAF public just yet. I just wanted to hear some feedback. Be gentle, I have a habit of dropping projects before they fully mature.

Screens:

discussions.png


threads.png


post1.png


post2.png


Feedback logged so far:
- Add avatars
- List post content on a single page
- Bug Hitokage if something could stand to be tagged (note: I've been pretty sneaky so far in latching onto RegEx patterns when scraping, so a few things might have more descriptive comment tags)
- Consensus of 5-15 posts per page
- Configurable pagination
- iTunes' blue dot for not-yet-read

Thanks for all the suggestions, guys. I'm going to try to keep improving the reading/browsing aspects first, and then eventually try tackling logging in, cookie management, and the necessary post requests to publish to the forum. If any of you happen to be Java or RegEx geniuses, PM me.
 
Well, I don't own an iPod touch (yet, waiting for storage upgrade) but that sure is impressive; I'd love to have something like that if I used one, I know how annoying browsing forums can be with such small screens.
 
Jamesfrom818 said:
How does it handle pictures?
Click to expand...

It attaches the contents of everyone's posts on GAF to the DOM of the page, so whatever is in the post will show up (to some extent) in the post preview pane.

Currently, most images load fine, but because I don't have side-to-side overflow on that box yet, the right side of them are clipped with the right side of the main post display.
 
ant1532 said:
I like but Im not too sure about the seperated posts...
Click to expand...

Yeah, I was slightly concerned with usability on this first run, but I really didn't want to spend too much time engineering a graceful way to get all the posts on one page; part of the reason that GAF sucks on the iPhone in the first place is that all of that content bogs Mobile Safari down.

I'm thinking on it. Mock ups are welcome
 
Juice said:
Yeah, I was slightly concerned with usability on this first run, but I really didn't want to spend too much time engineering a graceful way to get all the posts on one page; part of the reason that GAF sucks on the iPhone in the first place is that all of that content bogs Mobile Safari down.

I'm thinking on it. Mock ups are welcome
Click to expand...

browing NeoGaf on my iphone at work can be a bitch sometimes, so i definately would be interested insomething like this. Keep up the work.
 
That's really awesome. Although having each post separate does look incredibly tedious. There's gotta be a better way to do that.

If nobody has mocked anything up by tomorrow, I might try if I have time.
 
Juice said:
Yeah, I was slightly concerned with usability on this first run, but I really didn't want to spend too much time engineering a graceful way to get all the posts on one page; part of the reason that GAF sucks on the iPhone in the first place is that all of that content bogs Mobile Safari down.

I'm thinking on it. Mock ups are welcome
Click to expand...
Separating posts isn't a bad idea, but you should do it in stacks of 5 or 10.

In terms of usability, the one post per page thing you have now would work well if you pre-loaded the next five posts after it so there's no wait time, and also if the Prev/Next buttons were at the bottom of the page so your hand wasn't disrupting the view. In the end though, since posts will often go down below the vertical length of the screen and you have to scroll down anyway, you should do the pagination in stacks of 10 posts so you scroll down a few then go to the next page. Other than the threads with 500-5000 posts, most threads on GAF go for about 10-40 posts before they die.

This is impressive as shit, and the fact that you have a video of it in action is a lot more than most developers ever do. (Almost everyone falls into the trap of getting an idea, half-assing an attempt at it, and then just reading the Internet for the rest of their time until they get another idea they half-ass.)
 
Liu Kang Baking A Pie said:
Separating posts isn't a bad idea, but you should do it in stacks of 5 or 10.
Click to expand...

Hmm, that's actually doable within DashCode if I stick with a constant number per screen.

A "what the hell was I thinking" on why each post has its own page: that last page was actually meant to include quote/reply/user detail functionality, but because the stack/list view only stretches a couple lines vertically, I boxed myself into putting all the post content there, too.

Liu Kang Baking A Pie said:
In terms of usability, the one post per page thing you have now would work well if you pre-loaded the next five posts after it so there's no wait time, and also if the Prev/Next buttons were at the bottom of the page so your hand wasn't disrupting the view. In the end though, since posts will often go down below the vertical length of the screen and you have to scroll down anyway, you should do the pagination in stacks of 10 posts so you scroll down a few then go to the next page. Other than the threads with 500-5000 posts, most threads on GAF go for about 10-40 posts before they die.
Click to expand...

Good news! All 50 posts are already completely loaded. It's instantaneous to switch between posts on the same page, even if you lose network connectivity
 
Juice said:
A "what the hell was I thinking" on why each post has its own page: that last page was actually meant to include quote/reply/user detail functionality, but because the stack/list view only stretches a couple lines vertically, I boxed myself into putting all the post content there, too.
Click to expand...
I wouldn't really worry about profiles until a second version if you ever feel like it. Just getting GAF posts to load well and read well is a huge improvement and I'd use it.
 
This looks fantastic.

My only suggestions would be:
- load 10 or 15 posts per 'page'
- include a 'go to first unread' feature somehow
-- the circular blue '>' button commonly used for options could work for this
-- alternately, a button at the top of the first page of posts when you load a thread
 
Maybe you could make a settings section and make it so people can set how many posts they want per page. That way, instead of the part where it shows all individual posts, it could say "Page 1, page 2..." same with the "Next post" button. As for posting, replying, quoting, maybe just a discrete button near each post with a popup menu for those options. I'm not familiar with the iPhone SDK to know if those ideas are possible, but they don't seem too complicated to me if it's resourceful enough.

As for avatar, maybe selecting a user's name shows the avatar in a popup window or something? I don't really think those should be needed or it could make the GUI too cluttered which is what we're trying to avoid.
 
I was thinking of doing this but never got around to it. I take it you are just screen scraping the forums?

Also, I think the point of having each post on a single screen is to help keep Safari from crashing because people often post a dozen photos in a single post.
 
Thanks for all the feedback; I think I've put in enough time on this today, but as I make updates, I'll update the OP and keep soliciting your impressions.
 
I can browse gaf on my sprint samsung 3g phone with opera mini and it looks and loads just like it does on my computer. My phone is also about two years older than the iphone. lol, iphone.
 
As a web developer and designer I'm growing pretty aware of the fact that no matter how good iPhone/Touch Safari is, the "real" Internet just isn't designed for screens that small and need to think of a few solutions.

What's in the SDK that allows you to bring GAF data into the iPhone/Touch menu system? I'd imagine that at the end of the day, it's a lot more seamless than the solutions going through my head, which mostly revolve around a whole lot of resolution sniffing, iSafari-friendly stylesheets and completely tearing the DOM apart and rebuilding it for the sake of the iPhone/Touch.

Edit: I just realized that your screen grabs are from within Safari, which just raises MORE questions. You said this was Dashcode's doing, I'm downloading XCode right now to see what this is all about. Apple's docs on DC make it seem like it's something a bit more approachable than, say, learning Cocoa.

More questions: Short of jailbreaking, how would this be deployed to anyone's iPod or iPhone? Is it code that would live in a site's code that would silently wait for mobile Safari to hit?
 
xsarien said:
As a web developer and designer I'm growing pretty aware of the fact that no matter how good iPhone/Touch Safari is, the "real" Internet just isn't designed for screens that small and need to think of a few solutions.

What's in the SDK that allows you to bring GAF data into the iPhone/Touch menu system? I'd imagine that at the end of the day, it's a lot more seamless than the solutions going through my head, which mostly revolve around a whole lot of resolution sniffing, iSafari-friendly stylesheets and completely tearing the DOM apart and rebuilding it for the sake of the iPhone/Touch.

Edit: I just realized that your screen grabs are from within Safari, which just raises MORE questions. You said this was Dashcode's doing, I'm downloading XCode right now to see what this is all about. Apple's docs on DC make it seem like it's something a bit more approachable than, say, learning Cocoa.

More questions: Short of jailbreaking, how would this be deployed to anyone's iPod or iPhone? Is it code that would live in a site's code that would silently wait for mobile Safari to hit?
Click to expand...

The short answer is that this project is both a front-end (the nifty iPhone-y interface, which is built in DashCode 2.0 beta), and a backend server (Java web poject on Tomcat) that scrapes and caches GAF's discussions, threads, posts, and users. That way I can keep the logic off the iPhone, but without resorting to converting GAF into a series of tiered RSS feeds.
 
Hey Juice. I'm really interested in seeing if this thing could ever actually come to light so I have a few suggestions that I don't think would be very hard to implement. Since an iGAF would be suited for those devices it feels as if you're trying to recreate the GAF browsing experience just for that device. I think a more customized way to go would be a bit more useful for this application. For instance, I really like the native design that you made and I think that's the way to go. But there's a few ways you could make it more personalized and easier to use for GAF members. On the "front" of the page why not have an option to log into your GAF account? Once you do you could view your subscribed threads and/or search through your post history so that you could instantly be linked to topics that interested you in addition to having the option to browse through the topics on the GAF boards. Otherwise really great project!
 
Very nice, Juice. How's it handle spoiler text, just like krypt0nian mentioned?

I don't think GAF in horizontal view looks that awful; it's fine to me. But this is an improvement for sure.
 
The to-do list looks pretty much what I'd love to see, all I'd like for there to be is a settings page; give the user as much access to the code as you can. If, for example you can set a variable for the number of posts that get grouped into one page, there's no need for consensus and everyone can try to get their preferred setting. Same with showing avatars/not showing avatars, the way it handles pictures (show link vs. show picture). As I already said I'm not familiar with the SDK, but I'd guess a bit of modular design should make those examples possible, and your work much easier.
 
This might be kind of nitpicky, but Previous Post would be better than Last Post as Last Post already has a different connotation here. (But a last post button would be rad)
 
Awesome Juice. Please continue this project! To read GAF this easy on my touch would be heaven!

I am sad that I can offer nothing but my moral support to this project. :lol

*subscribes to thread*
 
Juice said:
The short answer is that this project is both a front-end (the nifty iPhone-y interface, which is built in DashCode 2.0 beta), and a backend server (Java web poject on Tomcat) that scrapes and caches GAF's discussions, threads, posts, and users. That way I can keep the logic off the iPhone, but without resorting to converting GAF into a series of tiered RSS feeds.
Click to expand...

I'm willing to hear the long answer, especially the front-end parts. I'd love to hear what Dashcode is capable of doing. Especially since this looks like a whole lot of cross-domain stuff that's usually a big no-no in AJAX land.
 
Fucking amazing dude. Great work.

My one request, scrap the reguest for avatars. That'll just increase load times between reading posts. (Yes I realize that "pages" haven't been incorporated yet.
 
This is so awesome, Juice. Bravo

Most of what I would recommend has already been mentioned. I'm assuming a nice GAF icon for the home screen is obvious?

Wellington said:
Fucking amazing dude. Great work.

My one request, scrap the reguest for avatars. That'll just increase load times between reading posts. (Yes I realize that "pages" haven't been incorporated yet.
Click to expand...

I would say the option to disable avatars would be the best option. Everyone wins.
 
Looks great so far. I think the overall navigational approach you've taken is the best. For me, personally, I'd only like to see a couple of minor things:

- choice of font size for the topic list. At least one other option that's smaller than shown in the pics.
- byline of info for the topics, post headings that displays info we normally see on the forum - last post time, who posted, etc.
 
This is cool. This forum software by default has an Archive feature that is basically GAF-lite with no images, table formatting or anything and is really basic but it's disabled here. It would make browsing GAF on the PSP or iPhone a whole lot easier.

However, this is fantastic and great work.
 
Can I ask a favor? Anyone with a decent image editing app mind making a nice-looking GAF png logo for the iPhone homescreen? The one I have now is a straight import of the GIF on the header and it looks pretty pixelated. If you could PM me a link or post one here, I'd appreciate it.

I'm almost done getting thread and post pagination working on the backend, so hopefully I can implement a complete "Gaf Reading" experience on the front-end next.
 
Fucking awesome, keep it up bro. Don't put avatars on there, yucky. Just add more posts per page and you are golden. Slick as hell!
 
What GAF needs to do is launch a mobile version similar to Rivals. In lieu of this, your work is awesome.. will it only work for Safari? :( I've referenced Rivals' mobile site numerous times but never received any realistic feedback of how likely it would be for a GAF version -- this is how theirs appears:

Standard web view:
2q9gsnq.png


Wireless topic view:
wld2lx.png


Wireless thread view:
nycnmf.png


They even have wireless versions of all the stories posted as well. It gets me through my train ride every morning. No avatars = AWESOME! No pictures = AWESOME! The meat of every thread is the text.. a text-only version of the forum (Rivals also adds emoticons to the Wireless version) would be nirvana for me.
 
Awesome work man, just echoing my support!

I've whacked together a PNG icon, anyone else feel free to make another one if this one sucks

TZZP_1206371853_gaf-iPhone.png


Edit: Will there be search functionality added? If the amount of threads/posts displayed is going to be limited to speed up browsing i'd think search would be pretty damn useful to quickly jump to whatever your looking for
 
guise said:
Awesome work man, just echoing my support!

I've whacked together a PNG icon, anyone else feel free to make another one if this one sucks

TZZP_1206371853_gaf-iPhone.png


Edit: Will there be search functionality added? If the amount of threads/posts displayed is going to be limited to speed up browsing i'd think search would be pretty damn useful to quickly jump to whatever your looking for
Click to expand...

Wow, thanks! That's perfect. I've got it all set up and working now. Looks like a real icon now.

I spent a couple more hours tonight tweaking the pagination, and I'm pleased to report that you can now easily hop around any page of the gaming / off-topic forums using the buttons and drop-down box in the screen below.

threadPagination.png


The cool thing about the drop down box is that you can actually select a page and it'll load while you're still in the drop-down selection GUI (hard to show without a movie). So you can actually browse all the pages in the top half of the screen while keeping the pop-up open on the bottom half of the screen.
 
guise said:
Awesome work man, just echoing my support!

I've whacked together a PNG icon, anyone else feel free to make another one if this one sucks

TZZP_1206371853_gaf-iPhone.png


Edit: Will there be search functionality added? If the amount of threads/posts displayed is going to be limited to speed up browsing i'd think search would be pretty damn useful to quickly jump to whatever your looking for
Click to expand...

Cool. You didn't even have to put in THAT much effort, though. The iPhone/Touch adds the rounded corners and reflection.
 
"/
Makes me wish the iPhone would just get here to Japan.
My phone has a simple browser but that's it. I really wish there was a mobile way I could browse GAF. Well, no I don't. That would just ruin worlds. :S
 
Status
Not open for further replies.

Similar threads

  • Poll
Flock of Seagulls, good band? Or no?
12
349
Wildebeest replied
Side hustles? Anyone got any good ones?
38
1K
bitbydeath replied
Is this a good laptop?
4
194
SoloCamo replied
  • Poll
If you had one wish, what would it be?
2
66
852
Quasicat replied
What’s a good laptop right now?
1
148
Nocty replied
Top Bottom