13 ms·
Two lines of CSS that will improve HN on mobile (IMO)
- L0stLink 5y agoI use 20px font size in Hacker News - Zenburn Dark (by incrediblygood [1]) to make usable, the default fontsize and the bright colorscheme is fatiguing to my eyes. [1] https://userstyles.org/styles/97106/hacker-news-zenburn-dark https://userstyles.org/styles/97106/hacker-news-zenburn-dark
- dredmorbius 5y agoI've long campaigned for HN to abandon px and adopt em/rem units for text. Reading on mobile devices, or worse, high-DPI e-ink, is a nightmare. There's supposed to be a custom-per-user CSS hack in the works, but that's been the response for years.
- yawaworht1978 5y agoOk, but there are also other css things I would like to add on mobile, but how can I do this without a console, do I need an extension like grease monkey?
- p410n3 5y agoBookmarklets. At least the work on mobile chrome. You open a site, then tap the url bar and type the name of the bookmarklet and tap that. I have one that removes all iframes, getting rid of 90% of ads
- deleted 5y ago[deleted]
- OJFord 5y agoDoes mobile Chrome not have extensions? Or you really prefer that solution to uBlock (or whatever)?
- egeozcan 5y agoTampermonkey works on FF Nightly (the one with the blue icon). You just need a mozilla account and create your own allowed extension list.
- lordofgibbons 5y agoIts annoying that alt+left-arrow is broken on that site. Instead of taking the browser back, it just selects some random part of the page.
- chrismorgan 5y agoWith notion.site, they basically went out of their way to break everything for viewers: they give you what I presume is their editor (which clobbers a lot of the browser’s normal functionality, though whether it does a good job of it or not I can’t tell, never having used it), but with most of the editing functionality clumsily disabled. The end result is a bit better than it was a year and a half ago (https://news.ycombinator.com/item?id=23925461 https://news.ycombinator.com/item?id=23925461; the links and contenteditable parts have been mostly fixed), but still extremely bad, and still painfully keyboard-inaccessible (Up/Down do their own wonky thing that does let you navigate, but roughly by paragraph, and PageUp/PageDown/Space/Shift+Space/Home/End do nothing; but I just discovered that if you click on the page title text, then Up/Down start to do nothing and PageUp/PageDown/Space/Shift+Space/Home/End work).
- tmalsburg2 5y agoPage up and page down also don't work on that page. Funny for a blog post that's about improving UI.
- trungdq88 5y agoThe website is actually a Notion page, I can't do much, sorry!
- black_puppydog 5y agoYeah notion's habit of overriding essential browser shortcuts is bad enough on desktop but the site is basically useless on mobile. The two Screenshots are placed next to each other instead of having the headline between them, and one of them doesn't even render. I have to use notion at work and if I didn't love my job for other reasons their UI might be enough to make me walk out the door. Plus: my goodness for a few words and two images this page takes forever to load and render, even with a warm cache. Cutting-edge UX in 2021! hooray!
- frenkel 5y agoI just zoom in to 115% on iOS and 120% in Firefox on my desktop computer.
- Semaphor 5y agoThat is a great idea! No idea why I didn’t think of that myself.
- omarfarooq 5y ago150% on desktop here.
- egeozcan 5y agoI'm 35 with no known problems with my sight, still 190%.
- hansel_der 5y ago200%
- silon42 5y ago180%
- trungdq88 5y agoSame club :)
- mdp2021 5y agoThe issue in the article was about finger clicking on links. On a desktop OS, you should not have issues using pointer devices. (On mobile devices, when using fingers to tap, one normally pinches to enlarge and re-pinches to adjust size... Although I am not really sure if this still works with nowadays' mobile software: I am assuming text reflow, being that strictly required, and last time I checked most implementations in browsers were broken.) For comfort in readiing, on a desktop OS, one is supposed to quickly adjust the zoom level with [Ctrl]+[Wheel], or [Ctrl]+[+/-] or similar...
- 5y ago
- S0und 5y agoOr just use: https://play.google.com/store/apps/details?id=com.simon.harmonichackernews https://play.google.com/store/apps/details?id=com.simon.harm...
- janaagaard 5y agoPersonally not a fan of using an app to browser something that contains that many links to the web. You're either stuck in the in-app browser (no bookmarks, etc.) or there is a lot of switching between the app and the browser. I have an iOS device. The experience might be better on Android.
- Lhiw 5y agoUse userstyles browser add-on?
- mattowen_uk 5y agoI have a rudimentary app wrapper for HN on Android, that just renders HN in a webWiew control but shells out to your default browser for external links. It was the starting point of my own HN app, but as usual I never finished it. I'm typing this comment via it, actually.
- stjohnswarts 5y agoNot to mention every app is another potential security hole.
- Markoff 5y agohttps://hckrnews.com/ https://hckrnews.com/ then
- thomastjeffery 5y agoIt also means you can't open a link in a private/incognito tab, which I like to do to cater my history and cookies.
- pritambaral 5y agoMobile Web > Mobile App (especially for sites like HN).
- JOhnnyD03 5y agoA bookmarklet like this one could also be used as a quick fix - but I know it's not very practical in the long run because it has be called on every page reload: javascript:(()=>document.querySelectorAll('.comhead').forEach(e=>{e.style.fontSize='12pt';e.style.lineHeight='20pt'}))()
- dvh 5y agoIf your mobile browser doesn't support custom css, switch to different browser.
- mdp2021 5y agoAbout "Bookmarklets" (custom javascript one can call on a current page): -- a good starting guide is at https://www.freecodecamp.org/news/what-are-bookmarklets/ https://www.freecodecamp.org/news/what-are-bookmarklets/ -- it's not clear what could be the best method for calling them with a keyboard shortcut (where relevant/applicable), but a few approaches exist: https://superuser.com/questions/387729/creating-hotkeys-in-firefox-for-bookmarks-bookmarklets https://superuser.com/questions/387729/creating-hotkeys-in-f... -- it's not clear how to automate applying one such javascript snippet on each page load of a URL of defined pattern matching - there probably exist at least browser extensions
- notRobot 5y ago> it's not clear how to automate applying one such javascript snippet on each page load of a URL of defined pattern matching - there probably exist at least browser extensions Userscripts with extensions like tampermonkey.
- habosa 5y agoIf anyone from HN is here reading: maybe just make this change? The current touch targets on mobile are much too small and definitely fall below most UX / accessibility standards.
- reaperducer 5y agoThe current touch targets on mobile are much too small and definitely fall below most UX / accessibility standards. I don't know how many times I've accidentally flagged a post when using my iPad because the text is so small. And there's no unflag button. Fortunately, I have a controversial commenting history, so the system only very rarely allows me to flag anything.
- maxk42 5y agoDon't use points, use em or rem. Otherwise it won't render well for people with unusual screen formats.
- matja 5y ago12pt = 1em, so how would using em be different?
- 11235813213455 5y agono he's right, pt is an absolute unit unlike rem/em, see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
- stjohnswarts 5y ago100% I've had to explain this to too many people who are supposed to be web developers
- chiefalchemist 5y agoem and rem are relative to some value higher up the tree.
- shbooms 5y ago`em` is a relative unit that can change depending font-size of the given element while `pt` is an absolute value. the W3C does not recomend using any absolute value such as `pt` for text rendered on screens. only relative values or `px` should be used. [0] I would suggest this very helpful article on the topic, it provides a lot of good info and context on this subject. [0] https://www.w3.org/Style/Examples/007/units.en.html https://www.w3.org/Style/Examples/007/units.en.html
- greenyoda 5y agoHistorically, the term "em" goes back to the days of printing with metal type, and referred to the width of a capital "M" in the current typeface and point size: https://en.wikipedia.org/wiki/Em_(typography) https://en.wikipedia.org/wiki/Em_(typography) There's also a unit called an "en", which was based on the width of "N": https://en.wikipedia.org/wiki/En_(typography) https://en.wikipedia.org/wiki/En_(typography)
- carom 5y agoI support this, I miss the minimize button a lot.
- rapnie 5y agoFor me the up- and downvote icons are too close together and I always have to pinch zoom to upvote (I don't downvote often). So prefer a bit more spacing between them.
- egberts1 5y agooops, i just downvoted that by mistake.
- ycuser2 5y agoI don't see a downvote button...?
- detaro 5y agonot enough karma points.
- Veen 5y agoYou can't downvote comments if you have less than 501 karma, and the downvote button doesn't appear on replies to your own comments. Plus, there is no downvote button for stories, just for comments. EDIT: It originally said "less than 500 karma".
- excitom 5y agoHuh. TIL. It seems I am but a few karma from having a downvote button. Interesting.
- 5e92cb50239222b 5y agohttps://github.com/minimaxir/hacker-news-undocumented https://github.com/minimaxir/hacker-news-undocumented
- nkrisc 5y agoThankfully the title bar says “unvote” or “undown” so I can know which one I actually hit.
- rayrag 5y agoThis few lines will improve HN on desktop, IMHO. body { margin-top: 0; background-color: #EAEBE3; } .title { font-size: 14px; } .titlelink { color: #131010 } .subtext { font-size: 11px; } .comment { font-size: 14px; line-height: 1.5; } .default p { margin-top: 16px; max-width: 100ch; } https://i.imgur.com/FmbgVOo.png https://i.imgur.com/FmbgVOo.png and moving "Lists" from bottom navigation to the top navigation would good thing.
- janaagaard 5y ago(A bit ironic that the article about supporting small screens doesn't render well on a small screen: The before and after headings are both placed above the two screenshots.)
- cpcallen 5y agoAt least you were able to see something. In Chrome, with cookies disabled by default, the page appears completely blank.
- trungdq88 5y agoAuthor here. It's a Notion page, I can't do much, sorry! Maybe I'll spend some time to migrate everything to a proper blog soon.
- deleted 5y ago[deleted]
- adrianojlt 5y agoI made a bookmarklet to toggle all the comments at once. Check it out if you find it useful: https://greptips.hashnode.dev/hacker-news-toggle-comments https://greptips.hashnode.dev/hacker-news-toggle-comments
- dncornholio 5y agoThe technical state of Hacker News front-end is an embarrassment.
- lessname 5y agoI wouldn't say that. Maybe not the best design you might think of but much faster than e.g. indiehackers.
- dncornholio 5y agoThere's plenty of ways to improve on HN without affecting load times.
- kamray23 5y agonot really? looks good, functions well. slightly awkward on mobile since the text is small. very fast, loads on all devices, very accessible because of good document structure. you could reasonably browse HN on a text-only terminal.
- dncornholio 5y agoTables for layout. The <center> tag. Special spacer elements. HN is ridden with anti-patterns.
- kamray23 5y agoWow jesus. Opened HN with my accessibility checker. No recognisable structure. 33 spacers on the main page alone. 200+ contrast errors.
- dncornholio 5y ago:) I thought it was bad but it is actually worse. Maybe accessibility is the argument to make, because my prayers always fell upon deaf ears.
- emptyparadise 5y agoWhat I want the most is a second click to confirm hiding/flagging/etc.
- Alex3917 5y agoNot a bad idea. Almost everything I flag or hide on mobile is accidental, and then I need to go and undo it.
- j-bos 5y agoI for one value the HN limited aesthetic. From a ui perspective its not ideal, but keeping the site extremely simple and a little coarse surely disincentivizes mass and mob adoption.
- nkrisc 5y agoYou can retain the aesthetic while also making it less frustrating to use.
- Cthulhu_ 5y agoThat's cool, but I hope you can also see that the user experience on mobile is pretty bad due to small icons and links.
- kataklasm 5y agoI suggest Harmonic for Android, an app front-end to HN with a similarly minimal aesthetic but a pleasure to use on mobile.
- Riseed 5y agoPersonally, I find the user experience on mobile is fantastic. The small icons and links mean that more content can fit on my tiny screen. This is without a doubt one of the main reasons HN is the most visited site on my phone. (Not trying to start a debate. Just pointing out that user experience on mobile is subjective, rather than objectively "pretty bad".)
- layer8 5y agoI’d also add more space between "next" and "[-]" to prevent mis-taps. Or use "collapse" instead of "[-]".
- 1cvmask 5y agoWith the unimportant caveat of the upvote and downvote icons being too close to each other I think the plain simpleness of HN works perfectly from a mobile browser.
- CaptainMarvel 5y agoYes, please! I often tap the “[-]” button as well and it is quite difficult to get right. Especially now that the “next” button has been added. It is very disorientating when I accidentally tap that. In fact, all tap targets are too small for mobile. Clicking the comments link to open a post is difficult and I sometimes click flag or hide by accident.
- Romeo_ 5y ago^^ This so much. I click the [-] a lot and often click on the wrong 'link'.
- dr_dshiv 5y agoWhat is prev next and parent for? am I missing out, not using them?
- e_proxus 5y ago- 'parent' goes to the comment that is replied to - 'prev' / 'next' goes to the adjacent sibling comments - 'root' goes to the top level comment in the thread (not the post) They are very useful on mobile if you're deep in a thread, and want to go to the next top-level thread. To do that, press 'root' and then 'next' (or collapse it with [-]).
- layer8 5y agoYou can press "parent" and then "next" to jump to the next (sub)thread. I wish there was a single button for that.
- igtztorrero 5y agoPlease !
- gHA5 5y agoWhat I really would like to have would be to collapse comment threads via a column that runs the length of the comment thread and is indented like its respective comment. This way I don't have to scroll to find the comment to collapse its thread, and clicking the column is easier. This is used in some subreddits in the old Reddit style, e.g. /r/de as can be seen here: https://old.reddit.com/r/de/comments/rcc9us/experten_finden_ursache_f%C3%BCr_computerausf%C3%A4lle_in/ https://old.reddit.com/r/de/comments/rcc9us/experten_finden_...
- phil294 5y agoI know I'm late to the party but this could do what you want: https://greasyfork.org/en/scripts/427429-hacker-news-contextual-comments-sticky-tree https://greasyfork.org/en/scripts/427429-hacker-news-context... (disclaimer, I made it)
- tzs 5y agoThis is one of the few things where I think the new Reddit is actually a little better. Same basic idea as at your link, but make it so that those guidelines that are running down to the left of the subtree are the thing you click to collapse, instead of having a separate invisible (until you mouse over) collapse column next to the guideline.
- beebeepka 5y agoSlashdot has that. Ability to collapse would be enough for me
- gibspaulding 5y agoHackerdaily [1] has a nice interface for collapsing comments too, though it suffers from the same issue on mobile that the main HN site does. The collapse button just follows you down the page until you are through all of a comment's children, so you can always collapse without scrolling back up. https://hackerdaily.io/29482351/comments https://hackerdaily.io/29482351/comments
- leephillips 5y agoThe Refined Hacker News extension for Chrome has a “collapse root” button on each comment that I think does what you want.
- dhdhhd 5y agoHow about option to move menu to button instead of top, its hard to reach using today's phones
- pojntfx 5y ago++! I use https://hackerweb.app/ https://hackerweb.app/ on mobile nowadays but yeah whenever I try to upvote its really hard to do so on the "official" site
- NoGravitas 5y agoSee, I would have just put that in a userstyle (yes, I have Stylus on mobile) rather than write a blog post about it. But I'm grateful for the blog post...now I can put those lines in my userstyle.
- Shared404 5y agoThere's definitely something to be said for short blog posts with snippets of info like this. I very much appreciate the fact that this wasn't turned into a article three times the size, just the information and relevant code.
- phil294 5y agoCustom user styles might work on Chrome, but on Firefox mobile, it's an atrocious experience. You need to install the nightly version, set some hidden developer flags, create a addon collection with your user account on addons.mozilla.org and type the collection ID in the settings of your mobile browser. In other words, you can't really do it.
- chrisshroba 5y agoPersonally I prefer the existing style. The larger text looks imbalanced, and I think there are ways to make collapsing threads easier without the eyesore, like changing "[-]" to "collapse thread" or adding a reddit-style bar to the left of the text. Commenting in case others agree, so the HN team doesn't assume everyone agrees with the proposed change.
- dsmmcken 5y agoAdding padding instead of increasing the size would accomplish a similar goal.
- jcims 5y agoGenerally agree. I wouldn't call the proposal an eyesore, but I can feel the larger font dragging my attention (presumably trained from 30 years of upsized headings) from the content. More padding might help or just stretching it laterally.
- gorgoiler 5y agoHah! This is nothing compared to the “update” button being next to iOS Safari’s back button. Will I successfully update my prescient mumblings such that they actually make sense, or will I delete everything my fat fingers just spent hundreds of seconds editing? Who nose?! This is an specially irksome bug given that the two buttons are only next to each other for particularly long comments. I should cut back on the waffle.
- thomastjeffery 5y agoDoes Safari not keep preserve the text when you press forward? I suppose that wouldn't help if you opened the comment page on a new tab, though.
- gorgoiler 5y agoTesting… it does!
- leephillips 5y agoNow I need two lines of CSS that will undo whatever this page does to disable my arrow and Vimium keys so that I can read whatever it has to say.
- chrisofspades 5y agoLooks like that's a byproduct of Notion's keyboard shortcuts. I agree it's very annoying. Not only does it break arrow keys, but also home, end, page up, and page down.
- deleted 5y ago[deleted]
- rbobby 5y agoI wish there was a higher contrast ratio between text and the tan background.
- sjtindell 5y agoThis could be useful, but I have huge respect for HN not changing anything despite what must be a deluge of developers giving their input.
- DominikPeters 5y agoHere is a solution that extends tap targets by 10px to the top and bottom without changing anything visible: .comhead a { padding: 10px 0; margin: -10px 0; }
- didip 5y agoWorse are the up and down arrows. They are truly made for ants. I wish HN would borrow one UX person from its own portfolio companies to improve the overall typography and UX.
- beachy 5y agoPersonally I think they work well since I can pinch zoom in to them and out again in a second or two. As there are hundreds of thousands of them on the page, the size is important.
- canyonero 5y agoIf any site developers from HN are reading this thread -- please prioritize some of these quick wins to improve mobile UX and a11y. Some small CSS changes such as those suggested in the Notion post demonstrate, these quick wins that don't require a full-redesign do make a difference. Obviously, understand that your team may be lean and have other priorities, but maybe hiring a contractor to resolve some these issues would be a way to address concerns for those with sight issues and those browsing on small screens.
- braramod 5y agoThe first one looks better in my opinion.
- technoplato 5y agoI am not positive, but I think the creator of the iOS Reddit client, Apollo, created an app to edit the HTML/CSS of pages on mobile Safari: https://apps.apple.com/us/app/achoo-html-viewer-inspector/id1585833321 https://apps.apple.com/us/app/achoo-html-viewer-inspector/id... god speed
- thinkingemote 5y agoI made a Firefox extension to do just this which was great for a few months until Mozilla decided to remove all extensions for Firefox Mobile to a select pre-chosen list.
- giuliomagnifico 5y agoYesss! BTW I’m using Hack app on mobile.
- joshstrange 5y agoSometimes I wish the Apollo [0] app developer, Christian Selig, would create a HN app using the bones of the Apollo app but that would probably just increase my HN browsing time whereas now I normally only browse HN on desktop. [0] https://apps.apple.com/us/app/apollo-for-reddit/id979274575 https://apps.apple.com/us/app/apollo-for-reddit/id979274575
- thrdbndndn 5y agoHa, I have a similar first-world problem. I'm so used to the Reddit app rif is fun, to a point that any HM apps I have tried feel "wrong" as soon as they're different from it and I constantly feel frustrated. I ended up just not read HN much on my phone and when I do, I just use the webpage.
- iwebdevfromhome 5y agoI love Apollo! It’s the definitive Reddit experience for me. Do you know if HN or any third party provides an API so that devs can play around building mobile interfaces ?
- sorahn 5y agoHacker news provides its own api, but it's not as easy to use as you would like. https://github.com/HackerNews/API#design https://github.com/HackerNews/API#design
- kevingrahl 5y agoI’m currently using “HACK for Hacker News” which is similar to Apollo. Don’t get your hopes up to high though.
- sorahn 5y agoI have this exact sentiment. I wished for the same thing with Alien Blue when it was the king of 3rd party reddit apps. I'm also using HACK (same as one of the other commenters in this thread), but it's not quite as nice as Apollo.
- 5y ago
- fuddle 5y agoIf only there was a way to create a PR :)
- deleted 5y ago[deleted]
- ___q 5y agoWhy are we setting font-size in pts?!
- fatboy93 5y agoNot sure where I read this, but there are few features that are undocumented on the website probably! But some of them are mentioned here: https://github.com/minimaxir/hacker-news-undocumented https://github.com/minimaxir/hacker-news-undocumented One of the few issues that I've faced is pagination of the comments and occasionally "dang" might pop up to paginate the comments on heavily trending/debated topics. My 2 cents would be to enable pagination after a set number of comments, so that it doesn't go on and on, on mobiles. BTW, I really like this kind of website design as its minimal enough to load on terrible connections and easily viewable.