What's the width of your website?

Thu, 11 Oct 2012 21:18:00 GMT

Hmmm... Let me think.

I've been designing websites that adapt to the width of their browser since my very first website in 1995. Back then, it pretty much meant paragraphs that are wider on a larger screen. If anything, it looked weird. But I could not let myself waste all that real estate. I mean, look at my blog! There's not much wasted space. And yet, I love simplistic and overly sparse designs such as Terry Apodaca's blog (doesn't seem to be working anymore) or Brad Frost's blog just to cite a few. All three blogs (counting mine) have one property in common: They work on 2560px wide screens down to 320px wide screens.

In other words: they have no width.

No, they have not.

Really!

And this is why getting a new design by starting out with a set of PSD files is a bad idea. Actually, it's so bad an idea that it's almost a guarantee to get it wrong. Web design is fundamentally driven by an opposite force than print design is. With print design, you start with a blank canvas and try to fit your content in it. With web design, you don't have a canvas! All of your readers will provide their own canvas, so you have to take a different approach. Start to define the content you want to see printed, then play with it on a phone, a tablet a huge screen. At that stage only you start do set up "zones" or "areas" that will define the regions of your page (meat, navigation, title, footer, etc.). After that, you will play with them and see how they fit on all the different screens out there. From there, you iterate and define it. And then you put real data in there, and you usually have to start over.

Of course, for a blog it is very simple, since there is so little: Entries, a menu, a title. On more complex websites - think Amazon or eBay - the task if much more difficult. But it's also much more rewarding.

But responsive designs are not only about screens, they are also about other surfaces on which your words could be printed... Yes, printers on dead-wood-paper. If you look at both blog mentioned in my first paragraph and try to print them... Oh my. What a mess.

And mine, well, not much better, if better at all. But at least, I have the excuse of having started my blog last week ;-)

Now that it's in my head, you can be sure I'll get it done by next week.

HTML and CSS resources

Sun, 07 Oct 2012 09:06:00 GMT

Here are the resources I use most when it comes to responsive design, html or plain css needs. In other words my bookmarks. Use them as you wish, and many thanks to them for their work. This page will evolve as I find new resources of course.

CSS3

Sept 3 2010 http://css3.bradshawenterprises.com/ This page has been the reference for me when it comes to CSS3 transitions, transforms and animations. Lots of examples, you can see it live in your browser and it has been up to date for the last 3 years at least.
Oct 25 2012 https://developer.mozilla.org/en-US/docs/CSS/Media_queries The reference for media queries, but only for Firefox (and other Gecko based browsers) of course.
Oct 27 2012 http://www.w3.org/TR/css3-mediaqueries/ The reference for media queries, by the W3C, ultimate authority on the subject. A bit academic but otherwise insightful.

JavaScript

Oct 7 2012 http://paulirish.com/2011/requestanimationframe-for-smart-animating/ Very drafty at the moment of this writing, requestAnimationFrame is a new API designed to build animations in Javascript.
Nov 7 2012 http://weblogs.java.net/blog/manningpubs/archive/2012/10/29/natural-user-interaction-drag-and-drop All about drag and drop with html 5.
May 14 2013 http://www.html5rocks.com/en/tutorials/offline/storage/ All about the various ways to store data in a browser. Don't forget to check http://caniuse.com to make sure your targeted browsers support your storage means. Hint: localStorage works everywhere.
Jul 28 2014 https://pieroxy.net/blog/pages/lz-string/index.html Once you've figured out the preferred way to store stuff in the browser, you can now go to the step 2: Compressing your data before storing it in. LZString allows a String to be compressed into another String, ideal for JSON-based storage in localStorage.
Nov 05 2014 http://dev.sencha.com/ext/5.0.1/examples/index.html ExtJS, a nice lib to incorporate UI components of all types in your web pages.
Feb 05 2015 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API, the new way to play sound in a browser.

General design tips

Jul 21 2012 http://bradfrost.github.com/this-is-responsive/ The most common patterns used in responsive design, full of live examples on this page.
Nov 8 2012 http://bradfrostweb.com/blog/web/responsive-nav-patterns A bit of the same but different. Also links to plenty of live websites where those patterns are in use.
Nov 13 2013 http://www.jordanm.co.uk/post/66812678668/articles-that-changed-the-way-i-work Various tips and advices about web design. Great resource.
Jul 28 2014 http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/ The Principles of Adaptive Design.

Various browser support

Nov 05 2012 http://caniuse.com Everything HTML, CSS and Javascript, drilled down by browser version and complete/incomplete support. Invaluable. Of course, nothing will ever replace testing first hand.

Tutorials, tips & tricks

Nov 06 2012 http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/ A cool tutorial for CSS box shadow with an example of how to simulate a curled sheet of paper.

Working offline

Apr 04 2012 http://www.html5rocks.com/en/mobile/workingoffthegrid/ Learn how to make your website work even offline - a good introduction.
May 21 2013 http://www.html5rocks.com/en/tutorials/offline/storage/ Want to store data in the browser? There are to this day 4 different APIs to do this. Learn which one works for you and how.
May 21 2013 http://dev-test.nemikor.com/web-storage/support-test/ How much can you store in localStorage? Well, hop on to find out.

Humour

Nov 26 2013 http://motherfuckingwebsite.com/ Very simple: A responsive page under 2.2kb, simple, elegant, gets the point across, no JavaScript, well... the dream page.

pieroxy.netresponsive