Smashing Daily #45: Context, Grumpiness, Orientation

There are some monumental articles in this edition of The Smashing Daily, like an instant classic about why developers are so grumpy, and an epic piece about the myth of mobile context. But there’s much more, like a tool to help you comply with the cookie law, some articles and tutorials that show the power of CSS, some articles and opinions on responsive images, a plea for creative technologists, and an explanation about the default orientation of different devices. Enjoy!

The Care And Feeding Of Software Engineers (Or, Why Engineers Are Grumpy)1

If there’s only one article you’re going to read today, this week, this month (or maybe even this year), then read this one by Nicholas C. Zakas about the reason why developers are grumpy and why they seem to say “no” so often. Not only does he explain in detail how developers think, how they see themselves (and how others see them), but he also comes up with ideas on how you can make sure that developers become less grumpy. It’s a long article, but everybody must read it—your projects will improve dramatically.

Cookie Consent2

This looks like a clever solution for the new EU cookie law, a law which says that users must give a website permission to store cookies. The thing I like about it is that it encourages website owners to create placeholder content for people who don’t want cookies. This results in hilarious pieces of text like “In order to see our social buttons, you will need to enable cookies“. Hahaha… no human being wants to see social media buttons, only marketers like them. Once you see these pieces of text, you will start to realize how ridiculous some of this cookie-functionality really can be (from a human perspective).

A Tool to Manage Cookies3

The Amazing Powers Of CSS4

Until a few years ago, when IE6 and IE7 were still the baseline, CSS was easy and not so powerful. But since we started supporting modern browsers (as well as ancient ones), CSS turned into an extremely powerful tool. Ilmari Heikkinen shows us some very clever CSS tricks. If you’re not familiar with CSS selectors you should definitely read this article.

CSS style guide5

A style guide is not just a good idea to manage your designs, it’s also a good idea to manage your code. Here’s the CSS style guide that GitHub uses. There’s probably at least one thing you won’t agree with, for instance the use of px for font-sizes. But at the same time there’s lots and lots of good examples in there, like the chapter on styling buttons.

A Misconception About Window.Orientation6

Here’s a good and easy to understand article by Matthew Gifford about window.orientation on different devices. It shows that on most tested phones the default orientation is most likely portrait, and that on some tablets it becomes landscape. Good to know, but hard to work with.

How Does Window.Orientation Work?7

Picturefill8

You probably don’t want to send a 1200px side image to a 320px wide screen—a smaller image would be better for everyone. But how should you do that? The answer is not so easy. There are many solutions to this problem, all of them are pretty hard, and they all have some serious drawbacks. Here’s another example by Scott Jehl, one which will only show the image if both the HTML and the JavaScript are loaded (something that doesn’t happen on RSS-readers, or things like Flipboard and Instapaper). You should definitely consider this drawback before you start using this script.

CSS-Generated Content On Replaced Elements9

The :before and :after pseudo-elements are actually not placed before or after the element, but rather before or after the content of the element. Since some elements don’t have any content, the pseudo-elements should not work on them, on most browsers. It seems like Chrome actually allows them. Here’s an interesting article by Catalin Rosu on this subject, with many opinions by some top developers. You’ll understand these psuedo-elements much better after you read this article.

Using CSS Sprites To Optimize Your Website For Retina Displays10

I don’t often link to things I disagree with, there’s more than enough good stuff to link to that’s worth it. But sometimes I just have to give my opinion. In this article Maykel Loomans explains how you can serve a different image-sprite to iOs devices with a retina display. The reason I don’t like this post is that he fails to explain that a sprite like that would be four times the size of the original sprite. So yes, it might save some bytes on style sheet file-size (as he concludes), but it quadruples the network costs for your users. People who think this is a good idea should really try to surf the Web with a flaky 3G connection (you can use the Network Link Conditioner pref pane in Xcode to simulate these kinds of connections). Now I don’t think this is a bad practice, per se, it might actually be the best solution for graphics and such. I just don’t like the fact that there’s no warning in the article, whatsoever.

Why We Need Creative Technologists11

More and more traditional creative agencies start to step into the digital world. Abid Din argues that these agencies need creative technologists, and I couldn’t agree more. The thing we definitely don’t want is old-school advertisement artists who, without knowledge of the possibilities and constraints, decide what the Web should look like.

Last Click

Great Works Of Fiction Presents: The Mobile Context12

We’re always looking for ways to serve the best content to people who visit our websites. Now if we just knew what our visitors wanted, we could give it to them immediately. Many people think they know what we want based on the kinds of devices we are using. Stephen Hay explains, in his brilliant style, that you cannot make any assumptions based on device type. The comments are pretty interesting, as well, so be sure to read them.

The Mobile Context Does Not Exist13

Previous Issues14

For previous Smashing Daily issues, check out the Smashing Daily Archive15.

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

  1. 1

    About the CSS Sprites trick for retina displays. When he says 4 times the size of your original sprite, he of course means that the width and height both should be doubled (200 x 200 becomes 400 x 400). This does not mean per se that the filesize will be 4 times as big (4kb doesn’t have to become 16kb).

    A very quick test in Photoshop can prove this :-)

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top