Wilder Tweedale - blog


13 Useful Tools & Resources for Web Design & Development

I just wanted to quickly share some links to some interesting & useful web-based tools & resources that can make web design a little easier, so in no particular order here they are:

  1. CSS Pivot is a site which lets you add your own CSS styles to any website and preview the results.
  2. FFFFallback is a handy bookmarklet which lets you see what different fallback fonts would look like on your website. I find it useful for just previewing a website with everything in a different font to see if it would fit well with a design.
  3. Initializr is an HTML5 template generator which lets you quickly generate a customized HTML5 starter template. Initializr lets you specify whether or not you want sample content, jQuery already included, Modernizr or HTML5 Shiv included, analytics, and lets you specifiy server configuration options.
  4. Kotatsu is a simple web app which helps you generate blank HTML tables with the option of adding custom classes to specific rows.
  5. Noise Texture Generator v2 lets you create tile-able .png background images of any colour with any amount of noise, and then download them for use on your website.
  6. The Aviary Suite is a great collection of web-based alternatives to Adobe graphics programs; there’s one like Photoshop, one that can create / edit Vector graphics, one that can edit Audio files, and more. Obviously they aren’t as powerful or fully-featured as real Adobe Creative Suite programs, but they do server as nice ‘lite’ versions which are accessible from any internet-connected computer. And they’re free.
  7. CSS3 Generator lets you input specific values for a wide range of CSS3 properties and both generate code and display a preview based on your inputted values. Generates code for border radius, box shadow, text shadow, transitions and transforms, and more.
  8. Typechart is a web font previewing tool which lets you browse through standard fonts and display them in a range of formats, from small body text up to large headings, and then retrieve the examples associated CSS code.
  9. FontSquirrel, which I’ve talked about before, is a great website allowing visitors to browse through hundreds of high-quality, commercial-use web fonts, download free font files, download free cross-browser @font-face kits, and upload their own fonts to generate an @font-face kit based on it.
  10. CanIUse.com lets you view data on browser support for a variety of CSS properties, HTML5 features, and web development techniques.
  11. My List of Mobile Browser Simulators & Emulators describes a few useful websites which let you preview your site in various mobile browsers.
  12. resizeMyBrowser is a handy tool for designers creating websites which adapt to various screen sizes; it lets you resize your browser to predefined widths including iPad and iPhone widths.
  13. css3-mediaqueries-js is a handy javascript library which forces older browsers, including IE5+, support CSS3 media queries.


I recommend CatsWhoCode’s blog for more great web design tips & resources.


Comments are closed.