Re:7 Deadly Sins of Mobile Websites
by msane on Friday December 27, 2013 @01:05AM
(#6969575)
My biggest gripe with mobile sites is what I call "layout jumping". It happens when CSS and JavaScript resources arrive slowly (as of course they do over many mobile connections).
It stems from:
- Developers viewing their sites only from fast WiFi connections
- Poor 3rd party ad & tracking service integrations
It goes like this:
1. Tap link for article. Text loads, user begins reading.
2. [CSS file loads with typography styles --> TEXT JUMPS TO NEW POSITION]
3. User adjusts position of eyes, or possibly scrolls to find location in text to resume reading
4. [CSS file loads with some layout styles -- TEXT JUMPS TO NEW POSITION]
5. ... possibly 2-4 repeated several times for various stylesheets (no compilation)
6. User scrolls to resume reading after being interrupted again.
7. [JS resource loads for ad. Creates banner box -- TEXT JUMPS TO NEW POSITION].
8. Again user finds reading position to resume
9. [3p CSS arrives to style the ad -- TEXT JUMPS TO NEW POSITION]
10. User begrudgingly finds position, wondering if this article is worth the trouble.
11. (steps 7-10 repeated for a few more add boxes / other nuisances)
It stems from:
- Developers viewing their sites only from fast WiFi connections
- Poor 3rd party ad & tracking service integrations
It goes like this:
1. Tap link for article. Text loads, user begins reading.
2. [CSS file loads with typography styles --> TEXT JUMPS TO NEW POSITION]
3. User adjusts position of eyes, or possibly scrolls to find location in text to resume reading
4. [CSS file loads with some layout styles -- TEXT JUMPS TO NEW POSITION]
5. ... possibly 2-4 repeated several times for various stylesheets (no compilation)
6. User scrolls to resume reading after being interrupted again.
7. [JS resource loads for ad. Creates banner box -- TEXT JUMPS TO NEW POSITION].
8. Again user finds reading position to resume
9. [3p CSS arrives to style the ad -- TEXT JUMPS TO NEW POSITION]
10. User begrudgingly finds position, wondering if this article is worth the trouble.
11. (steps 7-10 repeated for a few more add boxes / other nuisances)
...