Category: WebDesign

Site Testing Checklist

It’s wise to test your site as you’re building it. Check your pages for accessibility, for validity, for appearance and function as you go along. Don’t wait until you’re finished to think about things like valid code and accessibility.

Even when you do those things as a normal part of your process, you still need to perform a number of tests after the files are uploaded to a live server. Here’s a brief checklist of things you need to test when your site goes live.

  • Validate HTML and CSS
  • Run accessibility checks
  • Check every function and script
  • Check spelling and grammar
  • Check page appearance in a variety of browsers
  • Evaluate the site with CSS disabled
  • Evaluate search engine friendliness

    How to Nuture Web Pages for Growth

    Give every page the minimum nutrients for proper growth.

    • Every page needs a descriptive title. The title should give the name of the site and the page contents something like this: How to Nuture Your Web Pages: Web Teacher.
    • Every page needs headings and information that explain what the page is about.
    • The page content must be focused and clear and contain keywords that help machines like search engines identify the topic of the content.

    Titles, headings, and page content are used by the search engines to index your pages. If you want to be found by someone who might search on your topic use all three. I don’t know if this approach will work if you are waiting for Prince Charming (or Princess Charming) to find you, but it works for web surfers.

    6 Tips for Hiring a Web Designer

    If you are a small business person looking to hire a web designer here are some things you need to think about. Some are things you need to have thought out before you begin, some deal with finding the right person for the job.

    1. Domain name. The domain name is the word after the www in your internet address. There is a cost for this.
    2. Hosting. A web site needs a server, also called a hosting company, who charge you to serve or host your web site. The charge can vary from around $20 a month up into the hundreds of dollars a month depending on your site.
    3. Content. You will have to provide the information that the designer puts in the website. This might be images, text, keyword ideas for search engine success or something else. You have to commit the time to put all this together.
    4. A goal. You have to be clear about what you want the site to do and be. Why do you need the site? Be ready to communicate this to the designer so that the site can be created to achieve that goal.
    5. A contract. Deal with someone who is a professional. Sign a contract. It gives both parties, you and the designer, a legal basis for doing business. Make sure you know how much you will be charged for the work. Some designers charge by the hour, some by the job. Many ask you to pay half or a third of the price upfront, so be prepared to do that. If you want changes after the original specifications are agreed to and the contract is signed, it may mean additional costs.
    6. It’s business. You are doing business with someone. Don’t expect free services, such as examples of what the designer would do with your site before you’ll agree to hire them or before you pay them any money. Imagine that you own a women’s clothing store. Would youlet me walk into your store and ask for eight or ten dresses free so I can be sure I like the way they look, because if I did, then I might come back and really buy a dress from you?

    When should we teach microformats?

    Since I read Microformats Made Simple I keep toying with this question: when should we teach microformats?

    Odd that I didn’t think about this when I read Microformats: Empowering Your Markup for Web 2.0 or when I recommended a couple of articles by John Allsopp in this post.

    My only excuse is that I was concerned with learning to use microformats myself for a period, but by the time I read Microformats Made Simple I was ready to think about sharing the information.

    Here’s what I’m wondering. Do microformats have a place in a standards-based curriculum like the InterAct Curriculum? When done right, microformats use both valid and semantic HTML. Should they be introduced as a best practice when working the way through a web design 101 or web development 101 or basic HTML class?

    For example, when a student learns to create a hyperlink, should the rel attribute be included with that instruction as a standard practice?

    If I taught a student how to make a link to their home page, should I teach them to do this:

    <a href="http://www.webteacher.ws/" rel="me">Web Teacher</a>

    or this?

    <a href="http://www.webteacher.ws/">Web Teacher</a>

    Or perhaps the web design 101 courses need a module or a couple of lectures or a single lecture/lab on microformats in one concentrated dose? When should a student learn to make an hCard? Or to use any other microformat?

    What do you think?

    Using CSS background-image to style links

    There are many ways to style links with CSS. One possible way is to use the background-image property to distinguish the various link states.

    Link states are represented in CSS by selectors involving the a element, which targets an HTML a tag in a link like <a href="somepage.html">Some page</a>. The potential states of a hyperlink are link, visited, hover, active, and focus. In CSS rules, these selectors are written as:  a:link, a:visited, a:hover, a:active, and a:focus.

    Let’s assume you have a set of images suitable for link backgrounds. These images might involve color changes, show small arrows or glyphs, or various other small but meaningful graphic enhancements meant to indicate link states. Further, assume the images are named hoverbg.jpg, linkbg,jpg, and visitedbg.jpg.

    Start with the normal link state, a CSS selector that will style all your links until overruled by a subsequent rule.

    a:link {
    background: url(img/linkbg.jpg)
    }

    This will put your background image behind the text of you links. The next rule in your CSS should style visited links.

    a:visited {
    background: url(img/visitedbg.jpg)
    }

    Any visited link will now have a different appearance to your user.

    Finally, add a rule to style the links while they are in the hover state or in the active state. You can use a group selector for this.

    a:hover, a:active {
    background: url (img/hoverbg.jpg)
    }

    This rule will style the link while is is hovered over or being clicked.

    You could add a:focus to the group selector in the last rule, although I’m not sure it would be that useful in this scenario. Focus states are important to users browsing with assistive devices and visual difference like background images may not be relevant to them. Focus states are important to users who use the keyboard to move from link to link.

    Useful Links: FTC, font-embedding, microformats

    The FTC and their new guidelines at Worker Bees Blog is a round up of all the correctly vetted and fact checked information about the new FTC guidelines for bloggers. If you want the straight story, go there.

    Becoming a font-embedding master from Jonathan Snook takes a look at all the aspects of this technique.

    A truly excellent presentation from Emily Lewis of A Blog Not Limited is Basics of Microformats. Emily has a book coming very soon titled Microformats Made Simple. She really knows her stuff and can make the presentation sing when she delivers it in person and answers questions along the way. Need a speaker for your conference who can talk about microformats? Here she is.

    Useful links: OWEA, Scrunchup

    Industry body forming to address IT graduate skills is an interview at Computerworld with OWEA co-chair John Allsopp.

    The Open Web Education Alliance (OWEA), which is due to be launched early 2010, will be dedicated to promoting the best ways in which Web professionals and IT graduates can gear themselves up for the workforce.

    OWEA co-chair John Allsopp, said there is concern among people in the industry around the world that educational institutions are not addressing all the relevant skills potential Web designers, Web developers and other Web professionals need.

    “Even if they study things that are relevant to their role in the industry, what they’ve learnt is very little to do with the reality of the Web,” Allsopp said. “Most of the very experienced Web practitioners, no matter what their background, are largely self-taught because the industry is so rapidly evolving.”

    The first issue of Scrunchup is out. Scrunchup is web magazine for young designers and developers. The founders are Anna Debenham and Paul Randall. Their purpose:

    We made Scrunchup because we were fed up with the lack of decent advice out there for students wanting a career in web design or development. Most of the courses on offer are out of date, and don’t teach relevant skills, and many young people come out of courses without the required level of knowledge to get a good job.

    Sure, there are lots of websites out there that give advice on writing really good code, but not many of them are aimed at young people who are just starting out. We also want to foster a community, and create a friendly atmosphere for young people to ask questions without feeling intimidated.

    The initial issue of Scrunchup contains an interview with high school web design instructor Zac Gordon, an intro to web standards by Chris Mills, a piece on employment by Paul Boag and Marcus Lillington, and a story about the path to success by Anna Debenham.