Smashing Daily #23: Web Type, Design Principles and Animations

• By Vasilis van Gemert
• June 14th, 2012
• Smashing Daily
• 0 Comments

In this edition of The Smashing Daily you will find tutorials about progressively enhanced, mobile first, responsive menus, about creating an animated scrolling slide deck and about how to use OpenType swashes. There are some excellent articles on design, on CSS for old browsers and much more. Enjoy!

“Create a responsive mobile first menu”
Site-wide navigation menus are complex things, especially in a responsive design. The best way to display such a menu depends on many factors; for instance, screen size and input mechanism; do the users have a mouse, or do they interact with their fingers? Stuart Robson wrote this excellent tutorial for creating a progressively enhanced, mobile first, responsive menu. Read it carefully, he uses some code that’s not always the default (but he explains why he does it).

“Tomorrow’s Web type today: Say it With a Swash”
The 3rd issue in the excellent series Tomorrow’s Web type today by Elliot Jay Stocks should probably have been called Tomorrow’s Web type tomorrow, since the feature he explains—OpenType swashes—isn’t really implemented yet. But since it’s always good to be ready for what’s going to happen (some beautiful stuff!), you should read the article anyway.

“Universal Internet Explorer 6 CSS revisited”
The exact definition of support is debatable—some think support means pixel perfectness, others think support means that the content should be accessible. Andy Clarke is one of those “others”. He created a universal IE6 style sheet you can use to make sure your content is at least readable for people with ancient browsers. And there’s nothing stopping you from using this style sheet for IE7 and IE8 users, either.

“I have an animated idea”
Here’s a nice tutorial that explains how Jonathan Snook created an animated scrolling slide deck. A good read, as you might expect from Jonathan.

“Klim Webfonts”
Here’s the only good reason why a type foundry would not want its fonts to be used on the Web, as a designer friend of the author puts it: “I am not afraid of my fonts on the internet. I am afraid of my fonts looking terrible on the internet”.

“GDS design principles”
Design principles can help you create a good, consistent product: every aspect of the website should test positive to the principles you came up with. Here are the design principles used by GOV.UK. An absolute must read.

“SVG, Use it Already”
David Bushell thinks it’s time to start using SVG. He sums up the pros (but also the cons), concluding that SVG is ready to be used right now, and that it will only get better in the future.

“Flash changes, publish what you learn, tech literacy and nothing to hide?”
Do you need more to read? On April 3rd Christian Heilmann shared his open tabs, with articles about Flash, privacy, education, publishing, and more.

Last Click

“Smallblog”
Here’s a nice blog to follow if you like modern Web techniques and want to make awesome stuff with it, and you don’t want to spend too much time reading. David Desandro curates it.

Previous Issues

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