*Please pardon the un-styled mess why I am rethinking and re-designing my blog!*
You’ve completed your design, coded all the pages and implemented the content management system… now what? Launching a website involves many details that are often (in my case) forgotten in the last minute scramble to finish before a deadline. I thought I would share this list of things to remember before launching a website.
Browser testing is quite possibly the least ‘fun’ aspect of web design. But, like the dentist its a necessary evil. As web designers we need to test our sites across several browsers depending on what your target audience uses. Make sure the site appears relatively the same and functional in the lesser-privileged browsers. Consider using progressive enhancement for browsers that can handle nifty things like border-radius and text-shadow.
Browser Testing Resources:
Adobe Browserlab
NetRenderer
Web Analytics can provide you with a wide array of statistics and information about your website and its users. I use Analytics to track searches, popularity of articles and to watch users visit the website in real time. Analytics can also be used to inform future design iterations and help make decisions based on visitor behavior.
Web Analytics Resources
Google Analytics
Woopra – Live web analytics.
Crazy Egg – Heatmapping Analytics
Take your branding one step further and create a favicon. This helps with adding a little pizzaz in the menu bar next to your URL. It also helps with reinforcing your brand image when users bookmark your page.
Favicons should be simple and memorable. In the past I have used ‘N’ of my logo as a favicon. I have also used this icon on twitter and as my gravatar for posting comments on other blog sites. This may not apply to all websites you make, but its a great idea to be consistent.
Favicon Resources:
Favicon Generator
How to create a favicon
Unless the default border is part of your design its a good idea to remove the outline and border from links and images. This can be done with a few simple lines of CSS:
img a { border:none; }
a { outline:none; }
Sometimes I get so into getting the design to work across all the browsers that I forget to actually TEST the contact forms. Another thing I forget to do is specify with the client what email you want the results of the contact form to deliver to.
Spelling is my downfall as you have probably gathered by now. Always take time to spellcheck and re-read emails and text on websites. Heck… we should be reading out clients copy, not just cutting and pasting it into the CMS or webpage. Catching grammar or spelling errors in your clients copy it just one way to go the extra mile.
*NOTE* I’m not talking about going all out proofreading on copy, but if you catch something… let them know, or fix it. They will be happy you did.
Spelling Resources:
Web Based Spell Check
In the rush of finishing the design and functionality of a website broken links are often overlooked. Taking a quick visit through all the page of the site can prevent this. Another option is to use the built in link checker in Dreamweaver. With your website open go to File > Check Page > Links. There are also several 3rd party link validators on the web.
Broken Link Resources:
Don’t forget to add meta information to each page of the website. Although I’m not sure how much of an effect on SEO this has, it couldn’t hurt to read through your clients content and pick out a few keywords and throw in a page title and description. It’s also a good idea to have these keywords in the heading tags as well.
Sometimes broken links are unavoidable. In that case you need to have a backup plan. Setting up a 404 page ensures that users have some sort of direction if they follow an old or broken link.
404 Page Resources:
Smashing magazines list of beautiful 404 pages
404 Best Practices from CSS-Tricks
How to set up a 404 page on a static site – CSS-Tricks
If you are re-launching a website you need to set up redirects for the old URLS. Its literally quite as simple as adding a link to your .htaccess file like so:
Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html
If you see something missing from this list leave a comment and let me know! I’d love to hear about common things you tend to forget when launching websites.
Pass 642-691 exam with high quality JK0-702 prep materials and HP2-E31 guides available on Testking.
[61] Comments
Posted in design, Web 2.OH, Web Design
[...] 10 Things I Always Forget When Launching a Website [...]
10 Things I always forget before launching a website…
You’ve completed your design, coded all the pages and implemented the content management system… now what? Launching a website involves many details that are often (in my case) forgotten in the last minute scramble to finish before a deadline. I th…
[...] 10 Things to remember before launching a website… | The Design O’Blog by Niki Brown. [...]
10 Things to remember before launching a website… | The Design O’Blog by Niki Brown…
You’ve completed your design, coded all the pages and implemented the content management system… now what? Launching a website involves many details that are often (in my case) forgotten in the last minute scramble to finish before a deadline. I th…
[...] 10 Things To Remember Before Launching A Website… (nikibrown.com) [...]
[...] 10 Things to remember before launching a website… “You’ve completed your design, coded all the pages and implemented the content management system… now what? Launching a website involves many details that are often (in my case) forgotten in the last minute scramble to finish before a deadline. I thought I would share this list of things to remember before launching a website.” [...]
[...] 12. 10 Things to remember before launching a website [...]
[...] 10 Things to remember before launching a website… [...]
[...] 10 Things to Remember Before Launching a Website [...]
[...] Basado en: 10 Things to remember before launching a website… [...]
[...] 10 Things to Remember Before Launching a Website [...]
[...] http://www.nikibrown.com/designoblog/2009/09/20/launching-a-website/ a few seconds ago from Gwibber [...]
Subscribe by rss, email, or in iTunes!
Jasmyn says:
These are great! I’ll be creating a checklist and will be using it from now on.
September 20th, 2009 at 9:42 pm
Chris says:
How about meta tag information and alternative text for images.
September 21st, 2009 at 2:48 am
Dave Sparks says:
I’m sure you’re not the only one who forgets some of these things! It’s just remembering them early on that helps, don’t want to forget you didn’t put analytics in and then going to show someone their first months report and having nothing!
September 21st, 2009 at 3:39 am
Eric Martin says:
Having redesigned my site recently, this is a helpful list for preparing for a site launch.
September 21st, 2009 at 6:20 am
Ryan says:
Good stuff. There’s always something to forget, but hopefully I won’t let any of these slip through
September 21st, 2009 at 6:22 am
Al says:
Great post. How about HTML and CSS validation, and accessibility checking…
September 21st, 2009 at 6:24 am
Sean Hood says:
Spot on, Will have to remember these for next time.
September 21st, 2009 at 6:29 am
Helen says:
Great list!
I think I can add a couple:
- validate
- create a sitemap
September 21st, 2009 at 6:43 am
chad engle says:
I’m diggin it! Some of these are little things that are overlooked. I think the biggest is the favicon. Its something a ton of people miss but its something that is huge… Especially if you have a favicon bar in firefox to save your links.
September 21st, 2009 at 6:45 am
Angela says:
Great set of reminders, except it’s not such a good idea to remove the outline from links. This hampers accessibility, especially for users who navigate by keyboard. If one does remove the outline, it’s important to add styles for the focus and hover states in the CSS.
Here’s a good article on this topic: http://webaim.org/blog/plague-of-outline-0/
September 21st, 2009 at 6:50 am
Aaron Irizarry says:
It is the little things that often get overlooked, the favicon is one of my pet peeves…
~ Aaron I
September 21st, 2009 at 8:25 am
Kenneth says:
Actually, point #4 is a bad idea, at least the outline part. Yes, the outline adds a new visual element to your design, but it’s a very useful navigational tool for people that don’t use a mouse to navigate or who have bad eye sight. Leave the outline in, but take out borders if you want.
September 21st, 2009 at 9:10 am
Benjamin Falk says:
“a { outline:none; }”
You may not want to do this because of accessibility reasons… If someone tries to navigate the site using a keyboard, rather than a mouse, the outline indicates which link is currently selected. Remove that, and they will have difficulty using the site.
September 21st, 2009 at 10:07 am
Ted Goas says:
It has already been said but create an XML sitemap and register it will all three major search engines (not just google.com/webmaster). Check back and make sure the everything is verified and indexed.
Also create an HTML sitemap (internal linking helps the search engines find every page).
Not sure if anyone mentioned running it through YSlow to test load times…?
September 21st, 2009 at 10:39 am
Shelli Langdale says:
Most definitely, it’s the favicon.
September 21st, 2009 at 12:49 pm
mich says:
Yes, especially Favicon, and 404.
I would also add: removing all dummy text and images. Sometimes I forget to actually do the stuff that says “To do later” since it looks like it’s done.
September 21st, 2009 at 12:50 pm
brian says:
It’s already been said, but it goes for being said yet again… Validate.
September 21st, 2009 at 1:39 pm
Me says:
So correcting spelling mistakes makes you look professional but always forgetting 10 things before going live doesn’t?
Fuzzy logic. Clients should always be responsible for content – unless you’re also getting paid for being a proof-reader and seo expert, which as a web designer you’re most likely neither.
September 21st, 2009 at 2:35 pm
Tracy says:
I’m one of your loyal blog subscribers, so please; don’t shoot!
You’ve said really great stuff here, and half of it is stuff I tend to forget, too.
But this little bit in the “make sure you use spell check” portion of our program?
“… we should be reading out clients copy, not just cuting and pasting it into the CMS or webpage. Catching grammar or spelling errors in your clients copy makes you appear professional.”
Has a typo in it.
“Cutting” should have two Ts.
September 21st, 2009 at 5:44 pm
cornelius says:
Nice list. Here’s a few more:
- back up plan! For static web files and database if necessary.
- robots.txt. Hide directories and files not to be indexed by search engines.
- in addition to YSlow mentioned above, use smushit to optimize images.
- URL canonicalization. Choose whether to use “www” or not and then enforce it with an htaccess file.
- obfuscate email addresses
- test with CSS and/or images turned off. Is it still readable?
September 21st, 2009 at 7:26 pm
Andy Feliciotti says:
Great post… I always forget 404 pages!
September 21st, 2009 at 7:46 pm
corz says:
i cant believe u miss most of these to be honest, favicons are fine if the client doesnt want to pay for it, but everything else is standard issue imho
Cheers
C
September 21st, 2009 at 9:51 pm
Farrhad A says:
Awesome post! So many of these hold true for me
September 22nd, 2009 at 1:44 am
Ivan Mišić says:
Nice tips. Bookmarked
September 22nd, 2009 at 1:55 am
Matt Bee says:
Agree with Benjamin Falk – DON NOT remove outline on links. Chnage the hover and active state by all means to fit your design but don’t just remove the outline.
Apart from hindering the accessibility of the site, that annoys even those without disabilities that like to use a keyboard to navigate.
September 22nd, 2009 at 2:06 am
Yaili says:
I’d rename this article to “9 things you mustn’t forget while developing a site” and would remove number 4, just because it’s a big no-no and hampers accessibility not only for keyboard users but for people who are viewing a big list of links on your site – when they go back, how will they know which was the last link they clicked on? Sorry, but this trend of adding “a { outline: none; }” to popular CSS resets is starting to get on my nerves.
Other than that – over with the rant – spellchecking and favicon seem to be the most often forgotten ones (also making sure all your pages have a title).
Cross browser testing shouldn’t be done before launch, but during the whole development process
September 22nd, 2009 at 2:16 am
Ajay says:
Oh yeah! favicon and 404s always
September 22nd, 2009 at 3:22 am
Daniel says:
Good list. I’ve managed to forget some of these too!!
September 22nd, 2009 at 4:45 am
Cedric Dugas says:
+1 for favicon!
Sometimes I got broken images because of FF not showing them.
September 22nd, 2009 at 5:49 am
Paul Olyslager says:
I tend to forget to check if everything is actually working with the signup of a feed… and ofcourse, the favicon is one of my favourites as well.
September 22nd, 2009 at 6:07 am
webmasterdubai says:
really nice post, these are things which i forgot every time while lunching the site..nice post
September 22nd, 2009 at 6:40 am
Sully says:
Excellent List!
September 22nd, 2009 at 7:09 am
Yigit Ozdamar says:
Great list Niki! Thanks!
September 22nd, 2009 at 11:23 am
John says:
Undoubtedly one always tries to slip by…
The only one I would add is check/validate HTML, CSS and base accessibility. Nice list!
September 22nd, 2009 at 1:14 pm
Gennice says:
Excellent! I was just preparing to launch a new design blog!
And I almost missed some of these…
Thanks!
September 22nd, 2009 at 1:53 pm
Jason says:
I always start out with the easy ones, favicon, 404 and image outlines are always in my stylesheet. get them out of the way first so you don’t have to remember later on!
September 22nd, 2009 at 8:08 pm
Eric says:
301 redirects are important for a re-launch & a 404 page just in case.
September 23rd, 2009 at 6:10 am
jgraziani says:
Great list! It’s a lot to think about — no wonder some items fall through the cracks. Thanks for sharing!
September 23rd, 2009 at 6:51 am
Norik says:
here are few more:
-anti-bot the forms
-add the robot.txt file
-use proper and semantic id and class names
-check for valid markup
-and if you have rss feed don’t forget to include the meta tag for it in the head.
-test the website with actual users and see their behavior & do more changes till you got it perfect.
September 27th, 2009 at 2:38 am
Josh of Arc says:
A few SEO friendly things you can do (on top of the already-mentioned meta data and valid markup):
1. Redirect to www (so that domain.com/subdomain redirects to http://www.domain.com/subdomain) to avoid double indexing by adding this to your .htaccess file:
Options +FollowSymlinksRewriteEngine on
rewritecond %{http_host} ^domain.com [nc]
rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]
REPLACE domain.com and http://www.newdomain.com with your actual domain name.
***Note*** This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled.
2. Increase page ranking by adding the
rel="nofollow"attribute to offsite links and internal links that are not necessary to index (e.g., your “Contact us” page)September 28th, 2009 at 12:01 pm
Ebizwebworks says:
I would comment that Web Analytics can provide you with a wide array of statistics and information about your website and its users. I use Analytics to track searches, popularity of articles and to watch users visit the website in real time. Analytics can also be used to inform future design iterations and help make decisions based on visitor behavior.
October 7th, 2009 at 1:23 am
XABY says:
This is so going into our checklist before launching a site for clients.
thanks!
October 8th, 2009 at 6:03 pm
teebee says:
Anyone else notice that this page doesn’t have a favicon?
October 13th, 2009 at 8:09 am
teebee says:
Well, now it does…Firefox wasn’t displaying it right off… :}
October 13th, 2009 at 8:10 am
Sean says:
There was a blog post somewhere else concerning doing a:active {outline:none} instead of just on a. This (theoretically) should allow you to keep all of the accessibility benefits while eliminating the design “problems” the outline represents.
October 13th, 2009 at 6:18 pm
Wim says:
@Sean
http://www.456bereastreet.com/archive/200910/remove_the_outline_from_links_on_active_only/
October 13th, 2009 at 11:00 pm
kre8iveminds says:
Great post. I personally give more attention to cross browser testing. Also the sitemap is very necessary in the website.
October 20th, 2009 at 10:39 pm
Gify says:
Great stuff you have here!
For me designing is the adventure, every time the process looks different.
Regards,
Janet Gify
November 11th, 2009 at 11:29 am
guest says:
I'd check the site is SEO friendly, also would make sure I've got a live link/s in to it to get spiders to hit it (tweet it, a fast way of getting indexed)
January 1st, 2010 at 11:06 pm