
How to make your responsive mobile website hurt my heart - elsyms
https://elsyms.com/how-to-make-your-responsive-mobile-website-hurt-my-heart/
======
navbaker
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
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.

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

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

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

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

~~~
bassman9000
_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.

~~~
arvinsim
> 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).

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

~~~
overcast
Seriously, what's wrong with the word "Menu"? It barely takes up any space.

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

~~~
overcast
I really think you're giving too much credit to the hamburger menu pushers. If
you need multi-language, translate the word menu.

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

~~~
ashark
#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
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.

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

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

------
zeveb
> 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...](https://www.robinosborne.co.uk/2016/05/16/lazy-loading-images-dont-
rely-on-javascript/) 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.

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

------
rdiddly
Who doesn't do "mobile first" development now? Design the mobile version as
your baseline, then _add luxury shit_ for the wide version.

