Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world.
This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.
Favicon
A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
And if you have an iPhone favicon:
<link rel="apple-touch-icon" href="/favicon.png" />
Titles And Meta Data
Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.
<title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title>
Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.
<meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />
Cross-Browser Checks
Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.
Proofread
Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.
Links
Don’t just assume all your links work. Click on them. You may often forget to add “http://†to links to external websites. Make sure your logo links to the home page, a common convention.
Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?
Functionality Check
Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.
Graceful Degradation
Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.
Validation
You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt†tags, no closing tags and using “&†instead of “&†for ampersands.
RSS Link
If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar.
Put this code between your <head> tags.
<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />
Analytics
Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.
Sitemap
Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is www.mydomain.com/sitemap.xml.
If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.
Defensive Design
The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.
Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.
Optimize
You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.
Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.
Back Up
If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.
Print Style Sheet
If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.
To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Download the Ultimate Website Launch Checklist!
Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.
The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released.
You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.
What other checks would you list?
Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments!
About the author
Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter.
(al)
© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
181 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: checks, design, launching, release, usability
by Lee Munroe
You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.
A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.
You may want to take a look at the following related articles:
What makes for a good personal portfolio website?
1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.
It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.
Mohit goes by the alias of CSS Jockey.
Jason Reed uses a signature-style logo of his name.
2. Tagline
Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.
Things to ask yourself when writing your tagline:
- What are you? A designer? A writer? A developer?
- What do you do? Design websites? Develop games?
- Where are you from? Country? City?
- Are you a freelancer or do you work for a studio? Are you looking for work?
Sarah Longnecker makes it clear that she puts together videos and is good at it.
3. Portfolio
This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.
Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.
It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.
Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.
4. Services
Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.
Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.
Chris Spooner clearly indicates the services he offers for both print and Web.
5. About me
It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.
If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.
Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.
Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.
6. Contact
This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.
Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.
Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.
7. Blog
A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.
Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.
Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.
Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.
8. Call to action
Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.
Each page should have a call to action, a “Next step.†The best way to accomplish this is with a “call to action†button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,†“Request a quote,†“View my portfolioâ€).
Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.
9. Use social networking websites
Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.
Sam Brown offers clear links to other websites he uses, allowing us to stalk him.
10. Language and communication
How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.
Marius Roosendaal uses a relaxed and friendly tone on his website.
Other tips:
- Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
- Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
- Link images, not just text. Most people will click on images, expecting them to point somewhere.
- If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.
40+ beautiful personal portfolio websites
Robbie Manson
F. Claire Scroggins
Timothy van Sas
Ole Martin Kristiansen
Maru Velázquez
Chikezie Ejiasi
Miki Mottes (Flash)
Jakub Krcmar
Mopa
Chris J. Lee
Pedro Lamin
Cartonblanc (Flash)
Leigh Taylor
Alex Coleman
Sarah Longnecker
Toby Powell
Jay Hafling
Elliot Jay Stocks
Tony Geer
Marius Roosendaal
Ryan O’Rourke
<img /> is everything (Phil Thompson)
Leigh Taylor
Design Me (Marek Levak)
Matt Dempsey
Brad Candullo
Andre Augusto
Rob Hawkes
Magnus Jepson
Corking Design (Daniel Cork)
Evan Eckard
Alexandru Cohaniuc
Miles Dowsett
Andrew Bradshaw
Shannon Moeller
Vitor Louranco
Mark Dearman
Wong Yeng Kit
Chris Wallace
Spoon Graphics (Chris Spooner)
Fabiano Meneghetti
Mark Wallis
Chris Morris
Paiko (Heiko Brömmelstrote)
Conan Robbins
Henry Jones
Winnie Lim
Greg One (Gregoire Hoin)
Mark Hadley
David Appleyard
Design Moves Me (Roy Vergara)
Brian Murchison
Mike Precious
Digital Deceptions (Duncan)
Chirag Solanki
Jason Reed
Johnston North (Stuart Johnston)
Penflare Designs (Sean Farrell)
Nine Lion (Chikezie Ejiasi)
Brian Wilkins
Jason Santa Maria
David Hellmann
Guillaume Pacheco
Dave Lam
Luke Stevens
James Lai
Alessandro Cavallo
CSS Jockey (Mohit)
Kerry Nehil
Darren Hoyt
Matthew Brown
Digital Mash (Rob Morris)
The Things We Make (Mike Kus)
Ed Merritt
What do you expect to see on a good personal portfolio website?
Anything important we’ve missed? What would make the difference between your deciding to hire someone and deciding against it?
Further reading:
About the author
Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog, or follow him on Twitter.
(al)
© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
174 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: design, Design Showcase, portfolios