Smashing Magazine - we smash you with the information that will make your life easier. really.

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.

[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]

CSS-Techniques, (X)HTML, PHP

• Advanced CSS Menu
  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 position property.

  

• 13 Awesome Javascript CSS Menus
  13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.

  

  

• CSS Navigation: Pill Navigation
  A family of CSS-based menus in Vista-look.

  

• Using multiple classes within selectors
  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 Like
  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 logo
  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 Tutorial
  Collis Ta’eed explains how to design a simple and nice web form for PayPal-payments.

  

• BlueprintCSS 101
  Everything you need to know about Blueprint CSS (incl. tips and tricks). Besides: BluePrint CSS Cheat Sheet for quick reference.

References, Tips

• A List Apart: Findings From the Web Design Survey
  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 shocking.

  

• Google OpenSocial
  Google has released OpenSocial, a common set of APIs for social applications across multiple websites. With standard JavaScript and HTML, developers can create apps that access a social network’s friends and update feeds. The ultimate goal is for any social website to be able to implement the APIs and host 3rd party social applications. There are many websites implementing OpenSocial, including LinkedIn, MySpace, Ning, orkut and XING.

  

• Webkit supports @font-face
  The developers of the WebKit-enviroment followed Opera-developers and confirmed the introduction of the CSS @font-face-property in WebKit. @font-face allows 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 available. Internet Explorer 7 allows 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 scheduled for Firefox 3.
• CSS: Current Work
  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.
• Mozilla Prism
  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. Bubbles offers a more flexible alternative.

  

• OAuth
  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 2
  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 Safari
  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 Desktop
  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.

  

Tutorials

• WordPress Theme Hacks
  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 Firefox
  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 FortySomething]

  

• PSDTuts – Just Great Photoshop Tutorials: October Issue
  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 Tutorial
  Design Process explained: this detailed tutorial explains the path from the first draft to the final release.
• Getting Started with Photoshop [Software Tutorials]
  Adobe Photoshop: How-To. An extensive introduction for beginners.
• Elements of Great Web Design: The Polish
  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 Course
  As developers, we have more and more JavaScript libraries to choose from and, of course, the option not to use any at all. Over time, we each tend to favor one method of coding over another. For those who’d like to learn more about jQuery, one of the more popular libraries, here’s a crash course written with code-savvy web designers in mind. A brief introduction to jQuery: essentials and examples.

Web-Tools

• ViewAt.org
  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
  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 Calculator
  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.

  

• AskWiki Beta
  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
  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.
• Filespots
  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 functionalities 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.0-library.

  

• Flickr Related Tag Browser
  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.
• TiltViewer
  3D-Navigation on Flickr.

CSS Tools and Services

• CSS Builder
  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 Bookmarklet
  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).

  

• CSS Variables
  While web-developers are patiently waiting for CSS 3 improvements, clever developers are steadily exploring workarounds to use some of the techniques right away — e.g. simulate variables in CSS. We’ve presented Dynamic CSS for Ruby On Rails last month, now there are also solutions for Python, PHP and (again) Ruby On Rails.

  

• Page Scanner Tool
  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.
• CSS Sandbox
  This tool is supposed to explain CSS-properties in a more intuitive way and can serve as a quick reference.

Web-Typography

• Nice Web Type
  A project aiming to showcase the best examples of elegant web-typography as well as provide related information and references. The according Flickr Pool presents most beautiful examples in a compact overview.

  

• Font survey results for Windows, Mac and Unix
  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.
• Fawnt
  The author of the project collects references to high-quality free fonts.

Articles and Publications

• A List Apart: Articles: Greatest Copy Shot Ever Written
  Anyone can be a copywriter, but the best copywriters actually think about what they’re writing. Nick Padmore analyzes 115 selected taglines and headlines and explains what actually makes a good headline.

  

• Content AND Presentation
  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?
  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?
  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 engagement
  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)
  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/requests
  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 solutions.

  

• Nine Steps to a Successful Online Community
  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 apps
  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 Anymore
  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 Skills
  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?
  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. Experts and W3C 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 experience
  User Experience Examined: essentials, principles and suggestions for approaches in practice.
• Web Site Optimization: 13 Simple Steps [Apache & IIS Configuration]
  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 Numbers
  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 well.
• Blog Bumper Stickers
  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.

  

• CSSArtillery and One Star Gallery
  Further CSS-Galleries that collect nice designs, categorize it and let the users rate them.
• Design Deadline
  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 Icons
  Kostenlose GUI-Icons stehen zum Download bereit. 4 Größen, 560 Dateien.
• PixelResort Icon Set
  Ein Icon-Set mit 150 32×32 Icons, die verschieden GUI-Elemente darstellen sollen.

  

• The Perfect Fluid Width Layout
  Ein “perfektes” flüssiges Zweispalter-Layout steht zum kostenlosen Download bereit.
• The Best WordPress Magazine Themes Available and more magazine themes.
  An overview of with the magazine-look. Among other themes The Morning After and Grid Focus are showcased.

The Last Click

• Multi-Touch Interaction Research
  MultiTouch is a technology which will change the human-computer-interaction in the next years. Already implemented in Microsoft Surface, if create a new vision of how we accomplish our tasks with PC and how we interact with each other.

  

• Entoptic Phenomena – Photoset on Flickr
  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 Phenomenon in digital photography and medicine. [via Paul Boag]

  

• 25 Photographs Taken at the Exact Right Time
  No comment is necessary.

  

• Information R/evolution
  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 Us, 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.