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.
“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.
At my day job I mostly work with Flash, AfterEffects, Photoshop. About a year ago I wanted to try something new and created Shitty Day using HTML, jQuery and CSS. And a couple months later, after I discovered that CSS3 can do animations, I did a photo-only tumblr theme called Organ. Nobody really cared until Cameron Moll (thanks) posted it on his blog and I got asked to create an official theme. It got featured in the theme garden and I was like.. wow.. it seems people really like this CSS3 stuff. So I kept on experimenting and created some more CSS3 demos.
I’m really happy that most people enjoy them. But there are also some concerns. If you look at all the demos, you’ll see that most of them only work correctly in -webkit and some just in Safari. And they also lack a graceful degradation. There are people like Paul or Divya that have been pushing me to make them more cross-browser. Thanks and sorry, for letting you down so often. I can understand that some say: If it’s not cross-browser it doesn’t “count”. And Web Designers have a responsibility and so on..
Well, this is just a hobby for me. I do it only for fun. Doing cross-browser support is the exact opposite of fun. Some might get a kick out of it, but for me, I would just be kicking the wall non-stop. That’s why I usually don’t even try and jump right to the next demo. Or call me lazy, that’s fine too.
But I guess the main reason why all my experiments work best in Safari is the tool I’m using: CSSEdit. If you don’t know about it, there’s one killer feature that changed everything. I would say, if it wasn’t for that feature, I probably would’ve never started doing CSS. It’s the Live Preview! Every change you make in your CSS get’s instantly updated. It’s like Firebug. Because I like to try out new stuff, I don’t know upfront how to do things.. I kinda just throw properties in there and start tweaking the numbers till I get to some interesting result. Without Live Preview, I would have to save the file, switch to the browser, refresh, switch back to the editor and start over. For the basic stuff you get things usually right without having to see a preview, but not if you’re trying to do Photoshop-like styles with CSS. Can you imagine having to save for web your Photoshop design just to see your changes? Insane right? So because CSSEdit uses Safari to render the Live Preview it automatically will work best in Safari, so there you have it.. blame them. ;-)
Unfortunately I’m still waiting desperately till CSSEdit get’s updated to support CSS3. I’m puzzled what they are waiting for, if browsers already start dropping prefixes. They could have such a nice head-start before the big guys like Adobe start to add it. Heck, there are tons of online CSS3 generator tools and there is even and app for the iPad. But nothing for desktop? WTF?
Wait a minute.. online tools. Online? Damn, that’s it! This will solve everything! A complete HTML/CSS editor in the browser with live editing. Something like jsfiddle, but with auto-complete and a GUI. Things like box-shadows, text-shadows, gradients just scream to be manipulated with sliders. But the best part by far.. you could do your cross-browser hacking right there in any browser you want to support. Maybe such an online editor is technically not possible with older browsers? Or extremely hard to do. Or just have limited features. I have no idea. But trying to add all possible web rendering engines into a desktop editor sounds way harder. The term designing in the browser would get a whole new meaning, because you’re literally designing in the browser.
Also all files are kept in the cloud. After doing changes, you could just save it, push it to your live server or commit it to something like GitHub or so. Also some kind of SVN or collaboration feature with co-workers could be build in.
Who is gonna do it? Is somebody already working on it? Is that why CSSEdit doesn’t get updated? Or maybe Adobe? Will they move to a subscription model with a “Dreamweaver Live”? I also would love if 37signals would give it a try. They have the cloud experience, they do web stuff, they have the customers already paying with a subscription model. And how awesome would that be with some integration with their current products. Let’s see.
Thanks for reading. Tweet your Comment.
PS. What’s next? There probably won’t be any new demos for a while. No, not because I gave up on CSS3.. because I’m already working on the “next big thing”. ;-)
Update: Here a couple tools that go into that direction. Thanks for sharing. Symbiote, LiveReload, CSS3 auto-complete for CSSEdit, Akshell
Over the Eastern Holidays I had some time to read a new book called ReWork. I loved it. It reads trough like butter. Easy to understand, tons of good points. There are so many “yes, that’s it” moments, it fills you up with inspiration and motivation, but what happens after the reading?
The last chapter in the book suggests: “If it grabs you, grab it right back and put it to work”. Easy to understand, but hard to do! In the next couple of weeks/months you might remember what the book was telling you.. if you’re lucky, you actually try to change a couple things here and there.. but most likely you keep on doing it the way you have been doing it. People are just stuck too deeply into their habits. I have observed that on myself too many times.
Who knows the magic read it - do it spell?
Sometimes when I write a new post I wish I could set the post date in the future. I don’t mean publish it on a later date. Publish now, but the blogging system is aware that the post is referenced into the future. The problem now is, that when I write about an upcoming event, visitors will see it too early and when the event get’s closer, that post is already buried with new ones.
As an example, let’s say I plan to attend Chirp, the Twitter Developer Conference. I probably post about it when I first find out about it, or when I get my ticket and maybe after the event already happened. But Nobody will see it right before the event occurs!!
Below a quick example:
The “future posts” appear above normal posts for an easy glance what’s coming up. After the set time passed, a post would fall below the NOW line and you could even update it with news from the event.
A tumblr theme could look like this:
{block:FuturePosts} ... {/block:FuturePosts}
<div id="now">NOW</div>
{block:Posts} ... {/block:Posts}
Actually any kind of stream with chronological posts could use it, even Twitter or Facebook statuses. It would kinda be like a public calendar. Let’s see.
This is the new Design Process I’ve been trying to use lately. Skipping Wireframes and Photoshop comps! This video shows all the different design steps needed to create the Shitty Day site. As you can see, I tried to implement some principles I picked up during the years:
So, where are all the wireframes and Photoshop comps? They got skipped..!! no wait.. actually you could say that the wireframe (basic layout at the beginning) and the Photoshop comp got created straight with HTML/CSS and then constantly changed and refined.
The tools I used for this project were Espresso for the HTML markup and then CSSEdit for styling. Later in the process I used Photoshop to create single images like the background tile, paper holder and so on, but never for the layout.
It all seems pretty easy and straightforward, but I think this process works best for smaller simple sites. For bigger and more complex projects, the traditional approach might still be better. Also before I started I had sketched out the idea on a notebook and had already a pretty clear picture in mind how everything should look and work. If you would ask the client for feedback during the process, they would probably tell you nonstop how ugly it looks. ;-)
“ Meet the new CSS double dream team: border-radius + box-shadow. ”
Together they are unbeatable! It’s such a joy to use them for rounded corners with a drop shadow. The box above uses: border-radius: 8px; to do the magic.
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
And it get’s better: They even work on embeded Flash! See the 4px rounded corners live in the photo/video section.
Note: This is CSS3 and not all browsers support it yet, like our friend IE.
Why I’m switching to tumblr.
This is already the 5th version of simurai.com. I’ve gone trough many phases.. highly graphical - minimalistic chic - fat blog - interactive 3D. But I’ve always struggled meeting all the following goals:
With tumblr I think I pretty much found that perfect balance. Thanks tumblr.
Credits: This site is based on the Prologue Theme by Hayden Hunter.
