visuelleGedanken.de

Berlin, May 2012, Fuji X100

Offscreen:

In our second issue we speak with the legendary Iconfactory founder Gedeon Maheux, Berlin’s Wunderkind Christian Reber, robot-inspired app maker Mark Jardine, Sketchnote artist Eva-Lotta Lamm, retro-game designer Shaun Inman and British Software entrepreneur Dan Counsell.

Issue No2 of my favorite print magazine is out.
No1 was amazing and I’m excited about the new one. Alongside great guys like Shaun Inman and Mark Jardine, there is also „our“ Marcel in it this time.
Do yourself a favor and go ahead and buy it. Or better, buy a 1-year-subscription. It’s worth it.

Over the last few years internet connections got faster and some web developers sloppy regarding the sizes of websites they build. With the advent of mobile page sizes matter again very much. (It actual never didn’t matter.) More and more people access your site over slow mobile connections. While this is happening retina screens pop up and demand higher resolution graphics which are by nature very large. At the moment there is no perfect way to counter that problem, but the RICG (Responsive Images Community Group) and WHATWG (Web Hypertext Application Technology Working Group) are working on it. In the meantime we have to do our best to reduce page sizes while serving good looking websites. There are several ways we can optimize our current sites. For example use different images for retina and non-retina screens instead of just shrinking the biggest one, embed graphics in typefaces, use svg graphics or build simple graphics with the powers of CSS. Today I want to talk about the latter.

The powers of CSS

By now CSS is very powerful and even gets better almost every day. Things like border-radius, box-shadow, text-shadow, gradients and soon filters and even blending modes are so powerful that they, while cleverly used, can create simple and sometimes actually really complex graphic elements.
This has some major advantages over traditional static graphics. CSS generated graphics are retina ready, faster to load and often easier to maintain since you don’t have to generate sprites over and over again when graphics are changing. Simple changes can be made very fast and easy. And you can even animate your graphics, either with CSS or JavaScript. That’s what I did at QUOTE.fm. It’s not online yet, but you’ll see it in action in the near future.

Example

To illustrate my words I put together just one simple example of a CSS graphic which I animate on click. See for yourself on jsfiddle.

So go ahead and try out building graphics with CSS and use it whenever it makes sense. Your users and their bandwidth will thank you. But always keep in mind that not all browsers support the latest, greatest CSS3 technologies.

Scott Jehl:

The point of this page is to test whether today’s browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device.

Shocking.

Alex Danilo:

When a browser loads a web page it needs to apply styles, perform layout and then render the page so there’s something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image. One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter.

Everything you need to know about the upcoming CSS filters summarized by Alex Danilo.
As far as I can see, the only filter that interests me is ‚blur‘. And ‚drop-shadow‘ if it can detect transparent areas and follow the form of the element.

Marco Arment:

Writing your own blog platform is like roasting your own coffee: it’s impractical and you probably shouldn’t do it, but for people who really, truly care about it, it’s worthwhile to them for their own personal priorities that sound crazy to everyone else.

I really would like to do that to have full control over everything but I don’t have the know-how. Sure, I could learn it over time, but I’ve set my priorities elsewhere. So maybe I don’t care enough about my blogging CMS.

Visual Idiot:

Brits, take control of the web. Spiffing allows you to write your CSS and stylesheets in conformance to proper British English (also known as correct English) grammar and spelling regulations.

Another fun project by Visual Idiot. Make sure to read the source code comments.
I never thought about how the language differences might affect our fellow web developers from England.

Jeffrey Zeldman:

Finally, the web is no longer ‚underground‘, no longer ‚the wild west‘. It isn’t the province of a few crazy rebels. It’s filled with professionally professional professionals who follow widely endorsed best practices and standards. That’s very good in a lot of ways, but it tends to create an environment where there is less experimentation.

Jeffreay Zeldman talks with .net magazine about his current design for zeldman.com. Very interesting and in large parts very true. I didn’t think his new layout was very good, but this interview and his Web Design Manifesto 2012 gives some more insight why he did what he did and clears some things up. (And as you might remember I also experimented with very large type on this blog.)

Dan Cederholm:

Don’t be afraid to be what you want to be. If someone had told me twenty years ago that I was going to be doing all these things, I would have said, “You’re kidding me. That’s not me. Other people write books; other people speak; other people design things.”

I love reading interviews and this one with Dan Cederholm is very good. I think it’s great to get a glimpse into the lifes of people you really like and whose work you admire.

Josh Constine:

If you hate accidental auto-sharing, you’re in luck. Now you have to be watching or reading something for at least 10 seconds before Facebook apps can auto-share the activity to your Timeline.

Thank you, facebook!