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

All images can be clicked and lead to the sites from which the screenshots have been taken. And please, please, don’t forget to check out the last link. You won’t regret it.

Design-Galleries, Showcases, Inspiration

• We All Love Typography
  “Whether it’s spacing, font choice, position, kerning, I just can’t seem to get that look. I am always looking for designs that showcase amazing typography, below are 50+ examples of what I have found inspiring in my quest to achieve typography greatness.”

  

  

• Changethethought
  Christopher Cox collects great works that have been awarded many times and was mentioned by Computer Arts, Design Taxi, Webby Awards, Pixel Surgeon and others. [ via abduzeedo ]

  

• Create Spectacular Concept Art in Photoshop
  Creating conceptual work can be fun and relies heavily on your imagination. This tutorial shows how to combine stock photographs to create a stunning effect that can be easily reproduced to work with almost any combination of images.

  

• The Rainbow Monkey
  A portfolio of Markus Hofko. Interactivity meets style. Impressive works.

  

• Vintage Logotypes
  Well Eric Carl has graciously posted all of the pages from the book to his Flickr page. You can also download all the images in a handy Zip file directly from his blog. More vintage logos. [ via iso50 ]

  

• Color Chart: Reinventing Color from 1950 to Today
  This MOMA exhibition takes as its point of departure the commercial color chart, an item that openly declares the status of color as mass-produced and standardized. It features the work of 44 artists who take a position in which art and life mingle rather than remain separate, and where beauty is found in the everyday rather than in the ideal.

  

• Cool Web Characters
  A collection of mascots used in modern web design. We’ve collected some, too.

  

• bottle caps!
  A showcase of… well, bottle caps. This photoset on Flickr includes 162 photos.

Ajax, Javascript

• iCarousel
  iCarousel is an open source (free) javascript tool for creating carousel like widgets.

  

• FancyZoom 1.1
  Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoomis providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself.
• Flexigrid
  Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

  

• markItUp! Universal Markup Editor
  markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
• jQuery Tutorials for Designers
  This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

  

• WaveMaker Visual Ajax Studio
  WaveMaker Visual Ajax Studio is an visual builder that enables the drag & drop assembly of scalable, web-applications using Ajax widgets, web services and databases. WaveMaker’s Studio enables data-driven and web-services based applications to be quickly created without complex code, forms, patterns or portal frameworks. Both open-source and commercial licenses are available.

  

• dfFlexiGrid - Liquid Javascript Grid Layout
  The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML.

CSS-Techniques, (X)HTML, PHP

• CSS Message Box collection
  A collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).

  

• Clean Tab Bar Digg-like using CSS
  This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover).

  

• CSS Drop Column Layout
  When I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room.

  

• Creating a Body-Border
  ““Body Border” is a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I’d feature how it was done here.”
• Nine Techniques for CSS Image Replacement
  CSS image replacement is a technique of replacing a text page element with an image. This article covers nine techniques, including a testing page with all nine techniques put to the test.

  

• Combating Classitis with Cascades and Sequential Selectors
  “There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work.”
• Cross-browser text-shadow
  Cross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though.
• Equidistant Objects with CSS - CSS-Tricks
  Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

  

• Table-Based Layout Is The Next Big Thing
  With the release of Internet Explorer 8 some of the more obscure areas of CSS are going to become very important. One of them: CSS tables.
• How to create CSS layouts without using FLOAT
  There are many CSS layouts out there. Some rely on AP (Absolutely Positioned) elements, others use FLOATs. This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts.
• The Highly Extensible CSS Interface ~ The Series
  Cameron Moll continues to publish the parts of his series of how-tos and savvy conversation about highly extensible CSS-interfaces. Recent publications cover CSS Selectors & jQuery as well as Ajax Interactivity.

  

• delivering code / how to avoid conflict
  “So let’s assume we’re delivering a clean piece of html code with all the necessary styles in a separate css file that both need to be included in the source document. The problem we’re dealing with is that there’s a realistic chance that your nicely tweaked piece of code will be overruled by already existing css declarations. Luckily, we can take some measures to avoid this.”
• 29 CSS-Snippets for Google AdSense
  Getting creative with Google AdSense.
• Most used CSS tricks
  Including rounded corners without images, ordered lists, tableless forms, blockquote, vertical centering with line-height and CSS drop caps.

Freebies

• Free Vector Maps and Country Outlines
  This collection of free vector graphics features an extremely useful compilation of country and map outlines from across the web.

  

• Free XHTML/CSS website templates for download
  28 XHTML+CSS-based templates, valid, accessible, well-formed, tested and available for free download. Print style sheet is also included.

  

Tools, Web-Services

• XHTML/CSS Markup Generator
  Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

  

• 960 Grid System
  The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

  

• MoreCSS
  MoreCSS is a small JavaScript library for everyday things, like creating tab menus (for example like the one above), tables and lists with zebra-style etc. But the really special thing is: you can do these things like in regular CSS.
• Dummy Text Generator
  This handy tool helps you create dummy text for all your layout needs.
• Spam Proof eMail Address Generator
  This tools enables you to enter your email, choose colors and font types and create a picture of your email address which spam bots will not be able to read.
• Piwik
  An open source web analytics application which is supposed to be an advanced alternative to Google Analytics. The features are built inside plugins: you can add new features and remove the ones you don’t need. Sounds promising.

  

• codepad
  Codepad is a pastebin that runs your code for you. It works like a compiler or interpreter, not like the read-eval-print loop of an interactive interpreter prompt. If you want to print the value of an expression, you need to use your language’s print command. The tool supports C++, Perl, Python, Ruby and others.
• Feed Analysis v1.1
  This tool analyzes your FeedBurner feeds, provides statistics about the growth rate, calculates average subscribers and predicts further development. Growth rate is particularly useful.

  

• snippely
  Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.

  

• SHIFD Beta - Shift Content Between Your Devices
  a really easy way to capture and view notes, places and links from your mobile phone, web browser or computer desktop. I most often use it for mobile notes-to-self; whenever I need to capture a name, place, task or thought I just text it to ShifD. [ via Coolhunting.com ]

  

• Rotatee
  Rotatee lets you create ad campaigns to manage different advertising spots on your website. Each campaign can target certain spot (ex. sidebar). You can specify how many ads should be shown on each spot and how often each of them should appear. Currently in private beta. [ via Makeuseof.com ]
• favicon.ico Generator
  This tool lets you draw 16px × 16px favicons online, store them, share them and rate them.
• DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer
  An Internet Explorer plug-in that brings you new powerful features . Free for personal use. The tool includes a DOM inspector, HTTP inspector, Javascript inspector and Javascript console,HTML validator and other features.

News, References, Tips

• How much do web designers earn?
  Not much. $54,000 a year. The results of AIGA’s 2007 Salary Survey. The survey covers all aspects of designers and their compensation. [ via WakeupLater ]
• DOM Reference
  This chapter provides a brief reference for the general methods, properties, and events available to most HTML and XML elements in the Gecko DOM. The articles listed here cover DOM Core Specification, DOM HTML Specification and DOM Events Specification.
• Open-Source Social Networking Software
  A brief review of three open-source social networking applications which you can use to create online communities or social networks. Among them Dolphin, Elgg and PHPizabi. Lovdbyless is worth mentioning as well.

  

• Internet Explorer 8 Beta 1 released
  Microsoft released the first beta of Internet Explorer 8. Among new features the integration of pseudo-classes :after and :before. IE8 improves rendering of content authored to various web standards in standards mode. The new version features an enhanced and standardized DOM that brings it in line with implementations in other browsers. Additionally, IE8 has dramatically enhanced AJAX support with features like DOM: Storage, Cross Document Messaging (XDM) and the Selectors APIs. And (hurrah, hurrah): IE8 will use Standards mode by default. Details, comments, analysis and ideas. And, finally, IE8 Readiness Toolkit for web-developers.
• Safari 3.1 Update
  The new release adds support for CSS 3 web fonts, broader SVG images capability , and offline storage for Web applications in SQL databases.
• Acid3 Test Released
  The Acid3 test has been released and most current browsers fail it miserably. Exception: Safari has done its homework perfectly. [ via Thinkvitamin ]

  

• 5 Free Screencasting Apps for Creating Video Tutorials
  This article features AviScreen, CamStudio, Copernicus, Screencast-o-Matic and Jing. Both Windows and Mac-applications are included.
• Pixton - The User-Generated Comic Strip
  Pixton is a user-generated comic strip, that you create, publish, share and remix with your friends. Pixton characters are created by choosing from preset attributes and expressions, specifying hair and skin color, rotating body parts, and setting height and girth with a drag of the mouse. Registration is required.

  

• 9 Tools PayPal Users Should Know About
  For instance, PPcalc helps you to figure out your PayPal fees.
• Catalogue of Corporate Identity
  The catalogue of corporate identities including colors, size and typeface. 640 logos are featured.
• Best of Joomla
  A growing repository of Joomla templates, extensions and tools for Joomla.
• Photoshop Brushes
  A growing collection of free Photoshop-brushes. Currently over 500 brushes are available and the collection is growing.

Articles and Publications

• The Evolution of Websites
  How 10 popular websites have (and have not) changed over the last 10 years.

  

• Write a well structured CSS file without becoming crazy
  This is a descriptive post about how to write a well structured CSS file. Main principles of successful CSS-coding: be simple, be “elegant-code” oriented, be methodic. A useful read.

  

• An Introduction to ExpressionEngine
  EE has the power to drive even most medium- to large-scale websites. If you’re looking for a reason to invest some time and effort into learning and installing it, keep reading.
• Fixed Width, Fluid Width and Elastic Width
  What’s the difference? An explanation and basic examples in a pretty long screencast.
• Subversion for Designers
  There’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers.

  

• Web/Graphic Designer Group Interview
  An extensive group interview of 10 web-developers. Some interesting insights into designers’ workflow, how they seek for inspiration and what they begin their projects with. More useful insights.
• 6 Phases of the Web Design and Development Process
  Web Design Engineering: an attempt to introduce some structure into the design and development process into 6 pieces: information gathering, planning, design, development, testing and delivery and maintenance. These stages are typical for usual software development process.

  

• Mediatyping
  What does it take to refactor a stylesheet for a mobile version of a web-site? How to start and what to consider? Dave Shea delivers answers.
• Coding for the mobile Web
  Developing for the iPhone is great, but it’s only a sliver of the mobile market, and the real world of mobile development is a lot hairier. Opera developer relations manager Chris Mills writes about do’s, don’ts and best practices.

  

• 9 best practices for email design
  Designing for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.
• Legends of Style
  It’s a well-established fact that achieving cross browser consistency when styling form controls is an “exercise in futility”. And one of those elements that just won’t play ball is the legend tag.
• A Guide to Pricing for Designers
  What should you consider when estimating the price for your work? Armen Thomassian suggests to consider business overheads, part-time or full-time, experience, image and… respect. More pricing factors.

  

• 12 Ways to Tap Into an Endless Well of Creativity
  There is no reason to ever run out of ideas. The world, our minds, history, and the Web offer an infinite realm of artistic exploration. Consider the impact your habits, approach, organization, and internal rhythms have on your finished work. Find out some approaches professional artists use to continuously wave a wand of endless creativity.
• Sign Up Forms Must Die
  When planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement. Show potential customers how they can use your service and why they should care.

  

• Design is in the Details
  Paying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.
• 10 Complaints
  10 complaints the customers have about the design of corporate web sites
• Six suggestions that can make you a better designer

  Struggling with too many projects, and not sure where to start? Wish you had a few tricks up your sleeve to make things easier? While the following is certainly not a definitive list, it does contain a few of the things which sound quite reasonable.

The Last Click

• Alphabet Popup Book by Marion Bataille
  ABC3D is a pop-up book featuring the alphabet. Each letter is displayed in a creative way. [ via Geekologie ]
• StatAttak
  Impressive typographic t-shirts.

  

• Lazy Oaf Pimp My Pumps
  Lazy Oaf’s off-the-wall designer shoes are inventive one-offs all using the classic plimsol as a canvas. Each pair is one-of-a-kind and made using materials that aren’t necessarily street-safe, which means they might be more functional as sculptures than as footwear. They start at £35 from Lazy Oaf.

  

• Cableyoyo
  This is damn useful. Cableyoyo is an empty spool around which you wrap your existing cord. It will take any cord up to 5mm in diameter, and this covers all low voltage chargers, USB, firewire, data and telephone cables.

  

• Designing for Disagreement
  Designing for Disagreement is a visual explanation of think/make, a new method of creative problem solving with the ultimate focus on expeditions, honest, and accurate results. A new concept by Paul Burke. Nice visualization.

  

• Easter Egg Coloring Contest
  Coloring easter eggs… online. [ via swissmiss ]

  

• ASCII Art in Google AdWords
  How to distinguish your ad from other competitors’ ads? Get creative. In Google AdWords you can use ASCII to stand out. Result: this ad received 47% more clicks than before.

  

• Music using ONLY sounds from Windows XP and 98!
  Absolutely incredible. This song consists only of alert sounds from Windows OS. And the best thing: the song is absolutely smashing!

• Published in Best of the Month, March 27th, 2008
• Tags: best of, free, inspiration, showcase, templates, typography

• Color website design » Blog Archive » Best Of March 2008 (March 27th, 2008 at 7:46 am )
• Media Districts Entertainment Blog » Best Of March 2008 (March 27th, 2008 at 7:46 am )
• t-shirts » Blog Archive » Best Of March 2008 (March 27th, 2008 at 8:38 am )
• nortypig » Blog Archive » Smashing Best of March 2008 (March 27th, 2008 at 2:07 pm )
• 44 Decent Dark Websites | inspiredology.com (March 27th, 2008 at 3:40 pm )
• /Н.П.Блок/ » » Best of March 2008 (March 28th, 2008 at 1:00 am )
• Caminews » Best Of March 2008 | Best of the Month | Smashing Magazine (March 28th, 2008 at 2:10 am )
• Ess - Sibran Lens » Blog Archive » The best of March 2008 by Smashing Magazine (March 31st, 2008 at 7:26 am )
• Selene M. Bowlby | Web Designer + Front-End Web Developer » Blog Archive » Blogger Appreciation Day (Unofficial) (April 14th, 2008 at 10:23 am )
• jaehong75.com : links for 2008-04-22 (April 22nd, 2008 at 8:50 am )

Leave a Reply