Author: Sven Lennartz
Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.
We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it's time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.
Of course, real CSS ninjas accept nothing but a minimalistic Notepad or some sophisticated source code-editor. In fact, CSS-editors are often considered to be unnecessary and superflous — after all, you can do the same in your favourite text editor. And sometimes this is true — while there are some really bad HTML-editors there are also some even worse CSS-editors. Particularly code autocompletion tools are extremely good at bloating the code to extremes, making the resulting stylesheet unnecessary complex and hard to maintain. Why would someone purchase a CSS-editor to raise the maintenance costs afterwards?
Yet CSS-editors can be helpful; furthermore, you can effectively use them in different settings by developers with different skills. Web professionals can use a CSS-editor to improve workflow and get all useful CSS-tools provided by one single application. Newbies can easier learn CSS by analzying stylesheets and using live-editing to understand how the design is built up and what is actually going on behind the scenes. In either case you should make sure you know what you are doing and not end up producing quick'n'dirty stylesheet.
This post presents an overview of 15 established or rather unknown CSS-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.Read more...
When it comes to web design too often perfect, colorful and boxy designs make the cut; however, the reality is different as it is hard to find objects with a perfect shape and a perfect color in our daily routine. To achieve a unique and communicative design we need to consider more creative approaches. For instance, we can draw sites by ourselves — or at least some parts of it.
The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when perfect, boxy and rounded elements can be found almost everywhere. They look different and they can make a web-site look different. And this is what we usually are after in the first place.
And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. This post presents fresh examples of hand-drawing style in modern web design. All screenshots can be clicked and lead to the sites from which they’ve been taken.
Please also have a look at our previous showcaseRead more...
This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.
You may also want to take a look at the posts
Design a style switcher and win an Apple Cinema 20 Flat Panel Display with 16.7 million colors, 400:1 contrast ratio, 0.258 mm dot pitch, 16 ms response time and 170-degree viewing angles. Yes, that's that easy. Style switchers are used to provide users with a choice of layouts, fonts, colors and views they can use to adapt the design to their personal needs. Designs with style switchers are more flexbile, more adaptive and more user-friendly as different visitors can quickly modify the design for their personal convenience.
Web designers can achieve significant usability-improvements by adding a simple style switcher to their designs. Style switchers are useful and powerful as they give users a better control of site presentation. However, this technique is almost never used and are sometimes considered to be unnecessary and useless which is simply not true. We would like to change it.
We want to motivate you to figure out how style switchers work and how you can use them to improve your designs.Read more...
Last week was really full of hard work for us. The response to Smashing Texture Contest was impressive and overwhelming. We have received over 740 e-mails from over 600 participants, resulting in far more than 2000 photos. The result, however, is not just literally zillion of textures, but truly brilliant textures you can use in your private and professional projects for free. Thanks to all participants — without Smashing readers this texture gallery wouldn't be possible.
What came out of it? A variety of interesting, exotic or creative textures from all around the globe. Wood, stone, metal, nature, ice, sand, fabric, paper, glass, fire, food and plastic textures. A large number of daily routine things observed from a completely new perspective.
You can use all textures we present in the gallery for both private and commercial projects for free, without any restrictions whatsoever. However, you are not allowed to offer these files for download; please respect the interestes of over 300 participants of our contest. Please also consider the license information attached to the .zip-archives you download from our server. When it comes to usage of textures, different photographers may have different opinions and intentions.Read more...
In Web typography doesn’t have to support the overall design. It can dominate. It can be loud. It can be bold. And it can be everywhere on a web-site. In many situations it’s reasonable to give the typography the prominent position it deserves, leaving visual cues in the background or removing them at all. Doing that, you have to risk large font sizes surrounded by a generous amount of white space. What comes out of it? Elegant web sites with a unique form, style and sense of precision.
Few months ago we have already presented some sites with quite BIG typography. In this article we present further 55 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.
Please take a look at the following posts as well:
Take a shot, send us the image and win a Canon Digital Rebel camera. In web design textures are needed in background-images and header graphics. Graphic designers use textures to transport some concrete aspects of real-life into the digital presentation. Textures are also used to create an atmosphere which fits to the main topic or idea of the site.
Such textures are usually extracted from photos. In fact, everybody can create them — apart from a camera no special devices or tools are necessary. You just need to find a texture and you make a shot of it. And here is where our readers come in. With this contest we want to encourage you to go out, take a camera with you, shot textures and send them to us.
Reward: one of participants of Smashing Texture contest will win the Canon Digital Rebel XT 8MP Digital SLR Camera with EF-S 18-55mm f3.5-5.6 Lens. The winner will be determined randomly.Read more...
Designing blogs is easy. Designing blogs in a unique way is hard. Whatever blog engine you are using, there are literally thousands of templates available which you can apply directly, without any significant code modifications. That's efficient, but it's not creative, because using a default blog-template you risk to end up with some wide-spread look which has actually nothing to do with you. To convey your personality effectively, you need a design which reflects who you are and what you are doing. That's why important is not just what you post, but also how you post it.
In fact, beyond the template-design-culture exists a field of creative, individual and impressive blog designs. And the good thing about it is that this field has been rapidly growing over the last years. To celebrate the creativity of blog designers we regularly present reviews of excellent blog designs we have stumbled upon recently. This post is no exception. Below you'll find 50 further examples of excellent, unique and impressive blog designs.
Apart from "usual" minimal designs, one can observe more rather complex graphic works. If earlier only blog headers had striking visual elements, now whole web-layouts seem to have become more vibrant: paper clips, mp3-players, coffee cups and further objects are used extensively. Apparently, they are used as metaphors for the environment of site designers. Such designs are just impossible to copy and they unite the visual design with the author's content in a unique and very personal layout.
You can also have a look at our previous showcases:
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.
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.
Yesterday we've published a review of 25 WYSIWYG-editors. Now, what about useful source code editors? What is your favourite?Read more...
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.
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.Read more...