Web Design Resources — Old

WordPress Resources

Consult our WordPress Resources Page

Firefox Add-Ons

Great tools for every web designers’ favorite browser:

Web Developer’s Toolbar @ ChrisPederick.com
A bevy of handy tools. The toolbar that does it all — well, almost.
MeasureIt
Handy tool for quickly measuring elements in a web page.
EditCSS
Play with a website’s stylesheet right in your browser — to learn or to experiment.

Designer’s Toolkit

XHTML & CSS Cheatsheets
Handy references for coding reminders. To work with greatest efficiency and effectiveness, every web designer has them handy.
Kuler
Kuler is the web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.
Color Blender
Dial in a color, and it generates a scheme of corresponding colors, complete with RGB and Hex values for plugging into your designs.
Color Palette
Plug in the URL to an image on the web, and watch it generate a color scheme from the image itself. Provides Hex codes for your designs.
Colour Selector
A free, downloadable application for developing your own color schemes. Includes a color picker to grab colors from a photo or other image, tools for mixing those colors, and a way to save your schemes under a convenient drop-down menu for later reference. Really a wonderful little tool. For Mac or Windows.
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Readers will often be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.
Favicon Generator
Dynamically create a favicon for your website, in a handy online interface.
Special Characters in HTML
A handy source for finding the right HTML code for special characters.

Great Articles

Great Sites

Advanced Coding Articles

Resources

Domain Names

If you would like at some point to register your own domain name, here are a couple of good options:

Hosting

If you would ever like to establish your own web hosting account to set up and host your own web sites, with tons of options and tons of online spaces, WordPress.org lists some great hosting providers.

Reminders

Absolute Positioning

  • positions an element in relation to the browser window OR the nearest relative-positioned parent
  • Tip: If you want to position something absolute in relation to a “container” div, position the “container” div relative. This won’t change the position of the container, but it will help your absolute positioning! The line of code: 
    position: relative

Floats

  • Remember that floated elements are not recognized by the containing element UNLESS you:
  • Identify or add an element below the floats that can be cleared in the css (clear: both)
  • Float the containing element (floated elements do recognize other floated elements, beside them or inside them.

Code Snippets

Strict DocType Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Link to External Stylesheet

<link rel="stylesheet" type="text/css" href="style.css" />

iPhones and iPods

iPhone browser emulator – iPhoney

  • Download and install iPhoney to check iPhone site designs on your Mac.

Send iPhones to an iphone-specific stylesheet

  1. Create a javascript file named source.js, containing this code: 
    detect_iphone = function(){
css = document.getElementById('iphone');
this.construct = function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){
css.href = "iphone.css";
} else {
css.href = "style.css";
}
}
}
  2. Place this in the head of your document — note that the javascript follows the stylesheet link: 
    <link rel="stylesheet" id="iphone" type="text/css" href="style.css" />
<script type="text/javascript" src="source.js"></script>
<script type="text/javascript">
var detect = new detect_iphone();
detect.construct();
</script>
  3. Note that the above code snippets assume that you have your javascript file, markup, style.css (your main stylesheet) and iphone.css (your iphone stylesheet) all in the main folder. Adjust your filenames and links accordingly.

Form PHP

This method will give you a fully functional form that sends an e-mail to your desired e-mail address:

1. Place this folder of captcha code in your online web folder.

2. Place this code in the very top of the document where your form will reside, above the doctype. (Note that the error message is located near the bottom of this section of code. Change the words between the quotes will change the error message.)

<!-- //////////////////////////////////////////////////////

 FORM DOCTOP (above doctype) PHP:
  PASTE IN THE VERY TOP OF YOUR FORM HTML PAGE 

  //////////////////////////////////////////////////////  -->

<?php
  session_start();
  if($_POST){
  if(($_SESSION['security_code'] == $_POST['security_code']) && (!empty($_SESSION['security_code'])) ) {
  // Set success message
  $message = "Form submitted properly message...";
  // process form post data...
  $html = "<p>The following was submitted:</p>";
  foreach($_POST as $key => $value){
  if($key != "security_code"){
  $html .= "<p><strong>".$key.": </strong>".$value."</p>";
  }
  }
  // set your email address and subject...
  $to = "yourmail@domain.com";
  $from = "yourmail@domain.com";
  $subject = "contact form submission";
  // set headers and send email...
  $headers  = 'MIME-Version: 1.0' . "\r\n";
  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
  $headers .= 'From: '.$from.''. "\r\n";
  $mail = mail($to, $subject, $html, $headers);
  } else {
  // Set error (captcha) message...
  // possible here to say...
  // if security code is wrong, or invalid email, etc.
  // see php's ctype and google valid email methods.
  $error = "WOOPS! Please try again.";
  }
  }
  ?>

<!-- //////////////////////////////////////////////////////

 END FORM DOCTOP PHP

//////////////////////////////////////////////////////  -->

3. Finally, place this where you want the form to appear. Modify the form elements, error and success messages, as desired:

<!-- //////////////////////////////////////////////////////

 FORM CODE:
  PASTE WHERE YOU WANT YOUR FORM TO APPEAR
  Modify labels, inputs, values, etc., as needed
  Also modify error and success messages as needed
  (Error and Success styles are in Forms section of stylesheet)

//////////////////////////////////////////////////////  -->

<?php if(!$_POST || $error){ ?>

 <h2>Contact Me!</h2>

 <form action="contact.php" method="post">
  <p class="error">
  <?=$error?>
  </p>

 <fieldset>
  <legend>Contact Form</legend>
  <p>Fields marked * are required.</p>
  <dl>
  <dt><label for="subject">Subject *</label></dt>
  <dd><select name="subject" id="subject" tabindex="1">
  <option value="">Pick one</option>
  <option value="I need help!">I need help!</option>
  <option value="I have a suggestion.">I have a suggestion.</option>
  <option value="I really like your site.">I really like your site.</option>
  <option value="I want to hire you.">I want to hire you.</option>
  </select></dd>
  <dt><label for="name">Name *</label></dt>
  <dd><input type="text" name="name" id="name" tabindex="2" /></dd>
  <dt><label for="email">Email *</label></dt>
  <dd><input type="text" name="email" id="email" tabindex="3" /></dd>
  <dt><label for="message">Message below</label></dt>
  <dd><textarea name="message" id="message" rows="9" cols="30"➥
  tabindex="4"></textarea></dd>
  <dt><label for="updates">I would like to receive updates: </label></dt>
  <dd><input type="radio" name="updates" id="updates" value="yes" ➥
  tabindex="5"/>Yes <br />
  <input type="radio" name="updates" id="updates" value="no" ➥
  tabindex="6"/>No
  </dd>
  </dl> 

 <p>
  <label for="captcha">Security Code:</label><br />
  <img src="captcha/image.php"  /><br
  <input type="text" id="captcha" name="security_code" />
  </p>
  <p>
  <input type="submit" value="Submit Form" tabindex="6" />
  </p>

 </fieldset>
  </form>

  <? } else { ?>

  <h2>Thank you!</h2> 

  <p class="success">Your request has been successfully submitted.</p>

  <p>What would you like to do next?

  <ul>
  <li>Return to <a href="portfolio.html">my portfolio</a>.</li>
  <li>Return to <a href="index.html">my homepage</a>.</li>
  <li>Read something cool at <a href="http://www.smashingmagazine.com">Smashing Magazine</a>.</li>
  <li>Learn about the new degree in <a href="http://think.ingcreative.com/2009/03/11/new-degree-program-graphic-design-marketing-dynamics/">Graphic Design and Marketing Dynamics at Oklahoma Wesleyan University</a>.</li>
  <? } ?>

<!-- //////////////////////////////////////////////////////

 END FORM 

//////////////////////////////////////////////////////  -->