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!
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.
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).
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.
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.
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.
: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.
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.
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.
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.
- 1 http://www.nczonline.net/blog/2012/06/12/the-care-and-feeding-of-software-engineers-or-why-engineers-are-grumpy/
- 2 http://silktide.com/cookieconsent
- 3 http://silktide.com/cookieconsent
- 4 http://updates.html5rocks.com/2012/06/The-amazing-powers-of-CSS
- 5 https://github.com/styleguide/css
- 6 http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/
- 7 http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/
- 8 https://github.com/scottjehl/picturefill/
- 9 http://www.red-team-design.com/css-generated-content-replaced-elements
- 10 http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
- 11 http://craftedpixelz.co.uk/blog/why-we-need-creative-technologists/
- 12 http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
- 13 http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
- 14 www.smashingmagazine.com/the-smashing-daily-archive/
- 15 www.smashingmagazine.com/the-smashing-daily-archive/