Smashing Daily #4: Fonts, CSS And Modern Web Design

Lots of stuff about fonts, design, CSS and code in general in this edition, but also some instant-classic advice on modern Web design and some very interesting experiments with new HTML5 features. But even if these things sound boring, you’ll probably find something that amuses you in today’s Smashing Daily.

The Best Browser Is the One You Have With You1
With the increase of “desknot” users, the Web as we know it has fundamentally changed. Not everyone is aware of that fact yet, and those people (and you too) must read this article by Stephanie Rieger. She outlines seven points that are important for a modern website, points that were of less importance on the classic Web. This is an absolute must read — and must remember — for everyone, an instant classic.

The best browser is the one you have with you, by Stephanie Rieger2

CSS: The Bad Parts3
Here’s a nice long rant by Louis Lazaris about the bad parts of CSS, and I have to say that I agree on most parts — although I disagree on width:100% and on CSS counters (you don’t want to put an academic article in an ol). It’s a great read, filled with links to articles explaining the issues. Good discussions in the comments, too. A must read.

Brvty++?4
Christian Heilmann argues that brevity in code does not outweigh everything else in importance. On the contrary, he says that clear, understandable and precise code is much more important, especially in HTML. He definitely has some good points in this article; every mark-up geek should read it.

General CSS Notes, Advice and Guidelines5
Keeping CSS files maintainable can be really hard, especially on big websites that have many developers working on the CSS. You need to define a set of guidelines that everybody on your team should follow. Here’s an excellent example by Harry Roberts. Definitely read it if you find yourself struggling with huge CSS files every now and then.

Creating Non-Disruptive Notifications With HTML56
I’ve always found Growl and other system-wide notification tools to be highly disruptive and intrusive. I disable every kind of notification that can be disabled. But many people are not like me, so the HTML5 Web Notification API could be welcomed by many developers, marketers and perhaps ordinary people. The API enables a website to send system-wide notifications to users. I can imagine some clever implementations based on time and location, especially on phones.

The best browser is the one you have with you, by Stephanie Rieger7

Artistic Distance8
Judging your own designs can be pretty hard. In this long, long article (if you don’t have the time to read it all, just start at the heading that reads “How does this apply to you?”), Paul Burton explains why you need criticism, why it’s important, and what tricks you can use to critique your own designs. A little critique for the author: getting to the point takes a bit long.

Symbolset9
I linked before to this article about ligatures10 that explains what ligatures are and how you can use them on the Web. A ligature is a character consisting of two or more letters, mostly used in classic typography. The people at Oak Studios11 just found out that you can do other smart stuff with ligatures. Very clever!

Pronunciation Game12,” Chrome Experiment by Loducca
You can communicate with your browser in more ways than with a keyboard, mouse and finger. Some browsers support speech input, and here’s a simple but nice-looking example of what you might do with speech input. Looks really good (but works only in Chrome at the moment, I believe).

The example site is nicely illustrated13

Mozilla Hacks Weekly, May 17th 201214
Are the links in Smashing Daily not enough? Need more to read? Here are the weekly links by the Mozilla Developer Engagement team. Always good, and this week has some hilarious stuff.

Last Click

Novel Constructions15
So, how do type designers design their letters? How does one start a gargantuan job like that? Here’s a lengthy and beautiful article about the process that Christoph Dunst followed when he created his Novel type family. It makes you realize just how much work goes into creating a good new font. The attention to detail is incredible.

The article has some great illustrations that show the thinking behind the work16

Previous Issues17

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

Footnotes

  1. 1 http://www.alistapart.com/articles/the-best-browser-is-the-one-you-have-with-you/
  2. 2 http://www.alistapart.com/articles/the-best-browser-is-the-one-you-have-with-you/
  3. 3 http://www.impressivewebs.com/css-the-bad-parts/
  4. 4 http://christianheilmann.com/2012/05/17/brvty/
  5. 5 https://github.com/csswizardry/CSS-Guidelines/blob/master/CSS%20Guidelines.md
  6. 6 http://girliemac.com/blog/2012/03/29/creating-non-disruptive-notifications-with-html5/
  7. 7 http://girliemac.com/blog/2012/03/29/creating-non-disruptive-notifications-with-html5/
  8. 8 http://www.alistapart.com/articles/artistic-distance/
  9. 9 http://www.symbolset.com/
  10. 10 http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/
  11. 11 http://oak.is/
  12. 12 http://www.chromeexperiments.com/detail/pronunciation-game/
  13. 13 http://www.chromeexperiments.com/detail/pronunciation-game/
  14. 14 https://hacks.mozilla.org/2012/05/mozilla-hacks-weekly-may-17th-2012/
  15. 15 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  16. 16 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  17. 17 www.smashingmagazine.com/the-smashing-daily-archive/
  18. 18 www.smashingmagazine.com/the-smashing-daily-archive/

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.

Advertising
  1. 1

    While I agree with some points in the “General CSS notes, advice and guidelines” I think the resulting CSS files are extremely hard to read and/or to work with very fast. I prefer it to be way more compressed and it definitely increases your workflow.

    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