Hendeca Design

5 Great Beginning Web Design/Development Books

Neal — Fri, 29 Jan 2010 07:09:56 +0000

It’s hard to know where to begin when you’re buying your first book in an attempt to learn a new skill. Always make sure to buy the newest edition of any web design or development book you’re interested in, because times change and so do the best-practices for each language. There’s no such thing as a perfect book, so make sure to Google anything you don’t understand so you can find reference material to inform you. In many cases, this will allow you to get much more out of any book you read. There’s a wealth of great information out there, but it’s these 5 books that I found exceptional for beginners:

1. Designing with Web Standards (3rd Edition)
by Jeffrey Zeldman

Zeldman’s Designing with Web Standards isn’t so much an instruction book on web design as it is a clear and concise explanation of idea behind web standards. When I read this book, I hadn’t touch any web-based code since the days of tables and font tags. Zeldman laid it all out in this book, explaining how the web went from the clunky combined structure and styling of early HTML to the sleek and sensible separation of structure and style with XHTML and CSS.

In addition to the great history lesson about the web as well as a great introduction to the new web standards, Zeldman also goes over the basics of combining XHTML and CSS to design a website. If you’re wondering what all the hubub is about Web Standards, this is the book for you, and a great book all around for someone trying to break into the field of Web Design.

2. CSS Mastery
by Andy Budd

For a web designer you can never be too well-read on CSS. Once you understand the basics, there are still tons of useful advanced techniques to learn. Browser inconsistencies are always a problem, and there are a slew of workarounds and best-practices to solve them.

In CSS Mastery, Andy Budd starts by explaining the box model, something that will come in handy for the rest of your web design career. Understanding the box model will help you grasp the way that layout elements behave (and how they misbehave in Internet Explorer!). Andy covers all the bases including menus, text, layouts, rollovers, and everything else.

CSS Mastery goes into moderate depth on a wide variety of topics. Books on more specific CSS subjects will co into more detail than CSS Mastery, but the well-rounded range of crucial subjects is much better for beginners. Any topics that you still have problems with after reading this book can lead you to other, more specialized CSS books. For someone trying to dive into the world of CSS, this is my #1 pick.

3. PHP Solutions: Dynamic Web Design Made Easy
by David Powers

David Powers knows exactly what to include in a book for beginners. In addition to going over the basic syntax and structure of the language, David includes everything you need to know to install PHP and set up your own testing environment to try out all of the book’s wonderful examples. The examples in the book are both well-explained and useful. From examples as simple as includes to more involved projects such as a database-driven photo gallery, Powers rarely loses his audience, no matter how new they may be to the language!

If you’re interested in web development, this is a must, since PHP is such a widely used language, and the driving force behind many popular CMS’s including Wordpress (the CMS used for this webpage among countless others). I highly suggest using php.net’s documentation as reference for any classes or functions you don’t fully understand.

4. Bulletproof Web Design
by Dan Cedarholm

This might be a better follow-up to CSS Mastery by Andy Budd, but it teaches many CSS best-practices in a very sensible way. Dan introduces a commonly used CSS technique, then explains why it’s not the best solution. Next a better solution is introduced, and Dan explains exactly why it’s an improvement. It’s simple, but effective, and it makes sense to seasoned CSS gurus and beginners alike.

Bulletproof Web Design bridges the gap between simply understanding CSS, and understanding the best way to use it to create a great site for every browser (and browser setting). Dan’s website www.simplebits.com is also a great resource, and he has a few other books worth checking out as well!

5. Actionscript 3.0 for Flash and Flex
by Sean McSharry, Steve Webster, and Todd Yard

Ok so I guess some would say that Actionscript 3.0 doesn’t fit into the web development genre, but I’m sure there are plenty of you out there interested in flash, and flash is still a huge part of the web today. Don’t get me wrong, flash has its time and place, but there are some web apps that are best suited for Actionscript 3.0! Also keep in mind that there are versions for Flash CS3 and CS4, so it’s up to you which version to get depending on which version of flash you have.

That said, I think this book is about the closest I’ve found to a good all-around introduction. Like some of the other books on this list, it is good for beginners because it is well-rounded. After explaining the basics of the language, it goes on to show you numerous techniques and practical projects in many different areas of interest. I suggest this book as a way to get acquainted with the language, while further books will help you gain a greater understanding of the more specific functions that suite your needs. Actionscript 3.0 is a language capable of doing so many things, so it’s nice to have a book like this to introduce you to some of the most used functions of the language.

I find a lot of Actionscript 3.0 books lacking in their explanations for beginners, and this book has moments of confusion, but to me it is the closest I’ve found to a book for beginners that explains everything in an easily understandable way. That said, make sure you always keep your Actionscript 3.0 Language and Components Reference open in case you come across something you don’t understand.

Background bug in IE6

Neal — Wed, 27 Jan 2010 22:42:16 +0000

I came across a pretty frustrating IE6 background bug a while ago and it took me a while to figure out the surprisingly simply solution! Well, technically this isn’t a bug. It’s technically a user-error, but the code (albeit incorrect) works in most modern browsers! Take a look at the following code:

body { background: url('images/bg.jpg')top left #fff no-repeat; }

If you try this code in Safari or Firefox, it will work perfectly. You will see the background image positioned at the top left with no-repeat and with a white background. However, IE6 will render no background! Strange, no? Quite strange. The problem is the lack of a whitespace character between the background url and the position declarations. I became so used to Firefox and Safari’s lax handling of this code that it took me forever to figure out that one little space was causing all of my problems! The following code fixes the problem:

body { background: url('images/bg.jpg') top left #fff no-repeat; }

Hopefully this post will save someone some frustration!

Using the Wordpress Page Name as a Body Tag ID

Neal — Sun, 03 Jan 2010 23:53:19 +0000

This is my first tutorial. Ever. So please let me know if there is anything that needs improving or if you have any questions, comments, or suggestions. That said, I hope this helps someone out!

I’ve found that it’s often easier to work on a webpage with body tag ID’s. Luckily, you can add these automatically to every page in Wordpress! Now if you need to style your Blog page elements differently than your Contact page, you can simply add the #Blog selector to any rules that apply specifically to your Blog page. All we need to do is add some code to your Wordpress theme’s index.php file. Here we go:

To start, we need to pull in the page name. There’s a Wordpress function for this:

$pagetitle = wp_title("","0");

You can read all about wp_title() here. We have the separator character set to nothing (hence the empty pair of quotes) and because we’re placing this value into a variable, we are keeping the second parameter as zero. This keeps Wordpress from automatically echoing the page title, and instead gives us a php string. (If that doesn’t make sense, don’t worry it’s not important to know exactly how the wp_title function works.) Unfortunately there’s a problem. The value returned by wp_title(“”,”0″) has a single whitespace preceding it. It’s an obnoxious bug specific to this Wordpress function. I’ve tried many different combinations of parameters, but this bug persists. No problem, we’ll simply strip the whitespace off of the beginning of the string with ltrim(). So now we have:

$pagetitle = ltrim(wp_title("","0"));

Alright, everything’s working fine, now, right? Wrong! We’ve got another problem. Let’s say you’re on a page called “What We Do”. Well if we look at our body id tag name on a page called “What We Do”, we’ll see that the id name now has spaces in it! This won’t do, as it will cause all kinds of problems for us when we try to style items that reside specifically on the “What We Do” page! So we’re going to need to cut this down to one word. Let’s strip the whitespace from the body id name. We’ll do this by using str_replace. We’ll replace each whitespace character with an empty character, effectively deleting it from the string. Here’s the code:

$pagetitle = str_replace(' ', '', ltrim($pagetitle));

We’re not done yet though. I like to keep my id tag names lowercase, so let’s get rid of those pesky caps. We’ll convert the whole string to lowercase characters using strtolower():

$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));

Now we’ve got a nice, clean id tag name. It’s a single, lowercase name that reflects the page title. I know it seems like we’re finally done, but we’re not! What about the home page? Well in Wordpress, your home page doesn’t return a string at all when you use the wp_title() function. So we’re going to need to account for that with a simple if statement:

$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));
if (strlen($pagetitle) == 0) {
    $pagetitle = 'Home';
}

This if statement checks to see if we’re on the home page by counting the number of characters in the page name. If we’re on the home page, the wp_title() function won’t return anything, and the character count will be zero. If the character count is zero, we can set the $pagename variable to the name of our homepage. In my example, I’ve used the name ‘home’. But you can change it to whatever you want your home page to be called.

Alright, one more thing. You’ll notice that if you click on a specific blog post, the body tag id name will be the same as the name of the post. This throws a wrench in the gears because now any styles that we wrote specifically for the blog page won’t show up for the individual blog post! To fix this problem I recommend going to your ’single.php’ file and wrapping the conent in a div with the same id name as your blog page. For example, if your blog id tag name is ‘blog’, then wrap your ’single.php’ content in a div called ‘blog’. That way all of the styles that we wrote for the blog page will still apply to individual posts.

Well, that’s all! I hope this helps make your Wordpress theme development quicker and easier!

Website redesign complete!

Neal — Sun, 03 Jan 2010 01:55:09 +0000

I finally finished my website redesign! I’m hoping to start a series of tutorials, so stay posted for that. Until then, feel free to browse my portfolio and contact me if you’re in need of a new site!

Hendeca Design

5 Great Beginning Web Design/Development Books

1. Designing with Web Standards (3rd Edition) by Jeffrey Zeldman

2. CSS Mastery by Andy Budd

3. PHP Solutions: Dynamic Web Design Made Easy by David Powers

4. Bulletproof Web Design by Dan Cedarholm

5. Actionscript 3.0 for Flash and Flex by Sean McSharry, Steve Webster, and Todd Yard