Yesterday I tweeted this:
My excitement for Responsive Web Design is fading a bit. It’s great for simple websites, but not enough for more complex web apps.
On mobile you don’t just wanna shrink and hide some stuff.. you wanna change behaviour.
It caused some discussion and confusion. What I meant was that next to using media-queries to adapt to different screen sizes, we should also consider other aspects that improve the User Experience. Like changing behaviour trough JavaScript, optimize for a different input method like touch and be responsible with the often lower bandwidth. @fofr came up with a great hack to link Media Queries and JavaScript.
I think the problem is that in @beep’s original post, it mostly was described as a media-query, flexible-layout thing: “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design”. But @danielmall notes that it’s an approach and not a technology and @vasilis sees responsive design as using client side techniques to optimize the experience.
So if you’re also one of those less educated people like me: The term ”Responsive Web Design“ has either evolved in its meaning, or we didn’t understand it from the beginning.
There is a good post about skeuomorphs titled Skeuomorph, Pt III.
Next to touch and smell, there is another problem with skeuomorphs on digital screens. Changing the angle you look at it. Moving your head doesn’t change the 3D perspective, holding your tablet in a different angle does change the shadows and highlights. It just feels not as real.
Maybe one day we can add a bump map to create more dynamic shadows/highlights and a screen surface that sticks out. We might also get multiple light sensors so we can adjust according to our real light sources. How cool would it be to move your tablet closer to your lamp and see the shadows and highlights change.. woaaahhh…
I’m not entirely against using Skeuomorphs in our designs. I do it too. Without being able to use textures and fake 3D it would quickly get boring. But maybe something to keep in mind: Using Skeuomorphs on desktop screens are way less problematic than on tablets or phones because on desktops you don’t touch it with your finger and you mostly keep a straight angle.
Update: @apexsier points out that such a directional light sensor is called Light Field Sensor and already in use by the Lytro camera.
tlk.io is a simple web chat. The idea was to create an open chat without having to signup or login. Chat channels are owner-free and you can invite new people by sharing the URL. The coding is done by the great @antstorm, I did the design.
It’s just a start, there’re lots of ideas how it could get improved. But for now.. Happy tlk.ing..!
Space CaCSS - Animated CSS3 background patterns. Let’s get trippy.
Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet. I think only in Safari 5.1 and Chrome Windows.
In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.
See live Demo.
“Anyone figured how to force the scrollbar in Lion with css/html/javascript? i.e. without sys prefs“ @andyshaw85
As soon as we thought we settled the “above the fold” discussions, with Safari on Lion it’s back, more than ever..!!! ;-(
Personally, I prefer the hidden scrollbar, but in case you bump into a more “conservative” client and he really demands it, you can just overwrite the default and force the srollbar back like this:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
See the demo.
PS. And as an added bonus, it gets rid of the ugly scroll-track in Chrome and makes it look more consistent.
PSS. If you only want it on Lion, here with a JS sniffing script added.
Redesigned an IMDb page. It still feels a little like a half backed exercise, but wanted to post it before it gets forgotten somewhere on my hard drive. It’s less about the visual look and more about the process, content/IA, UX and business model.
See the redesign.
Update: Lukas Mathis has a great post about unsolicited redesigns. And yes, he’s right. It’s easy to just put a new skin on top if you don’t know how the bones work.
The Cursor Monster is a little CSS3/JS toy that you can play around with. Using cursor:none can be fun, but also super confusing if you abuse it. So be careful. Update: Apparently Chrome will disable it in a future release, so enjoy while you can.
The Letter-Heads is a Firefox 4 demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. Animated with CSS3+JS. It’s mainly inspired by shadow artist Kumi Yamashita.
My role: Concept, Art direction, Illustration, Design and Code.
ZEN is a HTML5-CSS3 Audio Player. I’m really happy how the little details turned out. Like how it morphs from a circle to a square button and the swirl at the beginning.
But what I like most.. At the beginning, there is just a big simple button. You click it, and it shows its fancy pants. You click it again, back to the simple. It’s like the visuals match the sound. From a relaxing Zen garden into a crazy club and back.
See the demo.
Cycle Button is a little UX study where I’m trying to figure out if those buttons that cycle trough a couple options are of any use in todays UIs.
See the result.
:toggle - A while ago I worked on a project where I needed just a simple toggle button to show and hide some content. The obvious way would be to use JavaScript for that functionality. But then I thought: Is it possible to create a toggle button with only HTML and CSS3?
See the result: Live Demo.
That’s all.
PS. Yes, no big new year’s resolution from me.
Thanks again to Drew Wilson for his Pictos Contest. His big boy shall be taken care with lots of love. I just hope the little boy can soon accept the new family member. ;-)
Update: R.I.P Nov 12. 2011
Beautiful Pixels wrote an artist profile about me. Thanks a lot, turned out really nice. Although it feels a little strange, seeing your own picture up there.
ps. Thanks for letting the dog pee at my name. ;-)
(Source: beautifulpixels)