Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs
Editor’s Note: This post is the first in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that were published recently and present them in a nice compact overview. Smashing Daily #21 and Smashing Daily #32 are now published, too.
Vasilis goes through dozens of RSS feeds and hundreds of tweets so that you don’t have to. Do you find the new series interesting? What would you like to have? And what wouldn’t you like to see? Let us know! We’d love to hear your feedback in the comments!
A couple of words from Vasilis himself:
“Years ago I started collecting links, and once a week I would write an email to my colleagues with a small introduction to every link. Later on I decided that more people than just my colleagues might benefit from this collection, so I decided to publish everything on The Daily Nerd3.
“Last November, during the Fronteers conference in Amsterdam, Lea Verou convinced me to start writing in English; up until then, I wrote my comments in Dutch. More and more people started following me, and I think that’s a good thing; I believe more talented people than me should know the things I know. By more talented people, I of course mean you, the reader, so you can understand just how excited I was when Vitaly Friedman asked me if I wanted to start publishing the Daily Nerd on Smashing Magazine. So, here we are, the first episode of the Smashing Daily! I hope you like it!”
Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs
Web font performance: Weighing @font-face options and alternatives6
An important part of design and UX is performance, so when you decide to use a Web font, you should definitely know what the negative impact that choice might have on your users. Here’s an excellent in-depth article about font performance. Yes, you should definitely read it (and the comments, too, because they’re actually quite good).
TypeStacks9: Instant font stacks based on your font
Here’s a nice tool that suggests a font stack based on your chosen font. It knows the fonts served by TypeKit, although it doesn’t seem to know too many Google Fonts. Still, a very handy tool.
Let’s Get Physical (Units)10
There are a few occasions when we’d love to use physical units (such as cm and in), but unfortunately these units don’t work as expected in CSS. Boris Smus has written an extensive article about these units, how they should work, why we want them and why they work the way they work.
Cutting the Mustard12
The BBC is working on a responsive news website, and it is sharing everything it finds out, which is extremely useful. In this article Tom Maslen explains how the BBC manages browser support. An absolute must read for anybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.
Here’s an overview of projects related to the HTML5 Boilerplate. Some excellent stuff is in there, but before you start using everything in there, remember the excellent advice of Rachel Andrew: “Stop solving problems you don’t yet have14.”
html5shiv and Serving Content From Code Repositories16
Never just link to scripts hosted on other domains, because you won’t always get the advantages, such as caching and Gzip. This is explained in detail in this excellent article. Yes, you should definitely read it.
Experience Design Is the Future of Mobile Payments19
“Holistic” means something like “complete.” So, Perry Chan argues that a “complete” user experience is the future of mobile payments. I actually think that right now, in the short run, whatever the future, the things we have right now are just terrible. Anything would less painful (at least here in the Netherlands). (I also think the future of UX on the Web is bigger fonts — much bigger).
Learn CSS selectors interactively20
CSS selectors can be pretty hard to understand, especially the difference between
nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.
Allen Tan on highlighting and focus22,” Readmill Blog
My father always scribbles annotations in the margins of his paper books. He’s probably been doing this for more than 50 years now, and if somehow we could assemble these annotations, it would be an incredibly interesting and useful database. But as it is, it’s pretty useless. Allen Tan writes about this and more in this article on modern digital reading.
If, for whatever reason, you don’t like any of the tools or websites out there that tell you what browsers support what CSS feature, then this tool might be the one you’re looking for. I still prefer When Can I Use…24 or Mozilla Developer Network Docs25, though.
Browser Support? Forget It!29
What does “browser support” mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell, it means something else. This is a good read for people (or clients) who struggle with the ever-expanding browser landscape.
id Attribute Got More
classy in HTML530
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time31, which generates a string like
1336984564. The problem is that in HTML, an ID had to begin with a letter. Mathias Bynens tells us if this is still the case in HTML5.
Autofill City and State From Zip Code With Ziptastic33
Filling out forms is a pain in the butt, especially on devices without a traditional keyboard. You should be asking users for as little information as possible. If there were a way to make things easier, you should probably do it. For instance, you could prefill parts of an address when the user enters their ZIP code. Chris Coyier shows us what a flow like that could look like.
CSS Layout Gets Smarter With calc()34
A thing we needed desperately before being able to use
box-sizing: border-box was the ability to mix different CSS units. There are still some use cases for this, though, and luckily more and more browsers are supporting the
calc() property. Here’s how it works.
Of course, you could use a simple Web technology like canvas or WebGL to generate beautiful animations, but why do it the easy way when you could use the ever-amazing animated GIF? Here’s a great Tumblr blog to follow if you’re looking for some random fantastic 4-D inspiration.
What Do You Think?
Do you like this new series? What would you like to see in it? Please provide some feedback, and let us know what you think!
(al) (vf) (il)
- 1 http://www.smashingmagazine.com/smashing-daily-2-keyboard-navigation-responsive-workflow-and-goats/
- 2 http://www.smashingmagazine.com/smashing-daily-3-typography-ebooks-and-decahedrons/
- 3 http://dailynerd.nl/
- 4 http://adactio.com/journal/5446/
- 5 http://adactio.com/journal/5446/
- 6 http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
- 7 http://www.shadycharacters.co.uk/2012/04/miscellany-%E2%84%96-7/
- 8 http://www.shadycharacters.co.uk/2012/04/miscellany-%E2%84%96-7/
- 9 http://typestacks.com/
- 10 http://smus.com/physical-units/
- 11 http://smus.com/physical-units/
- 12 http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard
- 13 http://h5bp.github.com/
- 14 http://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you-dont-yet-have/
- 15 http://h5bp.github.com/
- 16 http://zoompf.com/blog/2012/05/html5shiv-and-serving-content-from-code-repositories
- 17 http://css-tricks.com/thinking-async/
- 18 http://css-tricks.com/thinking-async/
- 19 http://ideaengineers.sapient.com/strategy/experience-design-is-the-future-of-mobile-payments/
- 20 http://twostepmedia.co.uk/cssselectors/
- 21 http://twostepmedia.co.uk/cssselectors/
- 22 http://blog.readmill.com/post/22647981763/guest-post-allen-tan-on-highlighting-and-focus
- 23 http://www.browsersupport.net/
- 24 http://caniuse.com/
- 25 https://developer.mozilla.org/en/CSS
- 26 http://maps.stamen.com/#toner/14/52.3558/4.9317
- 27 http://openstreetmap.org/
- 28 http://maps.stamen.com/#toner/14/52.3558/4.9317
- 29 http://dbushell.com/2012/03/03/forget-about-browser-support/
- 30 http://mathiasbynens.be/notes/html5-id-class
- 31 https://en.wikipedia.org/wiki/Unix_time
- 32 http://mathiasbynens.be/notes/html5-id-class
- 33 http://css-tricks.com/using-ziptastic/
- 34 http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
- 35 http://www.montulli.org/theoriginofthe%3Cblink%3Etag
- 36 http://mrdiv.tumblr.com/
- 37 http://mrdiv.tumblr.com/
- 38 http://polldaddy.com/poll/6225846/