Robert Spangler

UI/UX designer & front-end developer

Navigation

8 Web Design Resources I Couldn’t Live Without (Honestly!)

Ok, so the “10 ___’s that will save your life!” posts can be annoying. Hopefully you can get some use out of this post; these are the web resources that I honestly use all of the time. No Filler! They are ordered by how well they’re know (least to most known).

1. Web Template

I typically use either a 12 or a 16 column grid on most of my designs. I also need to see what it will look like in 800×600 and 1024×768, so I basically just created a nice little .PSD file that includes all of my necessities in an overlay folder at the top of my document. It helps to get my design going on the right foot (after planning, research and sketches of course!). For the grid system I’m using overlays from 960.gs.

Web Template

Download the Web Template (.zip)

2. The Viget Photoshop Color Fix

Have you ever sliced out an image and the colors are slightly different from what you saw on your .psd? Photoshop does this horrible thing where it changes how you see your colors in Photoshop window to match your monitor. This is unacceptable for the web! Make sure you run this fix to ensure that your colors come out right.

Viget

Read the Blog Post

3. IETester

We all hate IE, but we all still need to make sure that our visitors and clients don’t hate us (because you know they all use it!). The difficult thing about designing for IE is that you can only have one version of it installed on your PC; unless… you don’t have 3 virtual PCs running do you? That’s a shame, because IETester gives you the ability to open a different version of IE in separate tabs (from 5.5 to 8).

IETester

Get IETester

4. AutoPopulate

This was originally developed by Roger Johansson and basically auto-populates your input field with instructions (ex: “Enter Your Search Term Here”) but it still keeps your fields accessible by doing it using the title attribute. I’m a big fan of JQuery, and so is my friend Andy Stratton, so he created a great plugin for it.

Get JQuery Populate Plugin

5. JQuery UI

Ok, JQuery is an awesome hotdog, and JQuery UI is all the relish, mustard and ketchup. JQuery UI allows you to easily create a datepicker, a slider, a dialog box…, or even make elements resizable. I find myself using the tabs more than anything.

JQuery UI

Get JQuery UI

6. FireBug

If you’re a web designer, you probably already know what this is all about and you can skip to the next one. FireBug has saved me countless hours in my CSS, it allows you to inspect and alter live CSS on any site. This is great if you’re fixing an issue on a website that has already been integrated into a complex CMS (e.g. Ektron!).

FireBug

Get FireBug

7. SwfObject

There are a couple good solutions out there for flash replacement, but I stick with SwfObject because it never lets me down and it’s not complicated. It basically allows you to add your flash file in an accessible way by providing alternate content for people without the Adobe Flash Player.

Get SwfObject

8. sIFR

I have a love/hate relationship with sIFR. I always seem to have to tweak the heck out of it to really get it doing what I want, but it is still the best font-replacement tool out there.

Get sIFR

3 Responses to “8 Web Design Resources I Couldn’t Live Without (Honestly!)”

  1. John Ricahrdson

    9. Rob Spangler

    When all else fails and you have no one to turn to, Rob Spangler is there to help. From tips and tools to the latest and greatest – Rob Spangler is a resource I could not live without.

    hahaha… I like the post my friend! You have saved me time and effort from having to call you to ask where to find these. Found it via @theandystratton – so props to him!

    On another note – The Viget Photoshop Color Fix. I ran across this exact issue just a few days ago. I had no idea what in hell was going on. It’s very frustrating that Photoshop seems to do whatever it likes. Once again you have saved my life friend!

    Thanks for the post!

    Reply
  2. Austin

    Duder, I just started cracking the skull of web code open and I finally designed my site from scratch (with a little help from WordPress on the bloggage). Check it:

    http://www.tightslice.com

    The backend is probably a bit hairy for a pro like you but I’m just happy that I charged through a many sleepless night to figure this jargon out.

    I haven’t touched any Javascript, JQuery, or PHP yet but I will gladly talk mustard and relish with you soon. Too bad the new Firefox killed FireBug… I’ve been rolling with some Element Inspector on Safari. BUMMMMER!

    Thanks for these tips homeboyyyyyyeeee.

    And as a designer I will agree… major poo poo on the Photoshop color issue.

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

About Robert

I work with clients ranging from local small businesses and non-profits to large Fortune 500 companies.

If you think I'm the right guy for your project, please feel free to give me a shout.

I am a full-time freelance website designer and front-end developer from Baltimore, Maryland, currently living in Nairobi, Kenya.

I design and code for user experience on the web with special attention on mobile devices. I come from a background in eCommerce and lead generation, which I'm very good at. I spend most of my time personalizing and creating customized WordPress themes for clients. Other than designing websites I spend time with family, study, occasionally tweet, and rarely +.