
Ask HN: New attempt at mobile markup – keep or bail? - dang
We just deployed a new attempt to make HN work better on mobile. Should we keep it? Feedback, please.
======
g0atbutt
This looks (and more importantly, works) much better than before.

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](http://imgur.com/5LgB1xB.jpg)

Here is what the comment page looks like ==>
[http://i.imgur.com/ugOASR5.png](http://i.imgur.com/ugOASR5.png)

This is the viewport bug when you try to enter a comment ==>
[http://i.imgur.com/i0Ekiod.png](http://i.imgur.com/i0Ekiod.png) and
[http://i.imgur.com/T0NDIFc.png](http://i.imgur.com/T0NDIFc.png)

~~~
joezydeco
But why does horizontal mode (my standard casual reading mode) look so blown
out? ==> [http://imgur.com/5Z6q6wI](http://imgur.com/5Z6q6wI)

(iOS 9, iPhone 5, Safari)

~~~
kylec
Looks like they need to use -webkit-text-size-adjust: 100%

~~~
chris_wot
If they can fix this, then I'm all for the new layout!

------
ggreer
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.

~~~
akamaka
Alternately, how about being able to undo a vote, like reddit?

~~~
eru
I remember we discussed that. I think once-for-all votes were an attempt at
social engineering to shape the site.

~~~
PhasmaFelis
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.

~~~
riffraff
"think thrice before using your votes". I remember this being also used as the
justification for not having clearly separated up/down buttons.

I totally disagree with it, fwiw.

~~~
lewisl9029
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.

~~~
OJFord

        > 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.

------
sinatra
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.

~~~
kdamken
This 1000x. As a frontend dev I'd be happy to volunteer to invest the time to
make sure this works on the current range of viewports.

------
jamesjyu
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.

~~~
cmelbye
These are good suggestions, and probably easy things to tweak.

------
dredmorbius
Keep.

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.

~~~
dredmorbius
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.

Screenshot: [https://m.imgur.com/5rCdRdI](https://m.imgur.com/5rCdRdI)

Mind that's a 10" display. Fonts are small for my eyes. Context-zooming on
main content helps somewhat, but only marginally.

------
probably_wrong
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.

[1] [http://i.imgur.com/akAyUxP.jpg](http://i.imgur.com/akAyUxP.jpg) [2]
[http://i.imgur.com/NWVSHMW.jpg](http://i.imgur.com/NWVSHMW.jpg)

~~~
zamalek
> The design looks actually worse on Windows Phone[1]

Looks almost identical on WP 10 (Edge).

> I've downvoted way too many comments due to that.

I don't vote on my phone due to this.

------
joezydeco
It's an improvement, keep pressing on.

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
    

could be simplified to

    
    
        200 pts by foobar 8h ago | flag | 192c

~~~
clamprecht
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.

[https://en.wikipedia.org/wiki/Fitts%27s_law](https://en.wikipedia.org/wiki/Fitts%27s_law)

~~~
vkjv
Off-topic, but I really wouldn't be surprised if it was clicked _more_ often
than the link to the source.

~~~
wruza
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.

------
luso_brazilian
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

[1] [http://imgur.com/4uPlzPB](http://imgur.com/4uPlzPB)

[2] [http://imgur.com/18mp2TH](http://imgur.com/18mp2TH)

~~~
forgotpwtomain
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.

------
mrb
Keep it. But on Chrome for Android, even on a 1080p display, 31% of the screen
width is wasted! [http://imgur.com/MNVnanN](http://imgur.com/MNVnanN) Wasted
screen space is my #1 pet peeve on mobile.

~~~
pavanky
I am not seeing that problem on my device. What version of Chrome are you
using?

~~~
mrb
Chrome 46.0.2490.76 on Galaxy S4.

------
hanniabu
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...

[http://imgur.com/zaHK3PC](http://imgur.com/zaHK3PC)

~~~
emilioolivares
Agree, I'm getting the same thing on an Iphone 5s. But much better than
before!

~~~
binwiederhier
Same here. On Android, OnePlus + Chrome

------
alpb
Just adopt
[https://cheeaun.github.io/hackerweb/](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](http://i.imgur.com/idgEFon.png)

~~~
jeffjose
Your screenshot has a different username. Thought I'd let you know.

~~~
kercker
It is the image from this comment
[https://news.ycombinator.com/item?id=10489733](https://news.ycombinator.com/item?id=10489733)
.

------
cstuder
Next up: Comment thread folding.

It's the one feature that keeps me from switching from
[https://cheeaun.github.io/hackerweb/](https://cheeaun.github.io/hackerweb/)
on mobile, or uninstalling the Hacker News Enhancement Suite in Chrome.

~~~
teach
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.

------
tequila_shot
Don't bail. But here are my suggestions.

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.

------
boulos
Huge improvement (iPhone 6s).

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.

------
dzdt
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.

~~~
Isamu
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.

~~~
DanBC
This should be a manifesto, a bit like "contrast rebellion"

------
51Cards
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.

~~~
gbog
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.

------
mgraczyk
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.

------
maxsavin
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.

------
kogir
It goes off page:
[https://www.dropbox.com/sc/fynq1jrekppuonc/AADGsGuFFeWKye7hp...](https://www.dropbox.com/sc/fynq1jrekppuonc/AADGsGuFFeWKye7hpTpmQkjSa)

~~~
guelo
I see the same thing on Android Firefox but you can pinch to zoom out and it
ends up still being readable.

------
polemic
Much better here (android). Some things:

1\. Possibly too much whitespace left/right of content.

2\. Are the rank numbers necessary, or could they be moved to the meta-detail?

3\. Bigger upvote and comment targets would be nice.

~~~
gojomo
Moving rank to the meta-detail line (alongside the point-count) could work
very well.

------
halisaurus
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.

A good start, but still not there IMO.

------
Nib
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.

------
samuelb
The margins are a bit too big (Chrome, Galaxy S6)
[http://i.imgur.com/MYTVihG.jpg](http://i.imgur.com/MYTVihG.jpg)

~~~
imron
I get similar margins on an iPhone 4s running iOS 7. It's quite a bit of
wasted space - maybe 15-20% of total screen width.

Other than that, it's a big improvement.

------
TheCoreh
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.

------
conroy
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?

~~~
bossx
Agree with reducing left/right margins by half, looks a bit squashed on HTC
one. Overall much better than before.

------
stankot
Much better, but I will still use this web app
[http://cheeaun.github.io/hackerweb/](http://cheeaun.github.io/hackerweb/)

Don't bail, but maybe redesign the whole page, and get rid of the tables in
the markup?

------
51Cards
Definitely a good start... Far easier to use already. Comments screen seems
too wide... Scrolling left and right but yes... Great start.

------
huhtenberg
Here's how it looks on iPhone4 -
[http://i.imgur.com/olj9ocC.png](http://i.imgur.com/olj9ocC.png) \- lots of
wasted space and a messy header.

For the header, I'd consider splitting it into two lines, like this -
[http://i.imgur.com/7EAROA8.png](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.

------
guygurari
Keep it. The text flows nicely now -- that was my biggest problem with the
previous mobile UI.

------
deanclatworthy
can we make the up/down vote buttons for comments bigger or at least in
different places? It's impossible to hit correctly unless you zoom in.

------
plainOldText
I actually think it's much harder to read in portrait mode since the titles
have all different lengths. It's okay in landscape though.

~~~
brooksbp
+1

------
rubiquity
I think it is an improvement and was actually coming to Ask HN to ask if
anyone else was seeing this. I'm glad I saw your post first.

~~~
dang
Sorry to beat you to the punch, but I learned my lesson the last time we tried
something like this.

------
Smirnoff
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.

------
MBCook
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.

iOS 9.1 on iPhone 6.

------
adricnet
Keep please and thank you for working on this!

This is much more readable on Android/Chrome Moto G, will try more later.

------
wesbos
I'm finding the font size is too small on mobile - generally you want to go a
little bigger on mobile.

------
DTVD
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](http://i.imgur.com/bMcUcjU.png)

------
sillysaurus3
* Bail. Only six stories are visible at a time.

* Please add a way to turn it off, showdead-style. I miss the old style.

------
devit
On desktop Firefox, the page width seems to have a minimum of 500-550px, so it
looks like there is something broken since phones are 320px minimum.

Also below 375px it seems to revert to the desktop layout (?!?).

So the graphical design is fine, but the CSS implementation could use some
major improvements.

------
betadreamer
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.

------
epistasis
This is a vast improvement in every way, IMHO. Maybe tweak it, but don't go
back, please!

------
mikeash
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!

------
quicksilver03
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.

~~~
Sami_Lehtinen
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.

------
sotoer
Looks much better on iphone 6. No longer have to zoom to read. But some of the
UI buttons are still too small (comments, etc.)

Also, I don't think the numbers on the left add much value and may be better
replaced with bigger up vote button.

------
tambourine_man
We desperately need a mobile version of HN. I know I use it on mobile almost
exclusively.

But this is terrible, I'm sorry. As others have said, there have been dozens
of great HN mobile versions done by the community. Why not endorse one?

------
thegoleffect
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.

------
Joeri
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.

------
314
Please give me a way to switch this off.

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?

------
v4n4d1s
It's much better than before, but still doesn't feel good on my mobile devices
(Jolla, 540x960 and (Lumia 920, 768x1280).

I don't like how comments are displayed, why is there no auto word-wrap?

------
jethro_tell
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.

------
darkhorn
In the login page can you add autofocus on the username please?

------
sneak
Put the CSS on github with a set of static pages demonstrating the
article/comment page and the main list page.

Review the pull requests.

You'll have a fantastic mobile layout in a day or two.

------
leoh
Much better, but not great on iPhone 5c:
[http://i.imgur.com/beYBY5f.jpg](http://i.imgur.com/beYBY5f.jpg)

~~~
kylec
Given a choice between this and the old non-mobile-optimized site, I'd take
the latter. Everything is too squished on smaller iPhones.

~~~
leoh
Really? It looks kind of bad, but is more functional methinks.

~~~
gamegoblin
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.

------
FanaHOVA
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.

------
lwhalen
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.

------
manigandham
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?

------
johannesch
I still like [http://hckrnews.com/](http://hckrnews.com/) better. Maybe you
could cooperate?

------
brudgers
Yes. On Android it's comparable to how well the old markup worked with Windows
Phone 7, which made me wonder why people were complaining.

------
spirit555
I typically dread mobile designs but this is OK. My only wish is the article
title text is smaller or an option for smaller font sizes.

------
lucb1e
Slight improvement over zooming in manually... but my main issue is with the
voting buttons and that seems to have remained unchanged.

------
pmalynin
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.

------
eam
Keep. It at least now saves me a zoom pinch. :)

------
webXL
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.

------
polskibus
New markup is better, however it would be good if "request desktop site"
button on adroid worked for extreme cases.

~~~
csl
And iOS. I often use this feature.

------
jreed91
Maybe just me, but it seems to have a lack of padding around the edges. Also
the comment input isn't mobile optimized.

~~~
dang
What do you mean by the comment input? Some pages are still rendering the old
way; it may be that that's one of them.

If we're going to keep these changes we'll upgrade the remaining pages soon.

~~~
tedunangst
With mobile safari, activating the comment box zooms in slightly, such that it
no longer fits in one page width.

------
mdasen
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.

~~~
dang
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.

------
jxm262
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

------
amiraliakbari
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.

------
growlingoctopus
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...

------
stevetrewick
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.

------
davidcelis
it's a big improvement, but I think text is a tad too small, as are the
upvote/downvote buttons

------
pgib
Much better than the last attempt at mobile, and much better than no mobile
styles at all. Please keep!

------
jordanlev
Definitely an improvement over what came before!

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)?

------
ecesena
Pretty bad on iPhone5/iOS9.1, lot of useless margin. But at least it's
readable. Keep it.

------
natch
This looks great on my phone; please keep it. The text sizes are awfully small
but still really clear and the layout seems to work well.

One caveat is the text entry box for entering a comment is a fair amount wider
than the screen in either orientation. I hope this can be fixed.

------
eslaught
Default view of comments page seems to be too zoomed in?

[https://i.imgur.com/bDrJSHI.png](https://i.imgur.com/bDrJSHI.png)

Firefox on Android running on a Nexus 5

But once you zoom out it seems fine. And it's much more usable than the old
view.

------
hyperpape
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.

------
chrisweekly
Bail, or keep but fix text size / wrapping in nav header

iphone6 / ios9 / chrome

issues in nav header:

(1) "submit" link wraps so it's under "new", shld be same line as "ask | jobs
| "

(2) username (karma) | logout has similar issue; "logout" wraps

------
minimaxir
Doesn't hurt, at the least.

------
nashashmi
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.

------
mgiannopoulos
Looks very good compared to the previous state. Keep it! The header menus wrap
([http://imgur.com/0V9vrZq](http://imgur.com/0V9vrZq)) but it is a minor
thing.

------
free2rhyme214
This is a great first attempt but it's a little difficult to read the text

------
Moto7451
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.

------
kercker
The comment page doesn't scale well with Firefox on my hm note 1s. I have to
manually zoom out to get the full view.

That aside, the homepage looks good. I'd like the new look be kept, with the
comment page rewritten.

------
nessence
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).

------
some1else
Keep.

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; };`

------
ekianjo
Much better, Please keep it.

------
dba7dba
KEEP!! This looks so much better on my note 4. No more zooming in and out.

------
aclissold
It is SO GREAT to be able to read things without zooming or scrolling!!! I'm
so excited!!!

It needs minor tweaks to make it uniformly readable across arbitary screen
sizes, but in general this just made my day!

------
ju-st
Better. But still bad. Lots of wasted space and no line break. Android, FF:
[http://i.imgur.com/JublCrT.png](http://i.imgur.com/JublCrT.png)

------
z3t4
For me it's just the A:tag that is slightly bigger. I have to do slightly more
scrolling now, but that is acceptable.

I still have to zoom in to up-vote or click on comments though, but that do
not bother me.

------
lai
Keep. This is way better than before. No need to zoom in like crazy now.

------
wpeterson
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.

------
xdinomode
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.

------
mpnordland
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

------
jasonszhao
Cool, but please reduce margins to save precious horizontal space!

~~~
aclissold
Oh? I was thinking the opposite, that things look super jarring being flush
against the borders.

EDIT: Ah. It's a different story on iPhone 6s Plus than say, 5s.

------
dayjah
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.

------
m52go
Much better than before. I'm on Chrome on a Nexus 6.

The screen is zoomed in slightly by default, however, but a quick pinch to
zoom out makes it all fit well on the screen at a good size.

------
merlinsbrain
Much better, keep going

------
milge
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.

~~~
randlet
"Comments clip off the screen when you click into a comment section. When you
zoom out, they're harder to read"

Yes, this is frustrating.

------
milesvp
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...

------
885895
It feels so small on my tablet now.
[http://i.imgur.com/WG1ERvyh.jpg](http://i.imgur.com/WG1ERvyh.jpg)

------
comex
Writing this on an iPhone. It's a good start. Two things that should
definitely be bigger are the voting arrows and the "comments" links.

------
addedlovely
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).

------
nicklovescode
Thank you. Thank you!

------
bake
Much, much better -- please do keep! In fact, I just deleted the old iOS app I
was using for it and just saved the webpage to my homescreen instead.

------
cauterized
Improvement over the last one. The large voting arrows are good. Too much
wasted white space on the sides of the screen on the iPhone 5/5s.

------
mccarthydan
Ignore the nitpicking, this is a dramatic improvement.

------
dudouble
Keep it, please and thank you! [Android/Chrome]

------
frik
Please increase the size of the vote buttons on mobile or place the up- and
down-vote buttons not next to each other. (written on iPad)

------
adrianmacneil
Definitely keep it! As others have pointed out, it's not perfect, but
definitely an improvement over the non-responsive version.

------
kzahel
It's still just about as hard to read a comments thread on a mobile device.
However the main page does look a bit more readable.

------
snehesht
[http://i.imgur.com/BzqJU5S.png](http://i.imgur.com/BzqJU5S.png) on Nexus 5.

------
yousifa
Keep. Much better than before. However, text in comments is still to small
(maybe enlarge text and decrease indentation for replies)

------
Rabidgremlin
Keep - old Nexus 4

------
earino
I wholeheartedly approve. It's not perfect, so I hope you do some good A/B
testing to evolve layout. Pick a good metric.

------
27182818284
I must be missing something. It looks the same. You didn't just assume
"mobile" meant "iPhone" did you?

------
ivanstojic
Keep. Add a bit of margins, slim down metadata and make links bigger / easier
to hit. I like the improvement though.

------
Alex3917
Keep. I would add another couple pixels of padding to the left and right of
the site though when on the newsfeed page.

------
rubyfan
Keep - iPhone 6s

------
adnam
The three hardest problems in computer science are (1) cache-invalidation, (2)
naming things, (3) HN mobile markup.

~~~
adnam
and of course (4) off-by-1 errors

------
JustSomeNobody
It is near perfect in landscape on chrome for android. Portrait needs some
tweeking; especially the comments page.

------
WhitneyLand
To invoke the late Chris Farley for the love of God why can't the comment text
be larger? (iPad iOS 9.1)

------
pfooti
I like it. Just noticed it this morning.

------
jamesbrock
Keep! And increase all font sizes to at least 1em. And give this comments page
the same treatment, please.

------
snaily
Keep - much more scannable at a glance.

------
ATsch
I love the new main page. However thr comments are still to small to
comfortably read without zooming.

------
evanspa
Keep. I have a iPhone 5S and with the original markup, I'm unable to read the
site in portrait.

------
njbooher
The header bar now wraps to multiple lines when in portrait orientation on my
iPad Air 2. Not a fan.

------
panic
All the comments pages load too far zoomed in for me (iPhone 5c w/ iOS 8).
Otherwise looks good!

------
publicfig
Happy with the improvements! Can you increase the text size so you can click
on the discussion links?

------
spirit555
I prefer the desktop but if you keep the mobile (since it's not terrible)
please smaller fonts.

------
rdl
This is great -- much appreciated. Works well on an iPhone 6S in Chrome and
Safari (same engine).

------
fossuser
iOS User - I'm not a fan, don't like the text stacking and I like the regular
interface.

------
hankmander
Keep! Now just enlarge the text size so we don't have to zoom on desktop to be
able to read.

------
flexie
Keep. But make voting arrows bigger.

------
Artistry121
I like a lot. Bigger upvote/downvote buttons are my main request. Thank you
for doing this.

------
mschnell
Keep -- and keep improving. Thanks!

------
schmooser
I'm using app.hackerwebapp.com for browsing HN from mobile - easy to use on
mobile.

But anyways keep.

------
shams93
The home page is nice but the internal pages like this one still dont work for
my phone.

------
dutchbrit
Much better, I don't have to keep zooming in and this fits my screen a lot
better.

------
Beltiras
On my S5 I get a margin. IMHO it's not necessary (or should be smaller at
least).

------
asterfield
It's an improvement for sure, but cheeaun.github.io/hackerweb is way better.

------
banku_brougham
Keep it. Looks great, true to the original, and now readable on my constant
companion.

------
senthilnayagam
I now don't have to zoom, still sub-par can't we have a official native app?

~~~
ATsch
I think an official app, while nice would be a lot of work and would use a lot
of manpower HN does not seem to have much of.

there are currently many third party apps.

------
rgbrenner
Keep it. It's better than before, and makes it easier to read. iphone 6, iOS
9.1

------
dr_
iPhone 6 Plus. Definitely keep.

------
watchdogtimer
Keep. Looks much better than before using Firefox on my cheap 5" Android phone

------
davorak
Definitely better on my phone.

Easier to read by far, but requires some side scrolling for most comments.

Please keep.

------
aaronbrethorst
Huge improvement, thanks Dan!

------
stewbrew
With all due respect, but did somebody even check the comments page once?

------
meerita
Looks decent on my Nexus 6.

------
waves
Keep. No zoom needed. Great

------
toomuchtodo
KEEP!

------
geobmx540
Looks much better on WP ;)

------
andyjohnson0
Looks good, although the voting buttons could do to be larger. Keep.

------
hestefisk
Yes please! Much better.

------
Lambent_Cactus
Much nicer - keep at it!

------
seldo
Not bad, please add mobile view to the login page as well :-)

~~~
dang
We will.

------
davidhariri
Keep going keep going!

------
mindcrime
Looks pretty good to me, using Android on a Galaxy Note 4.

------
thomas
Keep it, definitely an improvement (and a nice surprise!)

------
binarycrusader
A step in the right direction but still meeds more done.

------
tallerholler
it would be nice to have a button to use desktop version at top or bottom.. on
iOS it's nice but I also like seeing more headlines at one time

------
vesche
Definitely keep, makes use on mobile much easier.

------
jiantastic
Potrait and landscape have white bars on the S6

------
jjuhl
Works well. Keep.

------
hazbo
Much better on the iPhone 6. Don't bail.

------
forrestthewoods
Better than before. Keep. But continue work.

------
azernik
Not perfect, but definitely an improvement.

------
rubyn00bie
iOS user-- I prefer the old version. I also hate not being able to pinch and
zoom to adjust what I'm viewing.

------
DrScump
may I ask what triggers mobile-specific behaviors? \- screen size? \- user
agent? \- O/S? \- browser ID?

------
dilap
it's better! half way to good imo.

------
wcummings
Looks fine on BBOS10 default browser

------
chrisked
Keep it and move forward improving.

------
grey-area
Keep, please.

------
cyptus
keep it! much better, than before.

------
tdiggity
great update. Keep improving this!

------
cseelus
It's an improvement, so yes.

------
ashish01
Please keep

------
rjcz
Finally!

Keep it, please!

------
burritofanatic
Keep

------
adnanh
Keep

------
nikanj
Keep!

------
mikekij
Keep!

------
andersthue
Keep it!

------
program247365
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/](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-...](http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/)

* <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-...](http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-going-now/)

Specifically for mobile:

* Responsive Design: [https://developers.google.com/web/fundamentals/design-and-ui...](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/)

* Touch Targets: [http://www.smashingmagazine.com/2012/02/finger-friendly-desi...](http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/)

I hope some of those tips are helpful. Keep going! Keep learning!

------
api
Keep.

------
tuananh
whatever it is, it will def. be better than the old HN on mobile.

------
zipotm
ITS THE BEST! KEEP IT :)

------
tke248
keep it looks better than before

------
ghosh
keep

------
StephenConnell
Keep it!

------
DrScump
it's not working at all on my rotary phone.

------
tempodox
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.

------
gopowerranger
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.

~~~
DanBC
Let's see your re-design.

------
anon3_
Keep, nexus 5.

Dang btw:

\- [https://developer.chrome.com/devtools/docs/device-
mode](https://developer.chrome.com/devtools/docs/device-mode)

\- [https://developer.mozilla.org/en-
US/docs/Tools/Valence](https://developer.mozilla.org/en-US/docs/Tools/Valence)
/ [https://developer.mozilla.org/en-
US/docs/Tools/Responsive_De...](https://developer.mozilla.org/en-
US/docs/Tools/Responsive_Design_View)

You probably answered this elsewhere, but I can't find it. What has kept you
from using a CSS framework?

------
datahack
It's great but needs qa badly.

------
bitshare
Yes please keep it! It was so hard to read before on mobile.

