The "Make it (Worse) For Mobile" anti-pattern

sloosecannon

Well the site I set up has this...

So...

96.9k

I could see it being a little over that, but that's a LOT of libraries to get it to 200k.

Or they're not minified. Which... they might actually not be minified.

sloosecannon

Oh no, they're minified. Just... JESUS CHRIST THAT'S A LOT OF LIBRARIES.

EDIT: No, only some of them are minified.

PageSpeed Insights

It failed badly on speed, and the nice contact-us header is bad UX according to google :)

ben_lubar

I disagree with PageSpeed Insights, just because it gives this page a 100% for user experience:

PageSpeed Insights

That page is actively trying to defeat password managers.

sloosecannon

E_NO_REPRO

<a

ben_lubar

@Lorne_Kates said:

Applax Scrolling

Go to this page with JavaScript disabled:

Guild Wars 2: Heart of Thorns

Guild Wars 2: Heart of Thorns™ is the first expansion for Guild Wars 2. Founded on the idea that the journey is the goal, the Heart of Thorns expansion continues the Guild Wars 2 tradition of challenging the conventions of MMOs to fulfill the promise of what online worlds should be.

You'll have to get rid of state-invisible from one of the elements, but the page entirely works without JavaScript, and I'm pretty sure it has several cases of what you call "Applax Scrolling".

Is this "Applax Scrolling"?

Lorne Kates

@ben_lubar said:

Is this "Applax Scrolling"?

No. Applax Scrolling is parallax scrolling, but only done because Apple did it for some version of iOS.

If you scroll the foreground 10em, the background image scrolls 9em. Or some dumb ratio.

accalia

@Lorne_Kates said:

If you scroll the foreground 10em, the background image scrolls 9em.

which sounds nice in theory and does give an illusion of 3d.

in practice it eats up way too much processor power and leads to motion sickness.

another example of "just because apple did it does not make it a good idea."

ben_lubar

Oh, you mean like this?

A grouped pure CSS parallax demo by Keith Clark

Yeah, static background is a lot better on the eyes than background-that-moves-at-the-wrong-speed.

Lorne Kates

@ben_lubar said:

Oh, you mean like this?

MURDER IT WITH PLASMA!!!!!!!

...

yes. Yes, exactly like that. Except usually done in js so it's even jerkier and more disorientating.

@ben_lubar said:

Yeah, static background is a lot better on the eyes than background-that-moves-at-the-wrong-speed.

Or a plain background that scrolls like normal-- or a solid color background so scrolling isn't even an issue. A background is there to provide contrast with the foreground-- and that is it's ONLY purpose. In fact, let me codify that:

Lorne's Eighth Law of Web Design
A background's only purpose is to provide contrast to the foreground. If it doesn't provide contrast, it is now the foreground, and you have failed.

Corollary 1:
If the background is providing required information, it is now the foreground, and you have failed.

Corollary 2:
If the background stands out or grabs attention due to any special-fancy effect of any kind, it is now the foreground, and you have failed.

HardwareGeek

@Lorne_Kates said:

disorientating

aapis

I have made websites like this. Not by choice, of course, only when the budget was so low that purchasing and modifying a template was all they could afford. This site is pretty standard in that regard, just a reskin of some pre-packaged template from ThemeForest or something.

Agencies love making shit like this, I'll never know why though. 1% of the time the theme is perfect and you hardly have to do anything to it. That's bad, how can you even call yourself a web designer/developer/agency/anything if you just change images on a template? The other 99% of the time you're stuck because the theme gets you about half way to where you need to be, but is so strict or terribly written that modifying it at all would take more hours than the client can afford so you end up doing the project at a loss. That is obviously bad.

I wish people would stop wanting websites.

bb36e

Restaurant's website. I've outlined the only scrollable part of the page in red. Note how the stuff outside the red box is static and the actual things that I'd like to see (i.e. the menu) are stuffed into a tiny scrolling box.

Desktop (which isn't great either):