Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs

Advertisement

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 #2 and Smashing Daily #3 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:

Vasilis van Gemert“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 Nerd.

“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

Your local mobile device lab
Jeremy Keith started an open local mobile device lab in Brighton, and he urges you to do the same in your home town.

Screenshot

Web font performance: Weighing @font-face options and alternatives
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).

Miscellany #7,” Shady Characters
Here’s a short post by Keith Houston, with news and thoughts about unusual characters. A pleasure to read, like everything else on his blog.

Screenshot

TypeStacks: 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)
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.

Screenshot

Cutting the Mustard
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.

H5BP
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 have.”

Screenshot

html5shiv and Serving Content From Code Repositories
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.

Thinking Async
Loading an external JavaScript file can block the rest of the page from loading, which of course is a major performance and usability problem. The solution is to load scripts asynchronously, and Chris Coyier shows us ways to do that, extensively as always.

Screenshot

Experience Design Is the Future of Mobile Payments
“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 interactively
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.

Screenshot

Allen Tan on highlighting and focus,” 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.

Browser Support
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… or Mozilla Developer Network Docs, though.

Stamen
Your app needs a map, but you want something other than boring old Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.

Different map styles

Browser Support? Forget It!
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.

The id Attribute Got More classy in HTML5
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time, 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.

Some examples of valid ids

Autofill City and State From Zip Code With Ziptastic
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()
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.

Last Click

The Origin of the <blink> Tag
Here’s the true story behind the blink tag by the guy who came up with the idea, Louis J. Montulli II. A nice anecdote on early browser history.

mr. div
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.

Animated GIF

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)

↑ Back to top

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.

  1. 1

    Certainly interesting. Only thing is, if we get to digest this number of links every day, it won’t leave us with much time to actually work…

    23
    • 2

      Vitaly Friedman

      May 15, 2012 3:19 pm

      Thanks for your feedback! We are listening, and we’ll keep it precise and short next time.

      2
    • 3

      Fully agree. Some interesting reads and useful posts in this first overview but I can’t digest this on a daily basis, not with this frequency and not with this verbosity. To me this would be practical on a weekly basis. The point of summarizing things in the industry imho is to save time, not to add time to an already overloaded schedule.

      Again, the quality is great though.

      5
    • 4

      I disagree with eliminating detail to accommodate those readers who are in a hurry. Instead, think about providing a very short summary for each item, styled for scan-ability. If that’s not sufficient, group “can’t miss” links at the top of the article.

      Either way, I appreciate the both number of linked items and the level of detail in the descriptions.

      1
  2. 5

    Love it! Keep them coming!

    2
  3. 6

    Somebody consiously works on such stuff so that people don’t have time to do something useful…

    0
  4. 7

    Great way to continue the Daily Nerd, thanks for all the effort you put into it Vasilis.

    One tiny remark: the current article layout doesn’t allow me to quickly scan through the article. People will often scan through the links (quickly) and pick out those which are relevant to them. Comparing this layout to the old Daily Nerd, the pain to scan through the list has increased; to me almost to a level where pain > value.
    One of the issues could be that the links are used as paragraph / item separators; the light blue color has a low contrast against the white background and tends to disappear between the rest of the page content.

    6
  5. 8

    Mmmm. It’s all a bit random, and it’s all too easy to miss something that might actually be useful.

    I miss the Smashing Network posts… but maybe I’ll get used to this new format :)

    2
    • 9

      I kind of agree. Maybe having one or two items as the featured articles, or “hot topics”. Then still sharing the rest for us to look through.

      1
    • 10

      I’d have to agree as well. It’s a lot of great info, but hard to sort through what is relevant and what isn’t.

      It might be cool to have little icons beside the title or maybe divide the links into categories.

      I will read these either way though!

      1
  6. 11

    Congrats Vasilis!

    Indeed a bit getting used to (colours, aargh!!!) but a welcome addition to the Smashing Magazine content. Smashing Magazine.

    But where has the ‘Nerd’ gone in the title?

    0
  7. 12

    It seems like a basic roundup of stuff shared on Twitter and stuff from the Smashing Network, but in a format similar to the Smashing Newsletter. I am still disappointed by the loss of the Smashing Network, but if you continue doing roundups like this, Smashing may flourish once again.

    As a designer and developer, I can understand why you would get rid of the Smashing Network and bring daily roundups (the SEO benefit should be pretty high, and it allows for readers to engage and discuss here on Smashing rather than other sites).

    2
  8. 13

    Just fyi: that GIF image comes in at 1 MB. Since it’s currently on the homepage, I’m assuming 1 MB per visitor and 1000 visitors ~= 1 GB. At 2.9 MILLION daily visitors* that is one expensive GIF.

    * Wolfram Alpha (http://www.wolframalpha.com/input/?i=smashingmagazine.com+daily+visitors&lk=1&a=ClashPrefs_*Internet.smashingmagazine!.com.InternetProperty.AlexaSiteVisitors-)

    2
    • 14

      Vitaly Friedman

      May 16, 2012 12:56 am

      Thanks for bringing it to our attention, Dustan ;-) We just looked at our stats and replaced the image ;-)

      1
  9. 15

    Too bad the animated GIFs don’t work on Android…
    :(

    1
  10. 16

    Great idea! I hope your content will be always at the top of quality, as today’s post.

    0
  11. 17

    Pretty awesome selection.
    But i do think like others, it would be best to narrow results even more. perhaps 3, 4 links will do.
    Great work!

    And i would like to hear more on the .gif part (how to make them, fallbacks, etc)

    :) Cheers!

    0
  12. 18

    Can we get a dedicated RSS link for this article series?

    0
  13. 19

    Good but overwhelming; it looks like a weekly newsletter. One post under each category (with the category clearly spelt) might just be the right number for a daily series.

    0
  14. 20

    I’m not a designer (at least not professionally) but I love reading the Smashing Magazine because the designs and ideas I see here are just amazing! The various links integrated in each article tend to leave me on this site for hours. Which is really good, if I didn’t have to work…
    I agree with the users above that there’s a bit of content overload if this is meant to be a daily series. Maybe a Daily Highlight column featuring just a single article will be sufficient? And this wouldn’t be too little because like I mentioned, the links embedded in each article are really interesting to check out too, so even featuring just a single item will leave me with much more knowledge than what is written here.

    0
  15. 21

    Niels Matthijs

    May 16, 2012 9:49 am

    I actually like the extensive range of the links. Limiting it to two or three a day will definitely limit the scope and use of these types of articles and reduce it to listing “the big stories of the day”, which are broad-casted through 100 different channels already. Finding the unknown gems is what makes these kind of lists interesting, and aren’t we mature enough to pick the things that appear interesting enough based on our own interests and tastes?

    I do think the layout could do with a little work. I don’t think images do articles likes these much good and putting a bit more emphasis on the links wouldn’t hurt either.

    0
  16. 22

    Yes … the design is clearly needed to be changed :)
    The dark green color would fit perfectly xD

    0
  17. 23

    I like it!!!!!!
    Go ahead

    0
  18. 24

    Oh! please keep going with this type of digest… they are so helpfull indeed!

    0
  19. 25

    I agree with several of the comments. A better design/use of typography for people to quickly scan through the article and ‘filter out’ what isn’t relevant to them would be a great solution for having too many links. Folks with time can digest a ton of info, and folks without time can quickly scan through and pick out 3 or 4 links relevant to them.

    Personally, this can go a long way to keep me a bit more in the loop on emerging tech and best practices without having to stay up endlessly chasing rabbit holes…

    Cheers!

    1
  20. 26

    Christian Krammer

    July 24, 2012 12:51 pm

    Great idea, I will definitely read all of your “Dailys”. For me, one once a month would totally suffice. In this case it could also be a bit longer and contain more links/tips. Once a days is absolutely too much.

    0

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