Web Design Tools


  • jQueryDownload | Site | Docs | Plugins
    My favorite Javascript framework with a small footprint at 20k.
  • SWFObject 2.1 Download | Site | FAQ
    Defacto script for embedding Flash content.
  • OffspringDownload | Site
    Auto-applies .first-child, .last-child, & .only-child classes.
  • Dean Edwards IE7 ScriptDownload | Site
    Library makes IE5/6 behave like IE7.
  • NicEditDownload | Site
    Turns any textarea into a WYSIWYG editor.
  • Reflection 2.0Download | Site
    Adds a wet-floor effect to any image.
  • JSLintSite
    Identifies problems in JavaScript programs.
  • Jash: Javascript ShellSite
    Cross-browser Javascript command-line debugging tool.

jQuery Essential Widgets

jQuery Specialized Widgets

  • Tipsy 0.1.2 Download | Site
    Facebook-style tooltips utilizing anchor’s title attribute.
  • Auto-Grow TextareaDownload | Site
    Modifies a textarea to grow vertically as it becomes full.
  • Input HintsDownload | Site
    Displays in-field hints on text input elements.
  • markItUp! 1.1.5Download | Site
    Turns textarea tag into a markup editor with various syntaxes.
  • jEditable 1.5.1Download |
    Makes any element a click-to-edit, Ajaxified item.
  • BlockUI 2.14Download | Site
    Prevents activity with the window or elements when using AJAX.
  • jCarousel 0.2.3Download | Site
    Scroll items in horizontal or vertical order with controls.
  • Custom Checkboxes 1.1.0b2Download | Site
  • Date Picker 2.1.2Download | Site
  • Table Sorter 2.0.3Download | Site
  • Ingrid Datagrids 0.9.1 | Site
  • Star RatingDownload | Site
  • Farbtastic 1.2 Color PickerDownload | Site

jQuery “Extensions”

  • jQuery MetadataDownload
    Embed metadata in HTML tags. See code for examples.
  • jQuery Easing 1.3Download | Site
    jQuery library for advanced sliding-type animations.
  • Bgiframe 2.1.1Download | Site
    Used when you show elements over a select control in IE6.
  • More Selectors | Site
    Adds a plethora of interesting selector options.


  • CodeIgniter 1.7.0Download | Site | Docs | Forums
    Easy, documented framework by the devs of ExpressionEngine.
  • pChart 1.2.7Download | Site | Docs
    PHP classes to render high-quality charts.
  • mySQLDumperDownload | Site
    Quality backup solution for large mySQL databases.
  • PHP Development GuidelinesSite
    Best practices for PHP development from the EE guys.
  • PHPMailer 2.3Download | Site | Tutorial
    Send email with attachments, HTML and embedded images.
  • TAR/GZIP/BZIP2/ZIP Archives 2.1Download | Site
    Builds and downloads zip+ files on the fly.
  • ROS PDF ClassDownload | Site
    Module-free creation of PDF documents from within PHP.

Flash Components

  • Open Source FLV PlayerDownload | Site | Docs
    “OS FLV” – Open source, embedable player for Flash video.
  • JW FLV Player 3.12€30 | Download | Site
    SWF file that displays FLV videos. Free for personal use.
  • SlideShowPro$29 | Site | Wiki
    Gallery and slideshow Flash component. 60 options.
  • MonoSlideShow | Site | Manual
    Gallery and slideshow SWF file. 150 options.
  • XSPF Flash MP3 Music Player (Slim)Download | Site
    SWF file that plays mp3 songs and playlists.
  • Date Slider 1.1Download | Site
    SWF file that selects a date range.
  • amChartsFree/€85/€275 | Site
    Customizable Flash charts. Free version embeds link to vendor.
  • TWF Flash Uploader€15/€50 | Site
    Nice-looking, configurable, multi-file, Flash uploader.

Miscellaneous Tools


  • Web Development BookmarkletsSite
    Tools for manipulating Javascript, CSS, and DOM in browser.
  • Allan Jardine’s “Design” BookmarkletSite
    Four overlaid tools: Grid, Guides, Measurement, Crosshair.
  • XRAY BookmarkletSite
    Select any page element and display its style info.
  • Visual Event BookmarkletSite
    Visually show what events are attached to DOM elements.

Grid Design

  • 960 Grid SystemDownload | Site
    Grid system based on 960px wide design in 2 column widths.
    12 column – 60px wide columns, 20px gutters.
    16 column – 40px wide columns, 20px gutters.
  • Blueprint CSS 0.8Download | Site
    24 column grid with typography, utlities & reset included.
  • GridMaker2Rows & Columns | Columns Only | Site
    Essential Photoshop script that creates custom grids.
  • Grid DesignGridr Buildrrr | Designer | Calculator
    Tools to design and preview grid systems.

Content Generators

  • Preloader GraphicsAjaxLoad | LoadInfo | Preloaders.net
    Online tools to customize an animated ajax/loader graphic.
  • Stripe GraphicsStripe Generator | Stripe Mania
    Online tools to customize background stripe tiles.
  • Background Maker (Tiled Backgrounds)Site
    Online tool to make pixel-by-pixel tiled backgrounds.
  • favicon.ccSite
    Online tool to generate favicons.
  • CornerShopSite
    Online tool to generate rounded corner graphics and code.
  • Dummy Text GeneratorSite
    Best tool for generating dummy content. Highly configurable.
  • LipsumLipsum | Lorem2 | html-ipsum | Text
    Generic lorem ipsum copy for roughing in content.

Pixel Icons

  • Silk IconsDownload | Site | Preview
    1,000 16×16 PNG icons with transparency. A must have set.
  • Silk Companion IconsDownload | Site | Preview
    420 Silk-style 16×16 PNG icons with transparency.
  • BSN Mini Icons 2 | Site | Preview
    113 10×10 grayscale gif icons with transparency.
  • Diagona Icons$19.95 | Download | Site | Preview
    400 10×10 and 16×16 PNG icons with transparency. Purchase to remove Creative Commons attribution requirement.

  • Fugue Icons$49.95 | Download | Site
    1263 16×16 PNG icons with transparency. Includes PSDs to modify. Purchase to remove Creative Commons attribution requirement.
  • SizconsDownload 16×16 | 12×12 | Site | Preview
    43 16×16 and 12×12 PNG icons with transparency.

  • Aqua Gloss IconsDownload | Site | Preview
    32 128×128 PNG icons with transparency. 32px resizes shown.

  • Matt Ball’s Developer Icons | Preview
    44 32×32 TIFF toolbar-style icons with transparency.

  • Danish Royalty Free IconsDownload | Site | Preview
    96 32×32 PNG toolbar-style icons with transparency.

  • Sekkyumu Developpers Icons [sic]Download | Site | Preview
    105 32×32 PNG/.ico toolbar-style icons with transparency.

  • Quality Royalty Free Icons
    IconDrawer – 140 icons for $84 plus 48 add-ons for $29.
    IconShoppe – 56 Stockholm icons for $45 with free minis.
    MicroIco – 64 mini 8×8 icons for $6.
    N.Design – 175 12×12 plus 82 8×8 for $30.

  • Vector Icons

    • ClickBits$49 | Site
      792 arrows & web-related icons in OpenType font format.
    • InfoBits$29 | Site
      188 web-related icons & dingbats in OpenType font format.
    • 165 Vector Icons by GoSquaredSite | Preview
      Free, useful icons in SVG, JPG and Illustrator CS2 format.

    Backgrounds & Styles

    • Illustrator – Basic Gradients by GoSquaredSite
      Free, Web2.0-style gradients in SVG or Illustrator CS2 format.
    • Illustrator – Web 2.0 Gradients by dezinerfolioSite
      130 Illustrator gradients. Matches PS gradients below.
    • Photoshop – Web 2.0 Gradients by dezinerfolioSite
      130 Photoshop gradients.
    • Photoshop – Web 2.0 Layer StylesSite
      131 Photoshop layer styles by deszinerfolio.com.
    • Photoshop – Web 2.0 Gradients by EuphorishSite
      70 Photoshop gradients.

    Browser Compatibility

    • PNG Support in IEDownload | Site | Code
      Enable transparent PNG support in IE.

    • PNG Support in IE (CSS Only)Site | Code
      Enable transparent PNG support in IE6 using only CSS.

    • Whatever:hover in IEDownload | Site | Code
      Enables css :hover support in IE.

    • IE Browser Filtering/TargetingSite | Code
      Some hacks to target different browsers.

    • Misc Browser WorkaroundsCode
      Click the code link to see some collected browser workarounds.

    CSS & HTML Techniques

    • Sliding DoorsSite
      Not just for tabs, this technique is by far the most useful of all.
    • Taming ListsSite
      Transform the meager list into something useful.
    • CSS ResetEric Meyer’s | Yahoo YUI Reset
      Reset all CSS styles to a baseline. Season to taste.
    • Clearing Floats without Extra MarkupSite | Code
      My method of choice for clean float clearing.

    • Resize a Popup to Fit an Image’s SizeSite | Code
      Make a popup window resize perfectly to the image.

    • Sticky FootersBest method | Alt Method
      Tested cross-browser solution for sticky footers.


    • FontSquirrel – High Quality FREE FontsSite
      Free, hand-picked, licensed-for-commercial-use fonts.
    • Facelift Image ReplacementDownload | Site
      Dynamically generate text in custom fonts with PHP/JS combo.
    • Typical Cross-Browser Font CascadesSite | Sample
      Use these fonts lists when specifiying fonts in your css.

    • Alternative Font CascadesSample
      Interesting alternative cascades.

    • Default Mac FontsSite | Show
    • Default Windows FontsSite | Show

    Firefox Extensions

    • Firebug 1.3 Install | Site
      Edit, debug, and monitor CSS, HTML, and JavaScript live.
    • Web Developer’s Toolbar | Site
      Adds a menu and a toolbar with various developer tools.
    • View Formatted Source Install | Site
      Displays formatted source and CSS info for each element.
    • YSlow Install | Site
      Analyzes pages and tells why they’re slow. REQUIRES FIREBUG.
    • Dust-Me Selectors 2.11Install | Site
      Dust-Me Selectors finds unused CSS selectors in your site.
    • UrlParamsInstall | Site
      Displays the GET and POST parameters of a web page.
    • Link CheckerInstall | Site
      Checks all links on a webpage and reports broken ones.

    Essential Mac Software

    • MAMP 1.7.2Download | Site
      Self-contained local hosting. (M)ac, (A)pache, (M)ySQL, (P)HP.
    • VirtualHostX 1.1.1$9 | Download | Site | Tutorial
      Host multiple sites on your Mac. Extremely useful with MAMP.
    • CSSEdit 2.6€29.95 | Download | Site
      The best CSS editor on the market. An absolute must-have.
    • TextMate 1.5.7€39 | Download | Site
      The best text editor ever.
    • Coda 1.6$99 | Download | Site
      Popular all-in-one web development application.

    SEO / Site Evaluation

    • Social BookmarkingAddThis | ShareThis | Tell a Friend
      Widgets helps visitors post bookmarks to social media sites.
    • Website GraderSite
      Measures effectiveness of a site based on SEO, traffic, etc.
    • W3C ToolsMarkup Validator | Link Checker | CSS Validator
      Tools to check the validity and accuracy of your site.
    • Keyword Suggestion ToolSite
      Meta tool that helps you research keywords a variety of ways.


    • DNSstuff Site
      Configure, monitor & fix problems with your domain & email.
    • PickyDomains – Custom Domain Names$50 | Site
      Creates a good/available domain name for only $50.
    • Domain Searchesbustaname.com | nameboy.com
      Domain name searches and combination helpers.
    • SSLmatic – Cheap SSL Certificates$19.99 | Site
      Discounted SSL certs from RapidSSL, GeoTrust and Verisign.

    Analytics, Monitoring & Testing

    • Google AnalyticsSite
      Free and full-featured analytics engine.
    • Mint$30 | Site
      Popular self-hosted analytics app by Shaun Inman.
    • userflySite
      Run instant usability studies using your real users.
    • Are My Sites Up?Site
      Keeps an eye on your sites and warns you if they go down.


    • Harvest – Biz Managment FREE/$12/$40/$90 | Site
      Very good service for tracking time, logging expenses, invoicing clients, etc…
    • Etherpad – Collaboration ToolSite
      Collaborate on any text programming document.
    • Mail Chimp – Bulk Email Site
      Email sending for designers.
    • Web Development Project Estimator Site
      Estimate time & materials required for a web project.

    Cheat Sheets