Desert Web Designs Blog

Desert 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.

Book Review for:

CSS Mastery: Advanced Web Standards Solutions

by Andy Budd with Cameron Moll & Simon Collison

This was the first CSS book that I purchased. I was always hesitant to purchase a book on CSS because most of the resources that I’ve found have been mostly beginner’s tutorials or instruction and I felt that I had at least a “beyond beginner’s” understanding of CSS. I wouldn’t go as far as saying I’m an expert at CSS, but at least mid-level to advanced. However, this book had some previous good recommendations from amazon.com so I bit the bullet and bought it. I must say that I was NOT disappointed!

This book starts off with a very quick introduction/recap of CSS basics including good code structure and organization, validation, DOCTYPES, common selectors including IDs and classes, pseudo-classes, and the advanced selectors such as universal, child, attribute and more, and some wonderful reference on the specificity and inheritance, or the “Cascade”, the core of CSS. Although this introduction is provided, it is relatively short at about 25 pages and I would suggest a good working understanding of these basics first, as it will help understand the rest of the book easier as opposed to trying to learn CSS for the first time from this book. The following chapter is another quick 15 pages with on “Visual Formatting Model Recap” including the Box Model and Positioning, two EXTREMELY important concepts to understand CSS properly. Although it is short, it is an extremely powerful section.

Chapter 3 finally jumps head first into the code with “Background Images and Image Replacement.” With the movement towards “Web 2.0″ websites, one of the most common features you’ll see in these websites is rounded corners. These can be difficult to achieve successfully and the authors make it very easy. This chapter also touches on different drop shadows and image replacement techniques, which are useful for placing a logo in place but still having the text remain search engine friendly. Chapter 4 is a fairly short chapter on “Styling Links” with some interesting uses of attribute selectors.

Chapter 5 is all about “Stylig Lists and Creating Nav Bars” including the popular “Sliding Doors” popularized by Douglas Bowman of Stopdesign and first published in October of 2003 in A List Apart online magazine. During the section on creating nav bars, this chapter shows how to use CSS sprites for rollovers and visited links, something which I’ll be blogging about soon. Chapter 5 also shows how you can use CSS to create image maps, something I’ve never even thought of doing with CSS.

The next two chapters are two of the best in the book I think. Chapter 6 deals with “Styling Forms and Data Tables”, while Chapter 7 tackles “Layout”. I think that styling forms properly can be one of the most difficult things to do in a website Chapter 6 shows some good tips and tricks to handle this properly. After all the chapters on styling elements, comes the final code chapter which deals with Layout and shows how to center designs, create two and three column layouts, and liquid, elastic, and hybrid (elastic-liquid), or fluid, layouts.

As any web designer knows, IE doesn’t do the best job of displaying HTML and CSS properly according to the W3C. Fortunately, the last two chapters in the book are about “Hacks and Filters” and “Bugs and Bug Fixing”, two excellent chapters for dealing with the countless IE CSS bugs. Finally, the last two chapters of the book are Case Studies that put everything together and take you through building two different web sites in a Web Standards way with CSS.

Overall, this is an excellent book, one I’d highly recommend to any web designer, or CSS developer, looking to expand their knowledge of the powerful language that is CSS. Definitely worth adding to your library. On an additional note, this book is published by Friends of Ed, a fantastic publisher of technical books, and one of my favorites. I currently own 8 books published by “Friends of Ed” and 2 more from their parent company Apress, all of which are excellent books.

Paperback: 280 pages
Publisher: friends of ED (February 13, 2006)
Language: English
ISBN-10: 1590596145
ISBN-13: 978-1590596142

This is the first of many book reviews coming from me. I feel that in the industry I’m in, the learning never stops. The web is a constantly changing place and in order to stay competitive, one must stay current (or as current as possible) in all facets of the web and wear as many hat’s as possible. I have a large, and ever-growing, library of what my wife affectionately calls my “nerd books” So be it. I’m fine with that designation. Many of these books I’ve read, and obviously the ones I havn’t, I plan to. Keep in touch to read more of my book reviews and recommendations ranging from SEO to PHP, CSS to Ajax, and more.

Book Review for:

Professional Search Engine Optimization with PHP: A Developer’s Guide to SEO

by Jaimie Sirovich & Christian Darie

A quick note about this review. This review was written approximately a year ago when I was still new to, and learning, PHP and SEO. I am posting it here now as I am starting a new Book Reviews category for this blog.

I am still somewhat new to PHP and this was my first book I’ve read on SEO. However, this book was packed full of great information for programmers. I never realized that there’s so much that can be done from a architectural standpoint for SEO. I will definitely be referring back to this book on a regular basis in my future web developments.

One thing to keep in mind, this book is not for search engine marketer’s. Although the authors do explain the reason behind the methods they provide, about half of this book is PHP code. This book is designed for improving ranking during development and design of the website, and not after publication. I learned that there are two facets to SEO; the architecture and design of the site and the marketing of the site. This book addresses the former.

The only thing that kept me from giving this book 5 stars is that the book was primarily geared towards an e-commerce site with a majority of the examples directed as such. Now, most e-commerce sites do implement PHP, there are plenty of other sites that implement it as well that do are not e-commerce. I understand that SEO is relatively easier on these sites, but there are plenty of methods and examples that can be implemented on any site, not just e-commerce such as; URL Rewriting via mod_rewrite, 301 redirects, duplicate content, sitemaps, link bait, and more.

Overall, still a great book and well worth the price and the read. I will definitely looking for more titles from these authors.

P.S. Author Jaimie Sirovich has a tremendous SEO Blog site that while reading this book quickly became one of my favorite sites.

Paperback: 350 pages
Publisher: Wrox (April 16, 2007)
Language: English
ISBN-10: 0470100923
ISBN-13: 978-0470100929