- March 27th, 2008
- 43 Comments
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 Typography1
“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.”
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 abduzeedo5 ]
- Create Spectacular Concept Art in Photoshop7
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 Logotypes9
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 logos10. [ via iso5011 ]
- Color Chart: Reinventing Color from 1950 to Today13
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 Characters15
A collection of mascots used in modern web design. We’ve collected some, too.
- bottle caps!17
A showcase of… well, bottle caps. This photoset on Flickr includes 162 photos.
- FancyZoom 1.120
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.
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 Editor23
- jQuery Tutorials for Designers24
- WaveMaker Visual Ajax Studio26
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.
The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML.
CSS-Techniques, (X)HTML, PHP
- CSS Message Box collection29
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 CSS31
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 Layout33
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-Border35
““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 Replacement36
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 Selectors38
“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-shadow39
Cross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though.
- Equidistant Objects with CSS – CSS-Tricks40
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 Thing42
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 FLOAT43
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 Series44
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 conflict46
“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 tricks47
Including rounded corners without images, ordered lists, tableless forms, blockquote, vertical centering with line-height and CSS drop caps.
- Free Vector Maps and Country Outlines48
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 download50
28 XHTML+CSS-based templates, valid, accessible, well-formed, tested and available for free download. Print style sheet is also included.
- XHTML/CSS Markup Generator52
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 System54
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.
- Dummy Text Generator57
This handy tool helps you create dummy text for all your layout needs.
- Spam Proof eMail Address Generator58
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.
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 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 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 Devices64
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.com65 ]
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.com68 ]
- favicon.ico Generator69
This tool lets you draw 16px × 16px favicons online, store them, share them and rate them.
News, References, Tips
- How much do web designers earn?71
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 WakeupLater72 ]
- DOM Reference73
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 Software74
A brief review of three open-source social networking applications which you can use to create online communities or social networks. Among them Dolphin75, Elgg76 and PHPizabi77. Lovdbyless78 is worth mentioning as well.
- Internet Explorer 8 Beta 1 released80
Microsoft released the first beta of Internet Explorer 8. Among new features the integration of pseudo-classes
: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. Details81, comments82, analysis83 and ideas84. And, finally, IE8 Readiness Toolkit85 for web-developers.
- Safari 3.1 Update86
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 Released87
The Acid3 test88 has been released and most current browsers fail it miserably89. Exception: Safari has done its homework perfectly. [ via Thinkvitamin90 ]
- 5 Free Screencasting Apps for Creating Video Tutorials92
This article features AviScreen, CamStudio, Copernicus, Screencast-o-Matic and Jing. Both Windows and Mac-applications are included.
- Pixton – The User-Generated Comic Strip93
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 About95
For instance, PPcalc96 helps you to figure out your PayPal fees.
- Catalogue of Corporate Identity97
The catalogue of corporate identities including colors, size and typeface. 640 logos are featured.
- Best of Joomla98
A growing repository of Joomla templates, extensions and tools for Joomla.
- Photoshop Brushes99
A growing collection of free Photoshop-brushes. Currently over 500 brushes are available and the collection is growing.
Articles and Publications
- The Evolution of Websites100
How 10 popular websites have (and have not) changed over the last 10 years.
- Write a well structured CSS file without becoming crazy102
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 ExpressionEngine104
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 Width105
What’s the difference? An explanation and basic examples in a pretty long screencast.
- Subversion for Designers106
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 Interview108
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 insights109.
- 6 Phases of the Web Design and Development Process110
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.
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 Web113
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 design115
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 Style116
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
- A Guide to Pricing for Designers117
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 factors118.
- 12 Ways to Tap Into an Endless Well of Creativity120
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 Die121
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 Details123
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 Complaints124
10 complaints the customers have about the design of corporate web sites
- Six suggestions that can make you a better designer125Struggling 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 Bataille126
ABC3D is a pop-up book featuring the alphabet. Each letter is displayed in a creative way. [ via Geekologie127 ]
Impressive typographic t-shirts.
- Lazy Oaf Pimp My Pumps130
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.
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 Disagreement134
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 Contest136
Coloring easter eggs… online. [ via swissmiss137 ]
- ASCII Art in Google AdWords139
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!141
Absolutely incredible. This song consists only of alert sounds from Windows OS. And the best thing: the song is absolutely smashing!
- 1 http://inspiredology.com/graphic-design/typography/
- 2 http://inspiredology.com/graphic-design/typography/
- 3 http://inspiredology.com/graphic-design/typography/
- 4 http://www.changethethought.com/
- 5 http://www.abduzeedo.com/inspiration-changethethought
- 6 http://www.changethethought.com/
- 7 http://psdtuts.com/tutorials-effects/create-spectacular-concept-art-in-photoshop/
- 8 http://psdtuts.com/tutorials-effects/create-spectacular-concept-art-in-photoshop/
- 9 http://blog.sans-concept.com/?p=130
- 10 http://www.flickr.com/photos/mr_carl/sets/72157604144345854/
- 11 http://blog.iso50.com/?p=1217
- 12 http://blog.sans-concept.com/?p=130
- 13 http://www.moma.org/exhibitions/2008/colorchart/flashsite/
- 14 http://www.moma.org/exhibitions/2008/colorchart/flashsite/
- 15 http://inspiredology.com/graphic-design/cool-web-characters/
- 16 http://inspiredology.com/graphic-design/cool-web-characters/
- 17 http://www.flickr.com/photos/fragmented/sets/72157604029485302/
- 18 http://zendold.lojcomm.com.br/icarousel/
- 19 http://zendold.lojcomm.com.br/icarousel/
- 20 http://www.cabel.name/2008/02/fancyzoom-10.html
- 21 http://webplicity.net/flexigrid/
- 22 http://webplicity.net/flexigrid/
- 23 http://markitup.jaysalvat.com/home/
- 24 http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
- 25 http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
- 26 http://wavemaker.com/products/index.html
- 27 http://wavemaker.com/products/index.html
- 29 http://woork.blogspot.com/2008/03/css-message-box-collection.html
- 30 http://woork.blogspot.com/2008/03/css-message-box-collection.html
- 31 http://woork.blogspot.com/2008/03/clean-tab-bar-digg-like-using-css.html
- 32 http://woork.blogspot.com/2008/03/clean-tab-bar-digg-like-using-css.html
- 33 http://muffinresearch.co.uk/archives/2006/02/07/css-drop-column-layout/
- 34 http://muffinresearch.co.uk/archives/2006/02/07/css-drop-column-layout/
- 35 http://css-tricks.com/css-trick-creating-a-body-border/
- 36 http://css-tricks.com/nine-techniques-for-css-image-replacement/
- 37 http://css-tricks.com/nine-techniques-for-css-image-replacement/
- 38 http://www.cssnewbie.com/combating-classitis/
- 39 http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
- 40 http://css-tricks.com/equidistant-objects-with-css/
- 41 http://css-tricks.com/equidistant-objects-with-css/
- 42 http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/
- 43 http://www.tjkdesign.com/articles/float-less_css_layouts.asp
- 44 http://cameronmoll.com/archives/2008/02/the_highly_extensible_css_interface_the_series/
- 45 http://cameronmoll.com/archives/2008/02/the_highly_extensible_css_interface_the_series/
- 46 http://www.onderhond.com/blog/work/code-delivery
- 47 http://stylizedweb.com/2008/03/12/most-used-css-tricks/
- 48 http://www.blog.spoongraphics.co.uk/freebies/free-vector-maps-and-country-outlines
- 49 http://www.blog.spoongraphics.co.uk/freebies/free-vector-maps-and-country-outlines
- 50 http://www.mantisatemplates.com/
- 51 http://www.mantisatemplates.com/
- 52 http://lab.xms.pl/markup-generator/
- 53 http://lab.xms.pl/markup-generator/
- 54 http://960.gs/
- 55 http://960.gs/
- 56 http://yellowgreen.de/morecss
- 57 http://www.blindtextgenerator.com/
- 58 http://www.spam-proof-email-generator.com/
- 59 http://piwik.org/blog/piwik-open-source-web-analytics/
- 60 http://piwik.org/blog/piwik-open-source-web-analytics/
- 61 http://codepad.org/
- 62 http://code.google.com/p/snippely/
- 63 http://code.google.com/p/snippely/
- 64 http://shifd.com/
- 65 http://www.coolhunting.com/archives/2008/03/shifd.php
- 66 http://shifd.com/
- 67 http://rotatee.com/
- 68 http://www.makeuseof.com/dir/rotatee/
- 69 http://www.favicon.cc/?action=icon_list
- 70 http://www.debugbar.com/?langage=en
- 71 http://www.designsalaries.com/downloads.html
- 72 http://www.wakeuplater.com/
- 73 http://developer.mozilla.org/en/docs/DOM:element
- 74 http://www.smashingapps.com/2008/03/26/lets-take-a-look-on-some-of-the-great-free-and-open-source-communitynetworking-website-softwares.html
- 75 http://www.boonex.com/products/dolphin/
- 76 http://elgg.org/index.php
- 77 http://www.phpizabi.net/
- 78 http://lovdbyless.com/
- 79 http://lovdbyless.com/
- 80 http://blogs.msdn.com/ie/default.aspx
- 81 http://www.microsoft.com/windows/products/winfamily/ie/ie8/getitnow.mspx
- 82 http://www.456bereastreet.com/archive/200803/surprise_of_the_year_ie8_will_use_standards_mode_by_default/
- 83 http://www.webstandards.org/2008/03/03/microsoft-rethinks-ie8s-default-behavior/
- 84 http://meyerweb.com/eric/thoughts/2008/03/03/meta-change/
- 85 http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/DevelopersNew.htm
- 86 http://docs.info.apple.com/article.html?artnum=307467
- 87 http://www.drunkenfist.com/304/2008/03/04/acid3-test-released-i-took-some-screen-captures-lots-of-fail/
- 88 http://acid3.acidtests.org/
- 89 http://www.drunkenfist.com/temp/acid3.html
- 90 http://www.thinkvitamin.com
- 91 http://webkit.org/blog/173/webkit-achieves-acid3-100100-in-public-build/
- 92 http://www.makeuseof.com/tag/5-free-screencasting-apps-for-creating-video-tutorials/
- 93 http://www.pixton.com/home
- 94 http://www.pixton.com/home
- 95 http://www.makeuseof.com/tag/9-tools-paypal-users-should-know-about/
- 96 http://www.ppcalc.com/
- 97 http://users.ncrvnet.nl/mstol/56.html
- 98 http://www.bestofjoomla.com/
- 99 http://www.psbrushes.net/
- 100 http://www.wakeuplater.com/index.php/website-building/evolution-of-websites-10-popular-websites.aspx
- 101 http://www.wakeuplater.com/index.php/website-building/evolution-of-websites-10-popular-websites.aspx
- 102 http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html
- 103 http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html
- 104 http://seansperte.com/entry/an_introduction_to_expression_engine/
- 105 http://css-tricks.com/videos/css-tricks-video-10.php
- 106 http://www.thinkvitamin.com/features/design/subversion-for-designers
- 107 http://www.thinkvitamin.com/features/design/subversion-for-designers
- 108 http://vandelaydesign.com/blog/design/group-interview/
- 109 http://www.smashingmagazine.com/2007/04/20/35-designers-x-5-questions/
- 110 http://www.idesignstudios.com/blog/2008/03/20/6-phases-of-the-web-design-development-process/
- 111 http://www.idesignstudios.com/blog/2008/03/20/6-phases-of-the-web-design-development-process/
- 112 http://mezzoblue.com/archives/2008/03/18/mediatyping/
- 113 http://www.thinkvitamin.com/features/css/coding-for-the-mobile-web
- 114 http://www.thinkvitamin.com/features/css/coding-for-the-mobile-web
- 115 http://www.vdotmedia.com/blog/9-best-practices-for-email-design/
- 116 http://www.tyssendesign.com.au/articles/css/legends-of-style/
- 117 http://alphablogdesigns.com/2008/03/01/pricing-for-designers/
- 118 http://www.mostinspired.com/blog/2008/03/11/pricing-factors/
- 119 http://alphablogdesigns.com/2008/03/01/pricing-for-designers/
- 120 http://psdtuts.com/articles/12-ways-to-tap-into-an-endless-well-of-creativity/
- 121 http://www.alistapart.com/articles/signupforms
- 122 http://www.alistapart.com/articles/signupforms
- 123 http://www.alistapart.com/articles/designisinthedetails
- 124 http://www.wiliam.com.au/wiliam-blog/complaints-the-customers-have-about-the-design-of-corporate-web-sites
- 125 http://www.ideasonideas.com/2008/03/six_suggestions_better_designer/
- 126 http://www.fubiz.net/blog/index.php?2008/03/20/1491-popup-by-marion-bataille
- 127 http://www.geekologie.com/2008/03/really_awesome_alphabet_popup.php
- 128 http://www.statattak.com/
- 129 http://www.statattak.com/
- 130 http://www.coolhunting.com/archives/2008/03/lazy_oaf_shoes.php
- 131 http://www.coolhunting.com/archives/2008/03/lazy_oaf_shoes.php
- 132 http://www.bluelounge.com/cableyoyo.php
- 133 http://www.bluelounge.com/cableyoyo.php
- 134 http://interactions.acm.org/content/?p=33
- 135 http://interactions.acm.org/content/?p=33
- 136 http://www.hatchsf.com/easter/
- 137 http://swissmiss.typepad.com/weblog/2008/03/easter-egg-colo.html
- 138 http://www.hatchsf.com/easter/
- 139 http://adverlab.blogspot.com/2008/02/ascii-art-in-google-adwords.html
- 140 http://adverlab.blogspot.com/2008/02/ascii-art-in-google-adwords.html
- 141 http://www.youtube.com/watch?v=dsU3B0W3TMs