Robert Spangler» Resources http://www.robspangler.com Design - Web - Creative Sat, 15 May 2010 02:08:01 +0000 en hourly 1 http://wordpress.org/?v=3.0 HTML5 Doctype Templatehttp://www.robspangler.com/blog/html5-doctype-template/ http://www.robspangler.com/blog/html5-doctype-template/#comments Wed, 10 Feb 2010 14:39:58 +0000 Robert http://www.robspangler.com/?p=286 It is finally time to start switching to HTML5 for projects moving forward. If you’ve been following the progress you already know that xHTML will eventually be outdated and browsers will, eventually, support HTML 5 functionality. So it doesn’t make sense to continue with xHTML; plus, now our clients to use HTML5 functionality as it becomes available without too many headaches.

Below basic doctype template I’m starting out with, please feel free to give me feedback.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta name="description" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="style.css" />
  <script src="js/jquery.min.js"></script>
  <!--[if lt IE 8]>
  <![endif]-->
</head>
<body>
</body>
</html>

Note: I included a holder for JQuery and and IE specific stylesheet (just in case). These can obviously be removed if they’re not needed for the project.

]]> http://www.robspangler.com/blog/html5-doctype-template/feed/ 1 8 Web Design Resources I Couldn’t Live Without (Honestly!)http://www.robspangler.com/blog/8-web-design-resources-cant-live-without/ http://www.robspangler.com/blog/8-web-design-resources-cant-live-without/#comments Wed, 02 Sep 2009 02:50:16 +0000 Robert http://www.robspangler.com/?p=191 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

]]> http://www.robspangler.com/blog/8-web-design-resources-cant-live-without/feed/ 3 xHTML 1.0 Strict Doctype Templatehttp://www.robspangler.com/blog/xhtml-1-strict-doctype/ http://www.robspangler.com/blog/xhtml-1-strict-doctype/#comments Sat, 28 Feb 2009 14:29:14 +0000 Robert http://localhost:8888/robspangler.com/blog/xhtml-1-strict-doctype/ This is just the xHTML document that I usually start off with, already included tags for title, description, keywords, favicon, and stylesheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="Shortcut Icon" href="/favicon.ico" />
	<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

There were a few occasions where I gave up on using the UTF-8 charset because IE6 had a ‘white screen’ bug on certain pages using a post through PHP. If you’re having these problems use ISO-8859-1, ex:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
]]> http://www.robspangler.com/blog/xhtml-1-strict-doctype/feed/ 0 Encrypt Mailto Links to Stop Email Spamhttp://www.robspangler.com/blog/encrypt-mailto-links-to-stop-email-spam/ http://www.robspangler.com/blog/encrypt-mailto-links-to-stop-email-spam/#comments Fri, 03 Aug 2007 04:53:04 +0000 Robert http://localhost:8888/robspangler.com/blog/encrypt-mailto-links-to-stop-email-spam/

It’s easy to get spammed. One way to get spammed is to have email links on your websites because bots search through websites looking for <emailaddress>@<host>.<com>.

So, this is the best solution I came across. Type in your email address below and it will shoot back an encrypted mailto link for you to use. It is amazing, works great, and the results validate xHTML Strict.
Original Code by: zapyon.de.

The Input

The Results

]]> http://www.robspangler.com/blog/encrypt-mailto-links-to-stop-email-spam/feed/ 11