On the back of the parking ticket there is usually an address where you can request a hearing by mail. If you send in a letter explaining the circumstances of the ticket, you will get back a letter that gives you two options. Either pay a reduced fine or wait for an Administrative Law Judge to review the ticket.

The reduced fine is roughly a 33% savings off the initial price of the ticket. If you get a couple tickets a year this can be a substantial savings.

I once received a ticket that I was sure I would get dismissed, but they found an error on something and I had to pay the full fine. Unless you are absolutely sure you have a rock solid story, pay the reduced fine because after they review it you can’t request the reduced fine. I keep a standard letter that I use every time, so it is easy to request a hearing by mail and get the reduced fine.

If you have a parking ticket savings tips, feel free to add it below.

Post from: Michael Doig

How To Save 33% On Parking Tickets

I started out by scanning the sticker. I needed to make the sticker black and white so I could make a selection in Photoshop using the channels.

I took that selection and turned it into a work path that I exported to Illustrator. From Illustrator I exported the paths as an Illustrator 8 file and brought them into Cinema 4D. The paths come into C4D with some extra junk that needs to be deleted so we can get to the path that contains the logo information. I extruded the logo using a NURBS object, textured it, and added a few lights and a camera and my transformation from 2D to 3D can be seen in this Indy Mogul logo animation.

I really like this work flow because it is super fast and it saves me from having to trace, model, or duplicate the logo. This technique can be used to transform your logo into a 3D logo for use in your show or for a client project. I’ve also created a video tutorial explaining how I achieved this. If you have any questions please leave a comment below.

Technorati Tags: 3D, Cinema 4D, Eric Beck, Illustrator, Indy Mogul, Photoshop, tutorial, video

Post from: Michael Doig

How To Change a 2D Image Into a 3D Object (Video)

A few hundred miles south in New York City, I was disappointed to learn that the same rule does not apply. People stand on both sides of the escalator and it prevents stair climbers like myself from passing.

What is going on? Some claim that it is due to the tourists in New York City who are unaware of the rule. Perhaps it is a cultural thing, New York is definitely more culturally diverse than Montreal. I’m not sure that we will ever know why two place that are so geographically close have such different rules for riding escalators.

I tend to visit websites (designers and developers) that are like Montreal, they understand the rules of linking. They use proper anchor text and all is right in the world. I still come across sites, however, that link with here or click here. It is 2007 how can people not know how to link properly? It is probably due to the number of tourists that the web receives, so I’m going to let some of you who aren’t locals in on the rule.

Anchor text, what is it?

Anchor text is the visible word or words that you click on to visit another web page. For instance, if I wanted to link to my friend John Foster’s Beer School site I would link to it as Beer School. The words Beer School are the anchor text, and beer and school are the keywords.

Does it even matter?

Yes, using anchor text and keywords in the link communicate to search engines such as Google or Yahoo what the link is about. Since you are linking to a site or article, you probably want others to find that content as well. Using proper anchor text increases the likelihood of that site being found by someone using a search engine. If enough people all use the anchor text Beer School and link to John’s site, his site will end up higher in the search results.

Guess what, if you search for Beer School his site is number one.

Now you know the rule, so you are no longer a tourist. You should use proper anchor text any time you link to something, and next time you are in New York don’t stand on the left side of the escalator.

Technorati Tags: anchor text, beer school, John Foster, web

Post from: Michael Doig

The Art Of Riding Escalators or How To Use Anchor Text

Chapter 4 talks about setting up a page similar to my portfolio page where you have a title with a description under it and an image to the left or right of the text block. My site is already css based and my portfolio images are floated, but Dan talks about using definition lists, which I haven’t used before. So lets begin.

A definition list is similar to an unordered list it consists of an outer <dl> element, with any number of definition terms <dt> and descriptions <dd>:

I went and read up on definition lists at the W3C site to find out more www.w3.org/TR/html4/struct/lists.html#h-10.3

The markup you need is a definition term, a description, a photo, an outer containing element set to a width, and an optional border.

Dan does point out that while we are using definition lists for the example there are many other ways to achieve the same result, about half way through I was kicking myself for changing, but I think the learning lesson was worth it.
Next we want to add a class to each <dd> element so we can control their style and floats:

After the markup is set we’ll apply the styles:


#portfolio{
float: left;
}

.portfolio_p {
padding: 0 0 10px 0;
margin: 0 0 10px 0;
line-height: 1.3em;
border-bottom: 1px solid #999;
}


If you want to know exactly why we did each of these things you’ll need to peruse the book. This was by far the most tedious chapter. You can see my results and check out my code on my portfolio page and podcast pages. I added a few things that weren’t in the book, and I think the results are satisfactory. Let me know what you think. As always see you next Tuesday.

Technorati Tags: bulletproof, design, web

Post from: Michael Doig

Bulletproof Tuesdays – Ch. 4 – Creative Floating

A common way of designing these bars is using using nested tables and spacer gifs, which are undesirable because they prohibit vertical expansion. If you want to increase the text size or update the bar with more content, the layout becomes broken. Designing with tables and spacer gifs you end up with nonessential graphics, a fixed height, and code bloat on top of less flexibility.

A more Bulletproof approach is to not use tables at all, but to use divs. To start well need to parts, an unordered list and a div wrapped around a paragraph. I won’t bore you with code, and there is plenty of it in the book, but what makes using divs instead of tables far superior is the fact that you separate your presentation from your content and that it can expand with no extra effort on your end.

I don’t have any rows like this on my site to show as examples, but maybe I should add one to the redesign. Two great techniques that I took from this chapter are using opposing floats to put content on either end of a row and the use of style hooks. Using id’s to attach style to unordered lists and divs. Very clever stuff.

If you have any questions feel free to leave a comment. Otherwise I’ll see you next Tuesday with Chapter 4.

Post from: Michael Doig

Bulletproof Tuesdays – Ch. 3 – Expandable Rows

The site used JavaScript and image based navigation, this is typically the type of navigation you’d get from slicing up images in Photoshop and exporting them from Imageready. While it might look nice on the surface, the result is actually tons of code, which is not particularly easy to update, non-scalable buttons, and just a general lack of flexibility. If you’re currently using this type of navigation, don’t worry there’s help on the way.

The Bulletproof approach is best explained on A List Apart in an article titled Sliding Doors of CSS. I used this same article to build the navigation on this site. Go ahead change the text size and watch the tabs effortlessly grow and shrink.

I’m not going to post any code on this topic because the Sliding Doors article pretty much covers it, but I’ll cover the basic idea. You’ll start with a standard unordered list such as:

• Home
• About
• Portfolio
• Contact

Once you style them to float, they become horizontal. Two oversized images are used to create the tab backgrounds and this is where the scalability comes in. Because the images are larger than you need them to be, if someone changes the text size the two images slide open and adjust to the new text size.

The id=”1″, “2″ etc. is used for for a current state tab. When the page is on that tab, the tab is highlighted. You can see this on my site as well.

The benefits are obvious, simple mark up, scalability, and update-ability make this a much easier and smarter approach to navigation. Check my style sheet or follow the Sliding Doors article and you’ll have scalable navigation in no time. Go around and see if your favorite sites are using this technique. Looking at other sites is also a great way to gather some design ideas.

If you have any questions feel free to leave a comment. Otherwise I’ll see you next Tuesday with Chapter 3.

Post from: Michael Doig

Bulletproof Tuesdays – Ch. 2 – Scaleable Navigation

If you take a look at these screenshots it becomes obvious that not all browsers are created equal. Even if they are fed the exact same code. So what do you do? Based upon what I had read earlier on The Noodle Incident site I’ve been setting the body text size to 76% and adjusting the rest of the text using em’s.

Dan Cederholm on the other hand recommends the Bulletproof technique of setting the base size using absolute-size keywords. Basically you want to set your body font-size to: small and adjust the headings, etc. using percentages. So even if you text size isn’t perfectly consistent across browsers the ratio between your font sizes will be.

Letting go of “pixel precision” and allowing your users to adjust the font size as they see necessary is a big step in the right direction. So what exactly should your CSS look like? Well the simplified box model hack (sbmh) is probably the best. It solves an IE5/Win bug that renders text larger than it is in other browsers. The sbmh looks like:

body {
font-size: small;
}
* html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}

So once you’ve got your set your body font-size to small, what do you do next? Now you can use percentage to adjust the rest of the text sizes. So you would have something that looks like:

body {
font-size: small;
}
h1 {
font-size: 150%;
}

There are a few more pitfalls to deal with when using this method, but I’ll let Dan tell you about that in the book. This chapter is pretty basic and straight forward, and next week should be more interesting. I had a few challenges implementing the keyword method, I had to make adjustments to some line-heights. When changing em’s to percentages I just changed 1.1em to 110%. Overall it seems to work great and I bet you can’t even tell I changed anything, which is the whole point.

For more reading on the subject of text sizing check out:
Size Matters
The Noodle Incident

Post from: Michael Doig

Bulletproof Tuesdays – Ch. 1 – Flexible Text

MAMP Resources

MAMP.info

How To Secure MAMP

How To Fix WordPress Permalinks in MAMP

Create a Web Development Environment With MAMP

MAMP, Headdress, and Quicksilver

Setting up a Web Server on Leopard (OS X 10.5) Using MAMP – A Step by Step Guide

Video – Mac Server Series: Install WordPress On Your Mac Using MAMP

Command Line MAMP

Post from: Michael Doig

MAMP Resource Links

I’m going to implement some of the suggestions in the book, but instead of just doing this behind the scenes I’m going to include you in the process. Starting next Tuesday for 9 weeks I will be covering a chapter a week. Each week I’ll give a brief overview of the chapter, implement the suggestions to this site, and answer questions for those of you who would like to follow along. This will be a safe place for you to ask questions and glean some information from your peers. If you don’t know anything about css or xhtml, you might learn something by just watching. I’m hoping to push some of you to clean up your code so your site will be accessible to the widest possible audience.

If you pick up your copy of Bulletproof Web Design now you should have enough time to get through chapter 1 when we start next week. If you already have the book this is your chance to really get your site together.

If you have no idea what any of this even means but you are interesting in creating your own web site, check back later this week. I’m in the process of putting together a beginning css and xhtml video tutorial series. The videos will guide you through understanding css to making your first css and xhtml site.

See you next Tuesday.

Post from: Michael Doig

Bulletproof Tuesdays – A Read-Along

I go through how I use MAMP together with WordPress. I hope this gives you a few ideas on how you can use it as well. I tried to answer as many questions as I could, however I’m sure I just stirred up some more so please leave your questions or comments.

Post from: Michael Doig

MAMP Video Tutorial Now Available