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

A NeoGAF iPhone Web App

Status
Not open for further replies.
hey kohler, good stuff from you for so long. I'm a fan!

Instead of the so-so design choise of that menu button and what it entails, have you thought about doing what Facebook and Path do?

6df4e_menu_vertical-4e9463f-intro.png


Something like that. I don't know what difficulties that adds in regards to coding and such, but let me know what you think.
That split pane view runs like ass on 3G/2nd Gen iTouch devices. Also, iirc, split-pane interface is for native apps only (which I take it the ckohler is staying away from)

As for the mockups: I wouldn't mind having the icons smaller if it's a trade off for a slightly bigger window.
 
Is there any chance for a "Go to last read post" button? I'll be using this app regardless on my iPhone, but I've stopped using it for my iPad because it lacks that feature. It's so important Chris IT'S SO IMPORTANT
 
Here's some ideas I've been mocking up. I decided to go outside the box in an attempt to reduce vertical space lost to the addition of the ads. I came up with the idea of removing the gray sub-headers entirely. The only downside to this idea is that the thread title is clipped on the thread view page. Not a biggie, though.

Also, I added a "Menu" button to the right that when clicked expands to reveal up to four options (instead of the button only doing one thing like it does now). It looks cool and helps save space. I haven't designed the bottom of these pages although I feel that's the easy stuff to do. I might get creative down there also. There could still be shortcuts also like tapping the NeoGAF logo would also be a "Back" button and tapping the Title would jump you down to the bottom of the page, etc.

Forum View:

Ji5S6.png
Looks good, even though i'm less fond of the different UI look between the top nab bar and Safari's bottom tool bar, but apparently you can get around that? I'm not sure how Safari mandates its UI tbh.

Also, in the quoted image above, there's something like 10-11 wasted pixels with the gaps in between the GAFbar and the ad, and the ad and the thread list.

As you can see, I am nitpicking here, just because it's looking so good there's nothing to really critique on. I like this route a lot, can't wait to see the progress. :)

PS. Thanks for the optimization in reducing the amount of space any navigation tools will take, I think everyone would appreciate it if you kept that mindset since the smaller the better, now that ads are in.

Is there any chance for a "Go to last read post" button? I'll be using this app regardless on my iPhone, but I've stopped using it for my iPad because it lacks that feature. It's so important Chris IT'S SO IMPORTANT
I get the feeling that this isn't going to be possible, since ckholer hasn't responded (afaik) to anyone about it yet. :( It definitely is important, moreso than even on desktop browsing.
 
Looking good.

Will we still have the 'jump to top/bottom of page' option, or will that be gone with the loss of grey bars?

And how about 'go to last read post', is that possible now you'll be on neogaf server?
 
Just wondering, are you planing on changing the UI for sure? Not that I have anything against iOS, but I'm on android and don't really want to look at iOS graphics. Something OS neutral would be great. Anyway thanks for all the hard work and good luck on your offical app.
 
I get the feeling that this isn't going to be possible, since ckholer hasn't responded (afaik) to anyone about it yet. :( It definitely is important, moreso than even on desktop browsing.

he did somewhere in this thread, it's just that the question keeps being repeated every week.

I think he said that it's almost impossible because of downloading of images happens later and that will mess up the position on the screen.

but that wouldn't matter that much to me, as you're at least on the same page as you stopped reading the last time, so it would be easier to find the last post compared to not knowing which page you were on.
 
When I saw the mockup, my first though was "wow, that looks like ass", then I noticed it's the ad. Still, I'm not sure the blue mixes well with the NeoGAF logo.
 
Thread View Expanded (after menu button pressed):

Ly7QH.png


Thoughts?

I like the menu button in the top as a way to save space. I think that would work well.

Is the change in color scheme along the top bar on purpose to make it more generic? on the iPhone, it looks odd to have two different colors used for the top and bottom menu bars. It makes it look quite a bit worse on iOS. Maybe it would look better if it moved away from blue entirely?

When scrolling to the bottom of the page, will this top nav bar be scrolled away? I guess so. Will there be some similar action button or menu bar along the bottom of the page?
 
pompidu said:
Any chance for multiquote or is that a bit difficult to accomplish for a mobile site?

Yes, there will be multiquote.

brianmcdoogle said:
how will ads look on iPad and in landscape?

They will be centered.

Will it still have the "down arrow" button that jumps to the bottom of the page?

You will be able to tap on the title of the thread or forum to jump down. (fyi, that works now. You don't have to tap on the little arrow.)

DeathbyVolcano said:
have you thought about doing what Facebook and Path do?

That won't work for tiny phone screens. Also, it's neigh impossible in a browser. Sorry tablet folks, you are NOT getting a custom version. It's too much of a hassle at the moment to design TWO webapps. Please accept it. :p

Sentry said:
Looks good, even though i'm less fond of the different UI look between the top nab bar and Safari's bottom tool bar, but apparently you can get around that? I'm not sure how Safari mandates its UI tbh.

I can't change Safari's native controls. That dark blue header is to match the main NeoGAF design. I was going to make it black but then it would look too much like the ad and I didn't want it to be the same as the iOS color because it looks better being different. It's all about branding.

Sentry said:
Also, in the quoted image above, there's something like 10-11 wasted pixels with the gaps in between the GAFbar and the ad, and the ad and the thread list.

That space is deliberate. Believe me, it looks better than having the ad pressed up against the content and helps the user realize the ad is not part of the interface.

sionyboy said:
Will we still have the 'jump to top/bottom of page' option, or will that be gone with the loss of grey bars?

You will be able to tap to go to the top and bottom.

DarkFlow83 said:
Just wondering, are you planing on changing the UI for sure? Not that I have anything against iOS, but I'm on android and don't really want to look at iOS graphics. Something OS neutral would be great.

I tried a design without iOS style elements/buttons and it looked like crap. Like some janky, cheap website. I decided to keep it iOS because its a solid, simple UI everyone understands and it looks elegant. I don't want to try and come up with a non-specific UI because frankly it'd be throwing away all the smart work that went into making the iOS UI easy to use. Sorry it doesn't match your phone but I also don't want to have five versions of the same UI either. I think on the whole, most mobile sites mimic iOS so I'm guessing you're used to it.

LCfiner said:
Is the change in color scheme along the top bar on purpose to make it more generic?

I'm just trying to brand it "NeoGAF". Those are the GAF colors. While it's "similar" to the iOS UI design the color is a deliberate departure like many other apps on the phone do (twitter, Facebook, whatever). I think it'll grow on you.

LCfiner said:
When scrolling to the bottom of the page, will this top nav bar be scrolled away? I guess so.

I'm thought about doing this since "position: fixed" is now supported in iOS and Android (not WP7, though). Although, I tried it yesterday on an Android phone and it was glitchy. The header would scroll off the screen and then "pop" back at the top. I don't think I'll have it do that. Having the ability to tap to the top and bottom has made that unnecessary.

ScOULaris said:
Will it ever be possible to have the "go to first unread post" feature
tmdorsey said:
The #1 feature request from me is go to first unread.
sionyboy said:
Please, please, please.... Pretty please.... Can we have a "Go to last new post" function?
Letters said:
if you can please include a litttle "Go to first unread post" button next to "Go to last page" arrow button
Mike Works said:
Is there any chance for a "Go to last read post" button?

Ahhhhh! Alright! I'll add this! Just please stop asking! Christ.

Seriously though, I tried it today and I think I got this working. It's weird. I never use this feature so I "think" it's working but the behavior is strange. For example, if I click on a thread I haven't read for months it drops me on a post from yesterday. Is that normal? Anyway, it seems to be working. It's a bitch though because my app basically has to hit the NeoGAF servers twice for every request. First to find out the correct URL of the last unread post in a thread and second to get the thread at the location of the last unread post. Also, I have to do wonky URL header crap to determine this. Aaaaaand, I'm not even sure if it will correctly scroll to the right position once everything is done (although I'm guessing it will now that browsers are faster). Just don't be surprised when you use this feature that when it scrolls down to your last unread post that the post itself doesn't then get pushed off your screen when a bunch of big photos load above it.
 
Good stuff ckohler.

I use your web app for hours daily on my iPad at night. A tablet centered version would be amazing, but it's understandable that you don't have the time or resources to do one, it works great the way it is now too.
 
I'll read through all your responses later, but I just wanted to say, thanks a bunch for the constant updates and all that; shows you give a shit as much as the people using it do.
 
Seriously though, I tried it today and I think I got this working. It's weird. I never use this feature so I "think" it's working but the behavior is strange. For example, if I click on a thread I haven't read for months it drops me on a post from yesterday. Is that normal? Anyway, it seems to be working. It's a bitch though because my app basically has to hit the NeoGAF servers twice for every request. First to find out the correct URL of the last unread post in a thread and second to get the thread at the location of the last unread post. Also, I have to do wonky URL header crap to determine this. Aaaaaand, I'm not even sure if it will correctly scroll to the right position once everything is done (although I'm guessing it will now that browsers are faster). Just don't be surprised when you use this feature that when it scrolls down to your last unread post that the post itself doesn't then get pushed off your screen when a bunch of big photos load above it.


Good job ckohler! For me personally I'm happy as long as I can get somewhere near the last place I was in a thread.
 
Seriously though, I tried it today and I think I got this working. It's weird. I never use this feature so I "think" it's working but the behavior is strange. For example, if I click on a thread I haven't read for months it drops me on a post from yesterday. Is that normal? Anyway, it seems to be working. It's a bitch though because my app basically has to hit the NeoGAF servers twice for every request. First to find out the correct URL of the last unread post in a thread and second to get the thread at the location of the last unread post. Also, I have to do wonky URL header crap to determine this. Aaaaaand, I'm not even sure if it will correctly scroll to the right position once everything is done (although I'm guessing it will now that browsers are faster). Just don't be surprised when you use this feature that when it scrolls down to your last unread post that the post itself doesn't then get pushed off your screen when a bunch of big photos load above it.

Thanks for answering all of those questions.

With regard to the last unread post functionality, I see what you're saying. If the implementation is going to be wonky due to slow connection speeds and mobile browsers, I'd say just axe that feature. Only leave it in if it works well, and save yourself the hassle if it doesn't.
 
I think the colors up top should match the default on the bottom.

Edit: I see that you replied to that.
Fair enough but consider this...

eJ0fR.png


I think it would look strange if the webapp's header matched because for most iOS users the Safari navigation will ALREADY be above the webapp's header and it would look like there are two iOS headers. I think making them different helps you know where Safari ends and the webapp begins. Also, non iOS users won't even have the Safari footer stuff so making it match makes no difference for them.
 
Fair enough but consider this...

eJ0fR.png


I think it would look strange if the webapp's header matched because for most iOS users the Safari navigation will ALREADY be above the webapp's header and it would look like there are two iOS headers. I think making them different helps you know where Safari ends and the webapp begins. Also, non iOS users won't even have the Safari footer stuff so making it match makes no difference for them.

Great point. I say keep it as is, with the NeoGAF-branded color scheme. No point making the web app's UI match the UI of just one particular browser on one type of phone. I usually browse in full-screen mode on my Android anyway.
 
The one thing im missing is a prev page button at the TOP of the page. I have to scroll down all the way each time
 
will we still be able to disable the gradients and stuff? I like the flatter look when it's disabled on the secondapps app.

something like this

H65h6.png
 
I vote you make a beta website where we can trial the new skins and functionality.

Like www.secondapps.com/neogafbeta or something like that. Would really need to feel it to give any kind of good feedback methinks.

Either way, super pumped for this all to get official'd.
 
I vote you make a beta website where we can trial the new skins and functionality.

Like www.secondapps.com/neogafbeta or something like that. Would really need to feel it to give any kind of good feedback methinks.

Either way, super pumped for this all to get official'd.
Agreed. In the name of.... feedback. :p

I think the toolbar could be further trimmed, it's a bit thick for no good reason, as it is now.
 
will we still be able to disable the gradients and stuff? I like the flatter look when it's disabled on the secondapps app.

something like this

H65h6.png

oh dear. I really like this look.



Oh, one other thing: if tapping on the top bar is now used to drop you down to the bottom of the page, is there going to be another shortcut to switch forums? because that's what tapping the forum name does now. Can it be added to the menu drop down without feeling too cluttered?
 
ckohler, I've been using this app for years on my iPod touch, and now my WP7. Idk what's going to happen with the 'official app' and this web app but I want to give you money for your efforts. i've used this app several times a day for (three?) years. I can't thank you enough so I could at least throw some change or a five your way.
 
ckohler, I've been using this app for years on my iPod touch, and now my WP7. Idk what's going to happen with the 'official app' and this web app but I want to give you money for your efforts. i've used this app several times a day for (three?) years. I can't thank you enough so I could at least throw some change or a five your way.

I second this. I'd be willing to contribute for your efforts as well.


This right here, this is what's up.

Get on it, ckohler.

I dunno, man. Unless you're using WP7, that flat lowercase design is gonna look pretty out-of-place on almost all other devices. A nice gradient is still welcome in UI design, IMO. This movement to flat primary colors and white silhouettes can suck my donkey dick.
 
No one who is awesome wants to take our money :(
 
TBH, the more I think about it, the more I want it to be as minimalistic as possible, esp. with ad inclusion. Something like this;

gKjM7.png


Where it's always there, no need to scroll anywhere, but is takes up a tiny footprint. Plus you can fit more button options in there as well;

T52t2.png


I just don't think we need a huge bar just to let us know what board we are on, or page x of x, since that can be found in the header safari/browser bar title, anyway.

Excuse the shit mockups, just trying to get the idea out there.

PS. I don't really like the lack of gradient or iOS notification center type BG texture for that look, but I definitely dig the arrow, and maybe even the non-colored N-ball logo.
 
I dunno, man. Unless you're using WP7, that flat lowercase design is gonna look pretty out-of-place on almost all other devices. A nice gradient is still welcome in UI design, IMO. This movement to flat primary colors and white silhouettes can suck my donkey dick.

me. you. outside. now.

edit: I like that idea, Sentry.
 
I dunno, man. Unless you're using WP7, that flat lowercase design is gonna look pretty out-of-place on almost all other devices. A nice gradient is still welcome in UI design, IMO. This movement to flat primary colors and white silhouettes can suck my donkey dick.
I think it'd fit pretty well on Android 4.0 as well.
 
For me, the colors just seem off in the new mockup. Blue, but they sort of blue, and then gray... it looks like something i would do since i can't tell colors that much. but, i can tell these colors are off. I don't know. i really don't like the coloring.
 
Heh, I knew posting those screenshots was going to just spur debate. For the record, I do like D4Danger's minimalist/Win 8 mockup. It's similar enough that I could even make that an option.

Sentry, thanks for the suggestion but that's TOO minimalistic for my tastes. There's not enough information about what you're looking at. Besides, once you start scrolling, whatever extra space savings are at the top becomes irrelevant anyway. Most importantly, I want to avoid "floating" things to keep the design as compatible as I can across browsers.

I'm still interested in adding the ability for users to override the css themselves should they be CSS wizards as long as I can use inline CSS to keep the ads from being affected.
 
Just some feedback from a functionality pov...I notice I use the jump to top with topbar/back to forum two-click so much in your app, now that the header has a drawer with icons instead of a dedicated button I guess there'll be an extra click involved...can the drawer stay open until you close it again? Personally I'd leave it open constantly between all pages, I just don't know if that's feasible for your webapp. I bet the drawer and icons could still be functional if the whole thing got a little bit smaller too, right now it looks a bit big compared to the title bar. Love your work Chris!

PS: The neogaf pokeball has some sort of clickable functionality, right? Maybe it could be the quick-back if the drawer can't persistently stay open or something...
 
Why not just keep it the way it is (plus ads)? It's so visually perfect already, that all it really needs is functionality stuff like post history, etc.

I love you just the way you are, NeoGAF web app
grin.gif
 
Just some feedback from a functionality pov...I notice I use the jump to top with topbar/back to forum two-click so much in your app, now that the header has a drawer with icons instead of a dedicated button I guess there'll be an extra click involved...can the drawer stay open until you close it again? Personally I'd leave it open constantly between all pages, I just don't know if that's feasible for your webapp. I bet the drawer and icons could still be functional if the whole thing got a little bit smaller too, right now it looks a bit big compared to the title bar. Love your work Chris!

PS: The neogaf pokeball has some sort of clickable functionality, right? Maybe it could be the quick-back if the drawer can't persistently stay open or something...

I think he said on a recent post that you will still be able to do the scroll to bottom by clicking on the thread title, just like you do now.
 
Heh, I knew posting those screenshots was going to just spur debate. For the record, I do like D4Danger's minimalist/Win 8 mockup. It's similar enough that I could even make that an option.

Sentry, thanks for the suggestion but that's TOO minimalistic for my tastes. There's not enough information about what you're looking at. Besides, once you start scrolling, whatever extra space savings are at the top becomes irrelevant anyway. Most importantly, I want to avoid "floating" things to keep the design as compatible as I can across browsers.

I'm still interested in adding the ability for users to override the css themselves should they be CSS wizards as long as I can use inline CSS to keep the ads from being affected.
That's fair enough, either way I think minimalism should be key here. For example, why have a whole other bar pop down for the button options, and instead have it appear above the current bar?

If that makes any sense... either way, this will just be great in any form, tbh.
 
The more I keep using what we already have, the more I feel like i'm going to miss the iOS look and feel. Kinda hoped that we would be able to fine tune that style and functionality more.

It makes a lot more sense to have a unique style, though, for everyone not using iDevices, but I still hope somehow (though custom themes/CSS editing etc) we'll be able to still use safari style look.

Personally, i've always been annoyed by a few things like no retina and thick bars, I would theme it (for myself) something likes this (bottom/top of the page);

sdf.png


I'm still hyped for the new look, though, it'll definitely give the web-app a more 'distinct' feel. All in all, though, it comes down to what buttons are needed and what isn't, and where to place them.

When viewing a board, the only vital information on top is the board title. The page x of x isn't really necessary up there for a board, since there'll be thousands of pages anyway.

The bottom vital info is a back button to the all forum boards view, page x of x, and a next page button. There shouldn't need to be a jump to page button, if you can just tap the page text to pop that up.

As you said, shortcuts can be used, like tapping the board title to jump to the bottom of the page, or hitting the N-ball to go back to to the forum (if you're in a thread) or board list view.

So in the end, the only real vital buttons needed is a create thread/post button and a search button.

right edge [N-Ball/back button] — ["Off-Topic Discussion"/jump to bottom] — [Search button] [New Thread button] left edge

[top ad]



[bottom ad]

[|< (first page)] [<prev page] — ["Page X of X"/jump to page] — [next page>] [(last page) >|]

With the lack of search in-thread, there would only be the new post button on the top bar, when you're inside a thread, giving more room for the thread title to be displayed (instead of "Girl-Age of mis.." etc).

As it is now, we have a whole bar for the thread title, a "User: X" bar at the bottom, and the iOS style toolbars along with it.

Stow away options are great when there are a lot of options, but here, there aren't enough options that can't be routed elsewhere (imo) to have dedicated buttons for.

So in the end we could actually be saving space, even with ads in consideration, versus what we're currently using. Just two bars, one on top, one on bottom, with everything in there.

I'd do a mockup better explaining what I mean, but tbh, I don't know what kind of style (i.e. non-iOS) to go with. I'm on board with the gradient blue bar and colored N-ball, just needs to be a bit thinner.

Sorry for the rant, it's just that every time I use it on my iPhone I kinda can't wait to get an official updated version. It's gonna be awesome no matter what, though. :D
 
I tried a design without iOS style elements/buttons and it looked like crap. Like some janky, cheap website. I decided to keep it iOS because its a solid, simple UI everyone understands and it looks elegant. I don't want to try and come up with a non-specific UI because frankly it'd be throwing away all the smart work that went into making the iOS UI easy to use. Sorry it doesn't match your phone but I also don't want to have five versions of the same UI either. I think on the whole, most mobile sites mimic iOS so I'm guessing you're used to it.
I'm a bit confused. You're changing the color scheme to match GAF branding and that top menu is more similar to Android or Metro than to iOS... Shouldn't you just pick one of the two instead and make it coherent? I'd love to see what you could come up with that differentiates GAF from all the genetic mobile sites out there.
 
The iOS theme is fantastic and looks great on iPhone which I am guessing is the smart phone of choice for most of GAF. I don't see why one would need to mess with something that already is great.
 
Status
Not open for further replies.
Top Bottom