I am not a css hacker but please HN change your css. smartphone experience suck | Hacker News Reader

I am not a css hacker but please HN change your css. smartphone experience suck

pastie.org

177 pointstopac98 comments

The joke is that max-scale and initial-scale set to 1.0 in the viewport meta tag would probably be all that's needed to make HN better on mobile.

Yes, but unfortunately that would be a quick, effective solution. In no way does it entail startups being accelerated into making mobile apps that disrupt some trivial aspect of daily life.

As "Ricardo Montalban" used to say on SNL, it is better to look good than to feel good. Likewise it is better to reinvent the wheel than to fix it.

I'm resigned to the fact this website will never improve at all.

Not only will they not make the website better they are incentivised to not make it better. With the current look/feel/behavior be it good or bad they have grown because of it. Any change they make is likely to make the number of users go down. And as much as the users care about quality the owners metric is always number of users so why change it if it is "working". I am on the watch for a new social tech news site that is optimized first for mobile to replace HN which I am 100% sure will be made and I will switch to at some point in the future.

HN isn't really a commercial venture. It has some pretty significant benefits for YC, but pg's mostly opposed to trying to grow the site. In fact, he seems to more or less resent the growth that has happened due to the concomitant decline in overall quality.

Even if you were consider only the benefits YC gets from HN (exposure for YC companies, recruiting, and cachet), the benefits to the first from larger crowds are, I'd bet, offset by the slow dispersion of high-value members that has accompanied the drop in quality we've seen over the last couple years.

I'd be willing to bet that HN would probably serve YC's purposes better with 5,000 - 10,000 users than with 50,000 - 100,000.

I agree with you but I think doing things like eliminating table layout and having some sort of improved experience on mobile would not affect usership at all. You could keep the look and feel the same. There are profound technical issues with the site that affect everyone that could literally be addressed in an afternoon if anyone cared.

That's strange for hn because it's known that in a vast and rich sea such as the IT world, stability leads to a slow/fast failure or disappearing. They'll have to innovate, for their business and for the users.

And yet the reverse is true too. Over-innovating which I see as almost universally putting form ahead of function kills web enterprises dead too.

I think craigslist is a great example of success going with the most minimal "innovation" - in the last ten years I can think of two changes there, and one wasn't even voluntary. First, the map-view for housing listings and second the giving up of sex services to other sites like backpage under threat from a bunch of point-scoring district attorneys.

I disagree with this, for one reason alone.

Just because you have grown in the past with a certain tactic does not make that tactic the most effective choice. And, certainly, if the industry changes so much that mobile does indeed take over the personal device market, having a subpar experience on mobile phones could then have an effect that previously wasn't apparent.

"We make the best candles in all of the world!" didn't allow the candle company to compete with the lightbulb maker. (Albeit a less than accurate comparison, it illustrates my point I think.)

Rather than just saying you're wrong, I will let Luke Wroblewski explain why changing a working website to put mobile first is rarely ever wrong no matter how successful your site has been in the past.

Video/Audio/PDF Presentation:

http://www.lukew.com/presos/preso.asp?26

If you want a mobile first version of Hacker News for now, a fan created a nice HTML5 app version of the site.

http://hn.premii.com/

You really need to read up on correlation vs. causation.

Personally, I believe that this layout deters those who might not be as serious about the content HN brings to the table. The type of person who would judge this website based on its simplistic layout is probably the same type of person who wouldn't read half of the articles posted, or contribute to the conversations at all.

This is not about design or layout, it's about antiquated and unacceptable code. You could fix all the problems I'm complaining about and not change the look or feel one pixel. I'm actually surprised that any programmer worth a nickel including PG can stomach keeping such poor code in production.

The issue isn't with the simplistic layout, it is with illegibility of the site on mobile devices.

Best mobile HN, by far: http://hn.premii.com/

Premii's too slow for me. I use Dinopost - http://hn.dinopost.com/.

I like how you can change the text size for a small phone. And it's light-weight for mobile connections - caches all the front page articles so makes it worthwhile for commuters.

I've got that set on my iPhone homescreen. And the UX is good for desktop too.

Doesn't appear to work on my lumia 800. Just says "Loading..." infinitely.

Same here :/ however typically stuff loads weirdly on Internet Explorer for Windows Phone (on WP7 at least).

It doesn't work for IE9. The author built it with HTML5 stuff, so sadly the IE9 WP7 won't work.

But you should be used to that for mobile websites, people kinda just build for WebKit on mobile.

Webkit is the mobile IE6 if you ask me. Very narrow minded design and testing from the people who usually bitch about IE6.

Oh the irony.

I don't understand the basis for that position and don't think it's true at all. Why do you think that's comparable at all?

Granted it works better but it's still developing for one platform only and excluding others.

Remember when sites were "optimised for IE". Well we're there again but it's not IE.

Actually, this was build for HTML5 browser to see if i can build native like experience. This works great on desktop and Mobile IE10/11. I was also told that this works on latest blackberry and Firefox OS.

It's not, IE6 was not standards compliant.

Neither is webkit. There are many things it doesn't do.

And it has lots of proprietary extensions.

How is it different?

Sorry only supporting IE10/11 (WP8).

Hey, thank you very much for your work on this. I use it several times per day and cannot stop recommending it.

Same on HTC Sensation with 4.0.3 on board

Sorry, I don't have HTC or anyone that I know has HTC or any other android device with 4.0.3.

I have tested on 4.0.4 and someone i know using it on samsung android 4.0.2. Not sure what is so special about HTC sensation.

If you can go to this page and copy paste what you see there may help me to get some idea about your browser.

http://www.premii.com/play/res.htm

Wow! Huge improvement on my iPhone. No more vertical scrolling of comments. If only I could vote and it had a narrower title bar. Current current title bar takes up 20% of my screen. Any perminant feaure should use the minimum space possible to maximize content view.

i agree, it has replaced native HN apps on my iphone.

Me too. Replaced all native Android HN apps for me.

There is a native Android app from premii as well, it's really nice!

https://play.google.com/store/apps/details?id=com.premii.hn

agree here too, love the distraction free mode

Same here.

http://cheeaun.github.io/hackerweb/ is also quite good.

This is the best answer by far because it's snappy and clean. You can't comment or vote, but reading is great.

This is really nice, but am I missing something or is there no way to go past the first page of content?

Looks great. But how does one comment?

You don't. The author doesn't want to handle user data.

takes ages to load and I cannot wipe to scroll, instead I have to "click" on a scrollbar. opera mobile.

Use the Mobile Github page: http://cheeaun.github.io/hackerweb/

Another vote to HackerWeb, which makes the smartphone experience better than desktop.

It's a blank white page in opera mobile whereas the normal hn style works pretty.

Works fine on Mobile Safari. Have not used Opera...

That's weird. I'll be looking into it.

before you waste time with some "software that does exist, just like there never was a matrix sequel", I use opera mobile classic or what's it called.

Actually, changing the CSS is not necessary. All that is needed are a couple of meta tags (viewport) in the head and switching textareas to css-based relative width instead of using cols...

yeah

I'm pretty sure at this point that HN's markup is the way it is out of sheer bloody-mindedness :)

Or pg is trying to slow the site down to delay Eternal September. Keeping it painful to use on mobile would seem to accomplish that.

I think it looks fine. Everytime someone wants to make a mobile experience better, I want to kill a kitten.

More often than not it makes vastly worse. Why can't people just keep it to themselves.

Steve Jobs and Co. gave me a real browser so I didn't have to use a sub-par web. Now everyone is forcing it on me anyway. Stop. Please stop. Half of the websites I use have been ruined by responsive, and or enhancing, the mobile experience (GitHub and StackOverflow are worthless with their mobile defaults, text cannot be read because it overflows and zoom is disabled, formatting looks like shit).

Why, dear world, must people insist on fixing things that are not broken?

Are you against bad mobile implementations or just mobile implementations altogether? This seems like a weird position to take. It's not easy to read through comments and stories on most mobile browsers. It requires you to either squint to read the headlines or scroll horizontally just to read across the lines. That is a broken user experience.

I've actually found pinching and zooming to be more than adequate... And even a bit of squinting I find acceptable because it lets me easily skim a page for content. When I have to scroll forever just to find the content I'm looking for its frustrating and a waste of my time.

Or news websites that start hiding the actual content on mobile, so you're forced to "tap" the headline to even read the summary.

Or in the case of github or stack overflow, the formatting is so illegible, I can't believe they released 'em. They've made it harder to read.

Mobile is about fast access. Letting me get my information on the go... When mobile is a different experience it craps on that goal because I cannot access information as fast. I must now learn this new thing; which, is a the opposite of why I have a smartphone (fast information).

For my use cases is vastly worse. The desktop versions of most sites have more features and allow for faster access of information. Maybe I have to zoom in, that's okay! It's a better experience in the end.

I hate any mobile implementation on tablets, my iPad 4 has a high resolution, almost 10" display and can easily handle a full screen implementation yet some websites force mobile upon it.

And cue the comments where it says HN is just fine and nothing about it never ever needs to be changed and every change you could possibly make to it would just make it worse and you just don't know how to use your phone and so on...

FWIW, I'm partial to HackerWeb (http://cheeaun.github.io/hackerweb/) on the iPhone and http://hckrnews.com/ on the desktop myself.

Note that you can use HackerWeb for the comments on hckrnews.com by going to settings.

Try ihackernews.com

Have you tried any mobile app? There are a lot of great apps for HackerNews. I use HackerNews2 for my Android device and HackerNode for my iPhone.

Dear me no!

http://idontwantyourfuckingapp.tumblr.com/

All of my news and info gathering, from about 20 sources, comes in to one place (RSSDemon) on my Android Phone and tablet, and then if I click on a subject to read more or see the comments thread my (boat) browser takes over - simple!

Two apps for everything.

That's the point, a whole app (maybe useless) because of the lack of 10 css lines.

For me is cooler this way, because it offers visibility on app list and when I have a few free moments, I look at my phone apps and I say "Great, let's see what's new on HN" :D .

Your phone is not able to put page shortcuts on the homescreen or whatever?

That's not the point :D. It works better than a simple bookmark, with slide to change from page to comments, etc.

> That's not the point

I fail to see how it could be anything else. You previously stated:

> it offers visibility on app list and when I have a few free moments, I look at my phone apps and I say "Great, let's see what's new on HN"

I do not know about you — hence the interrogative — but I can (and do) put bookmarks on my home screens, right next to applications and thus with the exact same visibility.

There is a app called "MiniHack" that is actually extremely nice. It has commenting, replying, login, voting, readability, etc. And it looks beautiful.

Hacker News redesigns and mobile apps are popping up almost weekly here at HN .... I'm trying all them out.

Yet still using the original. Being a designer I was always thinking what makes this ugly design so time resistant.

One single answer comes to my mind: the character of its creator.

I would say it's more a matter of habit, if you've used the original for such a long time you feel so familiar with it that any other way of using HN just seems "unnatural". I too have tried many alternatives, yet still coming back to the original ;)

Then you must not be using HN on a mobile device, because it is pretty much unusable.. that is, unless you like panning left and right incessantly as you read titles.

I think this "ugly design" as you say is resistant because it is a good design. It's functionnal and as such, I don't see any reason why it should change. A good design is a design we can read easily and use easily. For instance, I find Designer News far less easy to read than HN. HN's design might be ugly but it's convenient and it's all what matters. I agree that HN could have a better mobile experience. But the current design works particularly well on desktop.

>A good design is a design we can read easily and use easily

HN on mobile achives neither.

I agree, I was talking about the desktop version. I just wanted to say that the so-called "ugliness" of HN's design has nothing to do with the fact it's not convenient on mobile.

I much prefer the current HN smartphone experience to some stupid thing that displays one comment at a time in a huge font and is missing half the options.

It does suck on non-smartphones phones, but nobody cares about that anyway.

I just want to remove the need to zoom, and make it a little more readable

It looks fine on the iPhone 5 http://imgur.com/i3fEdol

No massive text size , more than 5 words per line ,etc

The default HN experience isn't so great on Android's browser...

http://i.imgur.com/TEUoGrT.jpg

double-tap to zoom and all is good.

zooms till the image's 3.5 inches

Personally I couldn't read that at all at smartphone size from 1.5 feet away (distance to hand).

And now something has changed which makes the text massive.

My Windows Phone 8 (Lumia 928) shows HN perfectly.

Ha! Mine too.

Although I'm running on the Nokia 822. I actually just run the RSS through NextGen reader and the layout is super clean and has easy navigation for the comments.

While it doesn't really help mobile users much, I have a rather buggy userscript that converts the horrible HN markup to something actually workable.

If anyone where interested, I could finish it relatively quickly...

I suggest to do what 4chan has done some time ago. Rewrite the css & html in modern fashion optimized for all devices but keep the style the same.

I'm checking the mobile version right now. The "4chan-feeling" is conserved and the site is simple and readable without the need to zoom or scroll r/l

My commentary on this matter:

http://stylebot.me/styles/2945

(Mostly only of use to desktop users, but it's quite an improvement IME).

You can use http://hackernews-mobile.tomodo.me/ It's similar to the css you offered.

working just fine on Windows Phone 7[1] Internet Explorer. Even better i think. It automatically make the text bigger, thus easier to read within the small screen size.

[1] Nokia Lumia 900

I love using HN on my iPhone. It loads quickly even when the signal is weak and scrolls super nicely because of the simplicity. On mobile, I'm much more likely to read the comments before the articles because I know the comments will load super fast and the article will load super slow and be difficult to stretch into the screen.

EDIT: Go ahead and set up a site that implements your "slightly nicer CSS and HTML" that will make such a huge improvement. Publish the traffic stats so that we can all see when you get it right.

I'm pretty sure that slightly nicer CSS and HTML would not slow down HN.

The saddest part is that if you resize a desktop browser to be narrow, it's a better experience than you actually get on a phone.

Hacker News should be an API.

api.ihackernews.com/‎

If only there was a HN app...

guess smart-phones aren't that smart after all...

Hrm, maybe you need a better smartphone? It works really well on Opera Mobile on my N9…

No it doesnt. You cant zoom in and scroll on your phone? Do you have broken fingers? Btw there are hn apps in different stores.

Zooming and scrolling left-to-right to read every link is a broken experience.

Reply on news.ycombinator.com