4 ms·

How to make your responsive mobile website hurt my heart

36 points by elsyms 9y ago

PaulHoule 9y ago
All of these are bad on the desktop web. After all, some people still have phone company DSL.
thomk 9y ago
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
drngdds 9y ago
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.
- elsyms 9y ago
  Excellent point, I completely forgot about those. Will add them now!
- ashark 9y ago
  #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.
  - thomastjeffery 9y ago
    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.
- xenadu02 9y ago
  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.
sparrish 9y ago
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.
- damnfine 9y ago
  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
- overcast 9y ago
  Seriously, what's wrong with the word "Menu"? It barely takes up any space.
  - pwinnski 9y ago
    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.
    - OtterCoder 9y ago
      But 'Menu' can be auto-translated.
    - overcast 9y ago
      I really think you're giving too much credit to the hamburger menu pushers. If you need multi-language, translate the word menu.
jackewiehose 9y ago
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.
- ashark 9y ago
  > 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.
  - delecti 9y ago
    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.
  - danielharrison 9y ago
    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.
navbaker 9y ago
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.
- taco_emoji 9y ago
  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.
  - holtalanm 9y ago
    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.
  - dfee 9y ago
    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.
jonplackett 9y ago
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!
zeveb 9y ago
> 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-images-dont-rely-on-javascript/ 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.
makecheck 9y ago
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.
rdiddly 9y ago
Who doesn't do "mobile first" development now? Design the mobile version as your baseline, then add luxury shit for the wide version.

36 points by elsyms 9y ago

All of these are bad on the desktop web. After all, some people still have phone company DSL.

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

drngdds 9y ago

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.

elsyms 9y ago
Excellent point, I completely forgot about those. Will add them now!
ashark 9y ago
#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.
- thomastjeffery 9y ago
  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.
xenadu02 9y ago
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.

sparrish 9y ago

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.

damnfine 9y ago
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
overcast 9y ago
Seriously, what's wrong with the word "Menu"? It barely takes up any space.
- pwinnski 9y ago
  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.
  - OtterCoder 9y ago
    But 'Menu' can be auto-translated.
  - overcast 9y ago
    I really think you're giving too much credit to the hamburger menu pushers. If you need multi-language, translate the word menu.

jackewiehose 9y ago

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.

ashark 9y ago
> 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.
- delecti 9y ago
  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.
- danielharrison 9y ago
  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.

navbaker 9y ago

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.

taco_emoji 9y ago
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.
- holtalanm 9y ago
  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.
- dfee 9y ago
  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.

jonplackett 9y ago

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!

zeveb 9y ago

> 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-images-dont-rely-on-javascript/ 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.

makecheck 9y ago

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.

rdiddly 9y ago

Who doesn't do "mobile first" development now? Design the mobile version as your baseline, then add luxury shit for the wide version.