New website launch: AngelWithCrookedFeet.org
Wednesday, July 16th, 2008Desert Web Designs is pleased to announce the launch of our latest site:
AngelWithCrookedFeet.org
The Site
AngelWithCrookedFeet.org is the online home to the Angel With Crooked Feet Foundation providing support, guidance, and counseling to youth and their families who are victims of sexual abuse and more. The Foundation was started by Anthony V. Sarjant Ph.D. of Show Low, Arizona and Gus Koernig of Mesa, Arizona. Together Tony and Gus authored Angel With Crooked Feet which chronicles the life of Tony, born with a club foot to a mother who didn’t want him. Through his years, Tony has suffered through time in and out of hospitals, petty crime, time in a juvenile detention center and later prison, sexual assault, the occult, marital infidelity, alcoholism, and suicide attempts.
It’s a story that proves, again and again, that God never gives up on us, even when we want to give up on ourselves. It is the story I’m telling because I know that reading about my experiences, my ordeals, my challenges, and my victories will help thousands of people, young and old, overcome the challenges in their lives.
The Design
AngelWithCrookedFeet.org was actually a website redesign that we did. The site was originally built by the client using Yahoo!’s SiteBuilder. As is generally the problem with site builders, the site was chunky and contained a large amount of extraneous code that not only cause the site to have the look it did (alignments were off, elements overlapped each other and burst out of their parent elements, hovers didn’t work properly, etc), but also increased the load time. So, the majority of the work was simply taking the existing website and the intended layout, and converting it to a small, fast-loading, clean, and of course, standards-compliant website.
In this redesign, the client did not wish to change the layout. He simply wanted a nice clean website. The first step in this redesign was to discern which elements/data on the page would be kept, and which images would be needed. After gathering the required elements and files, the next step was to redesign the layout based off the intentions that the client had with the original build. The layout for the most part was there, it was just clunky. In a redesign like this, I didn’t bother with the CSS at first, I simply wanted to get the code for the structure in place. After I had a lean standards compliant base to work off of, the CSS would be very easy to write and display the website in the intended manner.
The general structure of the website includes a main wrapper <div> that encompasses all the content on the website, a sidebar <div> with a navigation <table>, a main content <div>, and a footer <div> and that’s basically it. The reason for the main wrapper <div> is that the Yahoo! SiteBuilder had aligned all the content flush left leaving approximately 40% of the screen blank on the right hand side. Having this much blank space is almost standard for websites now, or at least is common, due to making sure the website will display fully on varying screen resolutions. However, the better way to display this much space is to center the content and have the space divided equally on each side which gives the appearance of the content taking up more space that it does.
So the design and the CSS weren’t to difficult for this site. The main thing I wanted to focus on for the client is getting that lean and clean website I was talking about. The two biggest differences between the Yahoo! site and the current site is the amount of code that was removed, and the navigation hover technique. As I said, the Yahoo! site had a lot of extraneous code in it, over 300 lines per page on such a small site. The current size of the site is just barely over 50 lines for the ‘home’ page and the ‘about’ page and just under that for the content page, and of course is 100% W3 HTML 4.01 Standard Compliant.
The second reason for the smaller sizes is I changed the mouseover technique used on the navigation links. Previously the mouseover was handled via Javascript. Currently with the use of Image Sprites (post to come soon about these) and the CSS 2 :hover pseudo-class, we were able to duplicate this same functionality without all the Javascript getting in the way. Basically what CSS Sprites do is takes multiple images and combines them all into one, then uses the :hover pseudo-class to reposition the background image when hovered over or selected to show the current image “state.” There is one minor drawback to the :hover element. It is not supported in IE 6 and below on any elements other than <a> tags. To quote Andy Budd from CSS Mastery: Advanced Web Standards Solutions
This is an embellishment rather than an important feature…Users of more modern browsers will appreciate the added usability benefits, while those using IE 6 and below will be unaware they are missing anything
However, using Dean Edwards’ IE 7 scripts gives this functionality to versions of IE that are missing it using just a small 30KB Javascript file.
Overall this was a simple redesign for us that took just over 3 hours to complete, but was a huge improvement for the website and the client was extremely satisfied, not only because of the vast improvement in his website, but also because of the cheap price of the redesign since it didn’t take us long to make these changes. All in all, AngelWithCrookedFeet.org includes the following services:
- HTML
- CSS
- Javascript
P.S. We are currently working on two corollary sites to go along with AngelWithCrookedFeet.org. These are AngelWithCrookedFeet.com and AngelWithCrookedFeet.info, which will have information articles about the Foundation, Inspirational/Motivational Speaking, Surviving Sexual Abuse and Child Abuse, and more, as well as give users the ability to schedule Tony for speaking engagements and the like.
Posted in Site Launches | 
Email This Post
| No Comments »
Here’s an example of some of our wireframes
