Menu Search
Jump to the content X X
Smashing Conf New York

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 Barcelona, dedicated to smart front-end techniques and design patterns.


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:

80 Beautiful Typefaces For Professional Design

You don't like to scroll? Be prepared. (We warned you.)

Every now and again designers stumble upon the very same problem: the choice of a unique and beautiful typeface which manages to fulfill three basic tasks. Support the corporate identity, enrich the visual appearance and is compatible with the overall design. However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with. Although the choice usually depends on clients' requirements, it is necessary to have some pretty starting points for your font decision. [Content Care Oct/07/2016]

FF Kievit

So which typefaces are "bulletproof"? What fonts can be used effectively in almost every Corporate Design? And what are the options for unique, but still incredibly beautiful typefaces?

We have answers. Over the last few days we've browsed through dozens of type foundries, read dozens of designers' articles about typography, analyzed font rankings and visited bookmarked font-related suggestions. So this post has 'em all. Well, OK, at least many of them.

Let's take a look at over 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world. Read more...

Data Visualization: Modern Approaches

Data presentation can be beautiful, elegant and descriptive. There is a variety of conventional ways to visualize data - tables, histograms, pie charts and bar graphs are being used every day, in every project and on every possible occasion. However, to convey a message to your readers effectively, sometimes you need more than just a simple pie chart of your results. In fact, there are much better, profound, creative and absolutely fascinating ways to visualize data. Many of them might become ubiquitous in the next few years. So what can we expect? Which innovative ideas are already being used? And what are the most creative approaches to present data in ways we've never thought before?
Text similarities
Let's take a look at the most interesting modern approaches to data visualization as well as related articles, resources and tools. Read more...

CSS Specificity: Things You Should Know

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don't apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you've defined a more specific selector.

CSS Specificity isn't simple. However, there are methods to explain it in a simple and intuitive way. And that's what this article is all about. You'll understand the concept if you love Star Wars. Really.

CSS Specificity Wars

Let's take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources.

  • You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article.

Developer’s Alarm: 200+ Hotkeys To Boost Your Productivity

There is nothing more valuable than the time we need to get things done. Over a long period of time time-saving techniques and solutions can turn out to be real life-savers. The more you use them, the more essential they become. Besides, using them in your favourite software applications, you can drastically increase your productivity, enhance your time-managment and improve both your professional skills and the quality of your work. [Content Care Oct/14/2016]

One of such time-saving features are Hotkeys (or keyboard shortcuts), which offer a powerful tool to get the result instantly - with a single keys combination. We've collected the most useful of them - for the most popular applications out there. Some shortcuts are trivial and well-known, but hopefully not all of them.

Developer's Alarm: 200+ Hotkeys To Boost Your Productivity

This post covers the most useful keyboard shortcuts for essential software applications users and web-developers can/should use on a daily basis - OS, Browsers, Music Players, Communication Tools, File Management and Coding. You will also find references to related resources - there you'll find more specific shortcuts for your needs.


70 Expert Ideas For Better CSS Coding

CSS isn't always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren't sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup. We've taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them. And what has come out of it is an overview of over 70 expert tips, which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post. [Content Care Oct/11/2016] Read more...

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. [Content Care Oct./02/2016]

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.


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.


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. [Content Care Oct/10/2016]


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.


↑ Back to top