Jendro Design

Five Great SEO Links

Jason — Wed, 29 Jul 2009 15:12:35 +0000

SEO can be complicated and esoteric. Here are some links that will help clear the air:

How to SEO Your Website – Good introductory article to those who know little about SEO.
SEObrowser.com – This is how your site looks to search engines.
Google’s Webmaster Guidelines – Google is as synonymous to search as Kleenex is to facial tissue. You’d better read their guidelines.
Robots.txt – Part of SEO is letting the search engines know what not to index. You don’t want them crawling around in every directory you have do you?
The SEO Theory White Papers – An academic approach to SEO.

In short – produce web sites that adhere to web standards, provide good desirable content, and don’t try to “trick” anybody into visiting your site.

CSS Resets

Jason — Thu, 09 Jul 2009 18:49:17 +0000

When designing XHTML and CSS it is important to be cognoscente of the fact that every browser will interpret your code a little bit differently. This mostly has to do with the default styling, padding, and margin of different elements as determined by a particular browser. While your page may look generally the same in all browsers, if you look closely, there is a good chance that you can catch the minor differences in presentation. Most of the time it is readily evident if you develop a site in one browser (Firefox) and then proof it in another (IE). The margin and padding of commonly used tags such as

and
will most likely be slightly different, resulting in minor presentation deviations that drive us crazy. So what’s the simplest solution?

Introducing: The CSS Reset

The concept behind a CSS reset is to have a standard set of code that you can declare at the beginning of a stylesheet that intentionally eliminates those minor browser differences. After the reset declaration, you may style the various elements of your stylesheet as you usually do. There are numerous iterations on the subject that we could debate ad infinitum. So, I will simply show you the one that works for me.

/* Zero Out */
 
h1, h2, h3, h4, h5, h6, ul, ol, li, em, strong, pre, code, blockquote, form, img {
	padding: 0;
	margin: 0;
        border: 0;
        outline: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	font-family: inherit;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: inherit;
}
img a {
	border: 0px;
	background: none;	
}
p {
	margin: 1em 0px;
}

Notes

Keep in mind, this is what works for me. Everyone writes CSS differently so the possibilities are endless here. You have the potential to get very detailed with the CSS reset technique and reset everything. This can erase a lot of default styles that you’ve gotten used to using and expect to just magically be there. I have intentionally eliminated many tags and selectors that I virtually never use. I don’t see a point in including them in my generic reset code. If you find yourself using a particular set of tags more often then I do, by all means add them to your reset code. I tend to style tags such as and very differently from site to site so I do not include them in the reset.

The key here is to experiment. Develop a CSS reset tailored to your coding tendencies and the features the site demands. It will make ironing out the “why does my site look different in…?” issues down the road much easier.

Reusable Jquery Toggle

Jason — Thu, 02 Jul 2009 16:19:26 +0000

Jquery is a great tool. If you’re anything like me, learning JavaScript and getting it to do what you want is one of the most frustrating tasks imaginable. Jquery simplifies it to the point where you don’t have to be a coding God to make it do cool things for you. Here I share with you my reusable toggle script that hides content you wish to be hidden, then shows it by clicking a link, and then hides it again by clicking the link one more time. It is useful for many applications.

The Code

//
   // START ready function
   $(document).ready(function(){
 
	// TOGGLE SCRIPT
	$(".hide").hide();
 
	$("a.toggle").click(function(event){
		$(this).parents(".article").find(".hide").toggle("normal");
 
		// Stop the link click from doing its normal thing
		return false;
	}); // END TOGGLE
 
   }); // END ready function
 //]]>

Using the Script

Copy and paste the script into a new javascript.js file, name of your choice.
Download the latest Jquery minified build.

Link to both of these .js files within the tag of your site like this:

1 2	<script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script>

You’re done! Now follow the instructions on how to set up your XHTML to use the code.

Setting up the XHTML Markup

Now all you need to do is set up your markup like this:

<div class="article">
   <a class="toggle" href="#">Toggle This »</a>
   <div class="hide">
      <p>Hidden toggle content goes here</p>
   </div>
</div>

So here’s what you do: encase the whole shebang in a

with the class of “article.” You can change this class name if you want by changing the script.js you’ve created, but article works for me. Next include the toggle link. This link will display the hidden content inside the

that Jquery hid automatically for you upon page load. Click the link again and it is hidden again. Hence, toggle.

Here’s what happens: When the toggle link is clicked, Jquery then looks for the

with the class of “hide” that is within the

with the class of “article” that the toggle link also happens to be within. Therefore, you can reuse this markup as many times as you want without adjusting the script.

Examples

This markup:

<div class="article">
   <a class="toggle" href="#">Toggle 1 »</a>
   <div class="hide">
      <p>Hidden toggle content 1.</p>
   </div>
</div>
 
<div class="article">
   <a class="toggle" href="#">Toggle 2 »</a>
   <div class="hide">
      <p>Hidden toggle content 2.</p>
   </div>
</div>
 
<div class="article">
   <a class="toggle" href="#">Toggle 3 »</a>
   <div class="hide">
      <p>Hidden toggle content 3.</p>
   </div>
</div>

Produces:

Toggle 1 »

Toggle 2 »

Toggle 3 »

I hope you enjoy.

The Pickiest Client

Jason — Tue, 30 Jun 2009 03:25:19 +0000

I am my own worst critic. I mull for hours over every pixel of padding on every

element in my design. I relentlessly debate whether I should use #666666 or #777777 grey on the underlined portion of each link. Or wether or not that certain style of link should be underlined at all. Such is the way with personal projects. It’s not about what someone else wants – it’s what you want. And how often do we all know exactly what we want?

Working with a client is somewhat freeing. You get to collaborate. It is a communicative effort in which you share ideas and desires. You have a baseline to begin with instead of an absolute blank canvas. You are working with an individual or team of individuals who have a somewhat clear, albeit not entirely organized or refined, idea of what they want. Having restrictions in place often frees up the creative mind. By eliminating the possibility of endless possibilities, it helps the mind focus and begin creating. It helps one avoid the “writers block” predicament.

The usual process I use to discover the actual wants and needs of a client is to first have them plunk down in front of their computer and just surf the internet for a while. Their goal: to critique as many websites as possible to establish a good idea of what they like, don’t like, and absolutely have to have. This serves a dual purpose. First, it focuses the client. Most people know they want a website or they want a better website but they aren’t quite clear what sort of website they want or how exactly to make their current one better. Second, it provides inspiration for me to work from.

I absolutely believe that good web design is a form of art. There are thousands upon thousands of gorgeous websites out there. So many, in fact, that your client will most likely find a few and send you the links. It’s almost guaranteed. Most people inherently look for websites in their related field to critique. Real estate agents look at other agents’ sites. Churches look at other church sites. This is all well and good but I tend to encourage them to observe sites that have nothing to do at all with their related field because, frankly, certain fields of business tend to have some horrific websites.

Maybe that is what makes it so hard to design for yourself. You’re completely on your own. There is no one to guide you. No one to send you links of inspiration or to bounce ideas off of. If you work in web design you probably already have a folder of favorites full of awe inspiring websites made but some of the most talented designers out there. It can be inspiring and deflating in the same instance to view them all. But, probably most importantly, you have no one to simply tell you, “OK, I like it. Go with it.” No one to give you a deadline. No one to give you approval. It’s just you and your limitless available revisions, budget (assuming you don’t bill yourself for your work), and absolutely no deadlines.