Author:

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Google Profile: https://plus.google.com/u/0/104031840292767553284/posts

Block Quotes and Pull Quotes: Examples and Good Practices

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.

Screenshot Pullquote

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

Read more...

Style Switchers Are Back: Ideas, Examples and a Contest

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.

Apple

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

Smashing Texture Contest Results

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

The Showcase Of BIG Typography – Second Edition

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.

Screenshot

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:

Read more...

Smashing Textures Contest

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.

Textures

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

Now More Than Ever: 50 More Excellent Blog Designs

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.

Blog Showcase - Brad Frost's Blog

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:

Read more...

35 Useful Source Code Editors Reviewed

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.

Screenshot

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

↑ Back to top