Best Of April 2008

Advertisement

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days – an overview of web-sites you shouldn’t have missed in April 2008.

All images can be clicked and lead to the sites from which the screenshots have been taken.

References, Tutorials, Tips

  • Wallpaper of the Week
    James White’s “La Femme” wallpaper is available in resolutions 1900x1200px, 1680x1050px, 1440x900px and 1280x1024px.

    Screenshot

  • Create a Sleek, High-End Web Design from Scratch
    “In this tutorial we’ll put together a high-end web design using a crisp, thin font, gorgeous background images and clever use of space and layout. You can easily use the technique to create your own unique designs.”

    Screenshot

  • Create a Powerful Mental Wave Explosion Effect
    “In this tutorial I will show you how to create a crazy explosion, like a mix of Magneto’s ability with Peter Petrelli’s power. We will use images and filters to produce this wave explosion effect. Even though it may look like a difficult tutorial, it’s really not that hard.”

    Screenshot

  • Dropclock Screensaver
    DropClock is a screensaver in which every minute is numerically expressed with heavy Helvetica dropping into water in super slow-motion. Win, Mac. Free Alternative for Mac. [via]

    Screenshot

  • Should Redesign? Cast Your Vote Now!
    This project aims to help webmaster determine if their websites need a refresh. Users who visit ShouldRedesign.com are presented with a website and cast their vote if they think the website should be redesigned or not. Quick and easy to use, anyone can cast a vote.
  • Flash Photo Browser
    This photo gallery impresses with a quite different design of a photo gallery. You can literally toss images stacked upon each other. Both stack and thumbnail views are available. Flash and PHP are required. Developed by Andrew Berg.

    Screenshot

  • Free Admin Template For Web Applications
    Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
  • WordPress Wassup Plugin : The Real Time Visitors Tracking and Statistics Tool
    WassUp is a WordPress plugin to track your visitors in real time. It has a very readable and fancy admin console to keep tracks of your blog’s users visits.
  • Google Earth 4.3
    Google Earth 4.3 adds new and innovative features, including photo-realistic 3D buildings, improved navigation, and sunlight. Now a photorealistic 3D-view of a city is possible. Details.

    Screenshot

  • XHTML Character Entity Reference
    This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.
  • Free eBay Fee Calculator
    This tool calculates eBay fees for 19 countries. You may want to use PayPal Fee Calculator as well.
  • Aviary tutorials
    Aviary is a suite of rich internet applications geared to develop advanced web applications – from image editing to typography to music to 3D to video. This post presents 18 tutorials on how get started with Aviary.
  • Free Web Design Ebooks And Guides
    The following list of free web design ebooks and guides will get you started building accessible, usable, and useful web sites in no time.

Design-Galleries, Showcases, Inspiration

  • Inspiration: Stars, Planets, and Galaxies
    We’ve gathered some resources that will inspire you to look to the sky and beyond. This article will have you grabbing a telescope or heading over to NASA. Learn about the recent rage in space style effects in design. Take a look at artists that have been working in this field long before Apple branded Leopard with such cool space imagery and lighting effects.

    Screenshot

  • Best of Wallpapers Made in Russia
    A selection of some impressive wallpapers designed by Russian graphic designers and artists.

    Screenshot

  • 63 Impressive Website Background-Images: Trends, Resources and Tutorials
    A collection of web designs with an effective use of background images.
  • Packaging design inspiration
    Some interesting examples of beautiful packaging design.

    Screenshot

  • 12 websites that slide and scroll with javascript
    12 websites that use javascript to scroll or slide the viewing window and the different ways the effect is used for user experience, effect, and design.
  • Comment Designs Showcase
    his list shows 30 blogs where the web designer didnÆt just throw together the same old comment design and put extra effort into their comment design to make it fit with their blog design. More inspiration.

    Screenshot

  • Design Gallery: eCommerce Progress Bars
    A progress bar is one of those ôbest practicesö for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on.
  • On the Map
    Impressive infographics, designed by Stephanie Posavec. ôOn the Mapö uses craft and design to understand the symbolic and representative nature of maps. Works included a dress made of maps, numerous old maps of London, a gorgeous Kerr | Noble representation of the River Thames through graphic design and the words of the John BanckÆs Description of London.

    Screenshot

Typography

  • eXtreme Type Terminology
    Typography explained. An extensive introduction to type terminology.

    Screenshot

  • FontStruct
    FontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

    Screenshot

  • On Choosing Type
    John Boardley reveals important principles and guidelines on choosing type. Among them: honour content, read it, consider audence and canvas and print it and check if it looks right.

    Screenshot

  • Techniques for designing with type characters
    Typography and typefaces, without a doubt, are two of the most fascinating aspects of visual design. After weeks of code speak, let’s totally shift gears and talk exclusively about visual design in all its splendor and beauty.

    Screenshot

  • Font Game: The Rather Difficult Font Game
    How many out of 34 fonts can you recognize?
  • Type City
    Take a tour through a world of type that can help transform your design landscape.

    Screenshot

  • .t.y.p.o.r.g.a.n.i.s.m.
    Typogranism is a web-based project focused on interactive kinetic typography and communal interactivity in the Web environment.

    Screenshot

Icons, Fonts, WordPress Themes

  • Sticker Pack 2
    Windows Icons Sticker Pack 2, designed by David Lanham. This collection contains 41 individual sticky icons with large resources for Vista and Leopard.

    Screenshot

  • Web Applications Classic Button Set
    Web applications classic button set includes a PSD file with well grouped layers. You can easily create new buttons by duplicating or editing the current ones.
  • Designers Toolbox: OS Form Elements
    Need a Windows XP button when you work on a Mac? Or a Mac OS X pulldown menu when you’re on a Windows system? You can download these free standard HTML form elements for free and use them in your designs. Further images and icons (DVD/CD-covers, envelopes etc.) are available as well.

    Screenshot

  • Free Icons Download – Icons,Free Icons,XP Icons,Vista Icons,Stock Icons,Mac icons
    High Quality Royalty Free icons for Windows, Mac and Linux, Offers Ico,Gif,Bmp,Png various icons format.
  • The Open Share Icon Project
    An Open Source project which attempts to establish standard icons for OPMP icons, Geotag Icon and Open Share Icon. All icons are available as .png and .psd-files.

    Screenshot

  • Free Web Development Icon Set
    Icojoy team have released new free icon set (addon for this set). The subjects of this set are blogs, dating, player, social networks. These icons are free to use in any kind of project.

    Screenshot

  • Dotted world map vector
    The dotted world map vector free for download. It comes with three different dot sizes which is fine, medium and large to cater for different purpose and needs.

    Screenshot

CSS-techniques, (X)HTML, PHP

  • Accessible Data Visualization with Web Standards
    Here are three techniques for incorporating data visualization into standards-based navigation patterns.

    Screenshot

  • Can We Prevent CSS Caching?
    When you are developing a site, there is a heck of a lot of ôrefreshingö going on. You start to get a pretty good feel for what your browser is going to pick up on a single refresh, and what it wonÆt. Can we make sure CSS is always reloaded and not cached? Is there some way to prevent CSS caching?
  • Css Techniques For Links
    The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.
  • Create a Slick Tabbed Content Area using CSS and jQuery
    Tutorial on how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.

    Screenshot

  • Using captcha without displaying it
    Does the user have JavaScript enabled? If yes, he’s ok. Let him comment. No? He’s a suspect. Read him his rights and give him the ultimate “are you human?” test.
  • The CSS-Only Accordion Effect
    “Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. And then when they mouse over a particular section, it will instantly expand û and the other elements will contract û to make reading more easy.”
  • Nice comments counter style for your blog post
    This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code.

    Screenshot

  • Some PHP Abilities You May Not Know About
    Some useful PHP tricks. Among them calling a PHP function from a string, ternary operator, variable variables and calling a variable variable function.
  • Using Definition Lists: Question and Answer formatting – CSSnewbie
    A brief tutorial on how to use definition lists (dl) to format question & answer blocks.

    Screenshot

  • Top-Down approach to simplify your CSS code
    This post illustrates some tips which can help you to write a better CSS code using a Top-Down approach.

    Screenshot

  • Adding a magnifier to images with CSS and JavaScript
    A script that allows visitors to turn the magnifier on and off with the æon/offÆ link. Visitors can move it around by either dragging with the mouse, clicking on the photo to select a particular point or use the cursor keys when the on/off link has focus.
  • Add a loading icon to your larger images
    You could use a piece of javascript to embed a ôloadingö image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, there is a simpler (and cleaner) method to accomplish the same thing.
  • Improve form usability with auto messages
    This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

    Screenshot

  • Pure CSS Animated Progress Bar
    Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.
  • Create Custom Search Bars
    This tutorial explains how to create custom search bars with Image Replacement using CSS
  • Datasheet-style form using HTML, CSS and JavaScript
    This example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.
  • List Based Calendar
    This isn’t a replacement for table based calendar. This is a simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.

    Screenshot

  • CSS Variables Using PHP
    What about a PHP-like syntax for CSS variables? Using PHP, one can make easy, dynamic CSS a reality.
  • NSFW Blocker Using MooTools and CSS
    “Since most of the time itÆs just a portion of a given picture that could be considered inappropriate, I asked myself if there was a way to get the gist of an articleÆs graphic without having to hide the entire image. For that reason, IÆve created a NSFW blocker using CSS and MooTools.”
  • Two CSS vertical menu with show/hide effects
    Tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

    Screenshot

  • Optimize Your Links For Print Using CSS: Show The URL
    Providing URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.
  • The 6 Most Important CSS Techniques You Need To Know
    The article covers getting a consistent base font size, getting consistent margins, setting a float to clear a float, image replacement, faux columns and CSS Sprites.
  • Date Stamps
    A set of six datestamps (the area of a blog post that displays when the post was made). Below you’ll find a list of all six styles, each with an example of the timestamp and the code you can use to create it. More inspiration.
  • Pushbutton Links
    Using no images, an awful lot can be done with a style sheet and some basic markup alone. An example is creating real, working pushbuttons out of ordinary links ù listed or standing alone, even within the content if margin or word-spacing and a suitable line-height is given.

    Screenshot

CSS tools and services

  • syntaxhighlighter – Google Code
    SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% JavaScript-based and it doesn’t care what you have on your server.

    Screenshot

  • Kotatsu
    This tool is supposed to help you create a table and throw in column classes quickly.
  • GridFox
    GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

    Screenshot

  • Hartija: CSS Print Framework
    Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
  • PSD 2 CSS Online Converter
    psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. Upload your .psd designs, download your .html file and images. It’s that simple. The results aren’t always impressive. Tutorials on using psd2css.
  • Collection of Web Developer Tools, per Browser
    Sometimes, it is not easy to keep track which tools are at a Developer’s disposal (and which are actually usable). The following article seeks to list the best tools available and quickly describing how to activate/install/use them.

    Screenshot

  • CSS Frame Generator
    For a given markup, this tool generates a list of all CSS selectors which can (but not necessarily should) be defined in a stylesheet.
  • Woopra
    Woopra is a comprehensive, rich, easy to use, real-time Web tracking and analysis application. Among features are live tracking and statistics, visitor and member tagging and real time notifications.
  • My DebugBar | IETester / HomePage
    IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

Ajax, Javascript

  • Switching to the On-State dynamically
    Learn how to switch the “on” state of navigation links for dynamic pages.
  • Fade-in Spoiler Revealer
    jQuery has some really simple built in features for ôfading inö and ôfading outö different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.
  • jQuery Examples
    Handy jQuery-based scripts one can use in a variety of projects – Digg Header, Photo Revealer, Gallery Roundup and Menu Fader.

    Screenshot

  • Useful jQuery: a Compilation of jQuery Utilities
    Here is a hand-picked list of useful jQuery scripts and utilities, created to make your web development easier. You wonÆt find any fancy slides or animations in here, instead I have compiled a list of the best, most well-written and useful jQuery components on the web that I would use myself.
  • FancyForm – Javascript checkbox replacement
    FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

    Screenshot

  • jQuery for Designers
    jQuery for Designers is a project dedicated to developers who’d like to learn how to apply web interaction using jQuery. Related tutorials and screencasts.
  • Scalable CSS Buttons Using PNG and Background Colors
    “The script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.”

    Screenshot

  • DevKick | Web Development for Designers
    DevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.
  • Timeframe
    Timeframe is a click-draggable, range-makeable calendar which allows users to select a range of time instantly. By Stephen Celis.

Articles and Publications

  • 7 Principles of Effective Icon Design
    Before approaching icon design there are some guidelines and principles that are worth studying. If you want to create effective icon designs, then you should take a holistic approach to issues such as: audience, size, simplicity, lighting, perspective, and style. This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.

    Screenshot

  • Stop using Ajax!
    Ajax vs. Accessibility. This article discusses why you should focus on accessibility issues and avoid Ajax in your web applications.
  • Entering Illustration
    Kevin Cornell shares his experience and his insights for designers and artists looking to enter illustration as a career.
  • Extensible CSS Interface IV: Testing for Extensibility
    Cameron Moll finishes his series of articles regarding design of extensible and advanced CSS-based interfaces. This article explains 8 benchmarks to measure the extensibility of your site or application.
  • Creating More Using Less Effort with Ruby on Rails
    One of the main reasons Ruby on Rails increases productivity is that it makes building new applications, adding features, and making tweaks much easier. The combination of the language (Ruby) and the framework (Rails) means you can do more with less code.
  • Getting Started with Ruby on Rails
    Web designers have time-tested CSS tricks to use as a starting point, web standards to adhere to, and Photoshop workflows they can rely on. Like these tools, Rails provides standards, conventions, tools, and a foundation upon which developers can construct applications by writing customized code using pre-built Rails libraries.
  • IE CSS Bugs That’ll Get You Every Time
    IE 6 actually had the best CSS support of any browser when it first came out… 7 years ago. The little bugs in it’s CSS support still haunt us to this day. Here are some major bugs in IE that’ll get you every time.

  • 3 Important Usability Challenges for Designing Web Apps
    Matching the user’s natural flow is just one challenge a web-based application developer needs to address during the design and development process. To help our clients, we’ve compiled a list of three challenges they’ll want to keep their eye on.
  • Bigger And Better: Trends in Mobile Screen Sizes
    Bigger And Better: Trends in Mobile Screen Sizes
  • The Meaning of Colour in Web Design
    Different countries – different perception of colors. Some interesting insights into the way people from different countries perceive colors.
  • 25 Must Buy, Borrow, or Steal Books for Web Designers | Creating a blog web design blog
    An overview of useful web design and development-related books. Even more books.

The Last Click

  • Homer CSS
    CSS is indeed a powerful tool capable of achieving impressive results. However, it can be used not only for web layouts, but also for… well, images. This image of a Homer was created using only CSS. The image is also resizable — well, apparently em sizing has its advantages.

    Screenshot

  • Dosugus cushion
    Dosugus cushion looks like a black screen and has good old DOS directories embroidered on it.

  • Lighting designer stuart haygarth london berlin
    The chandelier is made of 1000 exploded Party Poppers collected ( on 01.01.00 ) after the Millennium celebrations in London. Each Popper is suspended on a line from a platform above. The sculptural shape sways and moves like an organic form when hit by a breeze of air.

    Screenshot

  • The impossible art of Li Wei
    Li Wei’s photos are… unusual. His work is a mixture of performance art and photography that creates illusions of a sometimes dangerous reality. Li Wei states that these images are not computer montages and works with the help of props such as mirror, metal wires, scaffolding and acrobatics.

    Screenshot

  • Christiaan Postma
    The starting point with this project was a personal study about form and time. I put together more than 150 individual clockworks and made them work together to become one clock. I show the progress of time by letting the numbers be written in words by the clockworks. Reading clockwise, the time being is visible through a word and readable by the completeness of the word, 12 words from “one” to “twelve”.

    Screenshot

  • Zurich Chamber Orchestra
    The latest video-spot of Zurich Chamber Orchestra, created by Euro RSCG, is simple yet quite impressive. The camera seems to follow the music notes in the music sheet.

↑ Back to top

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.

  1. 1

    Thanks for the mention, excellent roundup smashingmagazine :)

    0
  2. 2

    These are brilliant, thanks so much for the publish! your website is GREAT!

    0
  3. 3

    Wow, that’s a huge list! Thanks!

    0
  4. 4

    An amazing list. I don’t know how you do it, but you always do. Thanks again for another great inspirational post.

    0
  5. 5

    Gilberto Saraiva

    April 30, 2008 9:59 am

    Wow, great list.

    0
  6. 6

    Thanks for the great list!

    0
  7. 7

    Wow, April was so amazing! Geek and Hype

    0
  8. 8

    Great post and thanks so much for featuring resources from WebResourcesDepot.

    0
  9. 9

    S m a s h i n g as before

    ; -)

    0
  10. 10

    Awesome list! Love the pillow. You guys rock. :)

    0
  11. 11

    Wow, this is such a huge list! It’ll take me a while to get through it all. lol

    0
  12. 12

    Respect to our mates from designyoutrust.com!

    0
  13. 13

    Awesmoe selection, thank you!!
    Wanted to say I just uploaded my first WP theme:

    0
  14. 14

    about the article on variables with css you may be interested in this too: variables in css

    0
  15. 15

    Thanks guys, you’re amazing, I am hardly waiting for you’re new articles, the best help for web designers & developers on net…..

    0
  16. 16

    Where you do get all the links from each month?
    Are they submitted?

    0
  17. 17

    Pedro Assumpção

    April 30, 2008 5:47 pm

    Great collection, thanks.

    0
  18. 18

    great work

    0
  19. 19

    you guys rock. Every month the surprises don’t stop.

    0
  20. 20

    wow what an amazing article.. thanx..

    http://www.giackop.com

    0
  21. 21

    Welcome back Smashing!
    Link

    0
  22. 22

    excellent! This is the end of the month gift! :D
    Thanks SM!

    0
  23. 23

    ABSOLUTELY STUNNING!!!!!!!!!!!!!!!!!!

    ww.redesignyourbiz.com

    0
  24. 24

    it`s really exellent!

    0
  25. 25

    The goodness floweth from the page…

    0
  26. 26

    you smashed us once again :)

    1
  27. 27

    MaryAnn Cleary

    May 3, 2008 5:54 pm

    Super list!

    -1
  28. 28

    SO happy to find your website. if i keep only one, it’s yours !!
    brillant as usual…. long life

    Vraiment ravie d’avoir trouvé votre site. si je ne devais en garder qu’un, ce serait celui – ci.
    excellent, comme d’habitude….
    longue vie

    0
  29. 29

    Oh my god, I have 17 tabs to read now … nice way to start the week ! (my boss may disagree)

    0
  30. 30

    Valeriy Mishkorez

    May 8, 2008 4:13 am

    That’s amazing, guys!!!! I love smashingmagazine.com!!!!!

    0
  31. 31

    This site so rocks. You guys rock. Thanks for making our jobs so much easier.

    0
  32. 32

    Where are the “Best of May” and “Best of June” 2008 ? :(

    0
  33. 33

    Really, don’t break the tradition, in last year you had Best of may&june, we are waiting for “Best of” edition of may&june 2008.

    0
  34. 34

    i really thank you! you and your site are so great.

    0
  35. 35

    Agreed… looking forward to the best of May/June/July

    :D

    0
  36. 36

    When there will be a new “Best of” article?
    Looking forward to it every day.

    0
  37. 37

    This very smashing info. Tks.

    0
  38. 38

    Are there no more “best of the month” gallery?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top