Smashing Magazine - we smash you with the information that will make your life easier. really.

Best of April 2007

Advertisement

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days – an overview of web-sites you shouldn’t have missed in 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.”
    Istalkr in Best of April 2007
  • 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.
    Survey-logo in Best of April 2007
  • 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.
    Abobe in Best of April 2007
  • 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.”
    Freelance in Best of April 2007
  • 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.
    Result in Best of April 2007
  • 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.
    Shiira in Best of April 2007

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]
    Coda in Best of April 2007
  • 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.”
    Linkboxes in Best of April 2007
  • 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.
    Email in Best of April 2007
  • 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.
    Tabmen in Best of April 2007
  • 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.
    Calendar7 in Best of April 2007
  • 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.
    Firebug in Best of April 2007
  • 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.
    Plotkit in Best of April 2007

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.
    Classics in Best of April 2007
  • 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.
    Links in Best of April 2007
  • 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.Navmenu in Best of April 2007
  • 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

The last click

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags:

Advertising
  1. 1
    Burak Emre
    May 15th, 2007 9:53 pm

    you are great!

  2. 2
    daysleeper
    May 15th, 2007 9:56 pm

    Dudes! You rock!!

  3. 3
    soho
    May 15th, 2007 10:00 pm

    Your lists are a very great resource for every aspect of webdesign. Well done, as usual!

  4. 4
    madriaza
    May 15th, 2007 10:11 pm

    awesome, thanks! this is really THE best of April!

  5. 5
    Scott deVries
    May 15th, 2007 10:49 pm

    Again, a fabulous list. Thanks!

  6. 6
    Wojtek
    May 15th, 2007 10:54 pm

    Good stuff. Keep it coming :)

  7. 7
    Carlos Eduardo
    May 15th, 2007 11:09 pm

    Very, very good list!

    I’m sure that it will help a lot of people… Nice content!

    Thank you for this work, again.

  8. 8
    kumz
    May 15th, 2007 11:53 pm

    As usual you are always cmmg up with useful resources :) good luck… nice post

  9. 9
    Maikel Neris
    May 16th, 2007 2:13 am

    Wonderfull! Vai ter tempo assim lá longe pra juntar toda essa informação! COngratulations!

  10. 10
    meizopan
    May 16th, 2007 2:35 am

    always awesome list guys. again great list

  11. 11
    Sarcasticshrub
    May 16th, 2007 2:46 am

    Great! There goes my day (”Ooohhh! Gotta see this one…open in new tab. Look, 30 tabs…)

    Thanks!

  12. 12
    moroder
    May 16th, 2007 2:55 am

    Thanks for hard work, especially this: “60 best CSS directories you would die to watch!” Great!

  13. 13
    Michele
    May 16th, 2007 3:38 am

    Wait a new post of smashing magazione is a drug! Best of month is incredible!! thanks

  14. 14
    Robert
    May 16th, 2007 3:47 am

    Great resources – thank you for saving my time in being inspired :-)

  15. 15
    Valdecir Carvalho
    May 16th, 2007 5:30 am

    Cool! It’s really usefull for newcomers as me! I found you site a few days ago and surelly will keeping watching it forever!

    Regards from a Brasilian visitor!

    valdecir carvalho – photographer
    http://www.valdecircarvalho.com.br

  16. 16
    Chuck
    May 16th, 2007 7:27 am

    As always when I visit here…great stuff!

    I am going to remedy my tendency to forget RIGHT NOW by subscribing to your feed. THANKS!

  17. 17
    Matty
    May 16th, 2007 7:36 am

    Thanks for this great list! me very happy now =)

  18. 18
    Xhtml
    May 16th, 2007 8:29 am

    Sweet resources like usual!

  19. 19
    Lee
    May 16th, 2007 8:45 am

    Every time you post I spend the whole day reading!

    It’s all worthwhile though :)

    Thanks!

  20. 20
    Mike
    May 16th, 2007 9:41 am

    You guys really rock. I could spend a whole day here just catching up on the past weeks’ entries. I really appreciate what you do.

  21. 21
    Harry Maugans
    May 16th, 2007 10:30 am

    Hum, no Desktop Nexus? :)
    http://www.desktopnexus.com

  22. 22
    Alex
    May 16th, 2007 11:10 am

    Thank you. You never seem to dissapoint.

  23. 23
    Gaurav Mlahotra
    May 16th, 2007 12:13 pm

    Hey Guys you never stops to amaze me with your spectacular
    and smashing articles.

  24. 24
    Jonathan Solichin
    May 16th, 2007 12:27 pm

    Yes! Finnally done! That was a good use of an hour for me!. Thanks. Amazing stuff. Worth the time.

  25. 25
    sakimichi
    May 16th, 2007 1:31 pm

    a very good list indeed XD ~!

  26. 26
    Toolio
    May 16th, 2007 2:53 pm

    Wow, great list of resources… should keep me busy for a while. Love the regex page.

  27. 27
    Nur Ahmad Furlong
    May 16th, 2007 4:14 pm

    Be honest with us, where do you guys find all these juicy bits in such a short space of time. C’mon guys share & tell. Maybe post an article of some of your sources? Thx for all the resources & advice though, it helps on a daily basis.

  28. 28
    Vinod
    May 16th, 2007 4:40 pm

    CSS tools I appreciate better.

  29. 29
    HoverOver
    May 16th, 2007 5:50 pm

    thanks.. i like it :-)

  30. 30
    Hitesh Mehta
    May 16th, 2007 7:50 pm

    !!!! SIMPLY AWESOME !!!!

  31. 31
    xixi
    May 16th, 2007 8:39 pm

    Thanx you very much. I love you guys!

  32. 32
    fearlex
    May 16th, 2007 10:57 pm

    Simply Awesome, i love SMASHING MAGAZINE, you should have a printed magazined, it will be awesome !!!!!

  33. 33
    Tim
    May 17th, 2007 2:59 am

    Everytime I read the articles here I see/learn something new. Fantastic resource…keep’em comming:)

  34. 34
    apul
    May 17th, 2007 5:10 am

    great stuff!

  35. 35
    asp.net and c sharp developer
    May 17th, 2007 3:08 pm

    This article is very helpful for web developers, i advise everybody to read

  36. 36
    Jermayn Parker
    May 17th, 2007 3:46 pm

    Boy spent a few good hours among other stuff clicking through those links, thanks and keep up the great effort

  37. 37
    Andreas Stephan
    May 17th, 2007 4:17 pm

    As always a great list. Thanks for putting it together. Now I just want enough time to read through all this great stuff.

  38. 38
    Metin
    May 17th, 2007 8:14 pm

    it’s really good collection.
    useful and cool designs.

  39. 39
    KH
    May 17th, 2007 10:27 pm

    I recently lucked into this site (maybe 2 wks ago), I don’t remember how I found it, but it has fast become one of my favorite resources.

    Thank you for all the wonderful, helpful and inspirational info. Keep it coming…

  40. 40
    Clever Jargon
    May 18th, 2007 12:38 am

    Another great list of resources…thanks for doing all this work!

  41. 41
    criticalerror
    May 18th, 2007 2:08 am

    Great choice… i don’t know how you find all this great sites… but the secret it’s the key…

  42. 42
    decybel
    May 18th, 2007 5:41 am

    massive thans for sharing those amazing resources ^^

  43. 43
    Badraiha
    May 18th, 2007 5:19 pm

    This article is wonderful I understand the business people get lot of chance through this Helvetica is a feature-length independent film about typography, graphic design and global visual culture. To more information visit the site business brainstorming

  44. 44
    Respiro the logo design guy
    May 20th, 2007 2:01 am

    I was surprised in a very pleasant way by freelanceswitch.com’s launch and its quick groung gaining. Congrats!

  45. 45
    redundante
    May 21st, 2007 11:48 pm

    great collection. thanks

    I consider the wiki about business value of web standards very interesting… there should be more effective ways of promoting web standarization among business people, but this is a great initiative.

  46. 46
    Malcolm
    May 23rd, 2007 8:13 pm

    Terrific Resource list..

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job