Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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 menu1
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 menu2

Tomorrow’s Web type today: Say it With a Swash3
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 Swashes4

Universal Internet Explorer 6 CSS revisited5
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 idea6
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 web7

“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 principles8
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 Already9
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?10
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 blog12

Previous Issues13

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


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14

↑ 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

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