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


  • Trolleybus Mechanic

    There's a certain anti-pattern I've seen over and over on websites. Often "product" or "showcase" websites. These sites, I'd bet, were handcrafted by the boss' nephew who loves to fellate Bootstrap in a dark alley behind the Denny's.

    Prime example, since I just came across it, is this site:

    Look at it with Javascript turned off, then again with it turned on.

    😑 🕐

    Welcome back. So here's the hallmarks of this anti-pattern:

    • Every page is on the page. It downloads, and renders, every page-- or at least every tab of the page. Presumably so that it will make Mobile "more faster". Except it makes it slower, because you end up downloading the entire site, rather than just the portion you're actually going to read. But hey, if you WANTED to tab over to the second or third page, you can, and it'll be fast-- because you spent all that time downloading and rendering the page. So it's been made SLOWER and used MORE BANDWIDTH upfront to make it seem faster for the slim majority of the people who will click around.
    • Images as Content See the first entry on http://thornburycider.ca/blog/, which is currently http://thornburycider.ca/baby-its-cold-outside/. It's a recipe. But instead of posting the recipe, they posted a massive IMAGE of the recipe. Because you can't control which fonts are on certain mobile browsers (SAFARI), and we need to present this in THIS PARTICULATE FONT. So rather than pushing 10kb of text data, and letting the fonts fall where they may, you've now pushed a 723kb image that is non-scalable. So it's even HARDER to read, because you can't zoom. And even better, it is cut off on the blog preview thumbnail. So you have to visit the individual post-- doubling the amount of bandwidth and navigation you have to go through. And as a bonus :wtf: if you do accidentally click or tap on the image, it pops up in a lightbox-- that is about 50% SMALLER than the image itself, so it's scaled down. All in the name of presenting a SPECIFIC font.
      -Applax Scrolling. This is LIKE parallax scrolling, but only done because Apple did it on an iPhone. And it's vertical, rather than horizontal, so it's EXTRA EFFECTIVE and making you motion sick. And since it requires extra Javascript libraries (plural) to do, it increases the bandwidth needed (making it slower on Mobile). And since it's extremely CPU intensive (there's a listening on the browser's OnScroll event, that constantly recalculates the page height, viewport position, parallax speed, and redraws where the background is), it means it chews up mobile batter and provides an overall WORSE experience. Because Apple!
      -Gives You Head Mobile users need to easily navigate between pages and tabs, right? So let's make sure our navigation is RIGHT FUCKING THERE! The header is fixed at at least 300px high, which contains a MASSIVE FUCKING logo, and tiny, tiny, regular 12px sized hyperlinks. The header would take up just a sliver of the screen, if it weren't for the company logo-- which has to be in the user's face ALL THE TIME, even though the user came to the site and already knows which company they're looking at. So it in effect makes it harder and HARDER to read the content, because 300px of a 480px tall screen is used for a header. The bonus :wtf: (and absolute last nail in the :wtf: coffin) is when that header is set to position:fixed so that you can never get rid of it. So now you can navigate easier (except you can't, because of the 12px links), but why WOULD you navigate when you can't read the content.

    I'd add "hero slider" or whatever fucking buzzword they're using for the slideshow now, but that's a cancer on every site.

    Anyone have a good name for this anti-pattern? Any other hallmarks of it you've seen?


  • Notification Spam Recipient

    Yeah, I have no idea what is going on with web "design" lately. I mean, sure I go to bootstrap because the users thinks it looks pretty, but I don't in-your-face everything if at all possible. I don't make sites to be pretty, I try to make sites so they're functional, and a lot of sites now are all just eye candy....



  • @Lorne_Kates said:

    🕐

    🕦

    hooy gooys look oot my woobsoot – 17:31
    — Ben Lubar

    I HOPE YOU'RE HAPPY THAT I SPENT LIKE HALF AN HOUR MAKING THIS VIDEO INSTEAD OF MAKING A VIDEO ABOUT TALKING LIONS WITH FLAMING SWORDS



  • Didn't have a problem opening it in my laptop, but that's the exact kind of site that I would purposedly avoid opening in my cell phone. Is it actually supposed to be mobile-FIRST?! TR :wtf: is Bootstrap indeed.



  • @Lorne_Kates said:

    So rather than pushing 10kb of text data, and letting the fonts fall where they may, you've now pushed a 723kb image

    This, I feel, is a major fault with the modern internet.

    It's the reason that we have massive memory hogs for browsers.

    It's the reason that websites are slow and unresponsive.

    It's the reason that ads take up 99% of the viewspace.


    My hope for the internet, is that sites will carry only content with standardized sections, and a suggested default theme.

    I'd put a lot of hope on feeds, as being the closest to what I really wanted.

    In my mind the "server" (content provider) should only provide content. And the "consumer" (viewer, reader, user) should be able to determine how that content is presented.

    That links to content would actually be hyper-linked, and not navigational layouts.

    This concept, if followed, would drastically speed up the internet, and cut down bandwidth, all without some government takeover (net neutrality... which isn't actually neutral anyway. It's just the government regulating several speed brackets, so small sites will still be throttled, etc.)



  • @xaade said:

    My hope for the internet, is that sites will carry only content with standardized sections, and a suggested default theme.

    $ xxd text_viewer3
    0000000: 5201 0000 78da 5551 4f6b c230 14cf 7187  R...x.UQOk.0..q.
    0000010: e167 78b7 2148 e7b6 9b1e c6d8 3a2c 734e  .gx.!H......:,sN
    0000020: 3619 4829 12eb b30d 6df3 4a92 dae5 dbef  6.H)....m.J.....
    0000030: a582 e021 f0d2 f7fb dbdc 0821 6e87 e3f0  ...!.......!n...
    0000040: cfed 4e0a 7b34 4f53 fe32 15e9 26d9 2ce3  ..N.{4OS.2..&.,.
    0000050: 6c53 227c 4add c97a 060b acdb 1aad 0532  lS"|J..z.......2
    0000060: b0a0 16c3 fc9c de9f 8163 668d c596 3a28  .........cf...:(
    0000070: e509 a135 bcc4 0338 e697 cc83 0a3d 3452  ...5...8.....=4R
    0000080: 7b70 aa41 1b49 86cb 014e baf6 a031 60e9  {p.A.I...N...1`.
    0000090: 4cbb 2691 ce71 029a 98ed 1c1a 28a9 87ce  L.&..q......(...
    00000a0: 14a8 1d78 ea0c 5368 5f63 c36b 0f16 7990  ...x..Sh_c.k..y.
    00000b0: 6e10 083e d19c 6de6 623d a8a6 c947 bc9d  n..>..m.b=...G..
    00000c0: 2de3 97df f8e7 f53b 8e57 5970 2c08 f632  -......;.WYp,..2
    00000d0: afc2 1858 1ce0 a4a8 b360 7383 a8a3 9405  ...X.....`s.....
    00000e0: 52f1 86b6 550e a1f1 c1ae 5116 037e 287a  R...U.....Q..~(z
    00000f0: 95b5 2753 7160 083d cf02 1350 0e0e 8456  ..'Sq`.=...P...V
    0000100: dfb9 cbda 95ea 6290 b141 2692 6328 03d2  ......b..A&.c(..
    0000110: 6050 55ba 0087 79a9 552e 6b70 863a 6e38  `PU...y.U.kp.:n8
    0000120: 0951 d9b5 effb 682f fdc3 6321 c38f cc89  .Q....h/..c!....
    0000130: 1beb 0348 5bc1 911f 66c8 3278 60b8 778d  ...H[...f.2x`.w.
    0000140: 8d46 6c31 12e9 225e ae67 abaf dd7b c2cf  .Fl1.."^.g...{..
    0000150: f50f ae3b a4f8                           ...;..
    $ cat decode.go
    package main
    
    import (
            "encoding/json"
            "os"
    
            "github.com/BenLubar/df2014/cmv"
    )
    
    func main() {
            list, err := cmv.ReadStringList(os.Stdin)
            if err != nil {
                    panic(err)
            }
    
            err = json.NewEncoder(os.Stdout).Encode(list)
            if err != nil {
                    panic(err)
            }
    }
    $ go run decode.go < text_viewer3
    ["text_viewer3","[TITLE]The Manual: Helpless or Hopeless?[/TITLE]","You have pressed the help key many times.","You only need to press the help key once, no matter how urgent your problem may seem at the time.","Press [IKEY:LEAVESCREEN] to go back to the previous screen.","Despite my promise to have the help key work on any screen, it doesn't work on this screen.","If you are having technical trouble, go to www.bay12games.com and ask for help on the forums.","[HELP:NO_FILE]"]
    

    Which looks like this:



  • @Lorne_Kates said:

    THIS PARTICULATE FONT

    ❓



  • @Lorne_Kates said:

    It downloads, and renders, every page-- or at least every tab of the page.

    For this one, once upon a time, the recommanded practice is to NOT set any src attribute in img tag (except those really small one like 1-pixel space.gif) and set them on load event when the page loads.

    That is for similar reason, but we seldom see websites doing it these days, presumably because of the higher bandwidth we have.

    So if each of the extra pages is less than, say, 1MB in size, I'd think that's not very big deal.



  • I like how the loading spinner itself spins. It sounds like a conundrum, but there it is.

    It's like a circle in a spiral or a wheel within a wheel...


  • :belt_onion:

    Yes, yes it is. They got one part right (it's responsive). They they done gone and fukked it up.

    FWIW I don't think it's Bootstrap's fault per se - I think people are thinking "well I use bootstrap so it's always mobile friendly. Let's just got commit abbhorations to the rest of the page because WE'RE GOOD, GUYS!"

    I personally use http://materializecss.com for my webpages. I think it does a reasonably good job of showing content and looking pretty good without loading ALL THE THINGS (it's just a single small .js file and only needs jquery so it's pretty lightweight)



  • I would like to see a website that includes CSS and JavaScript but not HTML. Through some arcane HTTP header manipulation or something.


  • :belt_onion:

    I mean... If you can get js executed somehow you can do anything.

    You shouldn't... But you can.



  • Doesn't CSS have that like :after thing that inserts HTML?

    But you'd still need a way to serve up the CSS link.


  • :belt_onion:

    Yeah CSS can do that too. Which... actually probably means someone has inserted js code with an :after before. That's a disturbing thought.



  • No, CSS cannot add HTML entities, just text. You can have no JS and no HTML and just CSS to make a pretty web page with, but you can't insert JavaScript with CSS.


  • :belt_onion:

    Phew. Disturbing thought derailed.



  • @Lorne_Kates said:

    Every page is on the page.

    No repro. For me, each link opens on a separate page.

    Maybe it only happens on mobile?

    @Lorne_Kates said:

    Images as Content See the first entry on http://thornburycider.ca/blog/, which is currently http://thornburycider.ca/baby-its-cold-outside/. It's a recipe. But instead of posting the recipe, they posted a massive IMAGE of the recipe.

    Nothing to do with the site. People in charge of CMS got lazy and just posted one of their promotional images, instead of trying to recreate it in HTML (for which they probably have no skill anyway).

    @Lorne_Kates said:

    -Applax Scrolling.

    TRWTF is that they fucked it up.

    Other than that, meh. There's about 200kb of javascript on the home page, which is OK. There's no scroll-jacking or attempt to interfere with navigation too much. All they do is trigger background images, which is annoying IMO, but bearable.

    @Lorne_Kates said:

    -Gives You Head

    I don't understand this. There is no fixed header. Once you scroll down, you can see the content on full screen.

    It's not even overly large, at least not on desktop.

    In fact, that's what it is. The site looks pretty decent on a large screen. Maybe you got it backwards, and they actually optimized for desktop, instead of mobile?

    Either way, while this site won't get any awards, I've seen way worse.



  • And the funniest thing is, back in the days of WAP etc, mobile browser creators pretty much nearly perfected viewing desktop pages on mobile. All you needed to do to make your page render fine on mobile was not to do stupid hacky shit.

    But people decided they're gonna do stupid hacky shit anyway, and if that meant their pages broke utterly on mobile... Well, let's do more stupid hacky shit specifically for mobile!


    Filed under: cue @Onyx Opera Mini rant


  • BINNED

    @Maciejasjmj said:

    Mini rant

    I'm not that impressed if it's only a mini rant ...



  • An example of how a website should be done is http://motherfuckingwebsite.com/ and I'm being serious about it



  • I was hoping a website like that existed.

    They used the header tag and misused the aside tag, but no other structural elements are used (or misused), which is weird because the HTML source is indented as if one of those (e.g. main) was meant to be used and the site claims to use HTML5 for that exact purpose.

    Either way, it's now in my bookmarks and I will send it to any friends who fall into the framework trap.



  • Still now, a lot of sites are just as usable in desktop view on mobile as in mobile view. Except you get all the functionality that the site has to offer, not the fraction of functionality that mobile sites usually have. If I could just get a way to trigger and keep hovers (or neutralize the designers that are still using them), and bypass viewport fuckery; absolute positioned elements that end up off-screen, I would never visit another mobile site again.


  • BINNED

    @Lorne_Kates said:

    handcrafted by the boss' nephew who loves to fellate Bootstrap in a dark alley behind the Denny's

    @Haloquadratum said:

    TR :wtf: is Bootstrap indeed.

    Disagree. We can discuss the size of libraries used by Bootstrap, but it's not its fault that the site is shit. Bootstrap actually makes making something responsive fucking easy if, and only if used properly. I contend that the proper use is the problem.

    Also, you don't have to load jQuery to use Bootstrap if you just want the CSS, you only need it for extra plugins.

    @Lorne_Kates said:

    Applax Scrolling. This is LIKE parallax scrolling, but only done because Apple did it on an iPhone. And it's vertical, rather than horizontal, so it's EXTRA EFFECTIVE and making you motion sick. And since it requires extra Javascript libraries (plural) to do, it increases the bandwidth needed (making it slower on Mobile). And since it's extremely CPU intensive (there's a listening on the browser's OnScroll event, that constantly recalculates the page height, viewport position, parallax speed, and redraws where the background is), it means it chews up mobile batter and provides an overall WORSE experience. Because Apple!

    No JS needed, this is just dev stupidity of throwing SO answers at the problem. It took me 15 seconds to find this. I don't like the pattern either, but it is doable with pure CSS.



  • This post is deleted!

  • Discourse touched me in a no-no place

    @ben_lubar said:

    I HOPE YOU'RE HAPPY THAT I SPENT LIKE HALF AN HOUR MAKING THIS VIDEO INSTEAD OF MAKING A VIDEO ABOUT TALKING LIONS WITH FLAMING SWORDS

    I, for one, am, on behalf of others I CBA to @mention.

    You should TOTALLY mail the link to this video to that brewery. You could send it to the email address to a different domain that was like the very first thing taht loaded on the page.


  • Trolleybus Mechanic

    @Onyx said:

    Bootstrap ... if, and only if used properly

    I've focused your sentence for you. Do you see where the problem lies now?


  • BINNED

    @Lorne_Kates said:

    I've focused your sentence for you.

    Thanks, I would never be able to do that on my own.

    @Lorne_Kates said:

    Do you see where the problem lies now?

    The one I pointed out myself? Now I do. I feel enlightened, thanks.

    Look, I'm just pointing out that Bootstrap, like it or not, is actually a good tool. Misused by idiots? Well, duh, every tool gets that. But that damned thing actually works, and any failure to make a decent responsive site using Bootstrap is only a fault of the author, not of the tool.

    Well, unless you want to call the author "a tool". In that case, it's the fault of that tool, yes.



  • Even some of the worst software in the world can be used properly. That doesn't mean it's easier to do so. My point is, I've only noticed all these slow multi megabyte pages come about after JS frameworks popped into existence.



  • Oh great, in the footer it links to a website maker in Markdown.

    Why does anybody think Markdown is good?



  • Because it doesn't have CSS nor JavaScript



  • This is a website. Look at it. You've never seen one before.
    Why wouldn’t I have? I used to make ones that looked like that back around 1994. Though unlike this one, mine had the tags in capital letters, since that was how you were taught to type them back then.

    Also:
    [code]
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-45956659-1', 'motherfuckingwebsite.com');
      ga('send', 'pageview');
    </script>[/code]
    


  • Garbage Person

    No repro on the scrolling and header. Checked on both desktop on mobile chrome.


  • area_can

    If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.


  • :belt_onion:

    @cartman82 said:

    It's not even overly large, at least not on desktop.

    It's pretty bad on mobile. They're taking that contact us thing and putting it over the nav stuff so you get a pretty large header

    Of course it's not a sticky header... Which is silly for nav, but it makes this setup slightly less bad since it doesn't take up 25% of the page when you scroll down



  • Vegan-friendly alcohol? What, do other brands of apple cider contain live bees?



  • I prefer the original motherfucking website. The browser could have a better default for margins, it shouldn't be in the html.


  • BINNED

    @LB_ said:

    Even some of the worst software in the world can be used properly. That doesn't mean it's easier to do so.

    Ok, I'm gonna go a bit evangelist here probably, but I want to explain my reasoning first: see, I used to do this shit by hand. I know the joys of floating shit left and right, then having IE shit over it, fixing it, then having FF shit over it, then somehow fixing it all to have Chrome go "LAWL, NO!" and making the whole thing explode. That is why I like the damned thing.

    And I think you misunderstand what Boostrap actually is. To explain:

    Does anyone remember how many websites had a "silver bullet solution for a 3-column layout that works, honestly guise!"? You know how you do a 3-column layout in Bootstrap?

    <div class="container">
        <div class="row">
            <div class="col-lg-4"> First column </div>
            <div class="col-lg-4"> Second column </div>
            <div class="col-lg-4"> Third column </div>
        </div>
    </div>
    

    There you go. Three columns, equal width, works where ever you want it.

    Oh, but dear, we only want the middle one on desktop, not on mobile or tablets? Whatever shall we...

    <div class="container">
        <div class="row">
            <div class="col-lg-4 hidden-xs hidden-sm"> First column </div>
            <div class="col-lg-4"> Second column </div>
            <div class="col-lg-4 hidden-xs hidden-sm"> Third column </div>
        </div>
    </div>
    

    ... oh. And then we just use visible-* classes to show mobile-only menus and shit. Well isn't that nice.

    Anyway, that's what Boostrap is. That's pretty much all the core of it is: a responsive grid system. And styles for other common elements like buttons and tables. The only JS that Boostrap has in "core" is some stuff for collapsible elements, tabs, pretty tooltips and such. And even that is optional. Want just the grid system and basic styles? Cool, you can have that.

    Also:

    @LB_ said:

    I've only noticed all these slow multi megabyte pages come about after JS frameworks popped into existence.

    What, Ember and shit? Yeah, those are crap for anything except maybe complicated webapps. That has nothing to do with Bootstrap. Also, all of this applies to MaterializeCSS as well.



  • @Onyx said:

    I used to do this shit by hand. I know the joys of floating shit left and right, then having IE shit over it, fixing it, then having FF shit over it

    Well, don't make shitty web sites. 🚎



  • That's to differentiate them from End of History beer.



  • I see, I didn't realize bootstrap was just CSS. You're right, I'm wrong.


  • BINNED

    It's ok. Sorry I went off there a bit, it's my hatred of fiddling with CSS seeping through 😛



  • @cartman82 said:

    There's about 200kb of javascript on the home page, which is OK.

    Sorry? You think 200 kB of JavaScript is okay for a simple informational website? :wtf:



  • @AlexMedia said:

    Sorry? You think 200 kB of JavaScript is okay for a simple informational website? :wtf:

    Yeah, that's fine.



  • No it is not.



  • @AlexMedia said:

    No it is not.

    Yes it is, x1000, last!


  • Discourse touched me in a no-no place

    Could be worse, could be forum software that downloads 1.1MB of Javascript.


  • Discourse touched me in a no-no place

    @Lorne_Kates said:

    Applax Scrolling

    There's also the fancy-ass animated transitions on the home page. Everyone loves those! Makes the site look so… [spoiler]un[/spoiler]professional!

    That site is shit in a real browser. I refuse to find out how bad it is on mobile.


  • BINNED

    @dkf said:

    I refuse to find out how bad it is on mobile.

    Oh come on ... Deep down you do want to find out



  • That's pretty bad too, but basically a consequence of building an SPA for it. Just like GMail or Outlook on the web. At least there was some thinking behind it and I can partly justify that choice.

    But simple informational sites should not need hundreds of kB's of JavaScript.


  • Discourse touched me in a no-no place

    You're putting more thought into it than I did. I was just making a dig at Discourse.


Log in to reply