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, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.
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]
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.
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]
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.
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]
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]
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.
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don't have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn't it great? Well, actualy, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you'll find a list of techniques we , as web-architects, really couldn't live without. They are essential and they indeed make our life easier. Let's take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!
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]
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]
Over the last days we've decided to take a look at new fonts and choose the most beautiful ones. In fact, many new fonts occured - some of them just weren't available for download one year ago, some of them were created over the last 12 months. The results are listed below - the most beautiful fonts, created by the open-source community and free for personal, academic and (sometimes) commercial use [Content Care Oct/06/2016]