Creating a Print Version of Your Website

Once upon a time, a user searches for “how to care for roses” in Google and stumbles upon your website. They see that your website contains a lot of valuable information, and they want to print off your page so that they can refer to it later when they’re gardening. So they hit the print button and go to their printer to collect the page… only to see that the page is weirdly formatted, runs off the page, and wasted a LOT of their printer ink. Needless to say, they’re a bit disappointed.

This problem could’ve been avoided if you had a print version of your website. This means optimizing your website so that when the user tries to print your page directly from the web browser they’ll have something they can actually use. In order to accomplish this, you’ll have to create some CSS styles that alter your webpages’ design only when the user hits print. Once you’ve created this optimized stylesheet (we’ll call it “print.css”), you’ll link to this stylesheet under your main stylesheet. This link would look something like this:

<link rel=”stylesheet” media=”print” scrc=”print.css” />

As you can see, the media is set to “print”; this tells the browser to only implement this stylesheet when the user tries to print, and no other time.

Now that we know how to link to this stylesheet properly, here are some tips to follow to create a stylesheet that formats your webpage properly for printing:

  1. Remove All Background Images/Colors: The quickest way to eat up all of the visitor’s printer ink is to leave in your background colors and images, and believe me, you DON’T want to do that to them. In your stylesheet you should override any “background-image” or “background-color” style with either “none” or “white”.
  2. Remove Color in General: In fact, you should try to avoid using any color altogether. Colored ink is much more costly than black ink, and so you should try to be mindful of that. Set all your elements to black or white, and maybe gray if you need some variation to maintain your design. Even if your logo is in color, you should have a black and white version that is print-ready.
  3. Remove Unnecessary Content: The reason that a visitor is printing off your webpage is that they want the important content that contains the information they were seeking, and that should be all you give them. Cut out any and all unnecessary elements such as your primary and secondary navigation, search box, social media icons, advertisements, etc. However, don’t go on a cutting frenzy and cut everything BUT the content; some elements you might want to keep or add in addition to your main content might be things like your website’s logo or a URL to the page they printed off so they can find you again.
  4. Readjust Font Sizes: More than likely you’re going to need to increase the “font-size” for your printed page. Your visiting gardening enthusiast may want to be able to read the page while their hands are full of dirt, and so having your content at an increased size is very helpful.
  5. Insert Page Breaks: One thing you might notice is that when you print off your web page, your content may break in weird places onto the next page. To avoid this problem add page breaks within your content by targeting them with the “page-break-before” or “page-break-after” properties in your CSS stylesheet. For example, if you want the page to break to a new page when reaching a new section of the page, you could add a style such as “page-break-before: always” that will tell the browser to always insert a page break right before this element.

Sources: [ Make Your Website Printable with CSS ], [ Make Your Site Printer-Friendly With CSS ], [ Optimizing Your Website Structure for Print Using CSS ]

Effectively Titling Your Website

Title tags (<title>My Website</title> for example) are a HTML element that defines the title of a specific page of your website. These titles appear in the “title bar” of your web browser (for this website it’s “PixelSheffield – Home” or “PixelSheffield – Effectively Titling Your Website” depending on which page you’re viewing this article on!) and are also visible when you view your website in a search engine results page. Since users first interaction with your website is very likely what they see on this search engine results page, it’s vital that you title your webpages effectively.

Here are some things to keep in mind when you’re titling your web pages:

  1. Make Sure EVERY Page Has a Title: The worst mistake you could make is to forget to even give your webpage a title at all! This may be difficult to ensure on a very large website with hundreds and hundreds of pages, but it’s vital that each page has one. If your page doesn’t have a title it won’t show up correctly in search engines (if at all), which will definitely result in a loss of potential visitors. Also make sure that each page has a different title and it isn’t using a default one provided by a WYSIWYG program.
  2. Utilize Relevant Keywords: If your website sells jewelry, you should definitely include jewelry-related keywords somewhere in your title tag. This could include relevant keywords like rings, necklaces, or even just jewelry! Having relevant keywords in your title will help users find you when searching for specific keywords, and the more people that can find you the higher your website will climb in the rankings. However, avoid keyword stuffing—most search engines can pick up on this and actually rank you lower.
  3. Be Accurately Descriptive: Your title tag should be descriptive of the page it’s representing. It makes no sense to title your page “Diamond Rings” if the page is all about sapphire necklaces. Make sure all title descriptions are accurate, while avoiding overly generic or verbose wording.
  4. Use the Optimal Length: If your webpage’s title is too long, search engines will actually truncate the title so that it fits on their results page. For Google the ideal title is between 50 – 60 characters long, and you should aim to for about this length. However, you should not sacrifice a good, descriptive title for the sake of squeezing under this character length.
  5. Don’t Forget to Include Your Brand: You should always include your brand name in the title tag somewhere; after all, you want to keep reminding visitors whose site they’re on! However, there is some debate as to where within the title tag you should include your brand name. A good rule of thumb is if your business is very well-known and the presence of that name can influence users to click the link to your website in the search results, put your brand name at the beginning of your title. Otherwise, add it onto the end.

Sources: [ Title Tag – Learn SEO – Moz ], [ Review Your Page Titles and Snippets ]

Book Review: Joomla! 3 Explained

Now that I’m wrapping up my second degree, I thought I’d share a book that I had to use for one of my classes that I thought was quite excellent. This book is “Joomla! 3 Explained: Your Step-by-Step Guide” by Stephen Burge, a book that discusses how to approach Joomla! (version 3) for the first time.

For those of you who are unaware of what Joomla! even is, it’s a free, open-source content management system (or CMS) for publishing web content. And just for a brush-up of what a CMS is, a CMS is a computer application that allows for the publishing, editing, and modifying of content all organized and maintained from within a central interface. A CMS that may be more familiar to you is WordPress; Joomla! is basically a CMS that is a bit more complex than WordPress, but not quite as complicated than Drupal.

What I really enjoyed about this book was how easy it was to read it. According to the preface, the author wrote the book as if he was writing for his own father (who I assume was also a first-time Joomla! user at the time this book was written), and I feel like this writing style made everything very easy to understand and straightforward. Difficult concepts are broken down into smaller steps, and concepts that are vital for you to understand are repeated quite often throughout the book so that you are sure to remember them. For example, the author introduces the CASh workflow (stands for “Categorize”, “Add”, and “Show”), which is a critical process to understand because it’s how you approach everything you do in Joomla! from adding articles to plugins to images to menus. This workflow is reintroduced almost every time that it’s used, and by the end of the book I was able to utilize the process without ever having to reference the book. In addition to the simple text, many images are used throughout the book that show screencaps of what the author is referring to in his steps, which is exceedingly helpful for a visual learner like myself.

In fact, there are very few negative things that I have to say about this book. There are a few typos and other small mistakes here and there, but I feel that’s pretty standard for any book and it certainly does not detract from the learning experience. Also, if you’re looking for a book that goes more into the coding aspects or other technical bits of Joomla! rather than the WYSIWYG side of the CMS, you might want to check out a different book. This book is pretty basic in those regards.

So if you’re wanting to learning Joomla! for the first time like myself, I highly recommend that you check out this book!

Floats vs. Column-Count

If your website contains a heavy amount of information, chances are that you’d benefit from having a multi-column design. You’ll be able to fit all of your information in sizable chunks without having the user scroll endlessly. Question is, how do you employ a multi-column design?

There are two ways to accomplish this: 1) you can use multiple tags and float them next to each other; or 2) you can use CSS3 column-count styling to set the number of columns you want for a certain block of text. Let’s examine the pros and cons of each.

Float Styling

Pros: Float styling has been around for a while, and so this particular style has a lot of browser support (even Internet Explorer 4.0+ supports it!), so you can be rest assured that anything you style with floats will work on almost everyone’s browser.

Cons: Floats—when it comes to creating multiple columns for text—are rather impractical. If your content doesn’t change often it’s not too bad, but if you know you’re going to be changing around your text a lot floated <div>s will quickly become a hassle to deal with. Adding or subtracting text can make your columns look weirdly uneven, and so you might have to go back and update your spacing so that it doesn’t break your design.

Column-Count Styling

Pros: One <div> tag styled with column-count is MUCH easier to maintain than multiple <div> tags styled with floats. This style automatically adjusts your content to fit into the multiple columns so adding or subtracting content is no problem.

Cons: This is still a relatively new style (just introduced with CSS3) and so there is not a whole lot of browser support for it. If your target audience includes those who don’t necessarily keep up with the latest browsers, chances are that column-count will not work in their browser, leaving your text as one huge block instead of your pretty multiple columns.


 

Conclusion: Which solution works best for you will most likely depend on who your target audience is. If you’re designing a website for an audience who are tech-saavy and like to use the latest and greatest technology, you’ll probably be safe using column-count styling for your content. However, if you’re designing a website for an audience that don’t use technology often (such as people 60 and older) or don’t have access to technology (such as people with low income), you want to avoid doing anything too fancy that is not supported by older browsers.

Simple CSS3 Transitions

If any of you have take a look at my portfolio lately, you may have noticed something new. If you haven’t noticed something new, or just haven’t looked at all, I encourage you to take a look at the portfolio page now. When you hover over one of the portfolio pieces do you see how the work title fades into a different background and font color? This was made possible with the help of CSS3 transitions.

You can do TONS of things with CSS3 transitions: you can change colors, heights, widths, position, shape, opacity, and more! If used effectively (don’t oversaturate your website with them) you can make your website more dynamic, interactive, and memorable.

Here’s a simple step-by-step tutorial on how I added CSS3 transitions to my portfolio to create a simple fade effect, but it’s easy to change these attributes to fit what you need for your own project.

  1. First, have your HTML elements set up: You can’t do any transitions if there’s nothing to transition! This is the setup I have for my code:

    <div class=”portfolio”>
    <a href=”#”><img src=”image.jpg” /><span class=”workTitle”>Work Title</span></a>
    </div>


    In case you can’t tell what’s going on, here’s the run down. I have an image (<img>) and a span tag (<span>) with the class of “workTitle” that present my portfolio piece thumbnail and my portfolio piece title. These two elements are encompassed within an anchor tag (<a>) which links the visitor to that portfolio piece’s individual page. All of this is finally encompassed within a div tag (<div>) that has the class of “portfolio”.

    Note: If you don’t know what these tags are, or what classes are, I highly recommend looking up some HTML tutorials before you continue.

     

  2. Style your HTML elements: There needs to be a starting point for our HTML elements; they need to have some basic styling that will serve as their “default” state. Since we’ll be changing our work title’s background and font colors, this <span> tag MUST have these styles already set. We’re going to set the background color to aqua and the font color to a dark gray:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    }


     

  3. Add your hover styles: We want the work title to change colors when the user hovers over the portfolio piece. This is a little bit tricky, because we want one element to change (the <span class=”workTitle”> tag) when we hover over another element (the <div class=”portfolio”> tag). Normally when you create hover-based transitions you’re changing the specific element you’re hovering over—in this example that would mean we change the <span> tag when hovering over the <span> tag specifically—but in this case that would mean the visitor HAS to hover over the work title for it to change. We want to be able to have the work title change colors even when the user is hovering over the image as well. Therefore we must target the <div class=”portfolio”> tag. In order to do that, here is the code we’ll be using:

    .portfolio:hover .workTitle {
    background: rgb(38, 38, 38);
    color: #FFF;
    }


    Basically we’re telling the browser that when the user hovers over the tag with the class of “portfolio” (our <div> tag), we want the background color and font color to change to these colors for the tag with the class of “workTitle” (our <span> tag).

     

  4. Add your transition: Now comes the fun part, adding your transition! The transition will be affecting our work title, so we must add the CSS3 style to the <span> tag with the class of “workTitle”:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }


    So what are we looking at? In order to make a transition we must call the transition property. The syntax of this property is as follows: style property > duration > timing. In this example, I am targeting the background property and I want it to change over 0.3 seconds with a timing of ease-in-out (this means it will have a slow start and slow end, speeding up in the middle). You can change these attributes to whatever makes sense for your project. You can change the duration to last for 120 seconds (I wouldn’t recommend it though) or you could change the timing to ease, linear, ease-in, ease-out, etc.

And you’re done! You now have a beautiful transition that will make your website more visually interesting. You can change most any step in this tutorial to make it work for your website, but be careful: do NOT overuse transitions! Using transitions sparingly is much more effective than using it everywhere you possibly can.

Responsive Web Design

It was much easier to design websites back in the day where the only thing you had to view your website was your computer. There was only one screen size available, and so there was only one screen size that you had to consider when developing your design.

That’s no longer the case. Nowadays the number of screen sizes are growing exponentially as more and more devices get released. You now have to consider a wide range of devices: smartphones, tablets, phablets, desktop computers, televisions, and much more. In order to optimize your content for all of these devices, you must employ responsive design on your website. Responsive Web Design (or RWD) is the process of designing and developing websites that are able to react to user behavior and adapt to changing mediums (screen size, platform, orientation, etc.). Using RWD is important because it allows you to deliver web pages of variable sizes to ALL of these devices without having to create a new website for each and every screen size, which would just be tedious and awful.

responsive design

You can type in “responsive web design” into a search engine and pull up thousands of resources that go in depth about RWD concepts. Here are some of those basic concepts:

  1. Set the Viewport: The first thing you should do is throw this into your <head> section of your website…<meta name =”viewport” content=”width=device-width, initial-scale=1.0″>What does this do exactly? The meta viewport tag modifies the virtual viewport of the device, which in turn changes the behavior of the browser. The width=device-width matches the width of virtual viewport of the device to the physical width of the device, and the initial-scale=1 controls the zoom level when the page is first loaded. In short, this will make your content resize appropriately on every device.
  2. Do not use fixed units of measurement: Back in the day you could design a website down to the last pixel, having a fixed width and height for every element. However, pixel units are not RWD-friendly. Avoid pixels and stick with relative units like percentages (%) or ems. These relative units will adjust based on the screen size you’re using to view the content; for example, a <div> box with a width of 70% will ALWAYS have a width of 70% no matter if the screen size is 1000px wide or 500px wide. Percentages are best used for boxes that wrap content and images, while ems are best used for font sizes.
  3. Use CSS Media Queries: Using fluid units of measurement will certainly help you create a responsive design, but it will only get you so far. There will be several points where your design “breaks” (called breakpoints) and you’ll likely have to change some of your CSS styling to fix these breaks. However, in order to have these fixes only affect your design when the design actually breaks, you’ll have to utilize CSS media queries. These media queries will query your device to find out information such as browser or devices width or height, resolution, orientation, and much more. Based on the characteristics they query, they will target that characteristics and only have style changes take effect when the conditions are met. For example, say you want the background to change from black to white once the screen size gets smaller than 500px. This would be the code you’d put in your stylesheet:@media screen and (max-width: 500px) {
    body {background-color: white;}
    }
  4. Mobile first?: You may here the term progressive enhancement used when designers talk about RWD. Progressive enhancement is the idea that if you start designing a website at a mobile size and work towards a desktop size, you will ensure that your website will look good across all screen sizes. Designing for mobile devices certainly has more restrictions than designing for a desktop computer, and it’s much easier to add content rather than subtract from it. However, I personally do not think it’s a necessity to design starting with mobile first, and actually I always design my responsive websites starting with desktop sizes and going towards mobile devices. I think it comes down to a matter of preference; if you’re more comfortable with adding content then start with mobile, if you’re more comfortable subtracting content then start with desktop. Despite this, I agree that progressive enhancement is probably the best practice.

There are some things to consider before deciding if RWD is right for your website. The biggest item you should consider is whether your content is appropriate for small screen sizes. If your target audience never uses smartphones to look up your content, it would be a waste of time and money to design for mobile devices. Sometimes you may find that it might be better to create a web app for mobile devices completely separate from your website. While responsive design is something that is becoming more and more necessary as new devices get released, do take the time to consider if it’s right for your website.

Sources: [ Responsive Web Design Basics – Web Fundamentals ], [ Responsive Web Design – A List Apart ], [ Responsive Web Design: What It Is and How to Use It ]

Designing for Mobile Devices

Before we have a discussion about responsive design (which we will have very soon), I thought it might be a good idea to first examine what it takes to have good web design for mobile devices. When dealing with mobile design, it’s a constant battle to fit all of your content on a very small screen. Here are a few tips that will help you figure out how to present all your information while keeping user frustrations to a minimum.

  1. Simplify and optimize core content: With a desktop website, you can put in as much information as you’d like without problem (well, don’t put in TOO much). With mobile devices, the screen size is much smaller, and so you need to be choosy with your content. Only present the most vital information in small, scannable chunks and cut out the rest. Doing this will benefit your website in several ways: 1) you reduce the amount of scrolling a user has to do; 2) you decrease the loading time for your website; 3) relevant information is much easier to find; and 4) you have more available space so you can increase font size, reducing user eye strain.
  2. One-column designs: When viewing websites on a desktop computer, it’s very likely that you’ve seen many designs that use multiple columns. This makes viewing information easy, but on a mobile device this multi-column design will only make your text extremely tiny and difficult to read. You want to reduce your design to one column only, that way your images and content can utilize all the available space possible.
  3. Make buttons/links BIG: It’s easy to click on tiny links on a desktop; you have a tiny little arrow that you can move with precision with your mouse or trackpad. On a mobile device it’s very unlikely the you have this kind of accuracy so you must accommodate. Make buttons big and text links long, as this will give users more area to hit with their fingers.
  4. Consider hiding navigation: While you could have a large, button-style navigation at the top of your page, another space-saving option would be to hide your navigation. This is usually done by having a small icon with a menu symbol (usually three horizontal lines) that opens up to reveal menu links when the user touches the icon. The advantage of this is that you can have the icon fixed on the screen so that no matter how far down the user is on the page they can easily access it without it being obstructive.
  5. Keep file sizes small: Mobile devices are not going to have the same connectivity that desktops have. Loading rates are going to be much, much slower, and so it’s essential that you keep your file sizes as small as possible so total loading time is reduced. File sizes can particularly spike when it comes to images, so consider optimizing your images to appropriate file types and sizes (although you should be doing this anyways!).
  6. Use a responsive layout: If you’re designing for mobile devices, chances are that you’re not designing for just one device. With a vast multitude of screen sizes available, it’s best to design a responsive website. This means using relative units of measurements like percentages (%) or ems, rather than absolute units like pixels. In particular, you want to have images that scale nicely across screen sizes. Responsive design will be covered in more detail in another article.
  7. Reduce user input: If there is one common aggravation that most users have experienced, it’s trying to fill out a registration or some other form on a phone. It’s tedious to type out your information, and it’s even more irritating when your session times out as you try to hit submit. Therefore, you should try to keep form inputs to an absolute minimum. If a user is trying to register to your website, have them only provide a name, username and password; if you need more information beyond that, have them fill it out at a later time so they can complete it at their convenience.

As always, there is much more to consider when it comes to mobile design than what is listed here. However, I feel these seven tips are probably the most important to keep in mind the next time you’re designing your website.

Sources: [ A Look Into: Designing for Mobile Devices ], [ Mobile Web Mastery: 25 Tips on Designing for Mobile Devices ], [ Mobile Website Design: 30 Pro Tips ]

Simple Steps to Improve SEO

If you want more people to see your website, Search Engine Optimization (SEO) is the way to go. SEO is the process of improving a website to increase the amount of traffic the website receives from high rankings in search engine results. Basically, the higher up your website appears when someone searches for something in using Google, Bing, Yahoo!, etc., the more likely you are to get new visitors. Therefore, you want to have the highest ranking as possible in order to have more visitors coming to you instead of your competition. At the very least you want to get to a point where your website appears on the first results page, but ideally you want your website to rank in the top five positions.

Proper SEO is a time consuming process of constant researching, analyzing, updating and optimizing; it’s practically a full-time job. If you are a part of a large company,  you’re better off hiring someone that can do all of this for you. However, if you’re just starting out there are a few things you can do so you’re starting off on the right foot. Below is a quick list of some things you can do in your HTML code to improve SEO.

  1. Provide Meta Tags: Meta tags encompass a wide range of informational tags, such as author, description, keywords, and more, and they are all contained within the <head> section of your website’s code. While many sources indicate that the keyword meta tag is becoming less and less relevant, it’s still important to optimize your description meta tag. The description you write will be what is displayed under your website’s title on the search engine results page (SERP), so it’s vital to include appropriate keywords and information within this tag to be indexed.

    <meta name=”description” content=”Fresh Swirl Cafe breakfast restaurant provides a wide variety of omelets, fruit, biscuits and other pastries at an affordable cost.”>

  2. Write a Descriptive Title Tag: Just as the description meta tag will appear in the SERP, so does the text you put in the <title> tag; the text you put in this text will display the title of your website as a link that users can click on to visit your site, so you have to make sure enticing and informative. The coding for the title tag also appears within the <head> section of the code, but unlike the meta tags that remain hidden, this text appears at the very top of your browser window. It’s very important to include only relevant keywords that concisely describe your page’s content, as only the first 60 or so characters will appear in the SERP.

    <title>Fresh Swirl Cafe – Breakfast Restaurant</title>

  3. Keep Order with Heading Tags: Heading tags include <h1>, <h2>, <h3>… and so on. These tags define the hierarchy of your web page. The page’s main title should appear within the H1 tag, and you should only have one H1 tag on each page at a time. However, you can have as many H2, H3, etc. tags as you’d like, since these should act as subsections of your H1 tag that not only help break up your content in more readable chunks, but also help web crawlers (also known as spiders) categorize your information.

    <h1>Fresh Swirl Cafe</h1>
    <h2>About Us</h2>

  4. Create URL Links that Make Sense: You should always try to incorporate your web page’s title and other keywords into the URL of each page. When you link to this URL (within an anchor <a> tag, for example), these keywords will be indexed by web crawlers. In addition, it may help users remember your website easily since the URL will accurately describe the website’s contents.

    <a href=”http://freshswirlcafe.com/about-us.html”>Fresh Swirl Cafe</a>

All the information I’ve provided here barely scratches the surface of SEO; even though these tend to be the most important tags to try to optimize for, you should also aim to make sure your body text is also optimized. Keywords that you use in your title, description, and headings tags should also be reflected within the site’s content. However, try to avoid keyword stuffing, and only write what is relevant and what sounds natural.

Sources: [ SEO: The Free Beginner’s Guide ], [ What is SEO/Search Engine Optimization? ], [ Google SEO Starter Guide ]

Website Validation Part 2

Last week we talked about the importance of website validation, along with providing some tools you could use to validate your own website. Today I’ll be continuing this discussion by providing you with even more resources that you can use in your validation process, with a quick rundown of what each validation service offers.

W3C Link Checker: Another validation service by the lovely people at the World Wide Web Consortium (for those that do not remember from last week, the W3C is an international community that develops many of the web standards that developers adhere to today). This particular validator checks for any issues involved with the links, anchors, or referenced objects within your HTML markup or CSS style sheets. The last thing you want on your website is a broken link, as that translates to “bad upkeep” and will turn away potential customers.

Web Accessibility Checker: Do you remember the importance of web accessibility? Just as a refresher, web accessibility means having your website accessible to everyone, particularly focusing on people with disabilities. After you provide your website–either by entering your URL or uploading your code files–this validation tool will list out all the ways you can improve your website in its current state so that it is meets accessibility standards.

W3C mobileOK Checker: In today’s world, having your website accessible by mobile devices is becoming increasingly vital. This W3C checker performs a series of tests to specifically see if your website is mobile-friendly. I cannot stress enough the importance of having your website viewable on a tablet of smartphone (you will be missing out on a LOT of potential visitors if you do not design for these devices), so please do utilize this service to make sure your website is up to mobility standards.

Web Accessibility – AccessColor Tool: This tool complements the Web Accessibility Checker from before; this particular validation resource specifically checks for color contrast within your website. Its important that the text on your website contrasts sufficiently enough with your background color, otherwise no one can read your content! After providing your website for testing, this tool will actually rate the brightness and difference (contrast) of your text and background colors on a numeric scale, and point out exactly which bit of coding it’s referring to so you can easily remedy the issues.

Web Page Analyzer: Arguably one of the most important things to check for with your website is that people can actually access it. This website will go in and analyze the speed of your web pages; this refers to the download time of your text and images, or in other words, how quickly the web page loads on someone’s browser. After checking your website, it will warn you of any potential problems and offer recommendations on how you can improve the speed of your website.

These are all the validation tools I have to offer you for now. Hopefully you find these tools as useful as I do!

Website Validation Part 1

So you’ve just spent hours upon hours coding your website, and now it looks absolutely perfect. However, before you go publishing it on a server for the whole world to see, you should consider doing a quick validation check of your website. Validation just means checking your website to make sure the HTML, CSS, or XHTML are free from errors and up to web standards. You can do this by going through your code line-by-line and double-checking your work, OR the better option would be to use one of the Internet’s many validation tools!

There are tons of validation tools in existence, but here are just a few that I found to be helpful:

W3C Validation Service: You can’t go wrong with a validation service that is provided by W3C (for those that don’t know, W3C stands for World Wide Web Consortium, and they are an international community that develops many of the web standards that developers adhere to today). You can validate your code in three different ways: 1) provide a link to your website already on the web, 2) upload your files that contain the code, or 3) input the code directly into the text box on the validation site. This validator automatically detects the code you’re inputting, so all you have to do is hit the large “Check” button, and the validator will output a list of any warnings or errors that it finds.

W3C CSS Validation Service: While the first W3C validator website checks mostly for errors in HTML and XHTML coding, this validator is specifically designed to check CSS coding.

HTML Validator Pro: As you may suspect from the name, this website only validates HTML. However, this validator does provide some nifty tools that you can use. You can check specifically for spelling, broken links, or even page ranking.

Browser Shots: If you’re wanting to see how your website looks in different browsers, but you don’t want to go through the hassle of testing each and every browser individually, you’ll find Browser Shots to be a timesaver. Enter your website URL, and the validator will take screenshots of your website on any number of browsers of your choosing and then output them for you to see and compare.

As I stated earlier, it’s very important to validate your websites before you publish, as there are a lot of benefits to doing so. By validating your website, you ensure that it will be interpreted the same way by search engines, browsers and users, as your website will be conforming to web standards. This means that your website will become accessible to more people, which will boost your rankings in the search engines.

Compatibility across browsers is very important to check; sometimes there might be an error in your HTML/CSS code that Google Chrome might overlook, but it will mess up your code when viewed on Firefox. In regards to search engines, broken code (especially broken links) might be an indicator of a bad website, and so web crawlers may be wary about indexing your website. Things like this are vital if you’re trying to boost your web rankings, and so you should aim to validate your website not only when you first publish it, but every couple of months just to make sure everything is in working order.

Sources: [ Validating a Website ]