Mobile is just the beginning

It’s about the content stupid

Here’s a revolutionary idea. What if all sites were lightweight?

Seriously. Wouldn’t the world be a much better place?

Oh but sorry, I forgot. Users want interactivity. (We know this because…well, just because).

I’m in Bangkok, in a nice hotel, on a Mac, trying to browse the Camper web site using somewhat lethargic wi-fi.

The site is—I have no doubt—award winning. I’m sure it will show up on the pages of .NET mag any moment because the gorgeous “Take Camper shoes for a walk” concept was developed using HTML5 instead of Flash.

Never mind that it still has that all too familiar “Please wait” loading animation (by my estimate a 20-second wait just to load the swooshy, minimalist Jackson Pollocky home screen…but of course Camper’s personas didn’t include slow wi-fi).

All this wouldn’t be so bad if each shoe collection didn’t spawn yet another “Please wait” message, and yet another 20 second wait before i’ve even seen the shoes (…but that’s what the awesome copywriting is for…a collection called Flexibility, Together or Cushioning must surely be worth the wait!)

Eventually it becomes unbearable. Where is a good mobile site when you need one?

The problem is, I really like Camper. I saw some nice shoes today at the mall and want to know if they’re available back home (because i’ve learned from experience that region-blocking also applies to shoes).

So I take the only sane option available to me. I download their PDF brochure.

It takes about 10 seconds.

The content is static, but it’s perfectly lovely (…possibly due to the fact that I can actually see the bloody content). And as a bonus, it’s incredibly portable…I can view it on any number of devices!

So congratulations to all of us. It’s 2012, HTML5 is awesome, and i’m surfing a PDF.

The zombie apocalypse can’t come soon enough. Nothing like a good plague to sort things out.

48 Responses to “It’s about the content stupid”

  1. Kristofer Layon

    I’m trying to discern whether your PDF salvation is being observed with or without irony, and assume it’s a bit of both. =)

    Certainly, PDFs aren’t openable on many mobile devices, can take a while to download, and aren’t usually as lightweight as corresponding HTML content would be. But on some platforms (such as iOS), PDFs are actually pretty darn handy. They can be saved to iBooks, for example, and then also used offline. (though to be fair, so can HTML in Instapaper…)

    I’ve encountered this a lot with restaurant web sites. Flash sites are of course unusable on my iPhone, and PDF menus aren’t necessarily ideal, but again, they’re viewable and archivable.

    Zombie apocalypse indeed. In today’s Wild West mobile landscape, the victories (even if partial, as is often the case) can crop up in surprising places.

    Reply
    • Brike

      dude he’s simply saying developers should not get so caught up in the technology hype that they forget about usability. Remember how people used to use marquee on all websites even it made no sense?

      HTML5 is sort of doing the same thing right now. Users want to browse to see what they want as fast as they want it, they don’t care wtf developers use.

      Reply
      • Scott

        dude don’t get so caught up in your mysoginist preconceptions that you assume all writers are male. he’s not a he.

        Reply
      • brah

        dude, it seems unlikely that Stephanie Rieger, the author of this blog, is a dude.

        Reply
        • Erroneous

          Dude don’t assume that by someone’s name is Stephanie, she isn’t a he…err yeah!

          Reply
      • Morg.

        HTML5 is lighter and faster, not the opposite. The crappy slow GUI js libs are an entirely different story.
        And I have seen quite a few users who prefer .fadeIn() and .slide() unfortunately – I don’t listen to them, my stuff runs perfect on a phone, but that’s still bad mkay

        Reply
  2. Derek Pennycuff

    We live 4 miles outside of what passes for “town” in northern Wisconsin. The population density, even counting the nearby “town” of 2,000 people, is about 12 people per square kilometer. Getting any internet service required a series of long phone calls with the local phone company. Apparently a port in the nearest DSLAM finally opened up and we got extremely crappy DSL service. The actual bandwidth isn’t too bad. We average around 1 meg down. But the network latency is insane. Round trip time on a ping is typically over 1 full second. I estimate around 10-15% of my requests time out; missing images, no CSS, no Javascript, etc.

    So I share your pain. But not just from a hotel room. It’s my every day reality. I’ve always been cognizant of page weight but living with such unreliable net access for the past year has really driven the point home for me.

    Reply
    • steph

      What I always find strange is how quickly people dismiss stories such as yours as edge-cases (or things that will resolve themselves any minute now thanks to improvements in infrastructure).

      I have all sorts of big-city edge cases as well…like neighbourhoods in London that sit in a mobile network black hole (lucky to get 2G on most days…in certain areas, you lose access to the network altogether) or the fact that where I now live (Edinburgh) is full of multi-hundred year old stone buildings which not only make mobile access iffy but can cause problems when trying to provide wi-fi (…try offering consistent wi-fi to visitors in a big old museum for example). :-)

      Reply
      • Erroneous

        It also begs the question why from the mobile site there is a “view desktop site” or “view full site” but never a “view mobile site” from the desktop site. You should always be able to go to mobile.website.com or something if u have a slower or u reliable network.

        Reply
    • Damien

      You should give opera (with its turbo functionality) a try, it’s great on slow connections!

      Reply
  3. Miguel

    So true! At the end, content is all that matters. By the way, I think the pdf is as good as the website itself, but yet more efficient.

    Reply
    • Tristram

      NoScript is great for browsing, especially with Horrible University wifi. I’ve come across the problem that some website don’t work without JS. So you enable it, gets a bit tedious, but makes sense; for things like youtube and such. But it seems a bit obnoxious how site *requires* js when there is no dynamic content on the page.

      Reply
  4. foo

    do you realize that your header image could be 10x smaller (filesize) if it was exported as a JPG instead of a PNG? right now it has 750kb which is really heavy for a single image. PNGs are only recommended for images that have a flat color, photography should “always” be exported as a JPG.

    nice post tho.

    Reply
    • steph

      Gah…thanks for pointing that out. I had somehow selected the wrong one from the WordPress theme manager library thingy. :-(

      Reply
    • sebphfx

      unless you want transparency you can use an 8bit png. So they’re not only for flat color.

      Reply
  5. Werner Taube-Petrignani

    I hear ya, it’s all about content ( then web servers, page optimizations, network acceleration and browser specifics), but first: lets turn the web to PDF

    Reply
  6. Tomaz

    I’m betting that this kind of behavior was ordered by some corporate folks who has absolutely no idea how web works and they just wanted the bling. I closed the tab as soon as I noticed “please wait”. I don’t want to wait, like you said it’s 2012, waiting is for losers.

    Reply
    • Brike

      not quite the web is hot on HTML5, time and bandwidth is now wasted all in the name of HTML5.

      Developers have fallen in to the mistaken pipe dream that users give a f**k about the underlying technology.

      A good example can be gotten from Microsoft blog for Windows 8, all videos start downloading as soon as you enter the page regardless of whether u were interested in the video or not.

      Html5 AINT BAD its just senseless application of effects and techy stuff. A perfect example is how all metro app in Windows 8 makes use of the branding feature (thereby adding at least 10seconds loading time) whether it makes sense to do so or not.

      Reply
      • Valstorm

        “Developers have fallen in to the mistaken pipe dream that users give a f**k about the underlying technology.”

        - I think you mean *designers* here.

        Many good developers are constantly battling against other departments and entities within the industry to get the best performance out of the web, by educating designers on the other side of the office and also directly via the code that they write.

        20% of the time the client has seen a bad user experience somewhere else and they have to have it too because it looks awesome and flashy.

        40% of the time it’s the management or executives trying to be innovative without fully understanding the impacts on user experience.

        30% of the time it’s a designer treating the web as their platform for artistic expression and unique quirkiness.

        10% of the time it’s due to a developer not speaking up and educating their colleagues, they’re either tired of getting nowhere or too busy to get involved.

        These numbers are completely made up.

        It might give you a vague idea as to where the bad decisions come from.

        Reply
  7. Andre

    The problem isn’t the technology but the way they used.

    With proper caching and a well designed front-end (one that don’t load tons of javascript every single page refresh), any site can load faster that that PDF.

    The only thing that should require download in this case should be the specs of the shoes and it’s photos the rest of the site could be downloaded only once and run from cache.

    Reply
    • Morg.

      Not really – If you’re going to use existing libraries for said website, it’ll prolly end up just as slow as the author’s example.

      The issue is simple:

      people want gfx
      gfx implemented in js
      js is fucking slow, in the best (V8) case
      libraries built on top are orders of magnitude more inefficient (e.g. ext4js)

      I code for performance and my websites are the same on phone and PC – I can tell you I’m almost alone and I *often* need to roll my own code because existing libs are crap.

      Reply
  8. hu_me

    I had the same experience when I was in Bangkok a few months back. this is more true when you are a tourist trying to get by on wifi and whatever passes for 3g or *edge*

    becomes more problematic when half the local sites insist on using flash.

    Reply
    • John Dowdell

      I’m also often on slow connections, and it’s usually obvious when site approvers have not tested beyond their fast desktop. (You can use Adblock Plus as a friendlier UI to your HOSTS file to strip out third-party content.)

      But for the casual anonymous SWF slam:
      a) on handsets SWF is click-to-play
      b) SWF is by default single-HTTP-connection, avoiding the 200+ network requests described in the Hacker News comments on this post
      http://news.ycombinator.com/item?id=4032486

      jd/adobe

      Reply
      • steph

        To be hontest John, we are all seriously worse off without Flash. Yes some people did stupid stuff with it, and those same people will now do stupid stuff with HTML5 (6, 7 8, etc).

        In the meantime, it’s now considerably harder to make cross-platform rich media (or whatever the modern term of the day is). I blame Steve Jobs for so persistently not including it on iOS but also Adobe for wasting their *very* early start in mobile chasing app developers (who saw no value in Flash…or actively hated it) when they should have been working with agencies and e-learning folks who made their living off Flash and would gladly continue to do so if the format were still relevant and useful (…barring a miraculous iOS implementation, it will likely never be relevant again…at least not in the browser). [..end rant]

        Reply
  9. Mike Roach

    Even on fast connections these kinds of sites are annoying. Seems that single-page applications are all the rage these days after Gmail managed to mostly pull it off. The problem is that most developers get it wrong. They introduce performance, stability, navigation, and general usability problems along the way. And for what? What have we gained? Of course there are cases where a quick data entry screen is preferable to a new page load, but in general I’m finding the SPA thing has gone way too far. Plus, as you say, people are assuming connections are fast and stable. That’s not the case in much of the world, especially on mobile networks. Try loading an SPA website while on a train and see how much fun that is.

    Reply
    • Morg.

      dude . I got SPA’s that are less than 10k

      the issue is not the concept, the issue is the current dev philosophy : dev crap the CPUs are getting faster all the time so it doesn’t matter.

      Reply
  10. Solomon Watts

    Nice article, I totally agree! I used to keep my site looking great, while using modern technology, but the content it kept loading took much too long (partially due to a slower server).

    Any recommendataions for a beautifully simple, lightweight WordPress theme?

    Reply
  11. dzhiurgis

    Oh I started to hate PDF’s so badly. Try importing one into Kindle, especially academic one, with some crazy formatting – it’s nearly impossible. Instead I prefer normal article and Safari Reader mode.
    Of course for product catalogue it’s different, but then, I would just go to eBay :/

    Reply
  12. David

    Agree with your post, but then again I also cringed when I saw you using a default WordPress theme.

    Reply
  13. typhonic

    Thank you for using the word ‘portable’ in your complaint. It doesn’t really apply, but it is a reminder of what we could have. If only we produced with as much joy as we reproduce.

    Reply
  14. Matthew Harrison

    This site is a poor example. None their scripts are concatenated or gzipped and there are no image sprites. They have poor front end engineers and should plan out a better mobile experience.

    I would title this article: “Spent all the money on design and forgot to pay the engineers”

    Reply
    • James Baldwin

      Agreed, it’s a terrible example in terms of site performance. The reams of import statements and multiple script requests make me shudder.

      My only reason for commenting is a few replys are pointing the finger at us developers jumping on some sort of HTML5 bandwagon, and using this site as an example of it done badly.

      This site is written in HTML4. Take a look.

      Reply
  15. derp

    I agree with this post – but the point has been made so many times it’s silly.

    Usability is 95% of what matters, but people will fight over those remaining 5% forever.

    Reply
  16. Felix

    I get your wink concerning bad readability/usability even on great sites using flashy html5 etc. Pitty though I wasn’t able to use the “reader” function on iOS’ safari on your site. I now this is not a big deal and you’ve got an nice mobile version of your site. But using standards (making the reader function work) is one major issue when talking about usability (indirectly).

    The other thing I wanted to mention: I absolutely hate(!) reading PDFs on a small mobile device like an iPhone.
    I find myself constantly scrolling around while pinching and zooming. Don’t know how you get along with that :-)
    Or am I just reading the wrong PDFs? :-D

    Reply
  17. zu

    Im on 20 mbit cable and the 7sec loading already annoys me

    then at the second click it goes into please wait again.. at this point i just closed it. horror.I prefer light sites and not just for loading speed but for readability.

    Heck I often prefer plain ASCII because it forces simplicity.

    Reply
  18. Tom

    Umm… or the Camper site is crap?

    It has 49 external Javascript libraries. How on earth does anyone even do that?

    And just to fit in, there are 22 external stylesheets, and 42 separate background images!

    You can make crap in any system. There is a lot of crap Flash out there, that doesn’t have to be. The Camper site is an example of crap HTML5. Well, sort of anyways. It sets an HTML4 doctype:

    But then using an xhtml :

    This shit isn’t logical consistent. And it is crap.

    Reply
  19. ykristiawan

    I always develop my site as full blown Javascript+HTML5 and bare minimum HTML only with redirection on the home page. User with any internet speed can use my site.

    Reply
    • avk

      I dont understand why HTML5 and HTML are called differently.
      BTW, yes there should always be a static site with no blinks and show-off. Some people like to be fast than to wait

      Reply
  20. Jian Meng

    Hi,guy. Why not use the cache to accelerate loading speed?

    The large site pic can be cached or saved to local storage right after loading step. So waiting time is very short for the second browsering of page.

    Reply
  21. Nitin Nanivadekar

    Actually Adobe lost its way. They put forms in pdf. As usual, some dude could host the pdf in Adobe Acrobat and place an order form right there, some e-commerce around and voila, the shoes arrive in mail. Such a nice RIA? They went too much for design (Flex, Flash) and lost on security and in general, functionality.
    Adobe could not do it. Later, Steve killed their mojo. We would need some dude to fire up that pdf in to a catalog shopping idea.

    Reply
  22. Cesar Canassa

    I just checked the Camper website I failed to see any HTML5 in it.

    The red image is just a huge and unoptimized 250Kb PNG that is scrolled around the screen. The shoes that you see floating around are also PNG images, all of them are around 150KB-250KB. Even the characters are images.

    The website sucks, it was badly developed. If this website used more modern technologies, its weight could be drastically reduced.
    - Replacing the PNG red line with a SVG.
    - Replacing a the shoes PNGs with a JPEG sprite
    - Replacing the PNG characters with SVG

    Reply
  23. Brent

    Wanting to carry the worlds shopping experiences around in your pocket is a novel idea. Whether we like it or not, however, many companies are committed to selling an experience that compliments their product and said experience doesn’t always play nice in low bandwidth situations.

    I don’t fault the ‘ wait for technology to

    Reply

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS