We’ve all seen them, copyright statements in the footer with a date that’s half a decade old. It makes you think, if this is so out of date, I wonder how they take care of the rest of their business. Even a copyright that’s just a few years old is enough to make me think about things, and any reason for a customer to jump-ship, however small, is lost business.

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!

It’s no secret, the web is maturing and as the social web picks up momentum, secure portions of the web are becoming even more ubiquitous. One consequence of this trend is the cross referencing of other sites and assets, be it through CDNs, APIs, or sophisticated templating architectures, keeping tabs on where to reference what securely can become a bit of a headache.

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!

When it comes to web design, a lot of people understand the majority of the process but don’t really know where to begin or what tools to use to get things going. This is a basic guide to understanding the various tools of web design, which web design tools to use and which to avoid and how to save a buck by using freeware and open source options.

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.

Alt and title attributes have been a bit of a grey area for novice web workers and it shows in the constant misuse of the tags I find myself correcting. The two attributes are not interchangeable and they are not intended for the same circumstances, though they are often found used together around linked images. While they may be both okay here, they must be used in the correct tag or their effect is negated.

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.