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 concept1 [Flickr2]) 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, 20073
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 eBooks5
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 workshop6
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 standards8
“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 9
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 Resources10
“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 12
30 useful traffic generation tips from 30 prominent bloggers.
- PHP regular expressions examples13
Various PHP regular expression examples to help your application validate, compare, compute or decide
- The best Photoshop resources of the month14
Selected Adobe Photoshop resources of the month: among them Fresh Foliage Photoshop Brushes15, Creating a 3D-effect16, Turn your photo into movie-like effect17 and more.
- Gmail Super Clean19
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 Project20
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.
- tlbox – Web Design Tools22
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 Generator23
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 X24
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 Hicks25, Cabel Sasser26, Steven Frank, John Gruber27, O’Reilly Mac DevCenter Blog28, ExpressionEngine: Live Preview with Coda (and other IDEs)29 [via Manuela Hoffmann30]
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 simple33
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 boxes34
- Link Boxes35
“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 Grid37
“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 plan38, Khoi gave us a case study39 and Cameron gave us a toolkit40 . 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: Reloaded41
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 Edition42
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 results43.
- A CSS Sticky Footer45
“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 & Issues46
This article includes 8 helpful solutions when designing with CSS: among them transparent PNGs in IE6,
- Glowing Tabs Menu47
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 Elements49
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 50
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.
- Master Stylesheet: The Most Useful CSS Technique53
“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.”
- 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 Descriptions55
- FireBug Tips and Tricks56
- Grid Calculator59
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 CSS60
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 61
An overview of 10 CSS Generators and/or techniques that may help you in generating CSS graphs.
- Font-Sizes: Soft Serve63
How to specify font sizes in CSS? Daniel Mall explains the difference between absolute, relative, length and percentage values.
- Elegant Web Typography64
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 Page65
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.
- Talent Isn’t Everything66
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 Blog67
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 Useful69
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 Web70
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: Positioning71
“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 Declaration72
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?73.
- Styling links75
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!77
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 Error78
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 XHTML79
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 80
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?81
How to walk a client through the sticker shock of building a Web presence.
- Video: RSS in Plain English82
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 design83
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 windows84
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!85
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 1st86
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 cat87
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 profile89
Professional On The Web is a directory of web professionals profiles, projects and portfolios.
- Typography – a photoset on Flickr90
Photos of a 1923 American Type Foundry specimen book.
- COLOURlovers :: Blog / Trends91
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 492
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 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 Themes94
5 fresh and elegant and 5 simple WordPress themes you might be willing to use for your next project – among them
iTheme95, Dark Theme96 and Digital Pop Theme97.
- Crystal Clear99
Free Icons from the Crystal Clear icon set by Everaldo Coelho.
The last click
- The Lineal Algebra Behind Google: The $25,000,000,000 Eigenvector100
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 Huswit101
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 Helvetica103 (IMDB104) about one of the most significant typefaces of our time.
- 1 http://adactio.com/extras/stream/
- 2 http://www.flickr.com/photos/hober/311410374/
- 3 http://www.alistapart.com/articles/webdesignsurvey
- 4 http://www.alistapart.com/articles/webdesignsurvey
- 5 http://2020ok.com/
- 6 http://www.adobe.com/designcenter/video_workshop/
- 7 http://www.adobe.com/designcenter/video_workshop/
- 8 http://icant.co.uk/webstandardsforbusiness/
- 9 http://www.scribd.com/doc/2162/120-Adobe-Photoshop-Tips
- 10 http://freelanceswitch.com/general/101-essential-freelancing-resources/
- 11 http://freelanceswitch.com/general/101-essential-freelancing-resources/
- 12 http://www.dailyblogtips.com/traffic-generation-tips-final-list/
- 13 http://www.roscripts.com/PHP_regular_expressions_examples-136.html
- 14 http://www.roscripts.com/The_best_Photoshop_resources_of_the_month-135.html
- 15 http://designfruit.com/jasongaylor/blog/?p=37
- 16 http://www.instructables.com/id/E6G7L91G9AEXCFGBTI?ALLSTEPS
- 17 http://ebin.wordpress.com/2007/03/21/how-to-turn-your-photo-into-movie-like-effect-using-photoshop/
- 18 http://www.roscripts.com/The_best_Photoshop_resources_of_the_month-135.html
- 19 http://userscripts.org/scripts/show/7646
- 20 http://shiira.jp/en
- 21 http://shiira.jp/en
- 22 http://www.tlbox.com/web_designers/
- 23 http://www.yvoschaap.com/wpthemegen/
- 24 http://www.panic.com/coda/
- 25 http://www.hicksdesign.co.uk/journal/coda
- 26 http://www.cabel.name/2007/04/coda-10.html
- 27 http://daringfireball.net/2007/04/coda
- 28 http://www.oreillynet.com/mac/blog/2007/04/coda_first_impressions.html
- 29 http://expressionengine.com/blog/entry/live_preview_with_coda_and_other_ides/
- 30 http://www.pixelgraphix.de/log/2007-04/coda-neues-tools-zur-webentwicklung-unter-os-x.php
- 31 http://www.panic.com/coda/
- 32 http://spamcheck.sitesell.com/
- 33 http://f6design.com/journal/2007/04/27/formbuilder-html-forms-made-simple/
- 34 http://www.wait-till-i.com/index.php?p=411
- 35 http://www.askthecssguy.com/2007/04/link_boxes_1.html
- 36 http://www.askthecssguy.com/2007/04/link_boxes_1.html
- 37 http://www.alistapart.com/articles/settingtypeontheweb
- 38 http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/
- 39 http://www.subtraction.com/archives/2005/0901_the_funniest.php
- 40 http://cameronmoll.com/archives/2006/12/gridding_the_960/
- 41 http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/
- 42 http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
- 43 http://www.campaignmonitor.com/reports/Guide_to_CSS_Support_in_Email_2007.pdf
- 44 http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
- 45 http://ryanfait.com/sticky-footer/
- 46 http://www.solidstategroup.com/page/1592
- 47 http://www.dynamicdrive.com/style/csslibrary/item/glowing-tabs-menu/
- 48 http://www.dynamicdrive.com/style/csslibrary/item/glowing-tabs-menu/
- 49 http://www.search-this.com/2007/04/25/optimize-your-css-with-multi-class-elements/
- 50 http://blog.e-ss.be/2007/04/25/css-style-theme-switcher/
- 51 http://dhtmlsite.com/csscalendars.php
- 52 http://dhtmlsite.com/csscalendars.php
- 53 http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
- 54 http://blog.paranoidferret.com/?p=4
- 55 http://mikecherim.com/experiments/css_menu_descriptions.php#
- 56 http://seifi.org/node/477
- 57 http://www.getfirebug.com
- 58 http://seifi.org/node/477
- 59 http://www.29digital.net/grid/
- 60 http://www.hostm.com/css/
- 61 http://dhtmlsite.com/cssgraphs.php
- 62 http://dhtmlsite.com/cssgraphs.php
- 63 http://www.danielmall.com/archives/2007/04/20/soft_serve.php
- 64 http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdf
- 65 http://labs.tom-lee.com/HeadingReplacement/
- 66 http://www.boxesandarrows.com/view/talent-isn-t
- 67 http://www.idratherbewriting.com/2007/04/09/twenty-usability-tips-for-your-blog-%e2%80%94-condensed-from-dozens-of-bloggers-experiences/
- 68 http://www.idratherbewriting.com/2007/04/09/twenty-usability-tips-for-your-blog-%e2%80%94-condensed-from-dozens-of-bloggers-experiences/
- 69 http://www.useit.com/alertbox/breadcrumbs.html
- 70 http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/
- 71 http://www.digital-web.com/articles/web_design_101_positioning/
- 72 http://hsivonen.iki.fi/doctype/
- 73 http://www.cs.tut.fi/~jkorpela/quirks-mode.html
- 75 http://f6design.com/journal/2007/04/14/styling-links/
- 76 http://f6design.com/journal/2007/04/14/styling-links/
- 77 http://www.csslicingguide.com/
- 78 http://www.search-this.com/2007/03/12/no-margin-for-error/#more-186
- 79 http://www.webdevout.net/articles/beware-of-xhtml
- 80 http://www.pearsonified.com/2007/04/definitive-guide-to-semantic-markup.php
- 81 http://www.clickz.com/showPage.html?page=3625267
- 82 http://www.commoncraft.com/rss_plain_english
- 83 http://www.gerrymcgovern.com/nt/2007/nt-2007-04-16-simplicity.htm
- 84 http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/
- 85 http://www.wittysparks.com/2007/04/22/60-best-css-directories-you-would-die-to-watch/
- 86 http://standardsreboot.com/sites/all/
- 87 http://www.nclud.com/sketchbook/horizontal-navigation-nine-ways-to-skin-a-cat
- 88 http://www.nclud.com/sketchbook/horizontal-navigation-nine-ways-to-skin-a-cat
- 89 http://www.professionalontheweb.com/
- 90 http://www.flickr.com/photos/17208860@N00/sets/690970/detail/
- 91 http://www.colourlovers.com/blog/category/trends
- 92 http://philrenaud.com/293
- 93 http://idealist.blinkr.net/
- 94 http://www.smashingmagazine.com/2007/05/07/10-fresh-elegant-and-clean-wordpress-themes/
- 95 http://www.ndesign-studio.com/resources/wp-themes/itheme/
- 96 http://www.ilemoned.com/wordpress/wptheme-dark
- 97 http://writerspace.net/index.php/2007/04/01/digital-pop-wordpress-theme/
- 98 http://www.smashingmagazine.com/2007/05/07/10-fresh-elegant-and-clean-wordpress-themes/
- 99 http://commons.wikimedia.org/wiki/Crystal_Clear
- 100 http://web.archive.org/web/20060518095303/http://www.rose-hulman.edu/~bryan/google.html
- 101 http://www.veer.com/ideas/helveticafilm/
- 102 http://www.veer.com/ideas/helveticafilm/
- 103 http://helveticafilm.com/
- 104 http://www.imdb.com/title/tt0847817/