Bedrich Rios

As a web designer, I spend countless hours designing web pages in Photoshop. Of course, this happens only after thoughtful consideration with regards to the site’s layout and several sketch iterations, otherwise know as the framework. In any case, this process may get overly repetitive as you begin to receive a more steady work flow. So, wouldn’t it be nice to automate some of this process? If you are anything like me, you are thinking: “yes it would be.” Therefore, it is time to turn our attention to one of the greatest features in Photoshop, actions. Photoshop actions can record any given set of steps and store them for later usage. Thus, we can use actions to create a simple yet read-to-use Photoshop file for our web design purposes. This file will contain the “scaffold” for our design. In other words, this file will free us of the mundaneness that comes from setting up a Photoshop environment every time we begin a new website’s design. Note: I use Photoshop CS2. So, some of the steps demonstrated here may vary depending on your software’s version.

Creating My Photoshop Action

So, let’s open Photoshop and get to work. Here are the steps that I’ve taken to create my own action:

1. Go to Windows -> Actions.
2. Create a new set and name it Web Design Actions.
3. Now, create a new action and name it Framework. From this point on the action will begin recording your every move until you press the stop button.
4. Create a new document (I usually work with an 800×600 to begin with) by going to File -> New. Also, unlock (double clicking it will do the trick) the background layer, and name it Background.
5. Create groups for all the necessary sections of a regular site and name them appropriately.  I usually start with a group for the header, navigation, content, sidebar, and footer.
6. Now, give yourself some guides. Simply click on the left side ruler and drag to your desired position. I usually create two initial guides 25px away from the side edges of the canvas.
7. Finally, stop the action recorder. This will automatically save all the steps previously performed.

Make Your Own and Use It

Now that you know how to create a Photoshop action, make your own and use it every time a project comes your way. Soon you will realize the convinience of having a basic framework action. Furthrermore, by automatizing this routinary process you will save yourself valuable time. Enjoy!

There are many people who consider the W3C valid buttons as good indicators of a web designers’s understanding and attention to Web Standards. Although, this may not be entirely true, it is a reasonable and understandable way of thinking. Thus, almost every site built these days will display a valid link to the W3C’s validation app somewhere in the site (more often than not in the “footer” section). However, most designer will refrain from using the W3C provided valid buttons and will instead cook a textual or visual solution of their own. But wouldn’t it be nice if you could use these somewhat-iconic buttons only when needed? Wouldn’t it be nice if they were less obtrusive and had a place in your design? If these inquiries gave you a sense of excitement, take a look at the demo and read on.

A jQuery Approach

For those of you who are long time readers, it comes with no surprise that I have chosen jQuery for this tutorial. For those of you who are new, visit the jQuery homepage and prepare yourself to be amazed by this versatile and lightweight java framework.

There are two main problems with the W3c valid buttons, which prevent most designers from using them. Firstly, the color choices … rather, the lack of color choices for the buttons makes it hard for it to blend with any design. Secondly, unless the site being built is a W3C site, chances are the design will have a more 2.0 look. In other words, unless the design of your site is outdated, these buttons will clash with your current design.

My solution to these problems is rather simple (thanks to jQuery), hide the buttons unless needed. In other words, use jQuery to append the W3C button(s) to your validation link(s), position it above the link(s), and animate them. In order to have a better sense of this technique, take a look at the demo.

Ready To Use Script

If you wish to download the script, scroll to the end of this post and click on the download button. However, before you hurry away with a big smile in your face here are a few things you should know (AKA how-to):

1. jQuery is needed for the script to work.
2. You will need to add one of the following classes to your validation links:
   • valid_html
   • valid_xhtml
   • valid_css

Note: the .js file is set to work with the valid_xhtml and valid_css classes. If you wish to use the valid_html class instead of the valid_xhtml one, uncomment that line of code and viceversa. Also, if you are using this script with WordPress make sure to read my Using jQuery with Wordpress post.

Download & Copyright Things

The script is free for you to use, modify, or destroy (hopefully not the latter). But recognition or a link back is always well received. Please make sure to leave any thoughts or problems you have with the script. Enjoy!

Download Script

In the last couple of months I have crossed paths with many individuals who still believe web pages are created using only HTML and table layouts. People who have no knowledge of web standards, accessibility, or the work that goes into creating or designing a website. Furthermore, there are those who, in my opinion, sadly still perceive the web as child-play.

I am not the most experienced web designer, far from it actually, but I have spent countless hours (for the past three years) learning about the web in order not to “hurt it.” That said, it is really hard to find higher education programs or classes about web design, mainly do to its “young” nature. At the same time, a simple Google search will return an overwhelming number of links to tutorials and how-tos. So, what’s good out there? There are many possible answers to that question. The following list is one. It will provide you with what worked for me when I began to take interest in web design. They are not all related to web design per se, but they will give you a brief overview of what your are getting yourself into.

The List, But Not “The List”

1. Understanding Web Design
   In this article, Jeffrey Zeldman, writes about what it means to be a web designer and what it does not. He talks about why web design is misunderstood and the dangers the misconceptions carry. Furthermore, he gives an answer to the question: what is web design? This is a must read for anyone interested or involved in web design.
2. The Web Standards Project
   “The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.” In other words, web standards attempt to assure that the exchange and use of information between web based products go “smoothly” regardless of the browser being used.
3. CSS Beginner Tutorial
   Cascading Style Sheets are a web designer’s best friend. CSS allows you to design the way a web page displays without ever having to mess with the markup (HTML). Follow all the steps on the tutorial and you will be off to a good start.
4. Learn CSS Positioning in Ten Steps
   Learning how to position markup generated elements on a web page using CSS will be your key to liberating yourself from ever using tables to layout a page. Leave tables for displaying tabular data not entire web pages.
5. A Guide To Web Typography
   Many times overlooked, typography is one of the most important parts on a website’s design. After all, content is the meat of your site, display it right.

What Next?

I wrote this article with the assumption that you had general knowledge when it comes to HTML and CMSystems. If not, check out these articles: CMS and the Single Web Designer and HTML Beginner Tutorial. In any case, this list is intended to give you a good and solid starting point before you begin designing web pages. It worked for me in the past, I hope it works for you. If you have any questions or comments, please leave your thoughts down below.

Using coordinates to place an abolutely postioned element on a page may seem like a bit of an overkill when you can just assign the top, bottom, right, and left values in the CSS but believe me is not. I have used this effect in combination with the Text-Resize Detection script published on A List Apart to re-position an element next to another at all times (the project demanded this effect) regardless of window or text resizing. The things you can do with this nifty trick are only limited by your imagination. Look at a demo of the “trick” at work if you wish to see it before reading the tutorial. Enough rumbling, let’s begin.

Gathering Neccesary Information

There are a couple of things we are going to need to know before beginning to write the script and they are:

• The name (id or class) of the element we are trying to get the coordinates of, which I will call “static_box (id name)” during this tutorial.
• And, the name (id or class) of the element we are moving around, which I will call “moving_box (id name)” during this tutorial.

Now we can begin recreating what you saw on the demo. First, let’s start by creating the functions we will need in order to position the moving box to either the left or right of the static box. In this step we will write the commands for the main function only. In other words, we will absolutely position the moving box and give it top and left values.

function position_left()
{
	/* code will go here */
}

function position_right()
{
	/* code will go here */
}

function position(x,y)
{
	var moving_box = $("#moving_box");
	moving_box.css("position","absolute");
	moving_box.css("top",y);
	moving_box.css("left",x);
}

Now we need to record the coordinates of the static box and apply them to the moving box. However the actual X and Y coordinates will need to change a bit if we want things to line up correctly. We need to take padding and border into consideration and make them part of our equation. So with a bit of addition and subtraction involved in the equation, our empty functions should look something like this.

function position_left()
{
	var static_box = $("#static_box");
	var moving_box = $("#moving_box");
	var mb_width = moving_box.width();

	var coordinates = static_box.offset()
	var x = coordinates.left - mb_width;
	var y = coordinates.top;
	position(x,y);
}

function position_right()
{
	var static_box = $("#static_box");
	var sb_width = static_box.width() + ["static_box total padding + total border"];
	var coordinates = static_box.offset()

	var x = coordinates.left + sb_width;
	var y = coordinates.top;
	position(x,y);
}

function position(x,y)
{
	var moving_box = $(”#moving_box”);
	moving_box.css(”position”,”absolute”);
	moving_box.css(”top”,y);
	moving_box.css(”left”,x);
}

That is all the code you need to recreate what you saw on the demo. However, you will need to call either function position_right or position_left for things to work. In the case of the demo, the functions are being called by an “onclick” function attached to the link elements.

Download

Please feel free to play around with the code and make any tweaks to it. If you have any questions or something is not working right for you, leave a comment and I will try to answer your question(s).

Download Demo