Following are my top 10 website considerations that are often overlooked by inexperienced designers. If you are unclear if you have any of the following in place, feel free to contact me and I’ll let you know without cost.
1. Properly Sized Graphics
First and foremost, your site needs to have properly sized graphics. I work on many sites that were originated by other designers, and I can tell you that many designers will force the image size dimension, instead of uploading the proper size. What I mean by “force” is that when an image is added to a page it will have a size dimension, width and height, this is defined by the actual image size.
So, for example, if I have an image that I add to a page called edmund.jpg, the code is: <img src=”images/edmund.jpg” alt=”Picture of Edmund” width=”188″ height=”165″ /> What some designers will do is change the width=”” and height=”” dimension, so that a large image they upload will be re-sized in the browser. Okay, so not a major problem if the image is already small and only a small size edit is needed, but what if the image is large, say 3000px in width? Well, the browser will render the image small if defined so, but it still has to upload the actual image dimension, and a 3000px image will take a few seconds to load on most browsers. The thing to know is that web pages will load quicker if the graphics contained on each page are properly defined so they don’t require the web browser to resize them. Properly sized images will reduce the web browser workload and speed up the page loading time, which ensures that visitors don’t have to wait to view your page, and search engines will do a better job of indexing your site content.
2. Redirect Non-www to www
Occasionally I’ll come across a website that has been set to leave out the “www.” portion when they type a URL or link to your website. It is important to set the website up so that it automatically redirects any non-www version of your domain URL (https://domain. com) to the www version (https://www.domain. com) of your website.
Search engines consider http://yoursite.com and http://www.yoursite.com as two different websites. As a result, you can end up with duplicate content in a search engine (which will lower your site ranking), and if your website has been linked to from other websites using both of the two URLs you are effectively splitting your domain. If you have this problem you need to do a 301 redirect. This requires you to edit the htaccess file with the following on your Apache (linux/unix) server:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]
Of course, be sure to substitute “example” with your website URL.
3. Favicon
It is a good idea to add a Favicon (favorite icon) to your website, so that your company or product logo appears in the URL box. This icon will also show up in a bookmark list, and gives the web site an added level of professionalism. You can do this by adding the following:
Create a square graphic in your photo editing program, 16x16px. Save the image as a GIF or BMP file with 256 colors or less. Next you will be converting it to an Icon. If you do a search online, you will find several free icon generating programs. You then save the file as favicon.ico (note .ico extension).
When you are done, upload the image to your public files directory, or in your image folder. And finally, you need to link to the fav-icon, which you do by adding a small line of code in each of your pages metatags. As follows: <link rel=”shortcut icon” href=”path to icon/favicon.ico”>
Note: Since I wrote this there has been some changes in what will work for the favicon. For one, .png files are commonly used now with a retina version; so In addition to the 16x16px favicon, most websites now include a 32x32px retina version. Many websites will also include IPhone and IPad favicon versions, which are typically typically presented at a size of 57x57px for IPhone Icon (twice the size for retina), and 72x72px for IPad (twice the size for retina).
4. Header Consistency and Linking
Consistency across web pages is always important, and the main graphic, company logo, or header at the top of the site should be included on every page in the site, and should always return the visitor to the home page of the website.
Of course many websites will have a larger header on the home page, and a narrower version on the others, and at times these additional page headers will vary some visually by adding different images (seasonal, collage, industry, etc), hey, that’s okay. But the general layout, look, styling, etc, needs to be consistent.
As for linking, just know that it has become a web standard that the header and/or logo links back to the home page, and as such most visitors expect to return to the main page of the site simply by clicking on the main top graphic or logo from any page within the site.
5. Copyright Notice
It is important to include a copyright notice on the bottom of each page contained on the website, and keep it current! It may seem trivial, but an out-of-date copyright notice can send a message to your visitors that the website and its content may be out-of-date as well. I know that I often look at this.
6. Hyphens vs Underscores
There has been some debate on the best way to combine words for a page name, but the general consensus is that when naming files and web-pages, use hyphens (i.e. web-page.html) rather than underscores (i.e. web_page.html) for the file names. It is said to be much easier for search engines to separate and index the keywords when hyphens are used.
7. Meaningful File Names
I’ve talked a lot about search engine optimization (SEO) in this blog do to its importance. So in case you are still knew to this, know that it is important to use meaningful names for any files, graphics, or web pages. Many search engines look at file names as part of their search algorithm, and using keywords in file names will help to improve search engine rankings.
8. Accessibility Tags for Images and Links
Many of the websites I work on don’t have “Alt” and “Title” tags, and I can tell you that yes, these are important. If you are unfamiliar with these the “Alt” tag is used to provide a mouse-over description for images. This is used by adaptive technology to provide a description of the image for the visually impaired, and it helps with search engine ranking. Okay, so if you’ve never seen how this looks in code view, remember my earlier image: <img src=”images/edmund.jpg” alt=”Picture of Edmund” width=”188″ height=”165″ /> The “Alt” tag here is: alt=”Picture of Edmund”. The “Title” tag is used similarly, but is use for text links. If you have a link in your page, or your navigation, you will see something like: <a href=”https://www.mylink.com” title=”Here is a my link” target=”_blank”>here is a link</a>
Note where I have (title=”Here is a my link”), this is the title tag which provides the mouse-over description for this link. And in case you missed it, the “target” was set to “_blank”, which tells the browser to open the link in a new window. This is important since you don’t want someone to visit your link, close the page, and then “poof” your site is no longer there. Also, from an SEO stand-point, the longer someone remains on your site, the better, so it is always best to keep your site window open while your visitors browse links to other sites.
9. Consistent Navigation
Navigation should always remain consistent on a website. As a website visitor moves through the site, the navigation menu needs to remain in the same place on each page. This will make it easier for visitors to navigate your website.
If you need additional navigation for a page, then sure, leave the top menu the same, yet provide an additional sidebar navigation on the pages that need it. What you need to avoid is links on page that open up other pages that aren’t in a defined menu structure. I personally have a found a page by a link, sought to go back there, and then not be able to find it. Irritating! If your site has links to pages, you might want to consider (1) a sidebar menu on the interior pages, (2) a site-map page link in the menu (or footer), or (3) a search engine on every page (or a combination of the above).
10. Spell Check
While spelling errors when texting by phone are commonplace, a website that contains mistyped or misspelled words just shouts UNPROFESSIONAL, and from personal experience I will often leave a site when they’re prevalent. In addition it is known that the Google search engines will lower a site’s ranking when there are lots of misspellings, so if for no other consideration than your site ranking, take a moment to run all your content through MS Word spell checker, your email checker, or your smart friend or relative. But I admit it, I have faltered occasionally in this regard at times as well, especially in blog posts since one is often on a deadline. No excuse though.
