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 WeekJames White’s “La Femme” wallpaper is available in resolutions 1900×1200px, 1680×1050px, 1440×900px and 1280×1024px.
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.”
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.”
Dropclock ScreensaverDropClock 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]
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 BrowserThis 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.
Free Admin Template For Web ApplicationsRather 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 & Statistics ToolWassUp 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.3Google 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.
XHTML Character Entity ReferenceThis 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 CalculatorThis tool calculates eBay fees for 19 countries. You may want to use PayPal Fee Calculator as well.
Aviary tutorialsAviary 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 GuidesThe 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 GalaxiesWe’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.
Best of Wallpapers Made in RussiaA selection of some impressive wallpapers designed by Russian graphic designers and artists.
63 Impressive Website Background-Images: Trends, Resources and TutorialsA collection of web designs with an effective use of background images.
Packaging design inspirationSome interesting examples of beautiful packaging design.
12 websites that slide and scroll with javascript12 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 Showcasehis 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.
Design Gallery: eCommerce Progress BarsA 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 MapImpressive 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.
Typography
eXtreme Type TerminologyTypography explained. An extensive introduction to type terminology.
FontStructFontStruct 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.
On Choosing TypeJohn 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.
Techniques for designing with type charactersTypography 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.
Font Game: The Rather Difficult Font GameHow many out of 34 fonts can you recognize?
Type CityTake a tour through a world of type that can help transform your design landscape.
.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.
Icons, Fonts, Wordpress Themes
Sticker Pack 2Windows Icons Sticker Pack 2, designed by David Lanham. This collection contains 41 individual sticky icons with large resources for Vista & Leopard.
Web Applications Classic Button SetWeb 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 ElementsNeed 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.
Free Icons Download - Icons,Free Icons,XP Icons,Vista Icons,Stock Icons,Mac iconsHigh Quality Royalty Free icons for Windows, Mac and Linux, Offers Ico,Gif,Bmp,Png various icons format.
The Open Share Icon ProjectAn 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.
Free Web Development Icon SetIcojoy 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.
Dotted world map vectorThe 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.
CSS-techniques, (X)HTML, PHP
Accessible Data Visualization with Web StandardsHere are three techniques for incorporating data visualization into standards-based navigation patterns.
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 LinksThe 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 & jQueryTutorial 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.
Using captcha without displaying itDoes 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 postThis 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.
Some PHP Abilities You May Not Know AboutSome 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 & Answer formatting - CSSnewbieA brief tutorial on how to use definition lists (dl) to format question & answer blocks.
Top-Down approach to simplify your CSS codeThis post illustrates some tips which can help you to write a better CSS code using a Top-Down approach.
Adding a magnifier to images with CSS and JavaScriptA 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 imagesYou 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 messagesThis 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.
Pure CSS Animated Progress BarHere’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 BarsThis tutorial explains how to create custom search bars with Image Replacement using CSS
Datasheet-style form using HTML, CSS and JavaScriptThis example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.
List Based CalendarThis 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.
CSS Variables Using PHPWhat 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 effectsTutorial 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.
Optimize Your Links For Print Using CSS: Show The URLProviding 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 KnowThe 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 StampsA 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 LinksUsing 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.
CSS tools and services
syntaxhighlighter - Google CodeSyntaxHighlighter 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.
KotatsuThis tool is supposed to help you create a table and throw in column classes quickly.
GridFoxGridFox 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.
Hartija: CSS Print FrameworkHartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
PSD 2 CSS Online Converterpsd2css 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 BrowserSometimes, 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.
CSS Frame GeneratorFor a given markup, this tool generates a list of all CSS selectors which can (but not necessarily should) be defined in a stylesheet.
WoopraWoopra 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 / HomePageIETester 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 dynamicallyLearn how to switch the “on” state of navigation links for dynamic pages.
Fade-in Spoiler RevealerjQuery 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 ExamplesHandy jQuery-based scripts one can use in a variety of projects - Digg Header, Photo Revealer, Gallery Roundup and Menu Fader.
Useful jQuery: a Compilation of jQuery UtilitiesHere 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 replacementFancyForm 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.
jQuery for DesignersjQuery 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.”
DevKick | Web Development for DesignersDevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.
TimeframeTimeframe 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 DesignBefore 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.
Stop using Ajax!Ajax vs. Accessibility. This article discusses why you should focus on accessibility issues and avoid Ajax in your web applications.
Entering IllustrationKevin Cornell shares his experience and his insights for designers and artists looking to enter illustration as a career.
Extensible CSS Interface IV: Testing for ExtensibilityCameron 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 RailsOne 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 RailsWeb 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 TimeIE 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 AppsMatching 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 SizesBigger And Better: Trends in Mobile Screen Sizes
The Meaning of Colour in Web DesignDifferent 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 blogAn overview of useful web design and development-related books. Even more books.
The Last Click
Homer CSSCSS 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.
Dosugus cushionDosugus cushion looks like a black screen and has good old DOS directories embroidered on it.
Lighting designer stuart haygarth london berlinThe 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.
The impossible art of Li WeiLi 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.
Christiaan PostmaThe starting point with this project was a personal study about form & 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”.
Zurich Chamber OrchestraThe 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.
