Archive for the ‘HTML and CSS’ Category

Features and characteristics of a great 404 error page

Friday, May 23rd, 2008

No matter how carefully you design your site, visitors will always request a page that is missing, moved, or non-existent (especially if you experiment with your site structure frequently). This past week, I’ve been obsessed with HTTP 404 errors and working on creating a better 404 Not Found page. The default 404 page for WordPress offers the opportunity to search the blog, but you should go another step. Usability is one of (if not the) key trait of a great website. If thought has gone into even your 404 error page, then I’d guess that much thought has been put into your entire site. (more…)

Change media and images to full size in WordPress media gallery

Wednesday, May 21st, 2008

I’ve been familiarizing myself with WordPress 2.5’s new media gallery. If you’ve visited my blog before, you know I don’t upload many images, but I’m hoping to upload many images to my wife, Rachel Steely’s website. I was annoyed to find out that the default image posting size is medium (which is about 300px). On top of that, if you select full size, it doesn’t mean full size. It means your WordPress theme’s column width. So unless you are using Kubrick your media size will not be your column width. (more…)

Plain text link to HTML with a PHP function and regular expressions

Wednesday, May 7th, 2008

If you have ever wanted to turn a plain text link, http://www.smjdesign.com, into a “linked” HTML version, http://www.smjdesign.com, you can know. Pass the following function your entire text field and it will find all your links and return tagged HTML.

function replace_plain_text_link($plain_text) {
$url_html = preg_replace(
'/(?<!S)((http(s?):\/\/)|(www.))+([w.1-9\&=#?-~%;]+)/’, ‘<a href=”http$3://$4$5″>http$3://$4$5</a>’, $plain_text);
return ($url_html);
}
echo replace_plain_text_link(”hi this is dummy text before http://www.smjdesign.com hi this is dummy text after”)

(more…)

Graphic web design and cascading style sheets

Sunday, February 10th, 2008

On Saturday, February 9 at 11:30 am, I spoke at BarcampIndy 2008 on Graphic Web Design and Cascading Style Sheets. All presentations were broadcast on UStreamTV.

The premise of my presentation was to show an overview of the process between layout in Illustrator and PhotoShop to coding in HTML and CSS. I find that web design is often segmented between the coders and graphic designers. I propose that the best outcome can come from bridging that gap. I do this in my daily workplace and try to show tips and techniques for others to bridge that gap. The time slot was only a half hour, so I could not go into coding detail, but only point to tutorials via links. (more…)

HTML standards in email clients: Oh, the horror!

Sunday, December 2nd, 2007

A new HTML standards for email clients advocacy site has sprung up. It’s called Email Standards Project. I sincerely hope that it is able to make a difference. I’ve personally had issues with the major discrepancies in email clients at my job. I’ve heard that Microsoft Outlook 2007 is unfortunately using the Word HTML engine instead of the Internet Explorer Engine. The full list of clients that are on the Average or Poor list are:

This is based on their acid test. If you are involved in developing internet applications or sites and aren’t familiar with acid tests (and you should be!), visit WebStandards.org for the web browser acid test.

So what’s a person to due in the mean time–structural tables and inline CSS, of course! That’s what! So barbaric and so 1999! Here is a tutorial on what HTML/CSS you can use across multiple email clients.

Thirteen Ways To Add SEO To Gallery2

Monday, November 5th, 2007

Overview of Search Engine Optimization for Gallery2

I hope this is a starting point for those that want to make Gallery2 more SEO. Please remember that the SEO doesn’t make you show up higher in search listings, but makes it easier for this to happen. Having other people link to your pages is always the best thing you can do (at least for Google). Any additions to this list would be helpful. If you have questions or would like clarification, please ask.

Technical Background on Gallery2

Some of the suggestions on this list involve editing template and class files, do this at your own risk. Gallery2 administrators recommend copying the file you are editing to the subdirectory called “local” and editing the file there. Gallery2 will then use that file instead of the original. This also means that upgrades will not overwrite your edited file. In the examples below, I am using Gallery 2.2.3.

1. Activate URL Rewrite plugin

Read through the URL Rewrite Administration page and familiarize yourself with the structure of Gallery2, you’ll notice that the permalink of a photo is based on the filename.

2. Make items in keyword and other dynamic albums point to item’s permalink

ll links that can, should point to an item’s permalink–after all that is the valuable content–all else is for the user’s convenience and experience. This will eliminate some duplicate content and use the keyword album’s PageRank to point to the item’s permalink.

  • On the Site Admin page, go to Keyword Album (and/or Dynamic Albums)
  • Change Thumbnail links in dynamic albums to Jump to original album, and click Global checkbox if possible.

3. Use keywords in filenames

ince the permalink of an item is based on the filename, the filename of the item affect the keywords contained within the URL. Do not use the file name that a camera gives each photograph, but name your photos using keywords. You can do this manually, or you can use a bulk file renaming tool.

I recommend you use a bulk file renaming tool. On Windows, I use the free Bulk Rename Utility. It allows all sorts of file naming options including regular expressions, recursive file renaming of files in subdirectories, add suffixes, add prefixes and many, many more. It’s a little overwhelming when you first load the program. Thankfully, you can see the actual before/after of the file names, so you don’t have to guess at what you are doing. If anyone know of an OS-X bulk renaming tool, please contact me.

My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used wedding-party-rachel-stephen-richard-mary-james.jpg

4. Create keyword-dense titles and keywords for each item

aving tags or keywords link similar items not only provides users of your site to easily visit similar items, but it also links the keywords with your content for SEO.

Upon wanting to post over five hundred photographs of my honeymoon in Ireland to my Gallery2, I decided to write an automated PHP script that goes through the database and does the following:

  • Reads in the file name
  • Replaces the hyphens and/or underscores with spaces
  • Removes Windows and OS-X renaming suffixes/prefixes such as numerals, parenthesizes and the word “copy.”
  • Then, places this text in the item title field

After creating the title, I re-run the php script that then adds keywords. It does the following:

  • Reads in the file name
  • Replaces the hyphens and/or underscores with a comma and a space
  • Removes Windows and OS-X renaming suffixes/prefixes such as numerals, parenthesizes and the word “copy.”
  • Removes common words such as the, of, to , with, on, through, in and single letters (A-Z)
  • Then, places this text in the item keyword field

Now you can do all this manually and probably get better results by fine-tuning each item’s keywords and title, but in this instance, I did not want to enter thousands of keywords and possibly misspell them.

If you would like a copy of this script, I can email it to you. Please contact me. You will need to directly edit a PHP file, but I believe it is straight forward enough. It has no warranty for anything it does to your system. Before using it, backup your database. After the script has run, the database cache will need to deleted at Site Admin >> Maintenance >> Delete database cache

5. Optimize robots.txt

Some say to disallow search engines from listing keyword or tag pages by using disallow within one’s robots.txt. The theory behind this is that search engines do not actually stop looking at the pages listed after a disallow command. Disallow is there to prevent good search engines from listing disallowed pages in their search results. They DO read and evaluate disallowed pages for content. So the theory is that when a user searches for a keyword, the keyword page will not show up in the search results, but the actual content pages that the keyword pages link to will show up. This only works with search engines that value linking over keyword density. Since there is usually not much text on an item page, disallowing keyword filled dynamic albums might have negative effects. I suggest you research optimizing your robots.txt more, before disallowing hundreds of pages from search engine results.

6. Remove slideshows

I would say that this is the least important item on this list, but you want to be sure to remove as much duplicate content as possible, then to remove the slideshow:

  • Goto Plugins on the Site Admin page.
  • Deactivate Slideshow and Slideshow Applet

7. Remove multiple sizes

I’ve never had multiple sizes setup in my Gallery, if someone has the directions on how to deactivate this. It would be helpful.

8. Enable Google Sitemap

Sitemaps are an XML document that lists all content pages. When your site changes, it changes. Just like it says, it is a map. It doesn’t automatically get you a higher SEO, it only give the search engine a map to browse your site with. Personally, I’m not convinced that this helps SEO. It just makes sure all your pages get listed–which if you are practicing good SEO on your site, when you should not have to worry about a page not being listed. To enable Google Sitemap:

  • Goto Plugins on the Site Admin page and deactivate Slideshow and Slideshow Applet
  • Activate Sitemap

9. Optimize permalinks

Search engines do not like variables (question marks and ampersands) at the end of URLs. Gallery is made to be sticky with its items which makes human browsing easier and pretty much eliminates the need to use the browser’s back button. If you use the breadcrumbs in the upper left to view a parent album, you are shown the album page that contains the item you were just viewing. Below are changes to make to the Gallery2 code

Comment out the urlParams call in /modules/core/classes/GalleryTheme.class
LINE 1408 - BEFORE

if (!empty($theme['parents'][$i + 1]['id'])) {
$urlParams['highlightId'] = $theme['parents'][$i + 1]['id'];
} else if ($itemId && ($i + 1) == count($theme['parents'])) {
$urlParams['highlightId'] = $itemId;
}

LINE 1408 - AFTER

/* if (!empty($theme['parents'][$i + 1]['id'])) {
$urlParams['highlightId'] = $theme['parents'][$i + 1]['id'];
} else if ($itemId && ($i + 1) == count($theme['parents'])) {
$urlParams['highlightId'] = $itemId;
} */

10. Make item titles into heading text and links

Add heading tags to item titles in /themes/matrix/templates/album.tpl (with “matrix” being your current theme)

LINE 121 - BEFORE

<p class="giTitle">
{if $child.canContainChildren && (!isset($theme.params.albumFrame)
|| $theme.params.albumFrame == $theme.params.itemFrame)}
{* Add prefix for albums unless imageframe will differentiate *}
{g->text text="Album: %s" arg1=$child.title|markup}
{else}
{$child.title|markup}
{/if}
</p>

LINE 121 - AFTER

<h2 class="giTitle">
{if $child.canContainChildren && (!isset($theme.params.albumFrame)
|| $theme.params.albumFrame == $theme.params.itemFrame)}
{* Add prefix for albums unless imageframe will differentiate *}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
{g->text text="Album: %s" arg1=$child.title|markup}</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
{$child.title|markup}</a>
{/if}
</h2>

11. Prevent duplicate base URLs for your Gallery

On Apache servers, you can change by each directory how the web server serves up your pages within a file named .htaccess. If you have implimented the URL Rewrite plugin correctly, then you should already have an .htaccess file in your Gallery2 directory. Redirects affect SEO negatively, and it has been said that two site homepages, /main.php and /, harm SEO. To prevent the 301 redirect to /main.php, add the following lines to the top of your .htaccess:

# Set the default handler.
DirectoryIndex main.php

It should be said that not all hosts allow you do change the DirectoryIndex. Also, this also might need to be done to get rid of “main.php” in the breadcrumb. I’m not sure if I changed this myself or gallery set it automatically, but on line 177 of /config.php, I have:

# Set the default handler.
DirectoryIndex main.php

In a related note, some search engines will differentiate www.yourdomain.com and yourdomain.com. This not good and could result in duplicate content. You can search Google via site:yourdomain.com and find out how your site is currently listed. You want to be listed in the same format that external links and internal links are linking to your site. To redirect pages without “www” to a page with the prefix, add the following lines to the top of your .htaccess:

RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

If you are hosting, your Gallery2 in a subdirectory (e.g.- photos), use this:

RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/photos/$1 [R=301,L]

12. Add META tags to your Gallery2 pages

It has been said that META tags have lost importance since their glory days ten years ago. They have lost importance to external links, but they are not to be disregarded. To add the META tags keyword and description to your Gallery2 pages add the following lines to /themes/matrix/templates/theme.tpl (with “matrix” being your current theme).

LINE 19 - BEFORE

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}

LINE 19 - AFTER

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}
<meta name="keywords" content="{$theme.item.keywords|markup:strip|default:$theme.item.pathComponent}" />
<meta name="description" content="{$theme.item.description|markup:strip|default:$theme.item.pathComponent}" />

Note: The above is only an addition of the meta tags.

13. Optimize page title

Page titles are some of the most important information used for SEO. Search engines will only use the first so many characters. I’ve heard that title elements should ideally be less than 64 characters in length. That doesn’t been you can’t use longer ones though. Forum user, maravizzo, suggests adding the title of the parent album to the page title. This should increases your associated keyword density in your page title.

Add lines in /themes/matrix/templates/theme.tpl
LINE 14 - BEFORE


{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
{/if}

LINE 14 - AFTER


{if empty($head.title)}
<title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}
{if $theme.parent.title}
:: {$theme.parent.title|markup:strip|default:$theme.parent.pathComponent}
{/if}
:: Title of Site</title>
{/if}

14. Create SEO page numbers

This is related to number six, Optimize permalinks, but I have yet figured how to do it. I’ve read the Gallery2 forum thread, URL Rewrite for page number, but did not want to change my current item permalinks. If anyone has suggestions, I’d love to see this addressed.

Macromedia Dreamweaver 8 crashing on startup and close

Tuesday, October 30th, 2007

For a long time, I have had problems with Macromedia Dreamweaver 8 crashing at the close of the program. I had never had a problem with Macromedia Dreamweaver 8 crashing at startup until the other day. I surmise that Macromedia Dreamweaver 8 had closed and crashed as it usually did, but this time it wrote an invalid or corrupt Site Cache file. It took me a few hours to remove all parts of Macromedia Dreamweaver 8 from my system, but I finally found the corrupt site cache file in users/{username}/library/application support/macromedia/common/8/Sites/

Coding faster and easier within your browser: CSS, HTML, Javascript

Tuesday, May 1st, 2007

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web?¢‚Ǩ‚Ñ¢s infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it?¢‚Ǩ‚Ñ¢s ?¢‚Ǩ?ìOutline Block Level Elements.?¢‚Ǩ¬ù The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

  • Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
  • Disable images
  • View the CSS for a particular element by clicking on that element
  • Disable cache and cookies
  • Display various page and screen sizes for testing (what does this site look like on an 800×600?)
  • Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
  • View the CSS for a web page while browsing
  • Edit the CSS style sheet of web page without reloading
  • Validate HTML, CSS, feeds, and links

Firebug

I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn?¢‚Ǩ‚Ñ¢t have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the ?¢‚Ǩ?ìInspect?¢‚Ǩ¬ù button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a ?¢‚Ǩ?ìLayout?¢‚Ǩ¬ù tab that allow editing of these qualities and shows their relationships.

Link Checker

If you?¢‚Ǩ‚Ñ¢ve ever clicked through a large site in order to test all the hyperlinks, you?¢‚Ǩ‚Ñ¢ll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you?¢‚Ǩ‚Ñ¢ll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.

ColorZilla

ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don?¢‚Ǩ‚Ñ¢t have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

Multiple CSS increases productivity of hiding and showing with display attribute

Monday, April 30th, 2007

With the prevalence of DHTML, much less AJAX, I have begun to use separate Cascading Style Sheets for development and publishing. Since styles override each other, the easiest way to accomplish this is to add a second style sheet link after the publishing CSS link and comment it out when one wants to test the page.

?¢‚Ǩ?ìdev.css?¢‚Ǩ¬ù contains ?¢‚Ǩ?ìdisplay: block;?¢‚Ǩ¬ù within all classes that in the publishing CSS contain ?¢‚Ǩ?ìdisplay: none;
?¢‚Ǩ¬ù much like that below:

.profile_box { display: none;} (index.css)

.profile_box { display: block; } (dev.css)

HTML/Flash: Use more than Arial and Times New Roman

Tuesday, June 6th, 2006

To the designer, it’s a pain only using Arial and Times New Roman for headlines (well, the MacHead designers are probably using Helvetica and Times, but I regress. . .) , so one uses images. The problem is that images are static unless you have an image generation script package installed on your web server to create images on-the-fly.

So what’s one to do?

A friend of mine actually sent me a link to Mike Davidson’s site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose–whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that’s correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

–Stephen M. James
www.smjdesign.com


My Sites