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 Week1
    James White’s “La Femme” wallpaper is available in resolutions 1900x1200px, 1680x1050px, 1440x900px and 1280x1024px.

    Screenshot2

  • Create a Sleek, High-End Web Design from Scratch3
    “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.”

    Screenshot4

  • Create a Powerful Mental Wave Explosion Effect5
    “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.”

    Screenshot6

  • Dropclock Screensaver7
    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 Mac8. [via9]

    Screenshot10

  • Should Redesign? Cast Your Vote Now!11
    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 Browser12
    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.

    Screenshot13

  • Free Admin Template For Web Applications14
    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 Tool15
    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.316
    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. Details17.

    Screenshot18

  • XHTML Character Entity Reference19
    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 Calculator20
    This tool calculates eBay fees for 19 countries. You may want to use PayPal Fee Calculator21 as well.
  • Aviary tutorials22
    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 Guides23
    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 Galaxies24
    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.

    Screenshot25

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

    Screenshot27

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

    Screenshot30

  • 12 websites that slide and scroll with javascript31
    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 Showcase32
    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 inspiration33.

    Screenshot34

  • Design Gallery: eCommerce Progress Bars35
    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 Map36
    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.

    Screenshot37

Typography

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

    Screenshot39

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

    Screenshot41

  • On Choosing Type42
    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.

    Screenshot43

  • Techniques for designing with type characters44
    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.

    Screenshot45

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

    Screenshot48

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

    Screenshot50

Icons, Fonts, WordPress Themes

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

    Screenshot52

  • Web Applications Classic Button Set53
    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 Elements54
    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.

    Screenshot55

  • Free Icons Download – Icons,Free Icons,XP Icons,Vista Icons,Stock Icons,Mac icons56
    High Quality Royalty Free icons for Windows, Mac and Linux, Offers Ico,Gif,Bmp,Png various icons format.
  • The Open Share Icon Project57
    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.

    Screenshot58

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

    Screenshot60

CSS-techniques, (X)HTML, PHP

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

    Screenshot62

  • Can We Prevent CSS Caching?63
    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 Links64
    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 jQuery65
    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.

    Screenshot66

  • Using captcha without displaying it67
    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 Effect68
    “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 post69
    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.

    Screenshot70

  • Some PHP Abilities You May Not Know About71
    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 – CSSnewbie72
    A brief tutorial on how to use definition lists (dl) to format question & answer blocks.

    Screenshot73

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

    Screenshot75

  • Adding a magnifier to images with CSS and JavaScript76
    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 images77
    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 messages78
    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.

    Screenshot79

  • Pure CSS Animated Progress Bar80
    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 Bars81
    This tutorial explains how to create custom search bars with Image Replacement using CSS
  • Datasheet-style form using HTML, CSS and JavaScript82
    This example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.
  • List Based Calendar83
    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.

    Screenshot84

  • CSS Variables Using PHP85
    What about a PHP-like syntax for CSS variables? Using PHP, one can make easy, dynamic CSS a reality.
  • NSFW Blocker Using MooTools and CSS86
    “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 effects87
    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.

    Screenshot88

  • Optimize Your Links For Print Using CSS: Show The URL89
    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 Know90
    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 Stamps91
    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 inspiration92.
  • Pushbutton Links93
    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.

    Screenshot94

CSS tools and services

  • syntaxhighlighter – Google Code95
    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.

    Screenshot96

  • Kotatsu97
    This tool is supposed to help you create a table and throw in column classes quickly.
  • GridFox98
    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.

    Screenshot99

  • Hartija: CSS Print Framework100
    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 Converter101
    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 psd2css102.
  • Collection of Web Developer Tools, per Browser103
    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.

    Screenshot104

  • CSS Frame Generator105
    For a given markup, this tool generates a list of all CSS selectors which can (but not necessarily should) be defined in a stylesheet.
  • Woopra106
    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 / HomePage107
    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 dynamically108
    Learn how to switch the “on” state of navigation links for dynamic pages.
  • Fade-in Spoiler Revealer109
    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 Examples110
    Handy jQuery-based scripts one can use in a variety of projects – Digg Header, Photo Revealer, Gallery Roundup and Menu Fader.

    Screenshot111

  • Useful jQuery: a Compilation of jQuery Utilities112
    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 replacement113
    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.

    Screenshot114

  • jQuery for Designers115
    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 Colors116
    “The script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.”

    Screenshot117

  • DevKick | Web Development for Designers118
    DevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.
  • Timeframe119
    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 Design120
    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.

    Screenshot121

  • Stop using Ajax!122
    Ajax vs. Accessibility. This article discusses why you should focus on accessibility issues and avoid Ajax in your web applications.
  • Entering Illustration123
    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 Extensibility124
    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 Rails125
    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 Rails126
    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 Time127
    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.

    128

  • 3 Important Usability Challenges for Designing Web Apps129
    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 Sizes130
    Bigger And Better: Trends in Mobile Screen Sizes
  • The Meaning of Colour in Web Design131
    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 blog132
    An overview of useful web design and development-related books. Even more books133.

The Last Click

  • Homer CSS134
    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.

    Screenshot135

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

    137

  • Lighting designer stuart haygarth london berlin138
    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.

    Screenshot139

  • The impossible art of Li Wei140
    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.

    Screenshot141

  • Christiaan Postma142
    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”.

    Screenshot143

  • Zurich Chamber Orchestra144
    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 topShare on Twitter

The Smashing team loves high-quality content and cares about the 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

↑ Back to top