Web Development Blog

OK.. so this is something I need all the time and I thought that it might be cool to have it in a place where I can access it quickly, but also have the ability to update it as I see fit…

So here we go… my reference page for special HTML characters.

I hope you find it useful too

Special HTML Characters

Somewhere between wishing I was a doctor or an astronaut and wondering exactly how many razor blades it would take to shave a wookie, I actually made time to make a screencast about something me and a colleague had a conversation about.

We were discussing exactly how flexible Droppy really is, and his main question was if it was easy to change the text navigation item into a graphic one.

Having awesome and edgy navigations is such a big part of what I do every day… So I decided to make a video tutorial on how to change the top level of a “Droppy” drop down navigation from simple CSS text into images (with roll-overs).

Its four installments of 5 minutes each. I have the SWF files and then I also created projector files in case you would like to save it on your local machine

Episode 1 (exe)
Episode 2 (exe)
Episode 3 (exe)
Episode 4 (exe)

Here are the links as promised:

The zip file containing the example I coded:
topnav.zip

Droppy:
http://plugins.jquery.com/project/droppy

jQuery
http://jquery.com/

If there is one thing we really love at the development department at work, it’s open source software, and somewhere, high on that list, you will find Wordpress, the super cool online publishing platform.

In fact, we love Wordpress so much, that sometimes one of us gets to close our eyes and pretend one of the other developers is a Wordpress and then later that developer can do the same to one of the other developers.

Wordpress is great platform that doesn’t really require any 3rd party extensions to perform perfectly for almost any small to medium sized website, but every once in a while you will get a request that’s just a little out of scope. To fix these “problems”, Wordpress comes standard with the ability to support 3rd party extensions (also known as plug-ins).

Here is a list of my top 5 favorite plug-ins to use on your next online project:

Members Only – This plug-in is my favorite. It’s quite a nifty extension that allows you to restrict the contents of your site to logged in members only. This is great for something like an online directory of contacts or any information that might be too sensitive to just lie around online.

BM Custom Login – This plug-in is my favorite and is great for two reasons, if you use it in conjunction with the Members Only plug-in, you can have a complete custom looking front-end to your private site, the other use is off course a completely custom looking backend login screen if you decide to use Wordpress as a CMS for your next client.

Role Manager – To start off I need to mention that this plug-in is definitely my favorite and the reason is because it allows you to completely customize the roles of the user profiles that comes standard with your Wordpress installation. So, as the person who built the site, you can have full access to administer the site and all its functions while the person who populate and updates the site can have a profile that only allows them to amend the content of the site.

Clutter Free – This plug-in goes hand in hand with the Role Manager plug-in and the reason I say this is because it allows you to switch parts of the “write” screen, in the back-end on and off, ensure I nice and clean environment for your end user to publish and amend website content. Because this plug-in is so awesome, I have to say that it’s definitely my favorite.

Maintenance Mode – I have decided to leave my favorite one till last. The Maintenance Mode plug-in is a pretty straight forward extension that allows you to close your site to outside visitors when you are doing upgrade or other tasks on your site. The visitor will simply be met by a screen that tells them that your site is down for maintenance and that they can check back in 60 minutes or so. A Must have plug-in.

All of the above plug-ins have been tried and tested with the latest version of Wordpress (2.5.1).

So you got this totally awesome project to code, it’s not CMS driven and it will probably have to happen in HTML. There’s just one problem, you have 4 days to roll out the entire site, and did I mention the site is composed out of approximately 40 individual pages?

In this article, I am hoping to show you a simple technique, using PHP, that will make the project a little easier to manage and hopefully also reduce the amount of time spent on updating the site’s navigation across the +-40 pages.

What we are going to be coding is a site-wide navigation that can plug into all the pages. It will also do an “active” state for the active page that you are on.

OK, the first thing we do is we rename all of our html pages to php, next, we create a folder called “includes” and create a PHP file inside called something like navigation.php.

Now, go to your coded page that already contains the navigation you want to replicate across all the pages and cut it out of the code and paste it in the navigation.php file you just created. (Just that code snipped, nothing else)

What you need to do now is to include this navigation on all the pages so that you only have to edit it in the navigation.php file to edit the navigation across all of the site’s pages. To do this you can simply replace all instances of your current navigation with the following line of code:

<? php include(“includes/navigation.php”); ?>

We are half way there. To make a navigation change, you now only have to go to navigation.php to do the change and it will reflect across all of your site’s pages.

For some people that might be enough, but let’s face it, if you want to code a site that’s worth anything, the navigation needs to reflect your current page.

Now, for your navigation.php file to know on page it’s being included, you need to identify all of your pages with a unique name or id. (I tend to use the name of the file, minus the extension. This keeps it simple). To do this, simply add the following line to the very top of every single page: (Yes sailor, the VERY top, above the doctype)

<?php $pagename=”unique name here”; ?>

So now that you have done that, we just need to edit the navigation.php so that it can recognize the individual pages and then apply the appropriate styling as needed.

Let’s do this!

So, let’s say that you coded the navigational links embedded in list items and to mark the link active for a certain page you need to add class=”active” to the <li> of that specific link. Your navigation.php file can now do this automatically. You can simply add a small chunk of code to, in this case, the <li> tag, so that it looks something like this:

<li<?php if ($pagename==’unique name 1′) echo ‘class=”active”‘; ?>><a href=”unique.php”>Unique Page 1</a></li>

See… easy! This is all you need to do to save a ton of time and cut out a lot of monotonous editing across the entire site when a request for changes gets thrown your way.

Personally I have been using this method for at least a year and it probably saved more hours than needs to be mentioned.

Oh yes, and one more thing, don’t get fooled by the fact that we used it in a site navigation, if you allow your imagination to run wild you will soon see that this can go way, way, beyond that…

* Off course, by everyone, I mean somebody with some sort of grasp of code (even a little bit will be sufficient). This off course, almost completely excludes account managers and 87%** of designers.

** OK, OK, I completely made up that number, but it sounds vaguely genuine when it’s an odd number like that.

One of my day to day working requirements is the ability to code mailers that’s compatible with all the major email clients and that off course includes the new stubborn member of the family, Outlook 2007.

By following the following set of guidelines you will be able to code mailers that will not only look good, but will also work in most email clients.

1. Do not use divs or any styling associated with div layouts. That means no floating, no padding or even margins. Rather use table, I know its old school, but this tried and tested and it works

2. Do not use styles in the head section of your page. Some coders tell you that you can, but you need to move it inside the body section. I find this practice to be equally ineffective. Rather use inline styling… I know it can turn out to be a lot more code, but most of the time you can get away with a lot of copying and pasting.

3. Do not use any form of background images. Previously you could successfully call background images by using the background= command in tables, but Outlook 2007 killed that for us as well… so if you are in a company where your responsibility does not include design, you can create an email design guideline document for the designers to use when designing.

4. OK, so now we are using tables… now we have to learn to use these tables to the maximum. Try not to use tables within your tables. Try using single tables. The reason for this is that Outlook 2007 will discard background colors if it’s for a table within a table or if there is another table in that cell. I always try to use colspan= and rowspan= to their full potential, otherwise I will split the mailer code up into smaller tables.

5. Do not leave measurements open for misinterpretation. Rather use the width= and height= properties on all your tables, td and img tags. This is not as important as some of the other guidelines, but I find that the less I leave to chance the better the initial outcome.

6. Do not use the paragraph tag to space lines of copy, rather use double break tags where the spacing should go. Some coders insist on using the paragraph tag and then styling them inline with margin 0 and padding as desired, but I find these methods to fail horribly on the web based clients like gmail, yahoo and hotmail.

7. Do not use the border css property on tables, as it will not end well. If you need to insert table content in your mailer (like a pricelist or something similar) and it needs to have a border, make cellpadding what you think it should be and make cellspacing= 1 and give your table a bgcolor. Now give each td bgcolor= #ffffff . This will give your table cells a border that will work on most of the clients.

There we go, I can’t think of anymore at this present moment. Maybe there is guideline you use when coding mailer? Feel free to add your tips and guidelines in the comment section below!