One of my thoughts for Web Design: 2012 and Beyond concerned the issues of screen resolution and the necessity for scalable graphics on the web. As part of that thinking I’ve written a piece for Smashing Magazine entitled Resolution Independence with SVG: When we look at the breadth of Web-enabled devices, responsive design is sure to provide a [...]
Device optimisation is about accessing a website on one set up and fine-tuning the experience. It could be Internet Explorer 7 on a mediocre PC, the iPhone 4000, a generic and underpowered Android tablet, or a web-enabled HD 3D TV. Whatever the set up, ask: how can I make this one experience better? The idea [...]
My last article on responsive tables was very popular so I’ve only gone and implemented the idea that I was alluding to with horizontal scrolling! See Responsive Tables Demo (2) — in a modern browser! Webkit browsers handle both tables perfectly. Firefox & Opera handle the first version. The second version plays with/abuses the flexible box [...]
*Update* see more responsive tables progress (5th Jan). A real short post for future reference! I’m experimenting with a responsive calendar design and build. See my very rough responsive calendar demo. I’ve found through trial, error, and much pondering that the idea of a responsive calendar is actually not that complex. My demo needs more considered breakpoints and design [...]
The year is ending, I guess it’s time to look forward? 2011 has been the best year of my career so far. I left my previous job to join Browser, an unexpected but excellent move! I’ve been refining my front-end development skills and design process. Next year we’ll have big websites to launch that I plan to showcase [...]
You’ve all seen social sharing buttons. Twitter’s “tweet”, Facebook’s “like” etc. Here’s a screenshot from a popular blog to refresh your memory: They have their place on a website if used intelligently — that’s a big if! They’re difficult to design around and a nightmare for front-end development. The copy-and-paste code for each button includes a [...]
I will write a full article on responsive website design & JavaScript soon, but for now here’s a quick snippet! (With a little help from jQuery, naturally.) var resizeTimeout, win = $(window); win.bind(‘resize’, function() { if (resizeTimeout) clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function() { var width = win.width(); /* do responsive stuff… */ }, 100); }); The [...]