Menu Search
Jump to the content X
X

Author:

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Twitter: Follow Vitaly Friedman on Twitter

Google Profile: https://plus.google.com/101951294740286010890

Microformats: What They Are and How To Use Them

Web 2.0 has its positive and its negative sides. Apart from tremendous technological improvements, provided by Ajax, semantically organized content and the growing popularity of RSS-Feeds, the term "Web 2.0" still hadn't managed to assert itself as the renewed Web rather than a new revolutionary technology as it is mistakenly being called.
About Microformats
Consequence: many renewed techniques, which somehow seem to be related to the "new" Web, aren't fully or properly understood. This results in public misunderstandings and keeps both developers and users away from the use (the improvement) of these techniques. One of the new terms on the horizon is Microformats (sometimes abbreviated µF or uF) - formats, which make it possible to create meta-content which can be not only read, but also understood by machines (which was the basic idea of Semantic Web, which is not Web 2.0). This post is supposed to give you an idea, what Microformats actually mean, which advantages they have and how you can use them to enrich your content and make it more visible and understandable for search engines. Read more...

CSS Float Theory: Things You Should Know

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn't the theory itself, but the way the theory is interpreted - by developers and browsers. Still, if you take a closer look at the float theory, you'll find out out that it isn't that complex as it appears to be. Most related problems are caused by the older versions of (take a guess) Internet Explorer. If you know the bugs, you can control the way information is presented in a more sophisticated, profound way.
W3C Visual Formatting Model
Let's try to tackle the issue and clarify some usual misunderstandings, which always appear once floats are being used. We've browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats. Update (01.05.2007): our comment form returns some strange mistakes. We're working on it. Sorry for inconvenience. Read more...

35 Designers x 5 Questions

35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. In March we've selected over 35 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers. Here on Smashing Magazine.

35x5

We've asked five questions. One single text line would have sufficed.

  • 1 aspect of design you give the highest priority to.
  • 1 most useful CSS-technique you use very often.
  • 1 font you use in your projects very often.
  • 1 design-related book you highly recommend to read.
  • 1 design magazine you read on a daily/weekly basis (online or offline).

In the end we've received more answers than we expected. The results - over 80 CSS-based tips, design ideas, suggestions, fonts, design-related books and online-magazines - are listed below. It's interesting to know, how designers work their magic. It's interesting to know what you can actually learn from them.

Read more...

Designing With Grid-Based Approach

The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it's quite hard to find your way through all the theory behind grid systems: it isn't easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.

Grid-based Design

And this is what this article is all about. Inspired by Khoi Vinn's and Mark Boulton's presentation Grids are Good, we've decided to take a deep look in the articles about grid-based designs. We've read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we've listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about.

Read more...

Free Fonts of the Month: Geo Sans, OT Versa, Diavlo

We continue to collect most beautiful high quality freefonts, which can be used for both private and professional projects without any restrictions whatsoever. They are hard to find, but the search is definitely worth it.

Free Font - Mank Sans

Over the last 30 days we've managed to find few oldies such as famous Geo Sans and Mank Sans by Manfred Klein, but also some newbies such as Jos Buivenga's Diavlo. You might also be interested in further free fonts we've presented recently. Before using the font, don't forget to read the legal agreement carefully. They change from time to time.

If you like this series of articles, please spread the word, so that 1) we know you are interested; 2) many designers as possible can improve the quality of typography on their web-sites.

Read more...

Keep It Simple, Stupid!

Let's put it straight - simplicity is more complex than you probably think it is. To design a web-site in user-friendly tones, presenting all information and removing unnecessary details isn't easy. In fact, many designers don't manage to find the right mix between details and their presentation on the screen, which usually results in an information overkill and/or decreased usability. However, some designers do manage to find the right balance and create usable, elegant and clean web-sites with simple layouts.

We've selected some of them. 49 simple, clean, sometimes even minimalistic designs, which all stick closely to one single principle - Keep It Simple, Stupid!. You can also download the whole KISS-gallery in PDF (7,2 Mb) - the document includes high-resolution screenshots and the list of all showcased web-sites. Please do not copy the list, but refer to it with a link.

Update: We've been buried as inaccurate/spam on Digg.com. If you don't think that this post is inaccuarate and you don't see any spam here, keep digging us and let us know your opinion in the comments.

Recently we've suggested few start points one could start learning simplicity from. If you are looking for inspiration, you'd probably like to check

we've selected recently.

Read more...

CSS-Based Navigation Menus: Modern Solutions

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it's important to make sure that your visitors will find they way around the site structure - however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that's a tough one. Let's take a look around.

Below you'll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.

PS: Over the last few months we've reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You'll find even more CSS-related articles in our CSS Section.

Read more...

45 Fresh, Clean and Impressive Designs

Sometimes it's just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talanted web-developers manage to deliver powerful, functional and gorgeous web-design in "look-and-feel"-style, which is easy to use and nice to see.

Recently we've listed 50 Beautiful CSS-based web-design of 2006 and chosen some of the most beautiful and inspiring dark web-designs. Now we've selected 45 more fresh, clean and impressive designs. Let's take a look.

Read more...

5 More Free Fonts: Chúcara, Preface, Colaborate

High quality freefonts are always nice to have, but usually they are extremely hard to find. Usually it requires much time and patience to get a lead on some gorgeous typofaces out there. Every week we take a close look around, visit dozens of typography-related sites, check out the latest updates and choose the best free fonts, which have been released or appeared over the last few weeks. And all the fonts we find are getting published immediately, here on Smashing Magazine. So what did we find this week?

Read more...

↑ Back to top