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 October 2007.
All images can be clicked and lead to the sites from which the screenshots have been taken.
CSS-Techniques, (X)HTML, PHP
Advanced CSS Menu1
This tutorial explains how an advanced CSS-based navigation menu is developed from an Adobe Photoshop Sketch to the valid CSS-Code and XHTML-Markup. Learn how to code an advanced (un-typical) list menu utilizing the CSS
CSS Navigation: Pill Navigation8
A family of CSS-based menus in Vista-look.
Using multiple classes within selectors10
The article explains how you can use multiple classes in CSS and which advantages result from this approach. The article includes a number of examples.
What Beautiful HTML Code Looks Like11
In HTML, it really comes down to craftsmanship. It’s all those little things added up that make the whole. Here is a list of just some of the little things that you should look for in other’s code and that you should try to do yourself that make for good craftsmanship in HTML. The good practices of modern web-design in a cheat sheet.
Print.css and your website’s logo13
Every website needs a print style sheet, especially informative websites. This article presents a little trick to give your printed page the logo and/or url, or whatever picture you would like to see on the printed paper.
Making a PayPal Form Tutorial14
Collis Ta’eed explains how to design a simple and nice web form for PayPal-payments.
Everything you need to know about Blueprint CSS17 (incl. tips and tricks). Besides: BluePrint CSS Cheat Sheet18 for quick reference.
A List Apart: Findings From the Web Design Survey19
In April 2007, A List Apart and An Event Apart conducted a survey of people who make websites. The results represent the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide. Over 33,000 designers participated. The results are now available in a 82-pages long .pdf-document. Apparently, most developers earn $20,000 — $60,000 per year. In fact, survey results are shocking20.
Webkit supports @font-face24
The developers of the WebKit-enviroment followed Opera-developers and confirmed the introduction of the CSS @font-face-property25 in WebKit.
@font-faceallows web-designers to integrate OpenType-fonts in web-sites and thus enables a more rich rendering and presentation of texts on the Web. An updated WebKit for Mac OS X is now available26. Internet Explorer 7 allows27 developers to integrate proprietary .eot-fonts via the @font-face-property. As for Firefox, we may have to wait a year or so as @font-face is not scheduled28 for Firefox 3.
CSS: Current Work29
According to the current state of W3C standards, over 45 new standards are currently being developed, only 7 of them are considered as release candidates. An overview of drafts W3C is working on at the moment.
An application that lets you split web applications (e.g. Gmail, Twitter, Facebook) out of Firefox and run them directly on your desktop. Windows only. Bubbles31 offers a more flexible alternative.
An open protocol to allow secure API authentication in a simple and standard method from desktop and web applications. OAuth allows you to grant access to your private resources on one site to another site. While OpenID is all about using a single identity to sign into many sites, OAuth is about giving access to your stuff without sharing your identity at all (or its secret parts).
Extend Firefox 234
Extend Firefox is a developer contest to encourage development and innovation in Web experience through add-ons to Firefox 2. The contest runs until December 31st, 2007.
Pimp My Safari36
It was started as a reaction to the sites cataloguing Firefox extensions. Many excellent plugins for Safari have been developed, but because Safari doesn’t have an official ‘extension architecture’, many don’t know of these extensions. This project collects plug-ins, bookmarklets and scripts for Safari-users. Web-developers will find here some nice tools and features there.
Ebay has released the beta-version of eBay Desktop — one of the first supposed-to-be-broadly-used applications based upon Adobe AIR. The tool delivers the functionality of the eBay-platform to the desktop. Not only can visitors search, bid, browse and watch the items; it’s also possible to use feeds, item reminders, and persistent filters which might put you ahead of the game. A rich and user-friendly interaction within a large web-application. Currently available for Win and Mac OS X.
WordPress Theme Hacks40
This article discusses some useful WordPress tricks which can help you to make a better WordPress theme. Among them – WordPress Conditional Tags, Dynamic Highlight Menu, Dynamic Title Tag, Custom Fields and more.
Comprehensive Guide on How to reduce the memory usage in Firefox41
Firefox 2.0 since its release had the niggling memory leak and no matter how many updates have been out to address this issue it still has that retard issue. A comprehensive guide on how to reduce the memory usage in Firefox. [via FortySomething42]
PSDTuts – Just Great Photoshop Tutorials: October Issue44
An overview of fresh Adobe Photoshop-tutorials published in October 2007. Among them Creating A Leopard X and Creating a Lens Flare with the WordPress logo which are displayed below.
Website Design Tutorial47
Design Process explained: this detailed tutorial explains the path from the first draft to the final release.
Getting Started with Photoshop [Software Tutorials]48
Adobe Photoshop: How-To. An extensive introduction for beginners.
Elements of Great Web Design: The Polish49
Attention to details can dramatically improve the quality of designs. “When I put together designs I usually do so in two phases – Layout and Polish. During the layout phase I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colours, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.” This Photoshop-template can also be downloaded.
jQuery Crash Course51
The project is based upon the idea of creating a virtual space where anybody can upload their photographic works in panoramic format and relate them to the place where they were taken.
Instantbird is a multi-protocol Instant Messaging client. Using it, you can connect to different IM accounts incl. AIM, Google Talk, ICQ, Yahoo! and MSN. Available for Win, Mac OS X and Linux. Free and Open Source.
PPCalc – PayPal Fee Calculator55
The PayPal Fee Calculator allows you to find out what your PayPal fees would be if you were to receive a certain amount of money online. There is also a reverse calculator.
Semantic Web is coming. Instead of offering a set of links, AskWiki seeks to provide specific answers to questions using information from Wikipedia articles. E.g. the query “Who is the current president of Iceland?” results in the name of the president, not in the link to the page which contains this information. Semantic Search attempts to augment and improve traditional Research Searches by leveraging XML data from semantic networks to disambiguate semantic search queries and web text in order to increase relevancy of results.
Simunication offers a web-platform for presentation, sharing and buildung prototype on the basis of Use Cases and Requirements. You can design “real” prototypes to engage customers early and define requirements as well as kill two birds with one stone and validate use cases & requirements while prototyping.
Online File Management is in Web 2.0 no big deal. But what makes this application special is the design which has a remarkable resemblance to Windows Vista desktop-applications. Vista-users might have problems finding out whether Filespots is a web- or a desktop-application. The only missing functionalities59 are the right-click-menu and Drag’n’Drop interaction between desktop-objects and the application. The tool is based upon the Ex JS 2.060-library.
Flickr Related Tag Browser62
A browser through the Flickr universe. Once some tag is provided, the tool generates the tree of related tags and offers you a circular navigation through them. Thumbnails are displayed in the middle of the pages and can be enlarged by clicking on them.
3D-Navigation on Flickr.
CSS Tools and Services
This tool’s intention is to help you easily generate styles for CSS selectors on the fly. You can select or define the selector and choose all the properties you’d like to have by simply clicking on checkboxes and selecting options. Useful for CSS learners, boring for professionals.
MRI is a free cross browser tool that lets you test selectors with any web page. Selectors, particularly complex ones can be difficult to get exactly right – MRI lets you experiment with them on any web page (local or online, static or dynamic).
While web-developers are patiently waiting for CSS 3 improvements69, clever developers are steadily exploring workarounds to use some of the techniques right away — e.g. simulate variables in CSS. We’ve presented Dynamic CSS70 for Ruby On Rails last month, now there are also solutions for Python71, PHP72 and (again) Ruby On Rails73.
Page Scanner Tool75
This tool scans a web page and counts the number of opened and closed tags of most common (paired) types. You can also add custom tags by typing them in separated by commas.
This tool is supposed to explain CSS-properties in a more intuitive way and can serve as a quick reference.
Nice Web Type77
A project aiming to showcase the best examples of elegant web-typography as well as provide related information and references. The according Flickr Pool78 presents most beautiful examples in a compact overview.
Font survey results for Windows, Mac and Unix80
How sure can you be that the font you specify will be present on the end user’s machine? This is the latest cross-platform snapshot of the Code Style font survey and should give you greater confidence in selecting a font. Apparently, only 88.6% of PCs support Georgia.
The author of the project collects references to high-quality free fonts.
Articles and Publications
A List Apart: Articles: Greatest Copy Shot Ever Written82
Anyone can be a copywriter, but the best copywriters actually think about what they’re writing. Nick Padmore analyzes 115 selected taglines and headlines83 and explains what actually makes a good headline.
Content AND Presentation85
According to Mark Boulton, Web 2.0 Design isn’t (or at least should be) not about graphic-based design, but about content and typography. An article which emphasizes the importance of the language and its presentation on the Web.
What is the best way to get customers who signup to actually use a product?86
How to motivate clients to actually use a product once they’ve signed up? 37Signals team describes how they do it.
How will OpenID change your site?87
OpenID promises a lot — just one username and password for life — but can it deliver? Peter Nixey’s the man to tell you. His startup Clickpass is all about bringing OpenID to the masses and he writes about the cost of sign up, fraud and more.
Making the most of a design engagement89
What should clients know before they actually engage in the design process? How to ensure an effective communication with designers? This article by AdaptivePath team delivers answers on these and related questions. “innovative products come from companies with one important characteristic — willpower: The perseverance and committed resources to see a breakthrough product launched.”
It’s not them, it’s us (sometimes)90
Effective communication with stakeholders requires a well thought-out plan. This article offers some starting points you can use to improve the quality of communication and meet the requirements stakeholders have.
How to disarm 10 difficult client observations/requests91
Unveiling a solution is arguably the most harrowing aspect of the creative process. In our last post we talked about how we can work to better service our clients. In this one, I’ll share some of the best responses we have to questions that can often derail an otherwise effective solution. Even more solutions92.
Nine Steps to a Successful Online Community94
An overview of rules and principles which are particularly important in the era of Social Media if you’d like to build up a successful Online-Community.
Pragmatic reporting for your web apps95
How many users signed up for your app over the weekend? Or, how much downtime have you had the last 24 hours? Don’t know? Daniel Hilton can help. This article dives into all that info and more.
Why Blog Post Frequency Does Not Matter Anymore96
Daily posts are a legacy of a Web 1.0 mindset and early Web 2.0 days (meaning 12 months ago!). The pressure around posting frequency will ultimately become a significant barrier to the maturity of blogging. Here are 10 reasons why.
How to Continually Sharpen Your Skills97
You may think you’re pretty good at what you do. And you may be right. But you’re not the best you can be, by a long shot. None of us are, and we might never be. It’s important for your career as a freelancer and for you personally to take what skills you have and improve them, continually, and add new skills.
Does Telling Someone to “Click Here” Actually Matter?98
Guess what — not only should you use actionable anchor text if you really want someone to click, but you should also tell people to take the exact action you want them to perform in order to get the best response. “Click here” helps to increate the amount of pageviews. Experts99 and W3C100 point to the fact that “click here” is bad, since it doesn’t provide an actual meaning of the link.
User Experience 101: How to create a great online experience102
User Experience Examined: essentials, principles and suggestions for approaches in practice.
Web Site Optimization: 13 Simple Steps [Apache & IIS Configuration]103
Earlier this year, Steve Souders from the Yahoo! Performance team published a series of front-end performance optimization “rules” for optimizing a page. This tutorial takes a practical, example-based approach to implementing those rules.
How Feedburner Adds Up Subscriber Numbers104
Vanessa Fox explains why Feedburner-numbers drop from time to time and how the number of Feed-Subscribers is actually calculated.
Design-Galleries, Showcases, Inspiration
35 website footer designs, trends and styles
An overview of 35 impressive footers. We’ve collected some of them as well105.
Blog Bumper Stickers 106
A new trend is rising? This gallery presents the so-called “bumper stickers” – images for the sidebar which are supposed to convey some statements or messages.
CSSArtillery108 and One Star Gallery109
Further CSS-Galleries that collect nice designs, categorize it and let the users rate them.
CSS Reboot is dead. Long live DesignDeadline. Same idea, other conditions. It’s like a reboot but it happens every month. Come February 5th the first designs will launch and be rated, commented on and favorited. Then, in a few more weeks, it will be March 4th and the whole process will start again. How many designers will participate?
Icons, Fonts, WordPress Themes
User Interface Icons111
Kostenlose GUI-Icons stehen zum Download bereit. 4 Größen, 560 Dateien.
PixelResort Icon Set112
Ein Icon-Set mit 150 32×32 Icons, die verschieden GUI-Elemente darstellen sollen.
The Perfect Fluid Width Layout114
Ein “perfektes” flüssiges Zweispalter-Layout steht zum kostenlosen Download bereit.
The Best WordPress Magazine Themes Available115 and more magazine themes116.
An overview of with the magazine-look. Among other themes The Morning After117 and Grid Focus118 are showcased.
The Last Click
Multi-Touch Interaction Research121
MultiTouch is a technology which will change the human-computer-interaction in the next years. Already implemented in Microsoft Surface122, if create a new vision of how we accomplish our tasks with PC and how we interact with each other.
Entoptic Phenomena – Photoset on Flickr124
OK, that’s strange. And creative. Cover your friends with a cloth, ask him/her to jump in the air and make photos while they are jumping.The result is the effect which is called Entoptic Phenomenon125 in digital photography and medicine. [via Paul Boag]
25 Photographs Taken at the Exact Right Time127
No comment is necessary.
What happens to data and information we create, collect, store and share on a daily basis? Clay Shirky, the director of Web 2.0 … The Machine is Us/ing Us130, delivers his take on the problems and issues we might encounter in the future.
Designer’s Bag Case
This is sexy. Actually this is just a notebook-bag case for “thin” laptops. However, the design is simply amazing.
- 1 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
- 2 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
- 3 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 4 http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
- 6 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 7 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 8 http://www.pen-and-paper.de/tools/templates/templates/pill_navigation.html
- 9 http://www.pen-and-paper.de/tools/templates/templates/pill_navigation.html
- 10 http://www.maxdesign.com.au/presentation/multiple-classes/
- 11 http://css-tricks.com/what-beautiful-html-code-looks-like/
- 12 http://css-tricks.com/what-beautiful-html-code-looks-like/
- 13 http://blog.e-ss.be/2007/10/15/printcss-and-your-websites-logo/
- 14 http://freelanceswitch.com/money/making-a-paypal-form-tutorial/
- 15 http://freelanceswitch.com/money/making-a-paypal-form-tutorial/
- 16 http://www.blueflavor.com/blog/design/blueprintcss_101.php
- 17 http://code.google.com/p/blueprintcss/
- 18 http://www.christianmontoya.com/2007/11/12/blueprint-css-cheat-sheet/
- 19 http://alistapart.com/articles/2007surveyresults
- 20 http://tetlaw.id.au/view/blog/2007-web-design-survey-reveals-shocking-truth-about-web-industry/
- 21 http://alistapart.com/articles/2007surveyresults
- 22 http://code.google.com/apis/opensocial/
- 23 http://code.google.com/apis/opensocial/
- 24 http://webkit.org/blog/124/downloadable-fonts/
- 25 http://www.alistapart.com/articles/cssatten
- 26 http://nightly.webkit.org/builds/overview/feature-branch
- 27 http://msdn2.microsoft.com/en-us/library/ms530757.aspx
- 28 http://beta.clagnut.com/beta/?id=2042
- 29 http://www.w3.org/Style/CSS/current-work.html
- 30 http://labs.mozilla.com/2007/10/prism/
- 31 http://www.3d3r.com/bubbles/
- 32 http://labs.mozilla.com/2007/10/prism/
- 33 http://oauth.net/
- 34 http://labs.mozilla.com/contests/extendfirefox/
- 35 http://labs.mozilla.com/contests/extendfirefox/
- 36 http://pimpmysafari.com/
- 37 http://pimpmysafari.com/
- 38 http://desktop.ebay.com/
- 39 http://desktop.ebay.com/
- 40 http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/
- 41 http://www.thinktechno.com/2007/10/07/comprehensive-guide-on-how-to-reduce-the-memory-usage-in-firefox/
- 42 http://www.fortysomething.ca/mt/etc/
- 43 http://www.thinktechno.com/2007/10/07/comprehensive-guide-on-how-to-reduce-the-memory-usage-in-firefox/
- 44 http://psdtuts.com/web/best-of-the-web-october/
- 45 http://psdtuts.com/web/best-of-the-web-october/
- 46 http://psdtuts.com/web/best-of-the-web-october/
- 47 http://www.garysimon.net/webdesign_tutorial/1
- 48 http://www.sitepoint.com/article/getting-started-photoshop
- 49 http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/
- 50 http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/
- 51 http://www.digital-web.com/articles/jquery_crash_course/
- 52 http://www.viewat.org
- 53 http://www.viewat.org
- 54 http://www.instantbird.com/
- 55 http://www.ppcalc.com/
- 56 http://www.ppcalc.com/
- 57 http://www.simunication.com/deployed-sim/viewSimulation.do?simId=11809740359201149
- 58 http://www.filespots.com/
- 59 http://commadot.com/filespots/
- 60 http://extjs.com/
- 61 http://www.filespots.com/
- 62 http://www.airtightinteractive.com/projects/related_tag_browser/app/#/
- 63 http://www.airtightinteractive.com/projects/tiltviewer/app/
- 64 http://www.metatitan.com/cssbuilder.php
- 65 http://www.metatitan.com/cssbuilder.php
- 66 http://westciv.com/mri/
- 67 http://westciv.com/mri/
- 68 http://blog.hasmanythrough.com/2006/03/23/dirt-simple-rcss-templates
- 69 http://www.css3.info/css3-and-what-could-be/
- 70 http://nubyonrails.com/articles/dynamic-css
- 71 http://sandbox.pocoo.org/clevercss/
- 72 http://verens.com/archives/2007/10/01/variables-in-css/
- 73 http://blog.hasmanythrough.com/2006/03/23/dirt-simple-rcss-templates
- 74 http://sandbox.pocoo.org/clevercss/
- 75 http://www.divcounter.com/
- 76 http://aurelio.net/css-sandbox/
- 77 http://nicewebtype.com/
- 78 http://flickr.com/groups/nicewebtype/
- 79 http://nicewebtype.com/
- 80 http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
- 81 http://fawnt.com
- 82 http://alistapart.com/articles/greatestcopyshot
- 83 http://www.adslogans.co.uk/hof/
- 84 http://alistapart.com/articles/greatestcopyshot
- 85 http://www.markboulton.co.uk/journal/comments/content_and_presentation/
- 86 http://www.37signals.com/svn/posts/666-ask-37signals-what-is-the-best-way-to-get-customers-who-signup-to-actually-use-a-product
- 87 http://www.thinkvitamin.com/features/webapps/how-will-openid-change-your-site
- 88 http://www.thinkvitamin.com/features/webapps/how-will-openid-change-your-site
- 89 http://www.adaptivepath.com/ideas/essays/archives/000857.php
- 90 http://www.ideasonideas.com/2007/10/its-not-them/
- 91 http://www.ideasonideas.com/2007/10/disarm-10-difficult-requests/
- 92 http://www.insidecrm.com/features/client-from-hell-091707/
- 93 http://www.ideasonideas.com/2007/10/disarm-10-difficult-requests/
- 94 http://www.kickapps.com/get-started/resources.php
- 95 http://www.thinkvitamin.com/features/biz/pragmatic-reporting-for-web-apps
- 96 http://www.mpdailyfix.com/2006/06/w_why_blog_post_frequency_does.html
- 97 http://freelanceswitch.com/freelancing-essentials/how-to-continually-sharpen-your-skills/
- 98 http://www.copyblogger.com/click-here/
- 99 http://www.456bereastreet.com/archive/200611/click_here_and_other_meaningless_link_phrases/
- 100 http://www.w3.org/QA/Tips/noClickHere
- 101 http://www.copyblogger.com/click-here/
- 102 http://kevinjmireles.wordpress.com/2006/05/04/user-experience-101/
- 103 http://www.sitepoint.com/article/web-site-optimization-steps
- 104 http://searchengineland.com/071109-090259.php
- 105 http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/
- 106 http://www.justsayhi.com/bb/stickers
- 107 http://www.justsayhi.com/bb/stickers
- 108 http://www.cssartillery.com/
- 109 http://onestargallery.com/
- 110 http://designdeadline.com/
- 111 http://www.userinterfaceicons.com/
- 112 http://pixelresort.com/
- 113 http://pixelresort.com/
- 114 http://css-tricks.com/the-perfect-fluid-width-layout/
- 115 http://themeplayground.com/the-best-wordpress-magazine-themes-available
- 116 http://themeplayground.com/more-wordpress-magazine-themes
- 117 http://themasterplan.in/themes/the-morning-after/
- 118 http://5thirtyone.com/grid-focus
- 119 http://themeplayground.com/the-best-wordpress-magazine-themes-available
- 120 http://themeplayground.com/the-best-wordpress-magazine-themes-available
- 121 http://www.youtube.com/watch?v=LByAFrcOwJk
- 122 http://www.microsoft.com/surface/
- 123 http://www.youtube.com/watch?v=LByAFrcOwJk
- 124 http://www.flickr.com/photos/williamhundley/sets/72157594235409275/
- 125 http://en.wikipedia.org/wiki/Entoptic_phenomenon
- 126 http://www.flickr.com/photos/williamhundley/sets/72157594235409275/
- 127 http://sawse.com/2007/11/02/25-photographs-taken-at-the-exact-right-time/
- 128 http://sawse.com/2007/11/02/25-photographs-taken-at-the-exact-right-time/
- 129 http://www.youtube.com/watch?v=-4CV05HyAbM&eurl=http://www.cpluv.com/0/13
- 130 http://www.youtube.com/watch?v=6gmP4nk0EOE