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.
- 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.
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.
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
section. New inline elements include
progress. New embedding elements include
audio. New interactive elements include
- Testing CSS 3
CSS 3 offers (among other things) 10 new properties, such as
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.
Like Site24x7, 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 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 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.
- 20 Best Favicon Online Generators
An overview of 20 services and generators which let you create Favicons online.
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.
- 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
- CSS: Using Percentages in Background-Image
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
- 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 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.
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.
- 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.
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.
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.
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.
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.
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.
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.