Menu Search
Jump to the content X

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


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

A menu

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.

OpenType Swashes

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.

A tutorial about animations on the web

“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

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.

An inspiting blog

Previous Issues

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

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, 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!

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code><pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top