Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #107

Lately, web development has become very complex. People being full-stack developers often complain to me that they can’t care about all these cool things in front-end development. People doing front-end still complain about having too few things to control the website, make it faster, more reliable.

This growing gap worries me about the future of usual websites. For big web applications and big websites, it’s great to have all the options and a dedicated front-end performance engineer. But what about an average website? A simple website for a painter can’t cost thousands of dollars.

Do we indeed lose individuality by moving our process towards templates-based design? I hope not. I hope we find a way to simplify our workflows again within the framework of web standards, and that we’ll be able to communicate them clearly so everyone in the industry can make use of them. Let’s pull this trigger together. And if you have a story to share, about the workflows you are using or the toolset you prefer, just add it to the comments or send me an email1.

News Link

  • This week, the AMP project2 has been launched. It’s a web tool and special subset of web technologies to enforce fast web performance. It’s controversial because it requires a duplicated, adapted variant of your website and while not allowing you to use most JavaScript features, it throws a huge (open sourced, Google based) JavaScript on top and controls the content and loading behavior of your site. Tim Kadlec wrote up some good thoughts on AMP3 that don’t present just a biased opinion but show reasonable concerns while reflecting on the advantages of the project.

Tools Link

  • We tend to solve a lot of problems related to the front-end by delegating them to existing programs. We use libraries and tools which we don’t understand completely – and our code base grows and grows. Simplify your Workflow is not only a slogan, but a necessary development, says Hans Christian Reinl.
  • At the MAX conference this week, Adobe announced Project Comet4, a UX design tool that makes creating prototypes fast, easy and collaborative.

Security Link

Privacy Link

  • Subgraph OS6 will be an open source, secured and Tor-based operating system that is designed for usability and takes privacy and security into its core, so you don’t need to worry anymore or understand the technical details in its full extend.

Web Performance Link

  • We’re often talking about optimizing our JPEGs or PNGs. Some people optimize their image assets by using the newer, more efficient WebP format. Now, FLIF7 is coming up, claiming an even better size-to-quality ratio and featuring responsive asset container – which would be awesome. Unfortunately, it is not supported anywhere which is also the problem why the WebP share is still so low.
  • Having metrics is good, but it’s more important to actually understand it. Because metrics are often misleading, you need to know what to make out of it and how to extract reasonable findings out of metrics8.
  • Now as we have reached a state where we technically know so many tricks to improve a site’s performance, the topic of perceived performance is getting more attention. Paul Irish and Paul Lewis from Google wrote up how to optimize performance following the user-centric RAIL model9.
  • There are many resources on the web featuring tricks to improve web font loading. But I haven’t found a resource combining all the approaches, so I wrote my own article: Using Web Fonts The Best Way (in 2015)10.

Accessibility Link

  • It’s two years old already, but still very useful. Take Karl Groves’ Diagnostic.css11 to test your webpage against the very basics of web accessibility.
  • When using interactive content on your website, we should always consider all users. For example, it could be a bad thing to show a full-sized, flickering or flashing video to an epileptic person. Therefore, the minimum requirement would be to always show controls to such interactive content or, even better, to warn people or not auto-play it.

CSS / Sass Link

Work & Life Link

Dark World Map16
A world map showing the locations of remote workers, across all time zones.

Go beyond… Link

  • “The secret to success in our fast-paced industry is, I believe, straightforward: make things, share things and – last, but by no means least – be nice to people. That’s it, really17.”

And with that I’ll close for this week. In case you like what I write each week, please support me with a donation18 or share this resource with other people. You can learn more about the costs of the project here19. It’s available via E-Mail, RSS and online.

Thanks and all the best,

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Anselm Hannemann is a freelance front-end developer and architect. He curates WDRL — a weekly, handcrafted web development newsletter. Apart from that he helped the RICG, built and organizes the NightlyBuild 2015 conference in Cologne, Germany. He is available for freelance jobs.

  1. 1

    Regarding the debugging of Content Security Policy settings, does a tremendous job collecting and analyzing reports for CSP and HTTP Public Key Pinning issues. And it’s also a free service.

  2. 2
  3. 4

    “A simple website for a painter can’t cost thousands of dollars.” I don’t agree, if someone wants a custom website, our trade is one of specialization. If they want to use a homogenized template… let them, it’s their business/personal identity. The commodity templates are a good thing for this purpose and a specialized custom site should be in the cost range it is, designers/developers still need to make a living.

    • 5

      Anselm Hannemann

      October 10, 2015 11:07 am

      My point was more about the technical complexity like the need to use responsive images, prefetch/preload headers, localStorage, complex tooling setups or ECMAScript 6. All these things that we consider as “necessary” these days lead to a massive increasement of costs. And because of that necessary things I believe many developers are lowering the sights on individual design. I strongly think that because of all that complexity, people tend to use (design and development) frameworks as they can’t deal with all that on their own.
      I recently was asked to do a small website for a client. When I calculated how much it’d cost I said: Well, you know… I calculated it for you, here’s the price (about 5000€ for a regular CMS page with individual design and good technology base) and advised the client to consider using Squarespace templates or similar as I fully understand a small company can’t pay 5k for a website that lasts ~2-3 years while he can run his business for 2 months for the same costs.

      I don’t say it’s all bad. But a few years ago, building an individual website was much easier than today. And that worries me. And now I realize that this was pretty much for a comment and I should probably have written it down as an individual article :D


      • 6

        I just had to deal with this kind of situation with a client. The client asked whether my $5,000 range (about the same as your 5000Euro) was typical of the web industry and I said that it was about average, unless he wanted to hire some kid off the street. Furthermore, I asked them how much they pay someone to remodel their bathroom…and that only took 2-3 days and they paid $15,000 for it. Not everyone sees the bathroom, only the client does…and they often have more than one bathroom in their house, so a second bathroom is not really needed (it’s really convenient to have more than one!). Everyone sees the website…and in today’s world…a website is a necessity for most businesses.

      • 7

        First of all thank you very much for this great series!

        Sure, I got your point and I totally agree. But maybe we should reconsider our tools. Not every website needs the latest technology, fancy JS, complex tooling or a CMS. Not every client insists that we have to use all this stuff. We can still build beautiful, fast and responsive websites with plain and static html and css. This is the beauty of the Web. Isnt’t it?

        • 8

          Anselm Hannemann

          October 16, 2015 7:21 am

          That’s exactly what I was thinking. We still might want to use tools but if so, I think we need to make them much smarter so they don’t cost us hours to set up.

    • 9

      Unfortunately, most of the clients cannot understand the cost of a medium/high quality custom product (not always custom products are a success). As a freelancer web developer people come to me to create advanced stuff but with the budget of a simple site, I try to explain the difference and if they understand we can do business, if not I kindly advise them to go to another developer. I prefer to lose some money, than my sleep over an underpaid project.
      An incidental detail, this is an article I wrote at medium this week for WordPress Themes and their quality.

  4. 10

    Brenton Kelly

    October 10, 2015 2:58 am

    This weekly resource is always filled with awesome resources and great useful and relatable information! I look forward to it every week! I hope to see it stick around for a long time!

  5. 11

    Thank you!

  6. 12

    “Do we indeed lose individuality by moving our process towards templates-based design?”

    No, not at all.

    The basics still apply, regardless of all the complexity surrounding modern front-end web development.

    Just because developers are using sass or post-css, build tools, a swathe of optimisation techniques, svg icons etc., doesn’t mean you have to.

    A simple web site for a painter really doesn’t need all these techniques. You can get by with great design & very basic html and css.

    For many small, simple websites, do you even really need a CMS?

    Over 20 years in the business, I’ve built hundreds of small websites for customers. One thing I’ve learned over that time, is that not many small companies or individuals have any desire to use a CMS. They would rather have someone maintain, at a small cost, the website for them.

    If it’s your business to create websites as a freelancer, that’s surely beneficial to you. Existing customers are generally more lucrative than finding new ones. Those customers will generally be more than willing to pay a small fee to update some copy, add a new page, create a new website feature.

    As for performance, you absolutely need to get the basics right. But that mostly boils down to optimised images, which any decent graphics package can provide.

    Extreme performance techniques only become a necessity when a website is getting a significant amount of traffic.

    Heck, you can churn out HTML/CSS that some devs would cry over, but if it delivers what your client requires and they are happy = job done.

    • 13

      Anselm Hannemann

      October 16, 2015 7:28 am

      Thanks so much for this comment. It’s exactly what I was aiming for as feedback. I think you’re right – we don’t always need to use the latest tools, etc.

      I recently built a one pager with plain HTML and CSS, no tooling involved at all. The reason was that the client knows how to change some text in HTML and how to change colors in CSS. But she has no clue (and shouldn’t have, she wroks in a completely different industry) how to deal with tools. So I built it without optimizing anything in a pre/post-processing step and still achieved a great result (and not too bad performance btw).

      It’s just that I have the feeling that the whole world (means blogs and documents like Google developer guide) tell you all the time you need to use this and this tool to properly build a website today. And I think it’s hurting the web a little bit. I love it when I can just edit a CSS file, save it and it instantly shows the changes in the browser, no matter on which machine I edited the file.

      • 14

        I totally agree. With the industry constantly telling you to keep up with the latest technologies, sometimes it feels like we’re making the Web this crazy, massive, complicated thing that intimidates non-professionals, when one of the best things about the Web _was_ its ease of access by anyone at all. (Not anymore, I’d say.)

        I really do hope that we will still have (however little) room for that simple HTML + CSS pages you did for your client. The last thing I want to see is for the Web authoring to end up being this monster that is exclusive to those in the know only. That really would have made the Web lose its original charm and beauty. Thanks for your article and reminder.

  7. 15

    While strongly I agree with the general topic of that article and the comments, there’s one thing: Prospective clients often fail to see the difference and since so much shiny new stuff out there, they want a piece of that cake. Even the simplest site will have to provide some way of content management, of course websites today need to work on multiple devices, and just backpaddling to plain and simple won’t cut with most of these type of clients. Even as a small company and not freelancers we have clients who want cms driven websites, responsive and of course featuring that ‘wowness’ (which nobody can explain of course) and every time we settled for a rather quick readymade template based aproach because the client wouldn’t spend more than, say, 1500 eur for the site, which means we have about two days woth of effort, it heavily backfired, since sooner or later the restrictions imposed by the tempate-solution of choice didn’t allow for the things the client like to do with the site.
    so I see it like the comment above who rather loses quick money than fret about underpaid work — a website needs a budget of at least 5 to 7 person’s days – every ‘simple’ project that didn’t cover this timeframe was underpaid in the last four years, if truth be told, not counting in all the time that’s needed to stay in the game and learning learning learning.
    – Tom


↑ Back to top