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

References, Tutorials, Tips

• iStalkr: Social Feed Aggregator
  “iStalkr is a web app that allows you to create a lifestream (based on Jeremy Keith’s Lifestream concept [Flickr]) tracking all your RSS and ATOM feeds for services you use, like Digg, Del.icio.us, Ma.gnolia, Flickr, Last.fm, Google Reader’s Shared Items, Tumblr, Twitter , etc, and create a time line of your activities.”
  
• The Web Design Survey, 2007
  A List Apart conveys a survey among designers, developers, project managers, writers, editors, information architects and usability specialists from all around the world. 37 questions concern the geographical location of designers, titles, skills, educational backgrounds, financial situation, experience and much more. Participate in A List Apart’s first annual survey to increase knowledge of web design and boost respect for the profession.
  
• Directory of FREE Online Books and FREE eBooks
  Over 120 000 free online books and eBooks are offered for free download. The category “Computers & Internet” includes over 30.000 entries.
• Adobe – Design Center – Video workshop
  A set of over 200 online video tutorials for Adobe Creative Suite 3 is supposed to provide help for both beginners and professionals.
  
• The business case for web standards
  “I thought it a good idea to set up a wiki to collect information on [business benefits of web standards] as there are a lot of presentations written about it but all differ in approach and content and collating all these great ideas can help us form a solid approach to selling web standards to the business.”
• 120 Adobe Photoshop Tips
  120 things you never knew about Adobe Photoshop. Among them notes regarding Interface Tips, Tool Tips, Command Tips, Selection Tips, Layer Tips, Hotkeys, Navigation, Duplicating, Type and Adobe Imageready.
• 126 Essential Freelancing Resources
  “The web is packed with tools and resources which you all too often don’t know about. So to help all you freelancers out there we have compiled a gigantic list of resources, categorized up for your benefit.”
  
• 30 Traffic Generation Tips
  30 useful traffic generation tips from 30 prominent bloggers.
• PHP regular expressions examples
  Various PHP regular expression examples to help your application validate, compare, compute or decide
• The best Photoshop resources of the month
  Selected Adobe Photoshop resources of the month: among them Fresh Foliage Photoshop Brushes, Creating a 3D-effect, Turn your photo into movie-like effect and more.
  
• Gmail Super Clean
  Gmail Super Clean is a Greasemoneky-based skin for Gmail, with customization options supposed to remove
  ads and simplify the way Gmail looks. Among other options, you can change the logo, fonts, show/hide ads etc using the User script commands on Greasemonkey.
• Shiira Project
  Shiira is a new web browser based on Web Kit, written in Cocoa for Mac OS X. The goal of the Shiira Project is to create a browser that is better and more useful than Safari. All source code used in this software is publicly available under the BSD license.
  

Tools, Web-Services

• tlbox – Web Design Tools
  A lot of sites have been promoting pages for web developers, but none of them have asked what people are actually using to do good work. This site hopes to answer that question by offering developers virtual toolboxes where they can put their instruments in. The most popular tools land on the front page.
• Wordpress Theme Generator
  Using Wordpress Theme Generator you can create your custom WordPress Theme. High level of HTML, JS, PHP, or CSS knowledge isn’t necessary, but useful – particularly if you want to create a unique theme.
• Coda – One-Window Web Development for Mac OS X
  Text Editor, CSS Editor, File Manager, Terminal, Publishing Tool and more: a new smart web-development tool with numerous options for efficient coding and publishing. Test reports by Jon Hicks, Cabel Sasser, Steven Frank, John Gruber, O’Reilly Mac DevCenter Blog, ExpressionEngine: Live Preview with Coda (and other IDEs) [via Manuela Hoffmann]
  
• SpamCheck
  E-mail marketing is being suffocated by a growing deluge of spam. The problem is so extensive, that many ISPs are being proactive about halting the spread of this scourge. Many have implemented filtering software that “scans” e-mail for certain “triggers,” which may include certain phrases, formatting, and aggressive writing styles.
  With SpamCheck you can check whether your mails might be “red-flagged’ by some overly sensitive antispam-software and land in the TrashBox.
• FormBuilder: HTML forms made simple
  FormBuilder is designed to do make building forms simple. It can create HTML forms by entering a few PHP values, generates XHTML 1.0 Strict compliant markup, highlights required fields and fields that are in error. It also has an ability to add your own custom form validation after FormBuilder has completed its own validation pass, is rigorous and flexible form validation on a per-field basis and is protected against PHP header injection.

CSS-Techniques, (X)HTML, PHP

• Unobtrusive connected select boxes
  The interface element of connected select boxes (one select box changing the options in the other one) is one of the most used and also most annoying elements of web application design. While it works nicely for anyone having JavaScript enabled and using a mouse it can be a nightmare to use with a keyboard (unless you know that you can expand the whole list with alt+cursor down first).
• Link Boxes
  “I was looking over the shoulder of another designer who wanted a box with a headline and copy, and wanted the entire thing to be clickable. Here are some thoughts on marking this up.”
  
• Setting Type on the Web to a Baseline Grid
  “Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts. Mark gave us a lesson plan, Khoi gave us a case study and Cameron gave us a toolkit . The message is clear: we have the browser support, the know-how, and the tools we need to create consistent multi-column grid layouts on the web…”
• Global Reset: Reloaded
  Eric Meyer shares his version of an universal reset.css you can use to set default values properly in modern browsers.
• A Guide to CSS Support in Email: 2007 Edition
  The article describes, how well CSS is supported in main E-Mail-services and E-Mail-software and which attributes designer can use to style E-Mails with CSS-Stylesheet. PDF with a brief overview of results.
  
• A CSS Sticky Footer
  “In just a few simple CSS classes with minimal extra HTML markup, I’ve fashioned a sticky footer that even beginners can get a handle on. It’s been tested in IE 5 and up, Firefox, Safari and Opera.”
• CSS Hacks & Issues
  This article includes 8 helpful solutions when designing with CSS: among them transparent PNGs in IE6, outline-property and min-width-property.
• Glowing Tabs Menu
  Glowing Tabs Menu uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab “glows”, by using the “Sliding Doors” technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.
  
• Optimize Your CSS with Multi-Class Elements
  This article will teach you the technique of using space separated classes thereby allowing you to be a better CSS artist.
• CSS style theme switcher
  By changing some css classes, your site will look different 6 times a day. You can make a sun going up in the morning, and disappearing in the evening.
• 10 Free CSS and Javascript Calendars
  Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. Here are a list of various css and javascript calendars for use on your site.
  
• Master Stylesheet: The Most Useful CSS Technique
  “Below is a basic master stylesheet, I removed some styling from elements to keep it simple, like colors, but once you give it your own touch, you’ll have a stylesheet that will help with the majority of your CSS nightmares.”
• Sliding Panels with CSS and JavaScript
  This tutorial provides a step-by-step guide to creating sliding panels using nothing but Javascript and CSS.
• StyleMap v2: Visual Sitemap
  StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.
• CSS: Menu Descriptions
  This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.

CSS Tools

• FireBug Tips and Tricks
  Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The article presents a quick and dirty set of its most powerful features.
  
• Grid Calculator
  Grid Calculator allows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you haven’t gone over that magic 1024px!
• Simple CSS
  Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface. With Simple CSS, you can manage multiple CSS projects and import your existing style sheets. Simple CSS supports CSS2.
• Free CSS Graph Resources Generators
  An overview of 10 CSS Generators and/or techniques that may help you in generating CSS graphs.
  

Web-Typography

• Font-Sizes: Soft Serve
  How to specify font sizes in CSS? Daniel Mall explains the difference between absolute, relative, length and percentage values.
• Elegant Web Typography
  Jeff Croft’s presentation on the history of web typography, modern approaches and important things to know about typogeaphy in web design (130 Slides, .pdf, 2.4 Mb).
• Heading Element Replacement w/ SWF Test Page
  This technique enables you to scale the content and select all parts of sIFRed text.
• Web typography
  How to put an opening double quote and an opening single quote? How to represent en dash, em dash, minus and ellipsis properly? Answers and further references can be found in this article.

Articles, Publications

• Talent Isn’t Everything
  Here’s a common myth: To be a successful creative professional, all you need is talent. It’s a nice myth to believe in. “Talent” suggests a divine or evolutionary genetic gift, so if you’re blessed with the talent gene, you’re special and can be a cool creative person. If not, you’re destined to be an accountant,,.
• Twenty Usability Tips for Your Blog
  20 selected tips, condensed from Dozens of Bloggers’ Experiences. What distinguishes good blogs from poor ones? The author has compiled a list of useful tips, especially by reading “lessons learned” posts by bloggers. Amongst 20 mentioned principles are Post often, Encourage comments, Make it easy to subscribe, Present your Ideas Visually, Make headlines descriptive, Allow users to contact you offline and Include a Top posts section.
  
• Breadcrumb Navigation Increasingly Useful
  Breadcrumbs use a single line of text to show a page’s location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users.
• HTML5, XHTML2, and the Future of the Web
  We’ve been reading about HTML 5, XHTML 2 and future Markup languages for months now. Still there are no concrete plans about releasing new standards. HTML 4.01 was made a recommendation in 1999, XHTML 1.0—a formulation of HTML 4.01 in XML—became a recommendation in 2000, and was revised in 2002. At the base of all modern web development is an eight-year-old technology. The Web in need for improved standards. By David Andersson.
• Web Design 101: Positioning
  “Any cascading style sheets (CSS) newbie will have heard about it, right? CSS positioning—absolute this and relative that. Perhaps you have some vague idea about what it is, but are afraid to try it yourself. Let’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning—it’s not difficult, once you understand the fundamental ideas behind the concept.” By Tommy Olsson.
• Activating the Right Layout Mode Using the Doctype Declaration
  In order to deal with both old tag soup written to old browser quirks and new CSS-compliant pages, Firefox (and other Mozilla Gecko-based browsers), Safari, Opera (7 and later), Internet Explorer 6 and 7, Mac IE 5, and Konqueror (3.2 and later) have two main layout modes. In one mode the layout engine attempts to render conforming pages according the CSS specifications. In the other mode the layout engine tries to mimic old browsers. In Firefox these modes are known as “the Standards mode” and “the Quirks mode” respectively. In this document the same names are used also when referring to the modes of the other browsers. More information in What happens in Quirks Mode in web browsers?.
• Timing and Synchronization in JavaScript
  This article attempts to describe the various timing-related issues in JavaScript in current browsers.
• Styling links
  There are several possibilities to style links in order to highlight them among other content. 9 methods in a brief overview, with examples anf further references. We cannot rely on visual context to make it obvious to users that inline links are clickable, and therefore their appearance is crucial.
  
• Learn how to slice your templates into fully standards compliant XHTML and CSS!
  A guide for learning how to turn a Photoshop, Paint Shop Pro or Fireworks template into a fully sliced, coded and XHTML and CSS valid web page.
• No Margin For Error
  How many times have you heard someone say: “Why does my site look different in IE than in Firefox”? This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers.
• Beware of XHTML
  If you’re a web developer, you’ve probably heard about XHTML, the markup language developed in 1999 to implement HTML as an XML format. Most people who use and promote XHTML do so because they think it’s the newest and hottest thing, and they may have heard of some (usually false) benefits here and there. The state of XHTML on the Web today is however more broken than the state of HTML, and most people don’t realize because the major browsers aren’t even treating those pages like real XHTML. If you hope for XHTML to succeed on the Web, you should read this article carefully.
• The Definitive Guide to Semantic Web Markup for Blogs
  You’d think that as a result of open-source development practices, blog architectures would be pretty close to perfection in areas like Web standards and maximum SEO impact. Wel, guess what, you’d be wrong.
• How Much Does a Web Page Cost?
  How to walk a client through the sticker shock of building a Web presence.
• Video: RSS in Plain English
  We made this video for our friends (and yours) that haven’t yet felt the power of our friend the RSS reader. We want to convert people. If you know someone who would love RSS and hasn’t yet tried it, point them here for 3.5 minutes of RSS in Plain English.
• Why simplicity is essential to web design
  A simple website charges you less time. A complex website charges you more time. Time is your most precious resource und have to be dealt with properly. Article by Gerry McGovern
• Poll results: 50.4% of respondents maximise windows
  According to Roger Johanssons’s survey, every second user maximizes browser windows to their full width and height.

Design-Galleries, Showcases, Inspiration

• 60 best CSS directories you would die to watch!
  With new technologies flooding the web, different tools are available with which a web designer can showcase his/her creativity and craft. But despite putting in the effort and sweat, numerous websites with fantastic creativity fail to get noticed. Also, the surge in designing is driving designers to dig for creativity, color schemes and layouts. Keeping these aspects in mind, we came up with a compendium of best CSS directories, CSS showcase, CSS galleries that rank / grade websites (using CSS) on the basis of Alexa ranking, colors, categories, tags, ratings and RSS.
• Standards Reboot – May 1st
  May 1st – the reboot time. Standards Reboot showcases the re-designed worked of participants of the May’s traditional Standards Reboott.
• Horizontal Navigation; nine ways to skin a cat
  Once you start perusing the web for inspiration rich entities, you quickly notice the very small world from which everyone seems to be working from – especially when you get as specific as horizontal navigation. At the end of an intense brainstorming session, we thought it would be fun to highlight some of the most commonly used techniques for designing horizontal navigation.
• Web Professionals portfolio and profile
  Professional On The Web is a directory of web professionals profiles, projects and portfolios.
• Typography – a photoset on Flickr
  Photos of a 1923 American Type Foundry specimen book.
• COLOURlovers :: Blog / Trends
  It is extremely hard to summarize an entire decade with five or six colors, but each of the past 5 decades seemed to carry a common tune. The end to the war-time lack of color in the 50’s. The explosion of color in the hippie loving 60s. The muted colors of the 70’s to balance out the brightness of the previous decade. An attempt to capture colors common at home for each decade.
• The 35 Sexiest Designed Websites You’ve Forgotten, part 4
  Phil Renaud continues his series of posts about the sexiest CSS/Flash-Designs. A semiannual showcase of what’s achievable in either domain. Simply put – if a site aesthetically impresses me, it makes the cut. In the case of part 4 here, the breakdown is as follows: 18 CSS sites, 12 Flash sites, 5 hybrids. 35 more gorgeous Designs in an overview.
• Idealist
  Idealist is a platform for designers and creators to publish and share their creativity, get feedback from the community and increase the popularity of their ideas. The tool offers a plattform for ideas, concepts, sketches, designs and new products. It displays user submitted and rated ideas.

Icons, Fonts, Wordpress Themes

• 10 Fresh, Elegant and Clean Wordpress Themes
  5 fresh and elegant and 5 simple Wordpress themes you might be willing to use for your next project – among them
  iTheme, Dark Theme and Digital Pop Theme.
  
• Crystal Clear
  Free Icons from the Crystal Clear icon set by Everaldo Coelho.

The last click

• The Lineal Algebra Behind Google: The $25,000,000,000 Eigenvector
  An academic paper about Google’s PageRank algorithm. The pure Lineal Algebra with eigenvalues, eigenvectors, matrices as well as concrete and abstract calculations.
• Veer.com presents: Helvetica: A Documentary Film by Gary Huswit
  Helvetica is a feature-length independent film about typography, graphic design and global visual culture. It looks at the proliferation of one typeface (which will celebrate its 50th birthday in 2007) as part of a larger conversation about the way type affects our lives. Veer.com offers excerpt of the movie Helvetica (IMDB) about one of the most significant typefaces of our time.