things we learned

lessons from working in the design and web development business

“The Spirit of the Web” – Notes from Jeremy Keith’s Talk at Smashing Conference in Freiburg

| 0 comments

What is the web?

  • The web means something different to different people.
  • Ask 10 people and everybody will tell something else.
  • The web is agreement.
  • The web is files, urls, http and more all working together.
  • The web is files addressable at URLs delivered over HTTP
  • A website is a bundle of files.
  • A website is the same as a web app. Web app is just another buzzword.
  • A website is a website no matter how it is consumed (smartphone, tablet, pc or what else)
  • A website is not a “desktop thing”.
  • The web is not control.
  • Design is about control.
  • Control isn’t the spirit of the web.
  • Read “A Dao of Web Design“. It was written in 2000. There were no iPhone, tablets etc.
  • We don’t know the speed, capabilities, screen size of our website visitors.
  • Tools like Photoshop, Dreamweaver etc., they make a fundamental decisions for you at the very beginning: Which screen size do you want? You must set a width an a height!
  • The is flexible, so our tools should be.
  • There are tools like Style Tiles or Pattern Primer. They move us in the right direction.
  • Change the design process. Style the atomic elements first.
  • Content First.
  • Give up control to make responsive webdesign, but don’t give up control!
  • Responsive design is not about mobile, it is about the web!
  • The web is responsive by default. We make it unresponsive when we set a fixed size. It’s our job not to screw that up.

Progressive Enhancement

  • Progressive Enhancement means starting with the lowest common denominator and building up from there.
  • Start with a basic html page and enhance it.
  • Use progressive enhancement for presentation, design and behavior and on each of these levels. For example on the html layer (input type email will fall back if the browser doesn’t know it)
  • Device diversity is not a bug, it’s a feature of the web.
  • There is a difference between support and optimization – Brad Frost
  • You can’t have enough devices to test on! Set up device labs so you can share your devices with others. The default position of the web is to share.

Responsive Images

  • Hacks (javascript), standards (srcset), formats (JPEG2000)
  • Hacks can be good solution, until a standard can arrive.
  • Load small images by default. Don’t download both!
  • We’re trying to solve problems that have been around in the past. Netscape for example already had the img attribute “lowsrc”.
  • Optimize images file size for all devices instead of wasting time on responsive image solutions.
  • Today the average webpage is 1MB, 679kb of it are images.
  • Be creative. For example create more columns, so you don’t need large images.

Performance

  • The best way to be future friendly is to be backward compatible!
  • Optimizing the performance is the best you can do to enhance the experience.
  • Reduce the number of HTTP requests. Remove like-buttons, +1 etc.
  • Don’t use boilerplates, because most often you don’t need all this files like modenizr, jquery etc. Load them only if you need them.
  • URL Design is important. They are universal. They are the universal syntax of the web.
Oliver Beckenhaub

Author: Oliver Beckenhaub

Web Architect // Designer // UX Designer // Front-End Developer // Web Consultant // Videogamer // Eintracht Frankfurt Fan // Work: http://beckenhaub.de // Personal Blog: http://masteren.de // Twitter @beckenhaub

Leave a Reply

Required fields are marked *.