Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 front-end/UX workshops, webinars 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

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. [Content Care Nov/03/2016] 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?
Screenshot
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.
Read more...

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.

Read more...

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.

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

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. [Content Care Nov/09/2016]

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

Preventing Spam: Bulletproof Solutions

Spam is probably one of the most difficult problems we have to deal with. E-Mail-filters, such as those used in GMail, provide accurate results, but not every company is willing to use extern services for its private mails. The problem occurs when web-developers have to display e-mail-addresses on a web-page.

How can you make sure that not a single spam mail will find its path to the inbox of your client? Or, speaking in more concrete terms, the question is, how should you display e-mails on a web-page in order to minimize spam attacks? Let's take a look at some modern and bulletproof solutions and techniques which will help you to prevent spam in your mailbox or the mailbox used by your clients. [Content Care Oct/13 2016]

Read more...

Web 2.0: Buzz-Monitoring and Tracking

You'd like to improve the link popularity of your site. Or maybe to keep track on the latest web buzz. It would be nice to inform your readers about it the minute the news occured. Or maybe you just want to monitor the activities of your users and be able to find the best topics they might be interested in - quickly and efficiently. In these cases tracking tools can be extremely useful and improve your search enormously.

We've taken a look around and listed the best buzz-monitoring, observing and tracking tools a web-developer might be willing to use analyzing and monitoring his/her recent web-projects. [Content Care Oct/03/2016]

Read more...

Diagrams: Tools and Tutorials

Being a web-developer means not only being able to design web-sites or program their functionality. Sometimes it also means to be able to explain complex issues clearly and be able to present to your potential customers reasonable and convincing arguments - in order to find the best compromise between the customer's wishes and the standards you respect. In fact, it is essential to make sure the customer understands which advantages you are actually offering and why this or that layout and markup are better for a given web-project. [Content Care Oct/02/2016]

Developing web-sites over the last few years, I've been stumbling over the same problem over and over again: how can I visualize my idea easily and quickly? Since human being is used to visualize things, trying to understand the idea behind them, recently I've spent hours googling for useful tools and tutorials which would help me to create images - mostly, diagrams, charts, chart-flows etc. to visualize my personal ideas to my potential clients.

I'd like to present the results of my search. If you have any further suggestions, ideas or constructive criticism, don't hesistate to comment on this article!

Read more...

↑ Back to top