I'm on Firefox Mobile right now on my tablet, a Samsung Galaxy Tab Pro 8.4. The full site looks perfectly good with the only exception that "click targets" are annoyingly small.
My suggestion is that each user should be able to set his desired text size / DPI resolution per device (tracked via cookies of course), so that I can have properly clickable comment links and upvote buttons and so on on my tablet, and keep everything as before from my laptop.
While I definitely support the larger format, I'd like to see the top bar laid out in a more mobile-friendly manner. Currently it feels like I've done Ctrl + Plus on the page a few too many times, rather than the site being properly optimised. Shrink the font by one notch and I'm reasonably happy. I realise that this is a work in progress though.
Keep - but dang et. al. can you make the comments link target touch area slightly bigger somehow? It's way to easy to launch the article link when you're trying to tap the comments link.
Thank you for making this. My one suggestion would be to make the upvote/downvote arrows larger and farther apart. I'd say around 5% of my votes on mobile are incorrect. Often I'm lazy about zooming in to make sure I hit the correct arrow.
Actually, I'd like that change on larger devices as well. I've often misvoted on my Surface. As large touchscreens become more popular (iPad Pro, the Surface line, etc), I could see this becoming a problem for more users.
Edit: I see white margins on my iPhone 5, but not on my iPhone 6. It looks like you need to tweak the media query in the following css:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
...
The iPhone 5's device width is 320px. Changing that 375 to something lower should fix the issue.
What about placing the vote buttons on the left side of the ranking number?
There would be less of a chance to misclick and end up clicking the article link instead. You would also have the opportunity to make more room for the vote buttons since you can then afford to place the ranking number closer to the article title, since the ranking number is non-interactive.
I'm really curious what it was trying to social-engineer. I've seen dozens of sites with vote buttons and all of them except HN allow you to change your vote, because why wouldn't you? It's easy to engineer and obviously superior.
I personally think "having an interface that makes it nigh impossible to downvote when you meant to upvote" should be a prerequisite for the "think thrice before using your votes" goal...
Well at least they're doing something to address it now.
In any case, I still disagree with the lack of a reverse vote option, especially when upvoting also serves as an archival mechanism, and downvoting removes the opportunity to use that functionality permanently.
> especially when upvoting also serves as an archival mechanism
Right - it's not even about _changing_ votes. Just an hour or so ago I accidentally upvoted the wrong submission (on mobile), so now that's stored in my "saved stories"; nothing I can do about it.
Also it's a little unfortunate that the up-vote button can be easily mistaken for a link-to-parent button. I've lost count of the number of comments I've up-voted when actually I just wanted to know who they were replying to.
Please please keep it. It's not perfect (comment text still small, buttons & links are small, etc), but it's much better than before.
There are surely hundreds of web designers who'd be more than happy to submit their proposals for fixing the mobile markup for free. It's disappointing to see that the website that I spend the most time on on my phone still didn't have a mobile markup till today. Thank you for doing this. Now, please let's move forward, not backward.
HN could get a full redesign (with mobile) by opening up to submissions. I would bet plenty of designers would love to get a shot at getting recognition for revamping this site.
Awesome! Yes, keep it, and please press on. Here's some feedback:
- The tap targets for the menu at the top (new, threads, etc) is too small. You can make it bigger, and put the more little-used items into a "more" button.
- The tap target to get to the comments and flagging are way too small. Flagging isn't common, so that could be more hidden. Comments could be a right arrow button to the right of the title link. Comments are really important in HN, so it should be easy to get to.
- Upvote target is way too small.
- Body text for comments are too small.
In essence, I recommend restarting from scratch with a new template for mobile. Just making some css tweaks is a good first step, but maintaining a separate template that optimizes for mobile will be worth it.
It's not a huge improvement, but it's slightly better.
I'd actually sent HN a long review of mobile experience on a 10" tablet acouple of days ago and received a response from dang earlier tonight tipping me off to this. I'm not sure I'd have noticed without that.
In vertical orientation, viewport width is better, and an annoying glitch where font size changed apparently randomly on some nested comments is gone.
Overall UI/UX of links and controlls needs improvement. Especially voting arrows. I'm told an undo is in the works.
My view is that HN's basic page layout needs a full revamp at least internally, to give better styling control via CSS. This doesn't mean huge theme changes, though that's also possible.
Building the page around a sane line length would be a really good start.
What issues are the result of braindead mobile browsers (lack of ctrl-+ font zoom, click registration errors, left/right click distinction, click vs select, etc.) I don't know, though I suspect that's part of it.
Revisiting this in landscape mode: the main body text is too small and too wide.
Again: for virtually all content, max width of ~35-45em, with a slight margin (I really don't like text flush with screen edge except on the very narrowest of displays, 1-4em margin responsive across a set of displays from >30em to ~70 would be about right).
Zoomable font size holding page to fit within viewport would be a big gain.
The design looks actually worse on Windows Phone[1,2]. The text is (or feels) a bit smaller now on portrait mode, so I'd have to switch to landscape. And the top menu is out of alignment. (Edit: The text is definitely smaller. I think it used to reflow nicely with bigger text but now it doesn't, forcing me to zoom out all the way)
Since we are talking about mobile, I'd focus on improving the arrows - I've downvoted way too many comments due to that.
I agree strongly (on WP8.1). However, the change clearly improves things for people on some other mobile platforms, so can we have a user preference for whether we're served the desktop or mobile version when a mobile UA is received?
At least you get some margins on the home page. Looks a mess on my device. Also, when I tap through to comments, half the page falls off the right of the screen until I double-tap the screen.
One thing I'd do is find a way to minimize the detail line below the headline. It doesn't need to be as large - it tends to wrap into a second line (at least on my iOS 9.1 iPhone 5s).
The detail line also doesn't need to be as verbose, IMO...
e.g.:
200 points by foobar 8 hours ago | flag | 192 comments
Although I would recommend keeping the "192 comments" link at least as large as it currently is. That's probably the 2nd-most tapped-on link (after the link to the source itself), and it's fairly difficult to aim correctly on mobile. Making it even smaller will make it harder to tap.
I always go to comments before clicking on the article link. While I'm reading, post can go away from current HN page and it is hard to locate it again.
Ps. iPhone4 is not compatible with new layout at all.
The attempt to improve the mobile layout for this site seems to be underway but, like the previous aborted attempt, it doesn't seem to have started well.
In the images [1] and [2] below are the screenshots (taken on an iPhone 5 with the latest iOS) of HN homepage (where the changes seems to have been published) and article page (where it seems to be unchanged) to illustrate the problems:
1. There is a padding in the body (the white space around the content) that wastes precious screen real state.
2. The font size in relation to the screen width was increased without the proper adjustments in the layout. That caused:
a. The top links to become cluttered and disorganized
b. Both the top and bottom links to span multiple lines without the proper spacing between then, making it easier to click the wrong link
c. The article links and other information to reach the end of the line more often and, associated with the lack of right padding in that area, makes it touch and sometimes spill over the right margin over the white background.
It is very important to have a better layout for mobile devices on HN specially because it is very hard to interact with the site (upvote, click articles or submit) but IMO it should be properly designed, implemented and tested in multiple devices and OS before deployment.
This last point is the most important of all. It is very tempting to implement responsive design via media queries and to neglect tests in the bottom and top range causing screens too wide or too narrow to fail.
Apologies for the long and public post. Hope it helps
Absolutely - while it would be very nice to have an improved mobile experience for the default site as it currently stands this seems quite a bit worse than many of the currently available HN-Reader Apps.
Keep it. But on Chrome for Android, even on a 1080p display, 31% of the screen width is wasted! http://imgur.com/MNVnanN Wasted screen space is my #1 pet peeve on mobile.
Keep, but as others suggested it can still be tweaked a bit.
I'm on android chrome and below is what I'm seeing, it would be great to remove the white space on the sides like others have shown it is on the iphone...
Just adopt https://cheeaun.github.io/hackerweb/ it does wonders on phone/tablet form factors. This design will not easily accomodate slightly larger displays such as tablets very well. This screenshot someone posted points out a lot of CSS problems regarding font size and the navigation layout: http://i.imgur.com/idgEFon.png
I agree. I haven't used anything but this on mobile since the day I found it. The comments links are much easier touch targets, and built in back and forth navigation. 10x easier to read. (Not that I don't appreciate the work the HN guys are doing!)
It's the one feature that keeps me from switching from https://cheeaun.github.io/hackerweb/ on mobile, or uninstalling the Hacker News Enhancement Suite in Chrome.
Agreed. This is the straw that nudged me back to Chrome after experimenting with Firefox for a month or so. I just couldn't bear doing without comment thread folding.
Make the "post" page more mobile friendly. Currently I need to scroll a lot to read the content. When I mean post page, I mean the page that comes up when you click on a post.
May be add a very teeny little margin. Again I know HN is more towards KISS, so you can ignore me here.
Apart from that, the rest works great on iPhone6. Good job.
Now that you're returning to different results for mobile vs not: how about Upvote on the left (where it is) and downvote on the right of "hours ago"? I don't want the buttons bigger (and I suspect others don't either) but I would prefer not to accidentally up/downvote incorrectly.
Please make easy url for mobile users who want the desktop version! Auto-detect without opt-out sucks.
I like the desktop version better than the new version (android/chrome). I like the tiny fonts for reading. Hitting tiny UI elements is hard, but zooming in then hitting is easy enough. The new big fonts + huge front page margins means much less content visible.
this++ to opt out of the mobile version. This should always be possible.
Tips for mobile developers:
Don't make it impossible to zoom.
Don't make it hard/impossible to get to the desktop version.
Don't make it hard/impossible to view in landscape (I am amazed at the "rotate your device" popups)
Don't make your popups impossible to dismiss on mobile (can't get to the X due to size/positioning)
Don't download megabytes of javascript to display a small amount of text content.
Do support "reader view" (in mobile Safari) or equivalent, so I can get a view that is simply readable AND accessible. Sorry that this overrides your hard work, but really I just want to be able to read your content. Your ads are fine, if they don't use all my bandwidth.
One thought... Use the full screen width on the main screen. On chrome android there are large left/right margins... 20% of the screen space is wasted.
Same here, with Firefox for Android. Left and right margins are not necessary. Also, please let all text wrap and let users zoom in and out the way they want.
The main difference I notice is that I can no longer double-tap to zoom on the main page. I can learn to get used to pinch zooming, but it will be more difficult to use HN with one hand on my large phone.
I have to zoom because otherwise it's impossible to click the correct links.
It's a good step! I have suggestions to clean it up:
1- You should add a margin on the left and right side so that the content doesn't bleed to the edge of the screen. (10px would keep it aligned with the input bar on iOS Safari).
2- The floating login link looks weird, I would just add it along the rest of the links below "Hacker News". To keep it tight, only show the Submit link if the user is logged in.
3- Add margin to the logo and make it bigger. Also, the entire orange bar could be made more spacious.
Definitely a step in the right direction, but very difficult to read. The font is far too small and all links are similarly too small to allow easy tapping.
This comment form could also use work. It doesn't fit the width of the screen, so I have to pinch/scroll to see what I've written then maneuver back to type. Nor does it auto expand or allow manual resizing. Just trying to scroll risks pull-to-refresh in Chrome for iOS or some embedded WebKit browsers.
I'd also say the navigation could be addressed. The first comment about sizing is a start, but the separate site and account navigation lists don't have enough space now, let alone once you up the font. Some sort of collapsing/hidden/drop down menu might need to be considered if you intend to keep 8 independent links with sufficient padding for accurate tapping.
I hope I'm not too harsh, but a straightforward no will be my answer.
It's a work in progress, but atleast on an iPhone 5, it seems to be worse than the desktop version of it. It does save me a pinch or two, but at the end it doesn't look user friendly and the upvote/down vote button are still the same. And commenting doesn't seem mobile friendly to me. So essentially the only 2 things a user should be doing on HN: comments and votes haven't improved.
There is a web app, namely HackerWeb, which even though lacks enough functionality but looks more humane and real. Try that out; and if not copy it, atleast take hints to improve your version of the site.
One more thing, why don't you guys come up with an online open contest, and let the community hack a newer version? That'll be fun, and make your lives a little easier as well.
Just opened the page on my phone and immediately wondered why the text was so readable without having to zoom in. Then saw the empty space around the page was gone, and then read the top post and it all made sense. This was a very pleasant surprise. I'd really like if you kept it, big improvement.
The left and right hand side margins are too large. Any chance you can use padding instead of a margin so there isn't a white border around the whole page?
For the header, I'd consider splitting it into two lines, like this - http://i.imgur.com/7EAROA8.png. That is, keep top line for user-specific items, and put the rest in the bottom line. This also means moving "submit" to the top and hiding it when a user is not logged in.
It's definitely better than the previous version. But, honestly, I already gave up on browsing Hacker News on mobile. Instead, I just use a dedicated MiniHack App.
I think it would be cool to open up API even more and let community create amazing apps for you. Maybe create a contest for people to develop native apps? Perhaps, a winner could get an interview to get into YC or YCF.
I'm not a fan as I can't see as much on the homepage as I could before. I know the font was small but it didn't bother me.
Now it feels kind of crowded, lots of wrapped text.
Seems I'm in the minority though. Agree that the up/down arrows are still quite small, but I'm not sure how you could fix that, you don't have much room to work in.
Finally! please don't bail.
But the homepage in iPhone5S (and maybe all iPhone4.7 inch) doesn't take full width as in iPhone6. Here is a screenshot ==> http://i.imgur.com/bMcUcjU.png
On iPhone5S the comments are so much better (don't have to zoom) but the front page is harder to read. I suggest less padding on the side and a smaller font for the titles.
I'd say it's better than before (don't have to zoom in) just a little tweek and will be perfect.
I'm a fan. There are definitely some problems (like bad margins and such) but it's better than viewing the site with the desktop styling, which incidentally is a bar that many major sites fail to clear with their own mobile styling!
It's better than the previous layout, however reading comments still requires horizontal scrolling on both Firefox and Opera on a Nexus 4 running Android Lollipop. If you could wrap comments to the right margin it would be perfect.
Agreed. I've abandoned so many sites which are extremely badly designed. Most common reason for this is lack of text wrapping. Nobody wants to use such sites.
It would be helpful to have '{n} comments' closer to the left under thr headline in a consistent location so one's left thumb can more easily reach that. Other than that this looks like an improvement.
I prefer the new index page, better for fat finger syndrome, but also prefer the old comments page. The new comments page is too wide on windows phone, making the text too small when i double-tap to fit the width.
I appreciate what you're doing, and it seems an improvement for use on a small screen - but on an iphone 6+ it is much worse. Everything was a great balance before (and the comment pages are still readable), but now the front page is terrible.
The giant font causes titles to span multiple lines and breaks the flow of each item. It is much harder to read than before. Also it was one of the few sites that used a natural size font on the 6+ display...
Any chance we could get something like ?fontsize=14 on the end of the url for such specific tweaking?
This is a big step in the right direction. Could use a bit of work but it's good enough that it will probably replace my hn app which has never gotten commenting or voting quite right.
I'm on an iPhone 5s. It looks the same as your screenshot, and I am not a fan at all. When it first loaded I assumed something was buggy with the browser or the css. I would like the option to go back to the old version.
A step in the right direction, but still not a good experience. Writing this comment is pretty hard as well because input text takes on 200% of the screen.
I'm apparently a week late, but great googly moogly - KEEP! PLEASE! It's not perfect (on Android, the nesting is non-existent and the +1 arrows are a little small), but it is head and shoulders above what it used to be. I can read a comment thread in portrait mode without having to squint, zoom, pinch, or rotate my device, which was my biggest peeve about using this site on mobile.
Please keep it but like everyone else has said, there's still a lot to be done.
Even better, why not just ask for community help? There are already a few skins/viewer sites already that do this just fine that you can takeover or just ask for some volunteers.
This site is very very simple and would take just a few hours or perhaps a weekend of time to get a nice new layout. Why not be efficient and end up with a better product?
Add margin on the top to the YC logo, and add some margin on the bottom. And also some padding to the numbers for each story, it looks a bit awkward when they touch the screen.
Would like the comments button a bit bigger, and inside the comments to have a max-width set so that I don't have to scroll left and right.
Overall pretty nice, no more need to zoom in every time I open HN.
This is great, but I still have trouble with the small font size. Adding A+ / a- buttons would be a nice addition, even though there is a workaround.
It's got to be possible to override zoom (pinch out gesture) and have it only change the font size, so there's no text clipping. The buttons would be much simpler and easy to control though.
It would be nice if the mobile experience (or both) would use a simple javascript confirmation box when hitting "flag". Flagging seems like it should be an exceptional action and it simple to just hit "ok" as a confirmation step rather than trying to find what you accidentally flagged on the page to unflag.
We're probably going to extend 'flag' to give people a better way to report dupes, and that will require a confirmation, so yes. In the meantime, there's an unflag link, so misflags are undoable.
Using Android, Note II. I see some whitespace on the left/right side of the main page. Also, clicking to read a comment thread or adding a comment still requires me to slide around left and right. Think it's probably just the Note 2 though, iOS looks ok.
But, yeah I'd keep it for sure. Definitely an improvement
An scroll to top element, usually a fixed floating arrow in other sites, will be nice on discussion page. I've found myself scrolling a lot to see first comments and post details on this very page. As an extra arrow is not a good use of screen space, only showing it on scroll up might be a better idea.
One of the number one ways websites piss me off is the stupid "you're on mobile have a mobile layout no you can't have desktop mode" mentality. I outright won't buy from e-stores that do it. And now HN is doing it. I would expect you to know better...
Keep. First time I've been able to read the front page in portrait. Personally I'd like larger font for comments and maybe the comment width nipped in a bit as I end up zooming and scrolling which is bad for flow, but that's a trade off and I'm an a11y edge case.
Curious why it doesn't work when I shrink my desktop browser window though -- is it actually a separate "mobile version" that is only served to certain devices (instead of just having some breakpoints at narrower widths)?
Definitely a good start. Like a couple other people have said, the tap targets could generally be bigger and more spread out, but otherwise, it's a lot more readable.
Also worth stressing: so far it looks better than the status quo everywhere it's different.
I never understood why everything was built using old table html. I see the difference now is that you are td's with more reservation. I would simply switch everything over to div tags. Custom css works better this way.
I like it. If the majority end up disliking it and the look is reverted, please consider adding a confirmation step or ability to hide the flag button on mobile. That's my most common fat finger error on HN.
On iOS9, iPhone6:
The comment box and comments overflow which require horizontal scrolling or zooming out. It worked better before simply because zooming in (double tap) is easier than zooming out (pinch).
Suggestion: Increase the width of the index table and remove the body margins. The table with the id `hnmain` should have it's width changed from 75% to 100%, and this CSS should be added: `body { margin: 0; };`
It's great to see an attempt at mobile responsive design. This looks like a good step in the right direction. Here's hoping for even more work to make the site work on mobile.
It looks nice and easier to read, but I signed up to this site a few days ago because of the bad/lack of css. I don't mind having to zoom in manually as I do on reddit too.
This is indeed an improvement, but I'm only seeing real improvement on the home page, the comment page overflows to the right instead of everything on screen on my HTC One m7
Presuming this is not the end; it's a great start! I consume 90% of my HN content on mobile. I like the list view a lot more. I think commenting should be worked on next.
It looks ok in firefox and chrome on the nexus 5x. Comments clip off the screen when you click into a comment section. When you zoom out, they're harder to read.
Doesn't work well on Iphone 5s landscape. I usually checkout HN once a day on my phone. I find most sites that try to cater to phones degrade my experience...
Out of interest why go min and max device width? Why not just kick in the improved readability at max-width: 667px (or other more appropriate dimension).
Firstly, thanks so much for starting to work on this!
Let me suggest a few things:
* I'm confused as to why you're using tables for layout? Might want to consider something more modern, and use tables just for tabular data, and use divs, classes, and CSS for handling the layout: http://learnlayout.com/ You can get a lot done without using tables and <center> tags, etc.
* The width on your table is 85%, why not 100%? Let that bad boy go to the edge of the viewport, on mobile every pixel counts.
* I'd suggest adding this to your 'body' css, make that content go to the edge of the viewport:
margin: 0;
padding: 0;
* I see a lot in inline styles in your table, you might want to consider taking those out, and just throwing them into your CSS stylesheet. Those are the most specific, and override everything. Maintaining that will be hard, and painful. Unless you have some historic, or those are dynamically entered for good reason by your CMS, I'd take them out.
* <tr class="spacer" style="height:5px"></tr> Things like this could be better improved by removing, and just adding padding to the element you really wanted to add some breathing room around
* <span class="score" id="score_10487419">318 points</span> Perhaps this is a personal preference but I prefer classes over ids in CSS. Classes are more easily overridden, and have less headaches than ids on large websites http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-...
* <span class="deadmark"></span> Reason for these? Looking at it, I'm not sure what value it might provide. If it's something that isn't pertinent to that item on the page, I'd consider not rendering it, as there is nothing in it, and you, as a general rule shouldn't use spans or divs to solely help you lay things out on the page
* <td colspan="2"></td> As I see you have these there, since you're laying out with a table, I'd encourage you to not do that. Tables are markup heavy, and you'd find you could bring your page weight down if you did not use tables for layout. See http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-...
The previous version was just a desktop browser page crammed on a tiny screen. This one, you can at least read. After years and years, HN finally found out about responsive web design.
It's awful. I thought HN just didn't care. Why is this so hard? I do this every day for work and HN should be dead simple. Is this saying HN doesn't have anyone who knows how to do this?
EDIT: My initial post was from my phone. Now I'm on my workstation and I see the markup here is antiquated, pre-1998 HTML. No wonder this is so horrid. You should be ashamed but, still, I could do better.
Using the words, 'cowardly' to describe other people you don't know, and saying 'I'm better than you', to people you don't know, and saying 'my grandmother could write better markup', to a group of people you don't know, probably just made them classify you as a 'troll'.
I saw the markup, and saw they needed guidance (https://news.ycombinator.com/item?id=10489954), you saw the markup and decided they weren't worth helping. That's sad really. No one is an expert in everything.
"In order to reach collaborative nirvana, you first need to learn and embrace what we call the “three pillars” of social skills. These three principles aren’t just about greasing the wheels of relationships; they’re the foundation on which all healthy interaction and collaboration are based.
Humility
You are not the center of the universe. You’re neither omniscient nor infallible. You’re open to self-improvement.
Respect
You genuinely care about others you work with. You treat them as human beings, and appreciate their abilities and accomplishments.
Trust
You believe others are competent and will do the right thing, and you’re OK with letting them drive when appropriate."
For those not on mobile, here is what the new layout looks like on an iPhone 6s on iOS 9.0.1. ==> http://imgur.com/5LgB1xB.jpg
Here is what the comment page looks like ==> http://i.imgur.com/ugOASR5.png
This is the viewport bug when you try to enter a comment ==> http://i.imgur.com/i0Ekiod.png and http://i.imgur.com/T0NDIFc.png