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 responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Twitter: Follow Vitaly Friedman on Twitter

Google Profile: https://plus.google.com/101951294740286010890

Smashing Pumpkins and Halloween Redesigns

Right, it's the 31st of October. In spirit of the coming Halloween parties we'd like to spark some design flavour by showcasing Halloween redesigns we've stumbled upon over the last few days. Pumpkins, skeletons, dark colors and spiders can be found almost in every Halloween design. In some cases designers replace some of the logo elements by visual elements (images or Flash-movies); other designers tend to add dark background colors and an according Halloween theme to the web-site's header. And sometimes the whole design is completely replaced with a Halloween theme.

Halloween Screenshot

Last week we've presented some beautiful wallpapers and tutorials in our Halloween Roundup: Wallpapers And Tutorials and asked our readers to send us their redesigns of our Smashing Magazine logo. As a result we've got a number of Smashing Pumpkings which we'd like to present in this post as well. And we've also replaced our logo with the Halloween logo designed by Marian Buhnici (first logo in the list below).

Read more...

Halloween Round-Up: Wallpapers And Tutorials

The Halloween is coming. The preparations are running. Pumpkins are being carved. And skeletons are being packed out from the closets. Since you probably want to set a perfect mood for your coming Halloween party, you might want to set up the party on your weblog as well. So if you are planning on some little redesign you might need some Halloween icons. Besides, what is the Halloween without a scary Halloween wallpaper on your desktop or some fancy decoration for your laptop?

Screenshot

To help you to set the scary mood we've decided to present some of the most beautiful wallpapers, icons, Halloween art works, modding methods, costumes, recipes and tutorials for your tuesday's party. Furthermore we'd like you to collect the best Halloween logos you'll find in the Web over the next week and you can change the Smashing Magazine logo as well.

Please notice that all images can be clicked.

Read more...

Free Fonts Of The Month: Moderna, Mido, Liberation

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

Moderna

This month we can present five excellent free fonts. It’s not quite clear if you are allowed to use MyriadPro (Bold, Semibold), Helvetica (Bold) and Humanist Gill 521 (Bold), which are also presented below. Please read the license agreement carefully - it can change from time to time.

  • You can find over 50 more free fonts in our section Fonts.
Read more...

Charts And Graphs: Modern Solutions

Charts are supposed to visualize data in order to give a more profound understanding of the nature of a given problem or recent developments. Whatever type of data presentation you prefer (pie charts, bubble charts, bar graphs, network diagrams etc.), you can create charts in graphic editors manually or use special desktop-software instead. In both cases you have a major problem: once you’d like to update an old chart, or create a new one, you have to run the application and create new images over and over again. That’s not flexible. That's also not usable — e.g. if you'd like to update your chart live.

Server-based solutions, implemented with Flash, JavaScript or pure CSS, offer a more flexible alternative. In fact, since Flash offers significant advantages over static data presentation with CSS and JavaScript, most solutions use it for dynamic data visualization. The data itself is often stored in XML-files which are loaded and updated via PHP or ASP. The price range varies enormously — depending on the flexibility and level of customization you'd like to have. However, if you don't want to pay, you don't have to — there are powerful free solutions as well.

Chart Demo Screenshot

This article presents an overview of tools, applications and techniques for visualizing data in charts and graphs. Among other things both free and commercial chart tools, services, desktop-applications and web-based solutions (Flash, JavaScript, CSS) — you can use them on your server — are presented.

Please notice that the solutions listed below don't necessarily produce charts which serve the main purpose of data visualization — namely, to provide an easy-to-use visual presentation of (possibly) complex data sets. It's far more important that the presented information is usable and comprehensible rather than presented in a visually appealing way. Outstanding data visualizations aren't achieved by the beauty of data presentation, but by an effective interpretation of the data it represents.

Read more...

Best Practices For Bulletproof E-Mail Delivery

Have your e-mails already been flagged as spam, although you've sent a seemingly legitimate proposal to your client? Have you ever wondered why the efficiency of your newsletter campaigns suddenly dropped down? In both cases you deal with a problem which is harder to get done with than you think it is: bulletproof e-mail delivery.

The main problem with undelivered mails is that both sides — sender and recipient — don't really know what happened. Was the e-mail sent? Is the task done? Was the e-mail delivered? Most recipients will never know that an e-mail flagged as spam was sent to them — they just don't receive the e-mail. And most senders will never know that an e-mail flagged as spam wasn't delivered — they just don't get a response.

Screenshot

This article suggests over 20 bulletproof techniques, best practices and related services you can use to ensure best e-mail and newsletter delivery rates.

Read more...

The Showcase Of BIG Typography

The main advantage of excellent typography lies in its ability to be both attractive and functional at the same time. Although images communicate more vividly, text presentation can impress visitors with its sharpness and precise geometrical forms and curves. Consequently, chosen wisely and used carefully, it can be very effective — and there are dozens of outstanding examples of how the latter can be achieved.

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

Typo Screenshot

In this article we present over 35 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.

  • You might be interesting in the showcase of simple and clean designs we've published before.
  • Please notice that all images can be clicked and lead to the sites from which the screenshots have been taken.
Read more...

30 Usability Issues To Be Aware Of

You don't have to agree upon everything. As a professional web developer you are the advocate of your visitors' interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it's your job to compromise wrong ideas and misleading concepts instead of following them blindly.

In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it's important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it's always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.

Eye-Tracking
Eye-Tracking: Source.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it's time to dive in.

Read more...

Who Is Your Visitor? An Average Profile

You never really know who is going to visit your website next. You have no idea which configuration will be used, what browser will be installed, which screen resolution will be in use. However, since you'd like to comfort most of your web users, you need to know their habits and the profile of your average visitor — to adapt the design and layout to your users' needs.

Since only 50.4% maximise their browser windows, the screen resolution of 1024x768 doesn't necessarily mean that your users are browsing with 1024px wide screen through your website.

Only 50.4% maximise their browser windows
According to Roger Johansson's survey, only 50.4% of users maximise their browser windows.

Nothing is more valuable than the statistics you've collected with an analytics tool installed on your website; however particularly in the beginning of a new project it's nice to have some good idea of what kind of configuration your visitors will probably use.

In this post we'd like to present the results from recent studies of browser market share, used OS and preferred screen resolution worldwide. Please notice that this data is only an approximation; we've used a number of different sources to get the average numbers we present below. Besides, statistics always depends on the readership and the topic of your project.

Read more...

Browser Tests, Services and Compatibility Test Suites

Cross-browser compatibility is still one of the most complex issues when it comes to web-development. Web standards usually guarantee a (relatively) high degree of consistency, however no browser is perfect and particularly older browsers have always been quite good at surprising web-developers with their creative understanding of (X)HTML/CSS-code. Still you need to make sure that (at least) most visitors of your web-site can use it, navigate through it and find what they're looking for as quickly as possible.

Browsers Tests Are Necessary
The truth is that a) you never know who might type in your url in his/her navigation toolbar and b) the browser-environment is still very quirky and the risk of inconsistent presentation is simply too high to ignore it. For instance, different browsers and operating systems use different techniques for rendering fonts (Win vs. Mac on handling fonts). The font size isn't identical on different platforms and some fonts might not be installed on the user's system.

Internet Explore has the browser usage share of 46%
Worldwide browser usage: IE6 dominates; IE 7 has already more users than Firefox 2. Stand: 01.10.2007. Source.

Firefox on Linux doesn't display web-sites as Firefox on Windows does. As bonus web-developers have to cope with dozens of versions and, of course, Internet Explorer 6 — 46% of browser usage share, which is a true godsend for hardcoders and hackers. It's almost impossible to keep all possible problems in mind — a detailed test helps you to identify the critical issues — also and particularly if these are the smallest details of your layout.

Read more...

10 Usability Nightmares You Should Be Aware Of

Sometimes you just want to get the information you're after, save it and move along. And you can't. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article "Why award-winning websites are so awful" Gerry McGovern points out that "the shiny surface wins awards, real substance wins customers" and that is absolutely true.

Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don't understand how they can get from point A to point B they won't use your site.

In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors

  • a clear, self-explanatory navigation,
  • precise text-presentation,
  • search functionality and
  • visible and thought-out site structure.

And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don't drive them away, right?

Real Player

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you'll also find 8 usability check-points you should probably be aware of.

Read more...

↑ Back to top