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 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.”
    Screenshot
  • 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.
    A List Apart: The Web Design Survey, 20074
  • 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.
    Screenshot7
  • 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.”
    Freelancing Resources11
  • 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.
    Turn your photo into movie effect18
  • 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.
    Shiira Browser21

Tools, Web-Services

  • 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]
    Screenshot31
  • SpamCheck32
    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
    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 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.”
    Screenshot36
  • 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.
    Guide to CSS Support in Email44
  • 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, outline-property and min-width-property.
  • 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.
    Screenshot48
  • 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.
  • 10 Free CSS and Javascript Calendars51
    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.
    CSS Calendars52
  • 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.”
  • Sliding Panels with CSS and JavaScript54
    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 Descriptions55
    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 Tricks56
    Firebug57 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.
    Firebug58
  • 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.
    Plotkit62

Web-Typography

  • 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.

Articles, Publications

  • 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.
    Blogger Tips68
  • 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.
  • Timing and Synchronization in JavaScript74
    This article attempts to describe the various timing-related issues in JavaScript in current browsers.
  • 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.
    Link Styles76
  • 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.Horizontal Navigation Menus88
  • 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.
  • Idealist93
    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

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    you are great!

    0
  2. 2

    Dudes! You rock!!

    0
  3. 3

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

    0
  4. 4

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

    0
  5. 5

    Again, a fabulous list. Thanks!

    0
  6. 6

    Good stuff. Keep it coming :)

    0
  7. 7

    Very, very good list!

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

    Thank you for this work, again.

    0
  8. 8

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

    0
  9. 9

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

    0
  10. 10

    always awesome list guys. again great list

    0
  11. 11

    Sarcasticshrub

    May 16, 2007 2:46 am

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

    Thanks!

    0
  12. 12

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

    0
  13. 13

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

    0
  14. 14

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

    0
  15. 15

    Valdecir Carvalho

    May 16, 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

    0
  16. 16

    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!

    0
  17. 17

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

    0
  18. 18

    Sweet resources like usual!

    0
  19. 19

    Every time you post I spend the whole day reading!

    It’s all worthwhile though :)

    Thanks!

    0
  20. 20

    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.

    0
  21. 21

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

    0
  22. 22

    Thank you. You never seem to dissapoint.

    0
  23. 23

    Gaurav Mlahotra

    May 16, 2007 12:13 pm

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

    0
  24. 24

    Jonathan Solichin

    May 16, 2007 12:27 pm

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

    0
  25. 25

    a very good list indeed XD ~!

    0
  26. 26

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

    0
  27. 27

    Nur Ahmad Furlong

    May 16, 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.

    0
  28. 28

    CSS tools I appreciate better.

    0
  29. 29

    thanks.. i like it :-)

    0
  30. 30

    !!!! SIMPLY AWESOME !!!!

    0
  31. 31

    Thanx you very much. I love you guys!

    0
  32. 32

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

    0
  33. 33

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

    0
  34. 34

    great stuff!

    0
  35. 35

    asp.net and c sharp developer

    May 17, 2007 3:08 pm

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

    0
  36. 36

    Jermayn Parker

    May 17, 2007 3:46 pm

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

    0
  37. 37

    Andreas Stephan

    May 17, 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.

    0
  38. 38

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

    0
  39. 39

    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…

    0
  40. 40

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

    0
  41. 41

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

    0
  42. 42

    massive thans for sharing those amazing resources ^^

    0
  43. 43

    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

    0
  44. 44

    Respiro the logo design guy

    May 20, 2007 2:01 am

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

    0
  45. 45

    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.

    0
  46. 46

    Terrific Resource list..

    0
  47. 47

    Really very useful.. thanks to SM….

    0
  48. 48

    Watch your thoughts; they become words. Watch your words; they become actions. Watch your actions; they become habits. Watch your habits; they become character. Watch your character; it becomes your destiny.

    0

↑ Back to top