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. our upcoming SmashingConf London, dedicated to all things web performance.
Sven is the co-founder and former CEO of Smashing Magazine. He's now writing Science-Fiction and at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing — all in German.
To edit HTML- and CSS-code you only need a simple plaintext-editor — the rest depends on your skills and your creativity. However, to make your life a little bit easier, you can use some more comfortable source-code editors with advanced editing features. These features can effectively support you during coding, debugging and testing. Powerful modern editors provide developers with syntax highlighting, diff, macros, plugins, code-snippets, preview-option and an integrated FTP-management tool. Some editors go even further and offer a complete integrated development environment with numerous features and functions. [Content Care Nov/16/2016]
In the list below we present an overview of 35 established or rather unknown — but useful source code-editors; you'll probably find "usual suspects" — your favourite editor or the editor you've once been working with. But you'll also find some rather unknown alternatives which are definitely worth considering when choosing an optimal source code editor.
Some of the "ancient" text-editors such as EMacs or Vi are still alive and have achieved a remarkable level of quality over years. We've presented them below proving that sometimes it is really better to consider preferring a rather old editor to a "fresh" one. The position of the editors in the list is rather random and doesn't necessarily correspond to our personal evaluation of the editors. Please notice: even although this overview presents quite many editors, it doesn't mention all of them.
When it comes to coding editors, it's damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it's important to know which editor is best tailored to your personal needs.
WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they've been producing over the last years. However, WYSIWYG-editors have become much better recently. Some of them even produce valid and elegant code. [Content Care Nov/15/2016]
Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. And this is where the utility of WYSIWYG-editors comes in. As a web-professional you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor. In this article we've tried to give you an overview of both useful and deprecated WYSIWYG-editors.
According to classic principles of web design, everything at the bottom of the page isn't that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren't really able to catch visitors' attention which is why footers are often forgotten or ignored and not given the attention they deserve. [Content Care Oct/13/2016]
In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven't found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, "back to the top"-link and contact details. But if most designers forget it, why don't make use of it? Why don't use footers to impress visitors with something they actually don't expect at all?
This post presents creative examples of footers and ideas for footer design. We've tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.
Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.
Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we're unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.
Therefore designers often tend to explore the less ideal and more realistic design solutions which reflect the world we're living in more accurately and precisely. Result: such elements give the design a more realistic, genuine look, a look one would actually expect in real life. [Content Care Nov/09/2016]
In such grunge designs dirty stains, torn images, "broken" icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.
This post presents the results of the contest — 45 beautiful blog header designs you can use for free. Below the designers have described their themes, intentions and shown us some examples of how header graphics can be used. [Content Care Oct/12/2016]
Please notice that
often also the source image (.ai or .psd) can be downloaded,
all images are clickable and lead to the full-size image of the header,
full-size images have the resolution of 850×200 px,
and you can also download graphics together with source files using corresponding links in the description.
We, designers, are creative folks. And being creative, we permanently strive for inspiration — innovative approaches, crazy ideas, smashing concepts and, in general, unique designs which can help us to observe a given problem from a fresh perspective. This is why we always have some fancy design books laying around on our desk, and this is why we enjoy observing other people's work — basically just because we can learn a hell of a lot from them.
There are things one can do a number of times without worrying about becoming boring. For instance, collecting and showcasing excellent blog designs. In this post we do it already the third time. Why? Web design lives in blogs; new developments appear there, that's where the music plays. And that's where you need to look for in order to keep up with current trends and developments.
This post presents 45 excellent blog designs with a perfect layout and unique personal note. We haven't analyzed the content of the blogs; instead we focused on ideas, approaches, graphics and layouts.
Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal. [Content Care Nov/03/2016]
Web 2.0 style is an excellent example for this evolution in design. In 2007 we've observed a clear example of design abuse, as glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes could be found almost everywhere. However, currently we've been observing a new step in this evolution. Web 2.0 elements start to disappear; they become more subtle, more user-centric, more content-oriented and less loud.
Below we've collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials.
The more emotional a site design is, the more likely it is to evoke positive feelings within its visitors. To achieve a lasting impression, designers tend to use visual cues and offer some eye candy for hurried and hectic users. E.g. vibrant color schemes, photos and illustrations can be used to draw user's attention to some specific site section.
But are there any further options? Yes, there are. Actually, mascots are traditional for sports competitions such as Football World Championship or Olympic Games. Mascot is a more or less nicely designed creature which is symbolic for something and is supposed to evoke sympathy and strengthen the sense of belonging to one single team. [Content Care Oct/11/2016]
When it comes to graphic design, Adobe Photoshop is usually the first option to consider. However, the software itself is a quite tough nut to crack — and definitely extremely hard to master. For instance, the concepts are not always intuitive and it’s not always clear when to use what tool and how to use it effectively. In fact, in Photoshop it usually takes pretty much time to achieve something you have never done before.
However, you don’t need to muddle through numerous Photoshop features and extensions for every design problem. You can use professional suggestions instead, e.g. professional step-by-step tutorials which provide excellent results and thus can save you a lot of time.
Although Smashing Magazine is quite young, a number of things happened in 2007. Aside from dozens of articles, we've organized few contests, re-designed our weblog and we also have released two WordPress-themes and a Smashing free font.
In this post we revise what happened on Smashing Magazine over the last year. Smashing highlights, setbacks and small sensations of 2007 — in a brief overview, month by month. [Content Care Oct/30/2016 – this is a memorial, no links here anymore]
The beauty of an excellent design lies in designer's attention to smallest details. Conventions are our friends; however, to stand out, a design needs a creative spin, an elegant play of colors, some unique flavour — a small detail that would make a big difference.
Where the boundaries between traditional solutions and unusual approaches become fuzzy, designers tend to get creative. However, to come up with unusual ideas isn't that easy, particularly if you are dealing with some daily routine-tasks.
Deb Sofield sticks posts on a paper pile.
Still, nothing is impossible. Even if you're designing a navigation menu there are a number of possibilites you can explore. For instance, have you ever thought of... navigation in form of paper strips?
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.
In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as "previous" and "next"-buttons. [Content Care Nov/03/2016]
Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.
In most cases pagination is better than traditional "previous - next" navigation as it offers visitors a more quick and convenient navigation through the site. It's not a must, but a useful nice-to-have-feature.
Let's take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.