A quick way to make sure your copyright statement is current is to pull the information from the server’s clock. Unless your server’s date is off, which is highly unlikely, you can set up a simple bit of PHP to tap into that clock and make sure you’re always displaying the current year.

<?php echo date('Y'); ?>

Example Usage:

<div id="copyright-statement">Copyright <?php echo date('Y'); ?> ACME Widgets, All Rights Reserved.</div>

Just pop that into any PHP-based page or footer template, add the standard HTML-based copyright copy and you’re set, you can forget about it for another half-decade!

You have a great post you’ve written and you’d like to share it on your facebook wall. You share the URL but notice that the image wasn’t coming in or the title or description copy wasn’t what you’d like. You head back over to your post, make the appropriate changes, and head back to repost, but you come to find that the old image/copy/title are all still there!

Facebook is a giant and to keep up with all of its demands on its resources, they have a ton of caching going on. Even the images you uploaded are immediately optimized (and made to look pretty crummy) in order to squeeze out every ounce of efficiency. The same goes for shared links. As soon as it enters the Facebook ecosystem, that URL has it’s goodies cached up and there’s no way to break it free and refresh the URL.

URL Shortening Provides Some Help

Because the cached data as tied to a URL as it’s a guaranteed unique identifier, the trick is to provide Facebook with another URL that will pull in the new data. URL shortening services can get you this code. Everyone’s used them before, Bitly, TinyUrl, etc. They provide shortened URLs that forward the user to the actual URL you’d like the user to be taken to. Add in you’re URL that’s been cached by Facebook, grab the new URL, post that one and you’re golden.

But hold the phone! You accidentally made ANOTHER mistake and need to re-refresh the page’s information on Facebook. You head back over to your favorite URL shortener and re-enter the URL only to find out that it kicks back the same shortened URL. Uh oh, this is a problem. Facebook has already cached that URL, so it looks like you’re up a creek. Or are you? A quick workaround, head on over to your second favorite URL shortener and get it again, and hopefully you made sure there wasn’t any issues and it’s going to work out this time.

But, again, you’ve made a mistake and need to get yet another version over to Facebook and you’ve exhausted all of the URL shorteners, what are you to do?

TinyUrl to the Rescue

TinyUrl (http://tinyurl.com) provides users with not only a standard means of shortening a URL with it providing a generated url string. TinyUrl also offers a custom URL feature that you can pick which string you’d like to add. This is the magic feature. You can literally re-enter a new custom string and it will kick back a URL you can pass to Facebook without fear of it being used and cached previously.

No longer will you need to worry about whether your post is perfect before sending it out to Facebook, and if you have a planned change to the page, you can use this method to ensure the campaign is executable.

Do you have another method of getting around that annoying Facebook cache? Or maybe you know of a URL shortener that will do this even better? Let us know by commenting below!

A common issue many web developers face is referencing a global asset in a template that will be both called “insecurely” using http://, say in the shopping section of a site, and “securely” using https:// when the user runs through the checkout. If you have a logo image being called using the reference http://www.site.com/images/logo.png, your users may see a security conflict saying that some items on the page may not be secure. For the most part, this isn’t a security issue, but any security alert is enough to send a user and a potential conversion running, so it’s best to ensure an alert free experience regardless.

You could spend development time creating special conditionals to make the necessary changes when needed but there’s a much smarter and more efficient way of doing things, just drop the http: and https: altogether. That’s right, if you simply begin referencing assets, from images to stylesheets to javascripts, without the leading http: or https: and just use // instead, you will never run into problems. The browser will put the right one in, non-secure pages will get http:// and secure pages will get https://, and your users will never see an error, at least not one relating to non-secure assets being used on a secure page.

Bad Habit…

<a href="http://www.bad-habit.com" title="Bad...">The Olden Days</a>

Bad Habit…

<a href="https://www.bad-habit.com" title="Bad...">Geocities Style</a>

Good Habit!

<a href="//www.good-habit.com" title="Good!">Lean and Mean!</a>

But what about all those times in the past where you’ve referenced the protocol directly? Just run a find-replace for http: and https: with an empty replace field for all of your old files and you can get old sites and files up to date post haste! And you don’t need to worry about only applying the change to certain asset types, no matter what the reference or URL is, it will work just fine without the protocol stated.

Another perk, if you’re looking for more low-hanging optimizations, you can trim a few bits off your site with each reference you switch. If you’re serving tens of millions of pages a month on a thousand page site, it can add up!

Get in the Habit: Stop referencing assets with http:// or https://, and start using just //, let the browser do the rest!

Also, if you have another application you love and it’s not mentioned here, let me know in the comments and I will try and get it added here.

FTP:
File Transfer Protocol, or FTP is a means of connecting to a web site’s host to make changes to the static files the site uses to build the web content. It is the direct way to access your web site’s server and make edits to it’s files. While there are other means to edit files via a web browser, using FTP is much faster than swapping files over HTTP.

CuteFTP
CuteFTP is an FTP client that will cost you some cash to use but offers you a great deal of built in functionality that streamlines workflow. Notably, CuteFTP offers a built-in file editor so a user is able to make edits to files from directly in the client. Simply right click the file, select edit and the file’s text is brought up and you are able to make edits. When finished, simply click save in the top left and the file is uploaded to the host and the change is made live.  When it comes to speed, this way of editing the files is the way to go.

Filezilla
Filezilla is a free open-source, no frills FTP client. To manipulate files, you must use an external text editor and click back over to the client to upload the changed file. While being completely free, you may go nuts when you save a file in your text editor and refresh the changes on the site, only to not have them show up because you have forgotten to upload the changes. If you do happen to remember to upload everytime, you will still have to deal with two-three extra clicks before the file is uploaded. The simplicity of clicking one button and moving on is a feature Filezilla lacks, but the price is right.

Text Editor:
A text editor is used to make changes to your files and a decent one will color code the file so you are able to make quicker edits and a better overall sense of the design through the code by coloring different tags in different colors. So if you are looking for an image file, and it’s colored red by the text editor, then you scroll through the code until you find red and then look to see if its the file you are looking for. Some more robust text editors will organize and minify the code to offer the most optimized code possible.

Notepad++
Notepad++ is an open source text editor that is completely free. It’s amazingly straightforward and low profile which makes it very attractive as an application and offers myriad options to help you code faster such as color coding for just about every coding language under the sun. Here at Niteo Design, we use Notepad++ in conjunction with Filezilla to offer an open-source and completely free way for each designer to access and edit clients’ web sites.

Image Editor:
An image editor is a type of graphics software is used to edit the graphics that are used on the web site. Because CSS3 can’t replicate every design style, graphics are still and will continue to be an integral part of web design and a web design must be versed in image or photo-editing software to be able to manually create the graphics they need to develop the site the envisioned. An image editor can also be used to create mockups and wire frames.

Photoshop
This is the industry-leading image-editing software and it comes with an industry-leading price. If you are able to shoulder the costs, you definitely get what you pay for. Photoshop can literally create anything you can imagine as far as web-based graphics go and offer every sort of option you may want to manipulate for vector, raster-based and text-based graphics. If you decide to go with Photoshop, spring for the full application and avoid Photoshop Elements, it really offers a limited amount of options compared to the complete Photoshop, especially for the web-based graphic designer.

GIMP
GIMP is an open-source image-editing software that is completely free of charge. GIMP was created as an open-source alternative to Photoshop and offers many of the exact same features that Photoshop has. If you can’t afford to go with Photoshop, go with this. Another great feature of GIMP is that it’s available on every operating system so even if you’re running Linux, you’re covered. A web designer who is able to deftly use Photoshop will be able to use GIMP with the exact same results which makes the application an extremely exciting option available to web designers.

Paint Shop Pro
PSP is a shareware image editing option that costs about a third to a quarter of the cost of Photoshop. The application is fairly robust but lacks many of the deeper features available in Photoshop and GIMP.

Browser Add Ons:
There are several add ons that are offered through web browsers that help web designers and web developers to take an in-depth look at the data that’s being parsed through the browser and seen by the users. This helps the developer to more readily identify the changes that need to be made to the code and graphics to produce the desired output.

Inspect Element
This feature is offered through most browsers and allows the user to take a look at the HTML, CSS and JSON that’s being parsed to create the site. Unlike viewing the source code, right-clicking an element and inspecting it will show the element in the code and offers style and JSON context for the element as well. This allows developers to see exactly where changes need to be made to the code to get the look they’re going for. Chrome and Opera offer this built-in and Firefox has a plug-in called FireBug that will allow for this.

MeasureIt
This is the main reason why I still haven’t made the switch to Chrome for my main web development browser. Only offered on Firefox, MeasureIt allows the user to measure just about anything on the web. If you know you need to move something a certain distance but don’t know the exact number of pixels, use this instead of guessing and correcting several times until it’s just right. This takes out all of the guess work when trying to get that pixel perfect design.

Color Picker
Another reason to stick with Firefox, Color Picker is a Firefox add-on that lets you see the color information of any pixel on the webpage. This is ideal for color matching elements. Element inspection can yield some color info for html-based elements but if you need to color match a graphic, instead of downloading it and opening it in an image-editor, you can use the color picker to find out the color you need to identify.

YSlow
This is an add-on offered by Yahoo that tells you the reasons why your site may be lagging. It tells you things about the number of processes that’s being called upon and whether any may be superfluous or redundant and what errors may be slowing things down as well. It also tells you the time it takes for certain portions of the page to load and the total load time. This is an awesome tool for fixing coding and parsing issues that might be causing laggy site performance.

Having clean, standards correct code is becoming the new hot trend since Google started incorporating page load times and markup validation into their page rank algorithms. This is another step to not only injecting keywords in more places while maintaining valid mark-up on a more robust site.

ALT
<img src="..." alt="The Alt Attribute" />

The alt attribute is used in the image tag (<img />) is designed for text-readers and crawlers to help identify an image, especially when there may be text on that image or is contextually relevant. Because bots can’t “see” images and that which is contained on it (not yet, anyway), the alt-tag offers them a glimpse as to what’s on the image, so they can index it and add in any keywords it may have. It also offers text-readers and those without screens/sight to be able to have some reference to what’s on the image and use it in the context of the page.

The alt tag is a way for crawlers and other search engine bots to read what’s on the image so regardless, make sure you load it with keyword appropriate copy but always make sure it is relevant; keyword spamming here is no bueno. Just use the phrase on the image if that’s all that’s there or use a brief description if it’s an image without text in it.

TITLE
<a href="..." title="The Alt Attribute" >The Title Attribute</a>

The title attribute is used to title elements. This can be used for just about any element and, when used with hyperlinks, allows the user and the crawlers a description of what lies ahead if the link is clicked. The user sees the title attribute as a small balloon next to the cursor when a link is hovered over.

This is, again, a great place for keyword injection but as opposed to providing text readers and crawlers context, the title attribute is seen by all users and can be used with more colorful language and longer descriptions. The title attribute acts in the same manner as the text that the hyperlink it contains in that the text and the title are both used to add keyword juice to the page that’s being linked to.

Last Minute Tip: If you run out of tasks to do, go back and check to make sure each image has an appropriate alt tag and that elements that should have title tags do have them, but don’t get carried away with the keyword spam.

Google found a novel way to mitigate this limitation, by leveraging it’s Search Engine market share to manipulate the web ecosystem to run slimmer. By introducing Page Load Times into the SERP algorithm, Google has incentivized web developers to develop the web on lighter, cleaner, more standards-based markup. This solves the bandwidth capacity issue by having the entire web cutting all their fat, freeing up unneeded bandwidth without having to wait for ISPs to upgrade their lines. Since Google has such a large market share, most users will still trek over to Google without even realizing a change in their search experience. But, their results will slowly begin to show the slimmer sites nearer to the top, which will result in more users clicking the slimmer sites even further freeing up bandwidth by essentially herding users to areas of the web where they will collectively use less bandwidth.

Google is a trend setter and is sometimes flat out copied (both domestically and abroad), so it will come to no surprise when other search engines begin using page load times in their own search algorithms. This will even further expose more users/developers to the slimmed-down web paradigm and further help solve some of the bandwidth issues.

What does this mean for web developers? You need to start cutting the fat.

There are a lot of places you can look to start trimming down your page weight, since each has it’s own nuances I decided to break them up into individual posts you can find below (non-linked items means item coming soon):

This is easily fixed by forcing on or off the “www.” subdomain while allowing the users to enter through both addresses. To do this you can modify your .htaccess file in your site’s root folder by adding in the following mod_rewrite condition. If you have issues with your permalinks or cache after including this condition, move the snippet to the beginning of the .htaccess file. The codes send a 301 redirect while doing their thing so search engine crawlers know that this is a permanent redirect and to reallocate the pagerank data from the defunct subdomain’s pages over to the main domain’s matching pages.

To force site to use “www.”:

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

To force site NOT to use “www.”:

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

These two snippets allow for the domain to use other subdomains while forcing the two main domains into either subdomain schema you’d like.The following snippets will force any subdomain that might be inputted into your preferred subdomain schema.

To force site to use “www.”:

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

To force site NOT to use “www.”:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^</code>niteodesign\.com$ [NC]
RewriteRule ^(.*)$ http://niteodesign.com/$1 [R=301,L]

If you don't have a .htaccess file in your site's root, you can quickly whip one up by opening notepad and saving the file with one of these conditions as ".htaccess" without a file extension. When saving the file, enter the name ".htaccess" and select "All Files" under the save as dropdown and it will save the file without the extension. Once saved, simply place the file in your site's root and the file will immediately begin sending users to the proper domain.

You can test whether the file is working by accessing your site using the opposite address you set your site to default to. If it immediately switches up the subdomain, then everything is working properly. If not, check to make sure the file is saved without an extension (most commonly overlooked error) and the code is exactly as it is above, with your domain replacing niteodesign, of course. If you are still having issues, give your hosting provider a jingle and find out how they go about doing this, as it's pretty important SEO-wise.

Keyword density in the title is also important but what’s important to consider here is that the higher keyword density occurring sooner in the title, the more firmly associated those keywords will become with that page. In other words, start out with your top keywords early and often and leave the less important copy for the end. Also, be sure to keep the keywords within the first 70 characters to ensure maximum impact.

iOS will not recognize the hover event class but will emulate the manner through which Android handles hover event classes (click-to-reveal) through an instance of a click event listener aimed at the head of the dropdown list (the word, when hovered/clicked, drops down the menu). Add the following code to the document.ready portion of your jQuery script in the site’s global header (assuming the dropdown appears on every page like a typical navigation menu).

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".class li a").click(function(){  // Update class to point at the head of the list
});
}

If you aren’t yet using jQuery on your site, the following script includes the jQuery core and the code within document.ready and will resolve the issue with a simple copy and paste. Just be sure to update the class the script points to.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".class li a").click(function(){  // Update class to point at the head of the list
});

}

});

</script>

One caveat you will have to contend with is the fact that if the list head links to another page, tapping it will take you to that page. You can work around this by adding a carrot-arrow to the right of the menu item and point the script at that class. But, you will need to make sure the carrot is large enough so that users will be able to click it without accidentally tapping the link to its left, and, if its close enough, to its right.

The All-New Niteo Design Logo

We are excited to reveal our all-new logo! Our new logo is presented over a gradient of new colors from our updated colorways. We have been recently focused in on improving our own branding and this logo is an integral part of the re-branding process. Matched with the new colorways and an all-new website redesign, Niteo Design is poised to make an even bigger name for itself in 2011.