Category: Web Design Tips
Don’t want to scroll? Consider the Alternatives
How to Properly Structure Web Content
Audience
This article is intended for people who use a content management system like WordPress to blog or create & maintain your website, but the overall concepts apply to all web design, regardless of what platform you use to create/manage your website.
Goals
- Create an ideal webpage structure for easy reading
- Maintain style consistency throughout entire site
- Help search engines understand what the web page is about
Make Better Websites
I stumbled upon a cool website called ‘Make Better Websites’ (www.makebetterwebsites.com) that is more or less just a collection of sites the team puts together for web design inspiration. Some of the designs are fairly straight-forward, and some are really out of the box, but all of them are visually appealing, professional, and easy to navigate. Check it out next time you find yourself coming up with something fresh!
If you have a website design that you think should be showcased on the site, they have a submit form where you can enter your design for consideration.
Web Design Checklist – After the Design is Done
Create a Favicon
Use the Favicon generator available at http://www.html-kit.com/favicon/, download the package, upload it to your server, and add the following lines to your <head> section of your webpage.
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
Search Engine Optimization
There’s far too much to cover in just a short paragraph, but make sure you have unique title & description tags, keyword rich content, descriptive alt tags, etc. If you want to learn more about SEO, I suggest you check out www.SEObook.com – they have a pretty cool Firefox plugin that reports keyword density, Google cache date, and much more.
Validation
It’s kind of a tricky subject, but long story short, your website should meet the web standard you are aiming for. Cleaning up all the errors goes a long way in making your website play nice with all browsers. Use the tools available at the W3 Validation Service.
Sitemap
Search engines should eventually find all the pages you created (so long as there are links to them), but creating a sitemap usually helps search engines find your pages more quickly. There are some cool online tools that will automatically create a sitemap for your website by just entering the homepage address. The best one I’ve found so far is available at www.xml-sitemaps.com.
Add Website to Google Webmaster Tools account
If you don’t already have a Google Webmaster Tools account, get one now! It provides some great tools, and some great insight to how Google views your site. It’s free, and the first step (after validation) should be to submit the sitemap you just created in the last step. Yahoo! has a similar service called Yahoo! Site Explorer that’s worth checking out too.
Submit Site to Search Engines
I’m not sure how much good it does to submit your site to Google if you’ve already added the site to your Google Webmaster Tools account, but it certainly can’t hurt. You can also submit your site to all major search engines including Google, Yahoo!, DMOZ, & Bing. DMOZ is much more difficult to get listed in, but certainly worth the little effort it takes.
Google Analytics
Google Analytics is a great tool which collects all kinds of data about your website visits and displays the data in graphical format. One of the main things I like about Google Analytics is that it allows you to drill down as far as you can imagine, but doesn’t overwhelm you with information if you just want a good bird’s eye view of your site’s traffic. I also can’t help but think that a website will get indexed a little more quickly if Google is collecting data on your site’s traffic. Accounts are free and available at www.google.com/analytics. If you are a webmaster, you can also invite your client to view the data for that account without giving them administrative access.
Google Places
Yet another way to link to your website is through Google Places (formerly known as Google Local). You can add your business’ address, contact information, hours of operation, pictures and much more. Verify your account by having Google call you, and in just a few minutes you have yet another way for customers to find your business. Google Places offers some interesting advertising opportunities through Google Local as well.
Have Something to Add?
If you are a web developer and have something to add to this list, send me a comment and I’ll be glad to add it to the list! And as always, if you have any web design needs, contact me at www.Jellyflea.com.
Website Redesign Checklist
This is a sort of checklist in progress for things to keep in mind when redesigning a website.
- Backup Current Website & Databases
- Take note of the current site’s SEO tactics and page rank for target key phrases
- Check for existing Google Analytics (etc) accounts
- Check for existing .htaccess file
- If renaming pages or restructuring, prepare a new .htaccess file to include 301 redirects so search engines can find your new pages
- Upload new website & new .htaccess file
- Add & verify site in Google Webmaster account
- Tweet, Facebook Posts, etc to get the word out about the new design
Example .htaccess 301 redirect
Redirect 301 /old_page.html http://www.your-domain.com/new-page.html
Have something you think should be added to the list? Leave a comment!
Convert Dynamic Website to Static HTML Files
I design every site in PHP, even if there isn’t a database involved. Why? It actually saves me time and my clients money. By creating a ‘template’ page called index.php and dynamically inserting the page title, meta tags, menu, content, and anything else that changes on a page-by-page basis, a website can be much more dynamic and easier to update and maintain.
The advantages of this technique are huge – if a client wants to add a page to the menu, it only takes a minute, instead of hours (if you are dealing with a large website). Sure there’s always search & replace functions, but that will inevitably lead to mistakes & inconsistency.
So What’s the Downside?
The only downside of this technique is that some people don’t like or understand the query strings in the url that result from this method. For example the URL for Jellyflea Web Design’s portfolio page is:
http://www.jellyflea.com/index.php?p=portfolio
Now, being a web designer, that doesn’t bother me in the least, but some clients prefer to see something more familiar like:
http://www.jellyflea.com/portfolio.html
Mod_Rewrite to the Rescue!
Luckily, thanks to Apache and mod_rewrite you don’t have to abandon the dynamic page generation. You can include an .htaccess file that looks something like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.jellyflea\.com$ [NC]
RewriteRule ^(.*)$ http://www.jellyflea.com/$1 [L,R=301]
RewriteRule ^(.*)\.html$ /index.php?&p=$1 [L]
Now when someone goes to http://www.jellyflea.com/portfolio.html they get redirected without ever knowing it.
Convert Existing Links from Dynamic to Static
Sometimes the client will request this after the design is done, which forces you to update all your links to match the new html format. Luckily, you can do a search and replace function in your regular expression equipped text editor. Here’s instructions on how to replace all instances of links with the new format by using Smultron.
- Open all your files as a project.
- Go to Edit->Find->Advanced Find and Replace
- Choose “Current Project”
- Find: index.php\?p=([\w-$]+)
- Replace: $1\.html
- Click “Replace”
… and index.php?p=page-name is replaced with page-name.html.
© 2023 Kyle W. Henderson
Website Design by JellyFlea Creative — Up ↑