The Website Obesity Crisis

If there was a theme which guided my thinking about the focus of Web Directions, and the Web, in 2015, it was “performance is everyone’s problem” (I captured some of my thoughts for The Fetch earlier this year as well). At all our events, Respond (for Web designers), Code (for Front End Engineers) or Web Directions itself (the whole Web community), a lot of the focus was on how whatever your role in delivering Web based solutions, performance was the responsibility of all of us, and understanding how your decisions whether as a CMO (just one more font weight), or designer (can we get a higher resolution hero video?), as well as more obviously developers, impact on performance, a key aspect of user experience.

So it came as a very fitting climax of our year to have a brand new presentation by the wonderful Maciej Cegłowski at Web Directions 2015 a few weeks ago: The Website Obesity Crisis.

So set aside a little time to watch – it’s impassioned, erudite, hilarious, and thought provoking–everything we look for in a Web Directions presentation.

If you like this, we’ve got our Web Design conference, Respond, coming up in Sydney and Melbourne in April 2016, and later in the year, Code, also in Sydney and Melbourne. And in the meantime why not get on our mailing list, or follow us on twitter to be the first to hear about other videos we release from our events. There’s plenty more from the recent Web Directions 2015 coming soon!.

5 responses to “The Website Obesity Crisis”:

  1. Maciej Cegłowski makes some good points.I was struck by two thoughts, based on what he said.

    First, it would be nice if Bootstrap or Foundation could somehow know what elements are on the page, and then load only the CSS and JavaScript necessary to effectuate those elements. If you don’t have a panel or a form on a page, then don’t load the CSS for it. If you don’t have a modal, then don’t load the JavaScript for it. Obviously, you can do this by hand for each page, but this gets really time-consuming on a site of any size, and if you add an element but forget to add the CSS / JS, then you’ve broken your site.

    Second, it might be easier to get everyone creating web pages if we had a stripped-down Bootstrap or Foundation that works on pure HTML tags (i.e. without adding classes to HTML tags) that gives the novice an attractive page right out of the box. Just add one line to the meta section to load the CSS from a CDN, and you get margins and padding and typography to make plain HTML look good enough. For example, instead of having a col-12 class inside a row class inside a container class inside a body class, have all the styling from those classes apply to the body tag.

  2. Third, as a special case, it would be nice if the “mobile first” movement actually did what it claimed, which is to serve mobile-only content to mobile devices, as opposed to serving everything to mobile devices that goes to desktop devices (for the most part), but then only showing the “mobile” aspects of the code. Unfortunately, this is possible now only using browser sniffing, which is a whole other topic.

  3. 看看!

    • By: Michael
    • January 10th, 2016

    Greg Raven, it’s only a start, but the new responsive image standard (picture/srcset/sizes) allows browsers to show only “mobile” images without browser sniffing.

  4. I don’t see a point in the “mobile first” designing of web pages. Mobile browsers are like normal web browsers so that the thing they can do best is just rendering “basic html”. Of course you can make separate pages for devices that have low-resolution display and low performance, or design the page so that the browser itself can scale it to different sizes and aspect ratios (which is really easy using basic html and doesn’t require scripts), but “javascript” menus with submenus are the worst with touch screens and they should never be used, although they are somehow usable with computer and mouse. Sure they “look like” touch screen interfaces, but why should web pages look like it? What’s wrong with normal links that every browser can show correctly and that can be clicked easily using every device? Traditional web pages are perfectly usable also when using mobile devices with touch screen, or even older mobile devices with other input interfaces.

    Nowadays every web page also has megaload of dynamically changing content that does not require a page load to change. In most cases it is unnecessary and makes it only harder to make a link to the page. Also if the scripts in the page somehow get stuck, you never know where it goes when you press the refresh button.