Best Of October 2007

Advertisement

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

    CSS Menu

  • 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 Menu

    CSS Menu

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

    CSS Menu

  • 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.

    Clean Code 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.

    PayPal Form

  • 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.

    AListApart

  • 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.

    OpenSocial

  • 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.

    Mozilla Prism

  • 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.

    Mozilla Extend 2

  • 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.

    Safari

  • 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.

    Ebay Desktop

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]

    Firefox Memory Usage

  • 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.

    Wordpress

    Leopard

  • 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.

    Polish

  • 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.

    ViewAt

  • 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.

    PPCalc

  • 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.

    AskWiki

  • 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.

    File Management Tool

  • 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.

    CSS Builder

  • 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).

    MRI

  • 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.

    Clever CSS

  • 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.

    Example

  • 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.

    Screenshot

  • 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.

    Screenshot

  • 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.

    Screenshot

  • 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.

    Screenshot

  • 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.

    Screenshot

  • 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

The Last Click

↑ Back to top

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.

  1. 1

    Nice one, some links have been visited though :P

    0
  2. 2

    I love it!,

    0
  3. 3

    Nice, thanks for this great review !

    0
  4. 4

    Its been a good month

    0
  5. 5

    As always, useful and inspiring

    0
  6. 6

    Thanks for the great list, I’ve stumbled this post! :)

    0
  7. 7

    Great post!! Thank you very much ^^

    0
  8. 8

    Another kick ass list, although the real time pics link isn’t working and looking forward to seeing it!

    0
  9. 9

    Outstanding. Some really great material and projects presented. Thank you.
    Bubbles seems to be a great thing indeed. Like so many ohters.

    0
  10. 10

    Nice list. Loved the CSS menu section. Great job as usual! :)

    0
  11. 11

    Again, an awesome list/article – well done guys.

    0
  12. 12

    Another great list – thanks!

    0
  13. 13

    This might be your best monthly wrapup yet. Great resources!

    0
  14. 14

    I really like this month.

    0
  15. 15

    Cadu de Castro Alves

    November 14, 2007 10:38 am

    Very nice collection. My favorite were WordPress Magazine Themes, User Interface Icons and 25 Photographs Taken at the Exact Right Time.
    Really nice!

    0
  16. 16

    Woah…I didn’t know about the Entoptic Phenomenon. I ‘ll have to try it out with my camera.

    0
  17. 17

    The section on The last Click gave me the best sites of the rest. Really enjoyed it. Especially the photos taken at the right time, seen some of the images before but still interesting and great. Thanks!

    0
  18. 18

    Really Nice………… luv u SM!

    0
  19. 19

    As always, another brilliant list. Thanks :)

    0
  20. 20

    Great links posted, thanks a lot! Very useful indeed!

    0
  21. 21

    Cool stuff, planning to redesign my blog soon, and most of the tools will definitely help. thanks and keep up the good work :)

    0
  22. 22

    Impressive list. Many useful tips.
    The “25 Photographs Taken at the Exact Right Time” was one of the best I ever seen.

    0
  23. 23

    Great as always!

    0
  24. 24

    Very good,congrulations

    0
  25. 25

    Very cool. Thanks

    0
  26. 26

    Under Prism it says: Windows only.
    I’m currently running Prism in Ubuntu, and in the app’s wiki there is also a link for Mac OS.

    0
  27. 27

    Thanks alot for featuring my site and my icons at pixelresort.com.

    Great list.

    0
  28. 28

    I wait for this topic every month!
    Thanks

    0
  29. 29

    I really liked the post about the firefox memory leak. It was very useful. I was tired of using firefox and then disabled some plugins , now works great.

    Thanks
    http://itdiscover.com – Free IT Stuff like Digg.

    0
  30. 30

    An open-source script similar with Filespots is ext plorer – also based on ExtJS

    0
  31. 31

    thanks for the great links there.. can`t wait til next month

    0
  32. 32

    Great Links, Love the 25 best pics!

    not many web designs though :(

    0
  33. 33

    wow..nice one…!

    0
  34. 34

    I like the solid system

    0
  35. 35

    Great list, I used the Advanced CSS Menu in my new website denhartenweg. I’m looking foreward to next month’s list.

    0
  36. 36

    good.same as usual

    0
  37. 37

    Thanks, always some good articles in ‘best of the month’ :-)

    0
  38. 38

    Great post!
    Especially the: ‘How to disarm 10 difficult client observations/requests’ is right on time.

    0
  39. 39

    Especially like the “click here” article.

    0
  40. 40

    Superb edition, guys. Loved the javascript menu part.

    0
  41. 41

    looks like every time this time you did it niceeeeeeeeeeee
    yes one day we will MultiTouch in our home :D

    imagine to use the surface instated of this keyboard

    0
  42. 42

    wow those were some really fantastic mind blowing, out of this world picz!!!
    mwahahahahahahaha

    0
  43. 43

    Another well planned out list… a lot of links and references to seek inspiration in… love the 25 instant photos one
    You get an Albinora pat on the back. :)

    0
  44. 44

    WHAT AN AMAZING BLOG POST!

    0
  45. 45

    Nice,I like it

    0
  46. 46

    not bad

    0
  47. 47

    hi,hope can see more

    0
  48. 48

    Gloria Vonbargen

    June 19, 2011 3:31 am

    Useful information. Lucky me I discovered your web site accidentally, and I’m stunned why this twist of fate did not came about earlier! I bookmarked it.

    0

↑ Back to top