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

Icons, Brushes

• Random Free Vectors – Part 6: Foliage | BittBox
  Bittbox extends its collection of free vector graphics with some floral motives (flowers and leaves). The templates have been created with Adobe Illustrator and can be downloaded in formats AI, EPS and SVG.
• Iconfinder – Icon search engine
  Search Engine for icons released under the Creative Commons license, GPL or LGPL-License.
• IconDrawer
  The page offers Icon Sets for free download.
  
  
• The Brushes – May 2006-2007
  A collection of Brushes for Adobe Photoshop.

References, Tutorials, Tips

• The Open Source Web Design Toolbox
  A collection of over 100 references to open-source CSS-Templates, tools, services and Wordpress-themes.
• iPhone for Web Developers – Optimizing Web Applications and Content for iPhone
  These guidelines will help you prepare web content and design a website or web-based application for iPhone. If you are a seasoned web developer, there are probably just a few refinements you can make to ensure that your site looks great and works best on iPhone. Hopefully the hype won’t create the trend “Viewed only with iPhone” – we’ve seen this before. Besides: IUI Framework for iPhone-applications.
• TutorialFeed
  This website crawler is tutorial indexing website which is fully automated. The spider goes around and picks up little morsels and tutorials, and automatically adds them to our database. The site covers dozens of design-related topics – from Photoshop via Dreamweaver to CSS – and indexes over 90 feeds.
  
• New elements in HTML 5
  No one really knows when HTML 5 will finally released or implemented. However, new elements are already known. In fact, Hypertext Markup Language (HTML) 5 introduces new elements to HTML for the first time since the last millennium. New structural elements include aside, figure and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.
• Testing CSS 3
  CSS 3 offers (among other things) 10 new properties, such as border-radius, opacity, text-stroke, border-image or text-shadow. CSS3 properties tests for webkit based browsers, including the iPhone prove: CSS 3 is (mostly) supported only by Safari 3. Tested browsers: Safari 2, Safari 3, iPhone, Mozilla 1.7, Opera 9 und IE 7.
• @media 2007 | Europe
  The last annual @media-conference for profesional designers and developers took place in June 2007. If you’ve missed the opportunity to be there, you can download some presentations, podcasts and talks. Among speakers are Molly E. Holzschlag, Jason Santa Maria, Dan Cederholm, Drew McLellan, Simon Collison and Jesse James Garrett.
• High Scalability
  This site tries to bring together all the lore, art, science, practice, and experience of building scalable websites into one place so you can learn how to build your system with confidence. Hopefully this site will move you further and faster along the learning curve of success.
• Design Float
  Design Float is a Digg style, community driven news aggregator dedicated to the design industry. Design Float aims to collect and organize design-related content from accross the web while lettting the community float the best articles to the top pages of their categories and sink the most irreleveant one’s to the bottom.
  
• In Praise of Wordpress Template Tags, Part II: The Magazine Layout
  Sample scenario: a client needs your help in realizing his dodgy dream of starting an online men’s magazine in the vein of GQ or Details. His existing site already runs the standard Wordpress blog format, but now he’s seeking a more ambitious, exploded-view layout to accommodate a variety of content modules and features. The article explains how the solution might look like.
• The Learn List
  A growing collection of references to tutorials – among covered topics are Flash, Photoshop, Firefworks, Illustrator, Dreamweaver, Actionscript, PHP, CSS and XML.
• The dashed line in use
  Graphic design offers more approaches and design solutions with dashed lines than you probably think it does. This article presents many of them. “Even though the dashed line has emerged from a designer’s shorthand and from the limitations of monotone printing techniques, it has a clear and simple visual magic, the ability to express something three- or four-dimensional in two dimensions.”
  
• Three Universal methods of reducing complexity
  Complex designs can be done quicker than the simple ones. How to reduce the complexity effectively? How to create a clean and minimalistic solution? The key is the Partitioning of content (Reducing the number of factors that have to be dealt with simultaneously), a solid Hierarchy (The shape of the hierarchy is important and should reflect the functionality of the system) and visible Independence of site elements (The most important idea behind a lot of structured design is “High Module Independence”).
• Infographics news: Life of a graphic
  Óscar Corvera describes the development of Infographics for print-media. His example was awarded by Society for News Design with the Excellence Award. More about Data Visualization and Infographic in our article Data Visulization: Modern Approaches.
• Anti-Grain Geometry – Texts Rasterization Exposures
  An attempt to improve the quality of text presentation on screen, to present the state of current developments and explain current techniques.
  
• The Best 80 Photoshop Text Effects on the Web
  The so called text effects or type effects are carefully hidden guilty pleasures that most designers enjoy to try, but would never dare to apply in real life work. For those that love text effects and have the courage to admit it, here’s a thorough guide to the best 80 text effects available on the Web.
• The Web Designers Tool Kit
  An overview of useful resources for designers and web-developers. Nothing new, but still useful.
• Cool Workspaces
  The more comfortable you feel in your working place, the more effectively you get your work done. 40 elegant work places of professional designers in a brief overview.
  
• Advanced use of Google Analytics and the new interface
  This article describes the functionality of recently renewed Google Analytics and mentions some methods and obscure interaction you can employ to use Google Analytics effectively.

Tools, Web-Services

• Pingdom
  Like Site24×7, Pingdom is a web site monitoring tool which lets you observe and track the performance of your server. Notifications about server timeouts can be sent via SMS and e-mail and users get uptime and response time reports. Among further features are multiple global check locations, high check resolution and several check types.
• ConceptShare
  ConceptShare offers a plattform for Online Design Sharing and Collaboration. Designers, co-workers, clients, experts and testers can use the tool to discuss the changes in design sketches and comment upon the critical issues of designs – online and in real-time. Alternatively you can also use Jumpchart – an interactive wireframe that allows developers and content creators to get together to work out how a site should be architected, planned and organized.
  
• Dust-Me Selectors
  Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, selectors will be crossed off the list as they’re encountered.
• YSlow for Firebug
  Firefox-AddOn for the popular extension Firebug which analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you performance report card, HTTP/HTML summary and the list of components in the page.
• FoldSpy
  FoldSpy is a free tool which you can use to make sure your visitors see what you’d like them to see. Different browsers, operating systems, screen sizes and user preferences mean a visitor to your site doesn’t necessarily see what you see. To maximize revenue from your ads, you want them to be visible to the majority of your visitors without scrolling: “above the fold”. FoldSpy finds the fold. The service makes use of an overlay to present the areas which are highly popular or not popular at all – depending on the screen resolution and the browser window size.
• SWX Beta 1.3
  SWX is the native data format for Flash. It uses SWF files to store and exchange data. It is also an implementation of an RPC gateway (currently in PHP), tools (a data analyzer/debugger and a service explorer), various APIs (Flickr, Twitter, etc.), and an ActionScript library that make creating data driven Flash and Flash Lite applications a piece of cake.
• Blueprint: A CSS Framework
  Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
• Google AdWords Print Ads
  Google Print Ads is a new extension of Google AdWords that makes it easy to run ads in newspapers across the U.S. – whether you’re buying space in one paper or a hundred.
• Sparky – Alexa Firefox Plugin
  Sparky is a free FireFox browser plugin that accompanies you as you surf, providing Alexa ranking information about the sites you visit without interrupting your Web browsing.
  
• Slackrpoint!
  Christian Heilmann’s Slackrpoint – the presentation time-saver – offers a new solution to create dynamic web-presentations in a very simple and inutitive way. One JavaScript takes care of everyhting – it’s enough to illustrate and annotate the content of the presentation.
• 20 Best Favicon Online Generators
  An overview of 20 services and generators which let you create Favicons online.
• Mogulus
  A new plattfrom for broadcasters who’d like to launch their own live 24/7 television station.
  

CSS-Techniques, (X)HTML, PHP

• Nifty Navigation Using CSS
  Rachel Andrew describes numerous methods of designing simple, readable and CSS-based navigation menu.
• The Positive Side of Negative Margins
  A number of people suffer under the misconception that negative margins are in some way a hack; they are not. In fact negative margins are valid CSS and extremely useful in certain situations. They only become a hack if you are using them to fix an error that you have made elsewhere. In normal usage negative margins work quite well and are supported across modern browsers. However, there are issues if you use negative margins on the opposite side of a float (e.g. floating left and then using a negative margin on the right) although most modern browsers now behave the same way when this happens.
• Progress / Percentage Bar with CSS + JavaScript
  Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. This simple Javascript does what it is expected to do.
  
• Quick Start Your Design with XHTML Templates
  3 Templates-Skeletons for quick and efficient implementaion of Layouts.
• 101 Resources to Help You Build a Better Web Form
  Link-o-rama for everything you ever wanted to know about online-forms. Among them the best Usability/Accessibility-practices of modern form design, techniques, form processing scripts, form validation as well as form generators and related tools.
• Scrollovers – A New Way of Linking
  Everyone is familiar with hover-effects. This CSS+JavaScript-based techniques creates the Scrolleffect – not really necessary, but it’s nice to know, how it can be done.
  
• CSS: Using Percentages in Background-Image
  In the background-position-property any percentage refers to a percentage position on the graphic AND on the containing object. The article explains everything you ever wanted to know about background-image.
• CSS List Boxes
  Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.
  

CSS-Tools and Services

• CSS CacheBuster
  If the page reload in your browser doesn’t change the appearance of the page after you’ve made some changes in CSS, you probably deal with server-side stylesheet caching. However, you don’t need to delete all cached data explicitely. This bookmarklet does the job.
• Moonfall: CSS with variables
  An elegant method to use variables in your CSS-code: a program to generate CSS, either dynamically as a cgi script, or run from the command line.
  
• XRAY
  XRAY is a Bookmarklet for Safari, Firefox, Camino and Mozilla which you can use to get the information about the box a site element is placed within. The extension also shows the padding, the margin and the hierarchy of the element in the DOM.
  
• Automatically wrap text around freeform images using XHTML and CSS
  The Box Office lets you wrap, float, ontour text around freeform images using CSS for usage in (X)HTML pages.

Ajax, JavaScript

• 15 Calendar & Time Script With Ajax and Javascript
  An overview of calendars and time scripts, which are (mostly) created with Ajax.
• Rich Text Editor
  The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.
  
• Protoload makes it easy to show the User what is going on.
  Imagine a complex Rich Internet Application using different hidden requests and processes working side by side. Protoload makes it easy to show the User what is going on.

Typography, Web-Typography

• 8 Bits On Combining Typefaces
  With so many typefaces available it can be a daunting task to pick and combine the right typefaces for the task. I’ll try breaking the selection strategies into 8 bits to help you with achieving the most effective type combinations.
• How To Mix Fonts: Typeface Cheat Sheet
  This PDF cheat sheet on Mixing Typefaces can help you decide on which combination of typefaces to use. In this sheet, there are 22 typefaces that are cross-referenced with each other, and each combination is given a number to indicate their degree of incompatibility. Besides: 80 Beautiful Typefaces For Professional Design [via InspirationBit].
  
• Syncotype Your Baselines
  “I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.”
• Thirteen Ways of Looking at a Typeface
  Thousands of typefaces are still out there, but my recovery has required that I become more discriminating and come up with some answers to this seemingly simple question: why choose a particular typeface? Here are thirteen reasons. 13 useful checkpoints by Michael Bierut.

Articles and Publications

• Frameworks for Designers
  What is a framework? What does it mean for designers and developers? How to use it effectively? Commonly speaking, frameworks are skeletons of web-sites – templates with predefined Global Reset and/or basic CSS-classes. Jeff Croft explains the term and suggests some ways to create and use frameworks efficiently. “Learn to harness the power of tools, libraries, conventions, and best practices to focus on what is unique about the project at hand.”
• Human-to-Human Design
  “By attending to the entire user experience, designers can create a rich, sensory experience, which helps to immerse users and encourage them to become fully involved in the site and its message.” The basics of Human-To-Human-Design in this article by Sharon Lee.
• Reviving Anorexic Web Writing
  “We’ve starved all the life out of web writing. The kind of writing we encourage is lifeless, insipid, and calorie-free. If we want to get back on track—to allow writers to write wonderful user experiences—we have to change our expectations and our rules.”
• What a designer has to do when looking for a job
  The golden rules for every freelancing designer: an appealing portfolio with gorgeous examples is an absolute must. The more creative and impressive your portfolio is, the more chances you have to get the job. Tips by Veerle Pieters.
• Five things all clients want to know
  Russ Weakley about the most common questions clients have and the “right” answers one should keep in mind. “Most clients don’t want a sales pitch, they want reassurance. They want to know if you can be trusted to help them solve their problem.”
• What Is Your FIRST Rule Of Writing?
  Which rules should you follow writing web content? E.g. “Never Google What You’re Going To Write About”. Related articles.
• Using Spreadsheets to Brainstorm Grid Layouts
  Have you tried to create design layouts with MS Excel? It is possible. “Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable.”
  
• Are your icons working for you?
  “There are time when that imagery can work against what you’re trying to achieve. Sometimes it can be as simple as emphasizing the wrong part of an interaction. In an online shopping situation, do you mark the ‘BUY’ button with coins or bills — emphasizing what the user is losing — or do you associate the process with the shopping cart or bag, emphasizing what your user is gaining.”
• 6 Keys to Understanding Modern CSS-based Layouts
  “Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. These are the six things that will help people get over the hump. ” Box Model, Floats, EMs, Image Replacement, Floated Navigation and CSS Sprites. With links to further references.
• Corporate Web Standards
  Web Standards in theory are quite different from Web Standards in practice. The new term is “Corporate Web Standards” – basic principles of modern design, which are the compromise between quick’n'dirty solutions and valid code.
• Web redesign is bad strategy
  “I have seen perfectly okay websites go through a redesign for all the wrong reasons. And do you know who such redesigns hurt most? Your most loyal customers. Because they use your website most.”
• Blasting the Myth of the Fold
  Users will scroll if they have to. “There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users.”
• Quiet structure
  Design Decomposed: Andy Rutledge takes a closer look at the recent CNN.com redesign, describes techniques developers used in it, and decisions they’ve made – decisions one should keep in mind for future projects.
  
• Security in your online applications
  How to ensure the security of online-applications? How to prevent attacks and how to improve the quality of code? You’ll definitely find some answers in this article.
• Top 7 blog mistakes to avoid
  “I’ve been publishing blog articles for 9 months now, and I’ve made quite a few mistakes along the way. By giving a little insight into my errors hopefully you can avoid doing the same things yourself. Here I give you the top 7 blog mistakes that I’ve made since October 2006.”. David Airey lists 7 mistakes bloggers tend to make in the beginning: not using a self-hosted blog, expecting people to visit, neglecting article headlines and not linking to others as they’d like them to link to you.
• 10 Essential Email Skills for Any Freelancer
  “Sure, there’s chat and IM, there’s the phone, and a number of other connection tools. But email is the most important for most freelancers, and as such, your email skills shouldn’t be taken lightly. Here are a few of the most essential that you should polish.”
• Design Better with CRAP
  Apparently, all high quality and functioning designs start from four basic principles, abbreviated as CRAP. These are Contrast, Repetition, Alignment and Proximity.
• Understanding Pseudo-elements
  In CSS, there are certain selectors you can use that act like you’ve injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements. A brief explanation by Jonathan Snook.
• Justifying Design Decisions
  “I asked Mark Boulton, Andy Budd, and Jeff Croft, three designers I deeply respect, about designing on impulse versus intention. They each had something different to say, but they each presented a design process far more rationalized and justified than my own. Design is about solving problems in a visual medium, and starts well before mouse touches canvas.”
  
• Design Questions
  Andy Rutledge discusses the issues of designer-client-communication: the initial direct contact with clients during the discovery meeting is likely the most important moment in the life of a project. While most of my previous reference in this regard has been toward the establishment of designer competence and development of fellowship with the client, there is another vital aspect to this initial meeting: the specific questions asked.
• How to Keep Momentum Going on Your Blog with a Points System
  A ‘points system’ can help you to keep your blog achieving the momentum that you want it to. Your daily goal might be 50 points and different tasks can get you different amounts of posts.
• Six ways to write more comprehensible code
  As a developer, time is your most valuable resource. These six tips on how to write maintainable code are guaranteed to save you time and frustration: one minute spent writing comments can save you an hour of anguish.

Colors, Color Palettes, Textures

• Some Summer Color Lovin’ Inspiration
  Over 40 color palettes for designs which are supposed to convey the summer atmosphere.
• 130+ Green Color Palettes
  Over 130 variations of green color palette. More color combos can be found in the comments to the post.
  
• 140 Named Colors
  “Rather than having to remember that the color orange is specified with the hex code “#FFA500?, you can simply type the word “orange” when specifying a color in your code and the browser will automatically translate it to its hex code.” A handy reference list of all 140 browser-supported named colors, which you can quickly sort by color family or name.
• How to Make a Folder Icon
  In this step-by-step tutorial you will learn how to create a nice folder for your desktop or a website. With Adobe Photoshop.
  

Design-Galleries, Showcases, Inspiration

• IdeaFixa art e-magazine – issue #7: colors – july 2007
  The 7th issue of the Art-Magazine “IdeaFixa” covers the topic “Colors”. The magazine presents creative works – graphics, illustrations and photos related to the topic – by famous designers, artists and amateurs.
  
• Faveup
  A gallery of inspiring designs. The site presents CSS-based layouts, Flash-sites, business cards and logos. Fresh showcase mith many not-so-well-known examples.
• 25 Cool Portfolios with Minimalism Design
  A gallery of 25 minimalistic portfolios – absolutely beautiful, simple and legible.
  
• WebDesignerWall
  New Blog-Magazine about design and modern web trends. Among other things the site offers impressive designs gallery in the section “Trends”.
• 30 Weblogs with Grid Based Design
  A showcase of 30 elegant grid-based CSS-Designs. “A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye. Below is the top 30 weblogs with grid based designs.”
  
• Appreciating Sites Powered by Textpattern
  A showcase of web-sites built upon the Textpattern engine.
• design|snips
  This project collects the most beuatiful design snippets from the most beautiful web-sites worldwide. It includes examples related to Advertisement, Banner, Icons, Buttons, Illustations, Backgrounds, Hover-Effects and more. Every snippet can be rated.
  
• Top 50 Inspirational Websites for Designers
  50 inspiring Design-galleries in a brief overview. CSS, Flash, Logo design, Graphics, Illustrations, Artwork.
• visualsoftheworld.com
  This, probably the longest, gallery of creative designs is being extended every day – by designers and amateurs around the world. Currently the page is 17,48 m long. There is enough room for further experiments.
• Artzmania
  The Online-magazine “Artzmania” presents the most beautiful graphic works in a .pdf-file. Free, impressive, absolutely fascinating.
  
• visualsafe | webdesign inspiration
  Another collections of excellent designs – over 1000 pages, at least 5 new pages every day. By Andreas Reimer.
• Tons and Tons of Design Inspiration: Concert Posters
  “We all like a little inspiration sometimes, and we all need some sometimes too. I like browsing concert posters or “informational art” as I like to call it. Pretty much anything goes in the world of poster art, so you never know what to expect (which is great) and it’s an area of the art/design world that is very rich on the visual side, not to mention the creative type treatments.”
• 10 Most Beautiful Social Networks
  Not every social network must look like MySpace. For those who prize beauty above all else, here is the top 10 list of the prettiest social networks.

The Last Click

• 7 Astonishing Minutes to Get Inspired
  Artists are getting creative: this video shows how Adobe Illustrator-Profi Nico Di Mattia creates a photo-realistic image of Radiohead’s Thom Yorke “from scratch”.
• Business Infographics: The Bloomberg Makeover
  The Bloomberg terminals are a must-have for any Wall Street warrior, but they’re also unsightly. Three top design-firms – IDEO, thehappycorp and Ziba Design – were asked to put the Bloomberg’s interface through a rigorous redesign.
  
• Where Is Your Passion?
  There are two types of people in this world: those who are passionate about the Web, and those who are not. Those in the first group strongly believe that the Web is more than just a tool for sharing photos and paying bills—but exactly why they feel so passionately about this varies.
• PadStyle
  Modern furniture can look stylish – pure creativity at its best.
  
• 10 Things We Can Learn From Apple
  There’s no need to restate the high reverence (or pangs of envy, depending on where your loyalty lies) of Apple. hey have innovated, floundered, and in recent years, risen from the ashes to make one hell of a run in computing and electronics devices. So how did they get there? Is it dumb luck? Or are they just much smarter than the rest of us? The most common reason given is Apple’s rabid devotion to design.
• Design Can Change
  “Climate-related disasters are increasing. Designers like you can help change this.” As designer you have a craft and the power to change the world around you. Design Can Change works on the belief that our industry can make positive change by working together. You might be willing to use this resource as a starting point to help bring our community together to encourage sustainable practices.
• Apple Form Factory Revolution
  Apple Evolution Timeline shows the development of Apple-products over the last 30 years: from Apple I through Apple Powerbook to Apple TV and iPhone.