Hacker News new | ask | show | jobs
How to make your responsive mobile website hurt my heart (elsyms.com)
36 points by elsyms 3214 days ago
10 comments

Maybe it was covered in this article and I just don't know the technical term for it, but my biggest pet peeve is when a page is taking forever to finalize the load, but the text is all there so I scroll down and start reading. The page then pops me back to the top of the page and I think it's finished so I scroll back down to where I was and continue reading, only to have it pop me back up to the top AGAIN because it wasn't finished after all.
My favorite related issue is when, during the 800 milliseconds it took my brain to activate the muscles required to precisely tap on a 12-pixel-high link, the position of the screen has shifted and I end up tapping something entirely else.
CircleCI is notorious for this. Not something you want from your build tool.

I’ll add this too, using uBlock, within seconds of loading the page, it’s already blocked some 500 requests.

god this has happened to me _way_ too often. No, I did not mean to click that add, I meant to click the button that somehow shifted positions on me when I pressed my thumb down on the screen.
The scroll hijacking one is a personal pet peeve. Whatever genius developer that thought of that should be taken out back and shot.

Either that or they should have been required to write the thing while allowing us to set their scroll wheel speed.

/rant

Why having webfonts at all? Every computer and mobile phone has tons of fonts already installed. Your fonts definitely don't look better. Please don't waste my bandwith with it.

Why do you make mobile sites that can't be zoomed? This is so annoying. Then sometimes zooming is possible but the sticky headers/footers also zoom and hide the actual content.

> Why having webfonts at all? Every computer and mobile phone has tons of fonts already installed. Your fonts definitely doesn't look better. Please don't waste my bandwith with it.

Designers are really in love with using literally any font that's not a system font and will throw a fit if they can't do that. It's all because branding, or something.

As a user I hate that crap. Quit wasting my disk and bandwidth with your cutesy garbage and just use system fonts. As a developer I hate that crap, because it's one more thing to worry about.

But the designers/marketers have won this one—they're willing to fight really hard for their special snowflake fonts and have sold it to the people who make decisions as being vital for branding, which is Super Important™.

Add allowing custom, downloaded fonts to the list of things the web is worse for supporting.

The reason designers use them is because 95% of their userbase values form over function.

You're obviously in the 5% which values function over form, but surely you can understand most people want things to look pretty, plus the company wants to have a cohesive brand.

I used to be a function-over-form advocate but was converted somewhere along the line after working with some awesome designers, doing lots of a/b testing and talking with the end user.

Both form and function are equally as important as each other.

userbase values form over function

any stats? I'd say it's the opposite. It would seem to me people want things to work, first and foremost.

Both form and function are equally as important

This contradicts the previous statement, if your userbase is your first priority.

> any stats? I'd say it's the opposite. It would seem to me people want things to work, first and foremost.

It is important to test these kind of assumptions. That's the reason why A/B testing and other analytics tools are used(not to mention communicating with the end user).

Corroborating anecdote: somehow the Amazon Ember font is really important for branding here at Amazon. It's a very big deal when our ads don't use it.

Though to be fair, as an ad block user, I can't actually be totally sure that the font wouldn't have a positive effect on my ad engagement.

Please add mystery-meat navigation to the list. It's so painful. I have no idea what those icons do and can't 'mouse over' like a desktop.
But the usual iconograpics are too limiting, we made our own based on the communication types misheard from my psych class and or yoga instructor. The left swirl inherently represents the earth, gravity, lovehug force, thats intuitively the 'Buy' button, but we call it 'Economic Actualization'. While right spinners are clearly the universal sign for the expansive nature of the universe, so thats our facebook link. Its all so obvious!

/s

Seriously, what's wrong with the word "Menu"? It barely takes up any space.
Just put 菜单 and be done with it, right?

I think a large part of the push for icons is awareness that not everybody reads English.

I really think you're giving too much credit to the hamburger menu pushers. If you need multi-language, translate the word menu.
But 'Menu' can be auto-translated.
I'm surprised he didn't mention sticky headers/footers. Those can be a huge waste of space, especially if you're browsing in landscape.
#1 complaint on every platform, for me. Sticky is very bad. Disappearing on scroll down but reappearing on scroll up is even worse. Just let the things scroll off screen, I can scroll to the top if I want to see anything on the header (spoiler alert: I won't). Old-school sticky sidebars (as in old frame layouts, for example) were totally fine on desktop, but are out of fashion now because they don't translate well to mobile.

I remove sticky elements with the dev console on anything I actually want to read that's longer than a few lines of text—though I can't do that on mobile, so it's worse there.

I even dislike that the URL bar on chrome mobile acts like this, even though I can't think of any good alternative.

> Old-school sticky sidebars (as in old frame layouts, for example) were totally fine on desktop, but are out of fashion now because they don't translate well to mobile.

What we need is the ability to focus on a div.

Excellent point, I completely forgot about those. Will add them now!
My Safari Bookmarklet to kill stickies: javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()

My other one to re-enable proper scroll and zoom: javascript:document.queryselector('meta%5bname=viewport%5d').setattribute('content','width=device-width,initial-scale=1.0,maximum-scale=10.0,user-scalable=1');

These two can fix a lot of broken "responsive" garbage the front-end web dev community seems to really enjoy.

All of these are bad on the desktop web. After all, some people still have phone company DSL.
It's time for browsers to have absolute maximum speed/data settings, where they refuse to load any more once the limit is violated. These should come complete with a built-in dollar figure display (so if you're roaming or on a limited plan you can see exactly what your activity is costing you), and a shaming site with monthly telemetry on who cost users the most per visit.
> If the web page has some sort of carousel without lazy loading, it wouldn’t take long to use up 10% of somebody’s 1GB allowance.

If you do use lazy-loading, please be sure to do so in a way which works without JavaScript enabled (sadly, this is very uncommon). Mobile users are free to use browsers which load images on demand (indeed, I remember that approach from the 1990s), or perhaps browsers could agree on a standard for different resolutions of images, but breaking the Internet (which is what requiring JavaScript to view content is) to save some people some bandwidth is IMHO a bad idea.

https://www.robinosborne.co.uk/2016/05/16/lazy-loading-image... looks like a nice technique.

> Render as much server-side content as you can.

> Reduce/remove the third party dependencies you have on your pages.

> Lazy load images whilst maintaining page layout.

> Stop hacking fixes for your mistakes with Javascript.

All good advice, particularly the last bit.

Google news falls foul of some of these. I hate how it takes over scrolling and also the annoying way it iframes of the pages you open. You don’t own the internet google!
Who doesn't do "mobile first" development now? Design the mobile version as your baseline, then add luxury shit for the wide version.