Recommended Web Tools Archives

Created New Collection of Firefox Addons on Mozilla.org

In preparation for a series of blog posts on turning Firefox from a browser into a tool, I created a collection of those addons over on Mozzila.org

Take a sneak peek, subscribe to the collection, provide your own recommendations!

If you subscribe you can easily add those addons to Firefox from your addons menu. I will create a post on how to do that!

Do visitors really care about your website?

The answer is No.

And believing that people care about you and your web site is the number one website design mistake per Flander’s Biggest Mistakes in Web Design.

What do you think? Is he right?

I do tend to agree with him.

Over the last few weeks as I prepared to get back to writing again, I spent time cleaning up a few things around the website. Not only did I clean things up, I fretted, I worried, I got upset when the darn CSS would not behave. But was that all necessary????

Flanders offer the following essential advice on changing our thinking about web design.

1. The only reason my web site exists is to solve my customers’ problems.
2. What problems does the page I’m looking at solve?

The first should be a mantra we speak to ourselves daily. The second is a question we should ask every time I right a post or update a page.

As a web developer, take off your developer hat and put on your website user hat. Don’t forget that. You are a website user. Your visit and search for websites a good portion of your day. What frustrates you as a website user?

For me, I get totally ticked when I can’t find the NECESSARY and ESSENTIAL information about a topic that SHOULD be addressed by the website I am looking at. Now, understand, this is not about high expectations. But if I visit a flooring site to choose new flooring for my home, should it not have something about installation??? Actually, having that information may have sealed the sale for me. If I can determine that installation was rather easy, the sale may have been just a few clicks away. But since I am left in the dark on installation, I am off looking at other products.

Now look at your own website. Heck, what about this post? What problem does this post solve?

Answer: it is aimed at turning a mindset around to think from a problem solving orientation towards web and content development rather than a pure, “boy that design is sure cool” orientation.

Flanders goes on to state that any website’s visitors have four essential problems:

1. They want/need information
2. They want/need to make a purchase / donation.
3. They want/need to be entertained.
4. They want/need to be part of a community.

Does your website/web page help solve one of them?

The Biggest Website Mistakes

I recently re-discovered Vincent Flander’s Web Pages That Suck. It has been a few years since I have read the site, but was happy to have found it again. I get large laughs out of his commentary but also from some of the websites that people think are “good”.

He has a great article on The Biggest Mistakes in Website Design 1995-2015. No that is not a typo. Mr. Flanders is being facetious. As he states, “it’s human nature to repeat your mistakes over and over.”

I thought I would be good to go over the mistakes one by one. There are GREAT lessons here for everyone in web design whether you are a beginner or an expert.

Stay tuned…

Fixing 403, 404 and 500 errors when using timthumb.php

Many new WordPress templates have been incorporating the timthumb.php thumbnail generator.

If you run into any 403, 404 or 500 errors when implementing timthumb, here are a few tips:

• Make sure the timthumb.php file has its permission set to 775
• Make sure the “cache” folder’s permissions are set to 775. The cache folder is generated the first time you try to run timthumb. It is located within the same directory as the timthumb.php file.
• If you host your website on HostGator, you will need to ask them to change a few settings within mod_security for Apache. This is a documented issue with timthumb usage on Host Gator. Below is an email I sent to them making my own request:
  

  Dear Host Gator,

  I recently updated my WordPress website with a theme that uses the
  timthumb.php thumbnail generator.

  I have learned that in order for it to work properly HostGator needs to
  change a few setting for my website. When I try to run timthumb I receive
  a 403 error.

  I need the following rules [1234234,340151, 340153] added to mod_security
  for www.recommendedwebtools.com.

  Please let me know if there are any questions or concerns.

  Thanks!

  Contact Host Gator at their support email address. They responded within the hour and the setting was changed shortly thereafter.

Happy Thumbnailing!

Two fundamental problems with CSS optimization and compression

Compressing CSS files can greatly reduce the size of the file and thus reduce the amount of bandwidth used every time the file is called from within a webpage.

On this blog I have talked about two tools that assist in compressing CSS files: CSS Tweak and Code Beautifier.

There are two problems that you should be aware of before using any CSS compression tool. These problems are related to editing the file.

The practical practice of editing the CSS file is hampered in several ways. When a CSS file is optimized and compressed, all the white space is removed. Thus, all the code is scrunched together. All line breaks and carriage returns are removed. When an optimized file is opened in a text editor, the text fills the screen and is difficult to read. Finding the item that needs to be edited is difficult. These problems exist even in tools such as Top Style Lite. While Top Style Lite can still find all the selectors, it cant navigate correctly to them since all the carriage returns are removed. It sees the file as one big long text sentence. It can’t find individual terms without the proper breaks and spacing.

To get around this issue it becomes necessary to have two CSS files. One that is readable yet not used “live”. The second one is a compressed version and is used in the live environment. When changes to the CSS file need to be made, changes are made to the readable version which is then recompressed. This recompressed file then replaces the current compressed “live” file. It can be a pain in the patookus.

If anyone has any practical advice please leave a comment. I am curious how others handle the editing of their compressed CSS files. I am especially interested if there is an editor that can easily read and find selectors of compressed files.

Advanced CSS Optimization with Code Beautifier

There are several frustrations working with CSS files. One is keeping the size of the CSS file small so that it does not take up a lot of bandwidth. Second, is keeping the CSS file “clean”. CSS optimizers seek to help users overcome these frustrations.

There are several CSS optimizers out there and I have reviewed one other in the past. Code Beautifier is a little more advanced than other optimizers and provides a greater set of options to control the optimization process.

The interface is easy. Either copy and paste your CSS file into a text box or point Code Beautifier to the URL of the CSS file. I would suggest that Code Beautifer also include a means to upload an actual fiile.

There are several options for optimizing your CSS file.

• Compression – This setting determines the level of compression. The levels are Highest, High, Standard and Low. The difference between each is the level of readability. The Highest level will remove all white space and scrunch everything together. This is ideal if you are seeking to shrink your CSS file as small as possible. Users can also create their own custom compression levels. I have not read how to do this, but it involves the creation of a template.
• Preserve CSS – If checked, this will keep all comments and hacks. If you want to compress your file as much as possible it is best to leave this unchecked.
• Sort Selectors – This checkbox controls whether the optimizer should alphabetically sort your selectors. I am really surprised they offer this as an option. Changing the order of your selector WILL AFFECT THE BEHAVIOR OF YOUR CODE!!! Personally, I would not use this option unless I had a really small and simple CSS file.
• Sort Properties – If checked, this will alphabetically sort the properties underneath each selector.
• Regroup Selectors – If you have multiple selectors such as a, a.hover and a.visited it will merge these items under “a”. Unfortunately, this can have undesired effects. It will obliterate the differences and thus may change your styling. It is best to leave this at “Do not change anything”.
• Optimize Shorthands – A variety of values for properties can be written in a shorthand format. Choices include “Don’t Optimize”, “Safe Optimizations” and “All Optimizations”.
• Compress Colors – If checked colors such as #336600 will be rewritten as #360.
• Compress Font Weight – If checked, a font weight of “normal” will be rewritten as “400″, etc.
• Lowercase Selectors – makes all selectors lowercase. Recommended. This is needed to comply with XHTML standards.
• Case for properties – select the case for all properties and their values. Lower case is recommended.
• Remove unnecessary backslashes – this may affect any hacks. Careful with this.
• Remove last ; – removes the semi-colon at the end of each property
• Discard invalid properties – This is useful only in a development stage. Discarding invalid properties may remove selectors that affect the styling of your pages.
• add timestamp – adds a timestamp to file
• output as file – When optimization is complete, will provide a button to download the new version as a file. Otherwise, you will have to copy and paste the new code.

Once all options have been selected and the CSS file processed, Code Beautifier will output a series of messages of all items that have been changed. Below is an example from my test CSS file:

37 Optimised number: Changed “0px” to “0″
61 Optimised color: Changed “#000000″ to “#000″
62 Optimised color: Changed “#ffffff” to “#fff”
63Optimised color: Changed “#003366″ to “#036″
121Removed unnecessary backslash
Optimised number: Changed “1.0em” to “1em”
Optimised shorthand notation (padding): Changed “2px 5px 2px 5px” to “2px 5px”

Notice it provides the line number where the change was made.

CB will also provide the starting size, ending size and compression ration. My file started at 13.762 KB, ended at 8.522 KB, with a compression ratio of 37.9%.

Overall, Code Beautifier is a good tool though it may be a little dangerous for the beginner. Some of the options can have dire consequences if you are not aware of what the option may do to your file.

Code Beautifier is based on the open source project CSSTidy.

Easy CSS editing with TopStyle Lite

Ever try to track down a problem in your CSS file and find yourself frustrated in tracking down the exact class or id? When a CSS gets to be a certain length it can be a bear to maintain. CSS files are typically organized logically, never alphabetically so things are easier to find.

I have found using the Find function within my text editor is an inefficient way to find my way around my CSS files.

With TopStyle Lite, I have found an easy way to edit and maintain my CSS files.

The benefit of TS Lite is the ease of editing. If you are looking for a tool to help with CSS layouts, etc. then you will want to consider more professional versions. TS Lite helps me see my CSS files in a very organized way. There are two key panes in TS Lite. The Style Sheet pane and the Style Inspector Pane. The Style Sheet pane displays the CSS file you currently have open.

Sometimes a CSS file looks like a blur when viewed in a regular b&w text editor. Items within TS Lite are color coded for easy identification and readability. Color coding also helps in trouble shooting. It is easy to find missing dark blue parentheses, etc.

The Style Inspector pane is divided into two tabs: selectors and properties.

The selectors tab displays all the elements, classes and ids in the style sheet. As a reminder, elements are all items that are “standard” parts of html such as ‘body’, ‘table’, ‘h1′, etc. Classes are items defined by a period (‘.’) and are typically meant to be reusable. ID’s are items defined by the pound sign (‘#’) and refer to very specific elements typically used only once per page.

These three categories are displayed in a tree format. Below are screenshots of the three categories:

The organizational tree is extremely helpful. The item is placed in alphabetically ordered within the appropriate category. Need to find your #header id? Very easy to find. No more looking through your whole file trying to remember if you placed it at the top, in the middle or at the bottom.

Simply clicking on the element from the selector tab puts your cursor at the very place it occurs within your file. This is displayed in the Style Sheet pane.

For example, clicking on ‘body’ under elements will place your cursor right before the ‘body’ entry in the CSS pane.

Editing from that point is easy. Manually type the new code and click save.

If you are editing from the CSS Pane you have another option for adding properties. Instead of manually adding them, a property tab is available. The property tab looks like the image below.

The property tab lets you add properties view point and click. Its a nice feature to have only if you are unsure of the syntax. Once you get familiar with the syntax it is easier to type the code out manually. However, it can definitely be a benefit to beginners.

TS Lite also has a preview pane which will preview your CSS file. It previews colors and formatting. Keep in mind that it will not correctly disp

Is the PRO version of TopStyle or any purchased CSS editor worth it?

For the beginner I would say “no”. Save your pennies for other things. If you find you are doing A LOT of CSS work then I would download the trial version of TopStyle PRO and see if it meets your needs. If you only do occasional CSS work, then your text editor and TSLite are all you need.

Turning Firefox into a web development tool

Firefox is a great browser for many reasons. One of which is its ability to extend itself with addons. I have written a page about the Firefox addons that can turn Firefox into a web development tool.

Developing a blog versus a standard website

Sitting down and determining the format (or structure) of your website requires a little thought. With the introduction of blogs, developers have multiple options when consider the structure of a website.

There are three basic formats: Website as blog, Website incorporates blog, and website with no blog. I realize these are somewhat general. A problem exists when the word “blog” is mentioned. It can connote multiple meanings in people’s minds. If I mention that I have a blog, some people react by stating “How can you share your personal life on the web like that!”. In their minds, a blog connotes something that is inherently personal, an online diary. In actuality, the connotation is really a usage of format one above (and maybe number two).

What are the fundamental differences between these general formats?

The last is the easiest to explain since it has been around the longest. It is a website as it has existed since the web began. It is multiple web pages organized for accessiblity and usability to communicate content or a message.

A website that incorporates a blog meets the above criteria as well. However, a portion of those pages are organized as a blog. My website falls into this category. Click on “Blog” on the nav menu and your taken to the blog for this website. The blog does not form the structure of the website, rather it is part of that structure. Blogs used in this manner are either used to update individuals on newsworthy items or as a manner of creating ancillary content.

Websites as blogs are structured by the blog itself. Typically the homepage of the site is the main blog page which contains summaries of the most recent posts.

Which format is right for your site?

Most company and product website typicall fall into the “website incorporates blog” category. The blog should be used to keep visitors up to date on the latest news and updates. All other content is more “static” (which is a poor term to use but I can’t find one better) describing the nature and service of the company or product. Typically this content does not exist as part of the blog.

Consider the following three examples. I link to the main page, then to their blog. When looking at the main page look for a link in the nav bar labeled “blog”. In each of these cases, the blog is used to keep people up to date about the content and topic of the website at large.

1. Napping Book / Nap Blog
2. Great News / Great News Blog
3. Virtual Handshake / Virtual Handshake Blog

Smaller information websites don’t need a blog. These typically are not updated on a regularly basis or require the kind of updates that would necessitate a blog. They usually don’t have a need to connect with a particular readership. It could be argued that some of the below sites could benefit from a blog. However, it could be counter-argued that an email newsletter would better suit there needs to connect with an audience.

1. Playsets
2. Get rid of snakes
3. Rain Chains

Sites which comment regularly on newsworthy events or a niche topic are best structured as a pure blog. The blog, in these cases, gets the front and center attention. The blog itself appears on the homepage of the website. Typically when we mention the term “blog” we think of these kinds of sites. You are probably familiar with many, here are three examples.

1. SEO Book
2. Winds of Change
3. Small Dogs

It is hard to put into words something that is often a nuance. However, by looking at the examples provided you can get a picture of the general ways websites are differentiated. The point of this post is to help beginners consider the basic kinds of structure before they begin creating their own site.

Place quotes on your website with Quogr

Quogr offers an easy way for webmaster’s to place quotes of their own choosing on their website.

Admittedly, there are a ton of php quote scripts out there. Why use something like Quogr?

Well for starters, beginners might find php scripts too technical to figure out. Quogr provides simple cut and paste code that anyone can add to their website. If you can add Adsense to your website, you can add a Quogr quote block.

Second, YOU get to add the quotes you want to appear. Heck, you can even quote yourself!
A lot of of those php scripts come pre-loaded with tons of quotes. You may not want to have most or any of those quotes appear on your website. Quogr gives you the freedom to add what you want.

Whats a quote block from Quogr look like? See below:

Are Quogr quote blocks genuinely useful or are they simply website bling?

They are not for all websites. But if your website happens to be about promoting yourself, then Quogr could be a useful tool. In particular, I am thinking of all those personal coaching/self help kind of sites. Various inspirational speakers have a blog and and a store to sell their books and CD’s. Quogr would be an excellent addition to their website. Quotes from their own books and materials could appear within a sidebar. Put on your marketing hats now. Choose the right quotes and you could very well pre-sell your own material. Just a thought

Yes, Quogr could easily become website bling that will make you yawn. However, the right site, the right material with the right mindset, could turn Quogr into a very powerful self-marketing tool.

Disclosure: Paid Review

Definition of Web 2.0

In Steven Johnson’s Time magazine article “Its All About Us“, he gives what maybe the simplest definition of Web 2.0 that I have seen yet:

If web 1.0 was organized around pages, web 2.0 is organized around people.

Of course, boiling something done to its very essence sometimes isn’t very helpful. It might be better to say Web 2.0 is social. Though frankly, I don’t think people understand the term “social”. Because of our video game age, a better term would be “interactive.”

Web 2.0, then, is the interactive web.

2007 Wishlist

7 wishes for 2007

1. WordPress 2.1- Come on alreadyyyyyyyyyyyy.
2. Cleva Treva’s CSS Layout Tool- I would really love to see the tool focus on IE6, IE7, Firefox 1.5, Firefox 2.0, and Opera 9. Personally, I don’t see the need to continue to make sure things work in Netscape 4, etc. Also, I want all functionality to be complete. Plus, I would love to be able to create layouts with both columns on one side of the page.
3. SEOMoz Keyword Difficulty Tool- I want the ability to enter multiple keywords at once instead of one at a time. I would even pay for this service on a credits kind of basis sort of like how the new Nichebot is run.
4. Fast Remote Backups- I am afraid I won’t get my wish here. The very nature of secure, encrypted online backups ensures slowness. It just kills me to have to wait forever. Since my post about my original frustration with remote backups, I have received several emails from online backup providers. While all seem to be good products, they are ALL still slow.
5. Task Tool and RSS Reader interoperability- When I read something I want to write about later I either bookmark it or flag it from within my RSS Reader. I then go back and cut and paste the links to my task management tool. I would really, really like the ability to have an “Add As Task” button from within my reader. This would then add it to the Task Tool I have specified in some Admin Option somewhere. Talk about a time saver!
6. Better way for Text Link Ad publishers to approach advertisers- Currently, with most services, advertisers search for publishers. Why can’t it also be the other way around?
7. No more bloated software- I know this is a stretch. I am not just talking about operating systems either. I like things that are lightweight, take up few resources, and less space.

Fixed Width Layouts are best for beginners

I recently messed around with converting this website over to a liquid layout. For the last couple of months it has been in a liquid form. While I generally liked the look and feel, there were a few problems:

1) The website was borked when viewed with an 800×600 screen resolution. This was not a major concern since only 5% of the viewers of this website use 800×600. However, it still bothered me that I would either have to redo the entire design or create a special CSS file just for that resolution (which I know some sites do).

2) General weird bonkiness. I can’t explain all of the weird stuff that would occur. It seemed an issue of control. Various pages, under certain viewing circumstances displayed weird behavior.

While the percentage of viewers was small, it still bothered me that a portion of my viewers were seeing a messed up website. And while the general weirdness was mostly minor, I dreaded the thought of tracking down each individual issue. I am not a web developer by trade. I would rather write content than fix a web design problem. So with a tweak to the CSS here and there, I switched back to a fixed width layout. I realize my CSS now contains some extraneous code. My main concern however is that it displays correctly no matter the screen resolution. yeah!

Part of the impetus to reverting back to a fixed width layout was Alex King’s series on his blog redesign. He redesigned in a fixed width layout made for the 1024×768 screen resolution. This seemed to me like a fair compromise.

It seems to me that a fixed width layout provides added levels of control over the placement of design elements. Fixed width layouts essential create a “box”. Elements are kept within the parameters of the box. The box hardly breaks (only when there is a misplaced div). It seems that a fixed width layout is the way to go for beginners since it eliminates “some” of the unruliness of cascading style sheets.

A fixed width layout designed for a 1024×768 resolution does impact 800×600 viewers. Users do have to scroll to see the whole site. However this is somewhat mitigated depending on the design. My design uses two columns to the far right. The leftmost of those columns contains my main navigational menus. The rightmost contains anciallary data and links. While the width is fixed for a 1024×768 screen, 800×600 users still see my main content and my main navigation column. They only have to scroll to see the ancillary material. Again, seems like a fair compromise.

I do think that a designer needs to consider the website’s audience. 5% of my viewers use 800×600, 45% use 1024×768 and 45% use 1280×1024. If your website sees 25% or more of its viewers using 800×600, than you should probably still base your design around that resolution. But like I said, the 1024×768 fixed width layout does offer a compromise. Just ensure your 800×600 readers dont have to scroll to see your main content.

As this is the first post in 2007, I hope that everyone had a safe New Year. I am looking forward to a great year

Cascading Style Sheet Fixed Width Layout Tool

Designing layouts in CSS can be a pain, especially for beginners. There is so much to think about and consider, especially when trying to maintain standards, accessibility and browser rendering. Then add all the various ways one can TRY and accomplish various layouts. It can be OVERWHELMING. While the code behind CSS is quite simple for anyone to understand, layouts in CSS challenge the best of developers. Here is a tool I have found to be indispensible in helping me with layouts. Cleva Treva’s CSS Source Ordered Variable Border 1-3 Columned Page Maker is a tool that will produce a 1 to 3 column fixed width layout.

It is fairly simple to use. The Generator screen has a variety of configurations the user can set:

I will not go into them in detail. Most of them are self explanatory. It is easy enough to play around with the tool to figure out what each setting accomplishes. Not all settings are fully activated, which is my only complaint. They really should set up a donate button to help him have the funds to finish it off.

The tool can create your standard three column layout; a column on each side with a content column in the center,

two column layouts with either a right or left sidebar,

or one can even create the sidebar so it intrudes into the header and footer.

The tool will also create the code for the necessary hacks to make sure the layout works in all the major browsers. Now, I do not think, as of this writing, it has been updated to ensure IE7 compatibility.

Once a layout is generated, the code can be copied and pasted from the textarea on the display page into your favorite html editor. Do not save the generated layout page itself as it contains extraneous code.

Rememeber, this tool creates a fixed width layout. The main content column can be up to 760px and each column can be up to 200px. The maximum width would be 1160px.

The layout is also ordered so that the content appears first in the code above the sidebars.

I do wish the tool would be able to create a three column layout with the two sidebar columns adjacent either postioned to the left or right.

Overall, it is a very useful tool. Beginners will find it extremely helpful.

[tags]css, cascading style sheets, html, layout[/tags]

Internet Explorer 7 Review

I took the plunge and decided to update to Internet Explorer 7.

I had two immediate thoughts:

1. It took too long to update and install. Downloading and installing either Firefox or Opera took a heck of a lot less time.
2. It looks a lot like Opera

I initially thought the length of time it took to install was due to software bloat. However, the final installed directory is only 3.5 MB. The problem is probably with Microsoft’s install mechanism. I wonder too if the heavy integration with the underlying OS creates installation complexities.

IE7 diverges from the traditional browser toolbar. While not exactly the same as Opera, they both took a divergent path to redefine the toolbar. Firefox 2.0 keeps the traditional placement of the tool bar with Front, Back, Refresh, Stop, Home, Print all in a row starting to the users left. IE6 used similar placement. Since IE7 diverges from IE6 on this point, users will have to relearn the placement of key buttons. I have already found myself mousing over to where the home button should be only to find the space tidied up for a longer address bar.

I am not an expert on web standards nor can I speak to the standard rendering of CSS across browsers. However, I can say that IE7 renders padding and margins a little differently than Firefox and Opera. I had a problem that showed up only in Firefox (Opera and IE6 rendered it as I wanted it.) My fix to the problem solved the issue (sort of) in Firefox, but it displays a tad differently in IE7.
It is literally one of those “screw it” moments where I am tired of trying to work around three different browsers. It is not how I want it, but at least it is adequate in all three.

The release of IE7 does raise the issue of a web standard compatible browser. Many were hoping IE7 would come closer. From what I have read, it has made strides but is not as close as Firefox or Opera.

The usability difference between IE6 and IE7 is my major complaint. Most will not like the fact that all their buttons have been moved to a different location on the toolbar. Beginners in general, who generally hate things being changed,will dislike the new look of IE7. Those used to a more modern layout like Opera, will like the new physical changes but will still have a distaste for its lack of web standards compatibility.

[tags]ie7, internet+explorer, firefox, opera, microsoft[/tags]

Using Cascading Style Sheets

CSS files can be implemented in one of three ways: Inline, Internal and External.

Inline

Inline styles are used within the <body> tags of a web page. They can be added to any tag within the body. Example:

<p style=”color:blue”>This is a sentence.</p>

This method mixes content elements with presentation elements. It is not recommended for this defeats the purpose of cascading style sheets. In some DOCTYPEs inline styles will register as invalid. The effective use of classes and ids within an external style sheet is a remedy for inline styles.

Internal

Internal style sheets are used within the head section of a document. Internal style sheets are defined by <style> tags:

<head>
<style type=”text/css”>
body {font: arial;}
</style>
</head>

When the web page is read, the browser will apply any styles within this tag.

This method is not typically recommended, but you won’t break any DOCTYPE standards with its use. If possible put all styles in an external style sheet.

Note: if you use a CMS that uses plugins, be aware that some plugins may add their own styles to your web documents. I don’t like this practice and feel you should be aware of it.

External

External style sheets are the recommended and preferred method for using cascading style sheets. External CSS files are referenced within the <head> section of a web page by using ht <link> tag:

<head>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”
</head>

Browsers reading the webpage will access the file and format the page accordingly.

Visit the archives for more information on CSS archives or visit our CSS Tutorials page.

Creating Cascading Style Sheets

How does one actually create a cascading style sheet?

A CSS file is nothing more than a special kind fo text file.

1. Open Notepad
2. Type
   

   body{
   margin : 0;
   padding : 0;
   font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
   background-color : #ffffff;
   color : #000000;
   }

3. Click File…Save As
4. Change “Save as Type” box to “all files”
5. Type “test.css” in the “File name” box
6. Choose a location to save the file
7. Click Save
8. You have now created your first CSS file!

The actual name of the file is unimportant. Though most typically call it “style” or “screen” or “print”. The thing that made this simple text file a CSS file is the extension. By giving it an extension of “.css”, html editors, web pages and text editors will recognize this file as a cascading style sheet.

For more examples on CSS files, visit our recommended CSS tutorials page.

CSS and HTML Tutorials for Kids

If you have a child that is interested in web development, there are very few websites geared towards children.

As I was thinking about this, I figured the earliest a child would be capable of doing the basics would be 5th grade with 6th grade being the point where a child could begin to pull all the necessary skills together. (I could be wrong on this, anyone have any kids who are doing web development? When did they start?)

With that age in mind, I figure they could handle most of the tutorial websites I recommend on my CSS Tutorials and HTML Tutorials.

However below are a few links to sites geared towards kids. The lack of quality stuff for kids makes me think that this is a potential market .

WebMonkey for Kids

Lissa Explains

Cyber Camps – Computer Summer Programs for Kids. This site will point you to computer summer camps in your state.

[tags]css, html, kids, children, webdesign[/tags]

CSS Optimization: Compressed file helps speed site load time

Cascading Style Sheet optimization can be a confusing topic.

On the one hand it can mean creating CSS files with the least amount of code. On the other, it can mean compressing a style sheet so it loads faster and hence make your website load faster. In reality, the two do go hand in hand though the former is far trickier than the latter.

CSS Tweak offers tool that attempts to do both.

CSS Tweak is very easy to use. Upload a style sheet and click Tweak! However, you should be familiar with the seven options available before you hit that Tweak button.

• Tweak Fonts – merge font related properties into one “font” property
• Tweak Backgrounds – merge background related properties into one “background” property
• Tweak Borders – merge border related properties into one “border” property
• Tweak Lists – merge link styling properties into one “link-style” property
• Remove Comments – strips out all comments
• Remove zero units – will clean up zero unit values
• Formatting – strips white space. This compresses your cascading style sheet.

My general recommendation is to leave the code optimization selections alone until you understand CSS better. It could make adverse changes to your CSS code. Unless you understand CSS well, you may not be able to figure out what changes the tweaker made that are now causing problems. Beginners should only check the “Remove Comments” and “Remove White Space” radio boxes. For the beginner, the options will then look like this:

Clicking Tweak will then create a new style sheet file that can be downloaded:

I always rename my main editable style sheet to “non_compressed_style”. I use this style sheet to make changes. I then compress it and send it up to my website as the main “style.css” file. My compressed style sheet is what my website then accesses. The compressed style sheet is next to impossible to edit. It will look this:

Maintaining two style sheets may seem like a lot of work. Don’t compress it until you are done with the design. That way you won’t have to go back and forth between compressed and noncompressed. Compressing the style sheet is worth it. It can significantly save on download times.

Why you should validate your Cascading Style Sheets

Validating CSS files ensures conformance to W3C recommendations.

So what?

Heres the deal with code even simple CSS code: cleaner means leaner and more efficient. Validation ensures the css file can be understood by the modern browsers. Being understood by the modern browser means the presentation of your website can be effectively communicated to you audience.

Validation does not mean you’ve chosen the best presentation or the coolest presentation. It doesn’t even mean that your code will present the presentation you intended! It simply means there are no obvious SYNTAX errors in your code. Validation is about the syntax. Nothing else.

However, simple syntax errors can have a serious effect on your website.

The CSS Validator checks for things like:

• Every selector bracket that is opened is subsequently closed
• Every property has a colon
• Every property ends in a semi-colon
• Spell checks standard property names and values

I had a problem once where I couldn’t figure out why a border was missing. It wasn’t until I ran it through the validator that I saw I had misspelled border as bordor. My eyes simply didn’t catch it.

In short, there are four main reasons to validate your CSS file.

Good practice
Heck, it is BEST practice
Catch Errors
Professional

[tags]css, w3c, validation, validator, webdesign, [/tags]

Site Redesign: Ten keys to keep from going insane

I was in the middle of writing the series on CSS when the bug to redesign this website hit me. This will be the 5th redesign since I began the site. I really shouldn’t count the first three since I was just learning. The redesign process has taught me some valuable lessons each and every time. Below are ten keys to maintain your own sanity when the itch to redesign strikes you:

1. Make sure you want to redesign your site. Though a part of you wants to, does ALL of you want to? The worst thing that can happen is get halfway through and quit. Time wasted.
2. Weigh the time away from content development. If your a small fry website, you are the designer, marketer, writer all rolled into one. Realize that the time it takes to redesign the site will take away from your other efforts. Is it worth the time away from creating content?
3. Shoot for web standards but don’t live and die by them. I prefer designing in XHTML 1.0 Strict and CSS. With this design I went with a liquid layout versus a fixed width layout. I had to compromise with the liquid layout. It doesnt totally work at the 800×600 resolution. I’m afraid my 800×600 visitors won’t be pleased. However, they only made up 7% of my visitors the last month. This number has dropped from about 25% 18 months ago. I imagine this number will get near 0% by the end of 2007. If i lived by the standards I would have tried harder to make it work or create a separate a style sheet. I guess I am willing to let that point go and not waste time with it.
4. Be Patient. There is nothing worse than rushing through css code and messing things up. If you feel yourself rushing just stop. You are bound to make a mistake. Step away and come back to it later.
5. Reuse basic elements from the previous design. Don’t reinvent the wheel. While the colors may change (or not) keep the code for those elements which work.
6. Keep it simple. If you’re a designer by trade, have at it. But beginners should avoid getting too fancy.
7. Shoot for readability. One of the goals of my redesign was to make it more readable. I hope the font and the spacing makes it easier to read. I hate websites that give me a headache.
8. Shoot for usability. After your site has been around a while, you should have a good idea of things that work and things that don’t. Make your site easier to use. If you go the fancy route and make it too complicated, you will lose visitors.
9. Study other sites. Before you begin, study other sites. My own redesign combines elements I learned from looking at other sites. Don’t copy entire designs, but gather ideas and don’t be afraid to mix and match.
10. Get feedback. So dear reader, what do you think? Is this site easier to read? Is it easier to use? Let me know. I’ld appreciate it.

Cascading Style Sheets Example

There are three parts to a CSS statement

1. selector
2. property
3. value

Each statement is written like the following:

selector {property: value}

There are three kinds of selectors:

1. elements
2. classes
3. ids

Elements refer to basic HTML tags: a, img, p, body, div, etc.

Classes are defined selectors. A class is defined by a . (period) and a name:

• .right
• .left
• p.readmore

Classes are used to further define already existing elements.

ID are defined selectors as well. Typically they are used to define DIVs. An ID should be used when the element is going to appear or be used only once.

• .right
• .left
• p.readmore

The screenshot below shows a small example from a cascading style sheet. Each part is labled accordingly.

If you want to examine a full length css document, I would suggest the following:

• Go to Open Source Web Design
• Click Search Designs
• Select XHTML 1.0 Srtict under validation
• Select Yes under CSS
• Click Search
• A list of designs will show on the screen. You can view each design and download it.
• Download a few designs. It doesn’t matter what it looks like if all you’re after is understanding what a style sheet looks like.
• The downloaded designs will contain a .css file.
• Open the file in a text editor and learn away!
• Other designs can be found at Open Web Design following similar steps as above.

[tags]css, cascading+style+sheets, webdesign, development[/tags]

What are cascading style sheets

Imagine a landscape gardener.

At her disposal are plants, seeds, bushes, trees, timbers, bricks, patio blocks, etc.

All these materials are her CONTENT.

Her job is to take those materials and landscape the yard/garden. In other words, to create presentation. Without her presentation skills, the materials remain in one large unroganized heap.

Style sheets are like the landscaper. Style sheets take content (text, images, and links of a website) and arranges them on a web page.

In the coding world, this seperates the code for presentation from the structural and content code.

If you “view source” on any web page from your browser, you can look at the HTML code behind it. The actual HTML tags provide the basic structure. The text, images, and links within those HTML tags are the content. Typically, the CSS file sits externally from this code. Its job is to take the structure provided by the HTML and position it so it makes sense.

To use another analogy:

-HTML is the bones
-Text, Images and links are the organs
-CSS is the muscles, ligaments, cartilage, skin that brings the bones and organs together. Without CSS, the HTML and Content are just a pile of bones and guts.

For more CSS resources visit our CSS Tutorials page or visit our CSS blog archives.

[tags]css, cascading+style+sheets, web, design, development[/tags]

Creating valid xhtml strict nested lists

To create a nested list that is valid according to the xhtml strict specification, such as the one below:

• Main List
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
• Main List
  • Sub Item
  • Sub Item
  • Sub Item
    • Sub Sub Item
    • Sub Sub Item
  • Sub Item
  • Sub Item
• Main List
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item

Follow the code that looks like this:

<ul>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item
          <ul>
          <li>Sub Sub Item</li>
          <li>Sub Sub Item</li>
          </ul>
     </li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
<li>Main List
     <ul>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     <li>Sub Item</li>
     </ul>
</li>
</ul>

General Guidelines

-sub lists MUST be encapsulated within the li tags of an item on the base list. I have tried to show this in the blockquote above by indenting each sub list.
- include any formatting within li tags
- use <p> tags to create breaks around an image

Body tag and seven basic HTML Tags

Within the body of a webpage, there are seven basic tags. In fact, you could get away with only using these seven tags. A note for beginners: it really can be this simple. A few basic tags and you can create complete web pages.

<div> used to DIVide a web page into sections. DIVs are controlled by Cascading style sheets to define the layout of a webpage.

<p> Paragraph tag. This tag places a line break above and below the enclosed text.

<a> Anchor tag. Identifies a hyperlink.

<img> Image tag. Retrieves an image to be displayed.

<ul> Unordered list. Marks the beginning and end of a list.

<ol> Ordered list. Marks the beginning and end of a list that is numbered.

<li> List item. Used within unordered and ordered lists. Items enclosed within this tag appear as line items within the list.

Below is an example of a webpage using only these tags:

<body>
<div>
<p>Lorem ipsum dolor sit amet consectetuer platea sociis sed sed Nulla. Pellentesque mauris sem et Curabitur nulla ac tellus id lorem interdum. Dolor <a href=”http://www.recommendedwebtools.com”>Quisque</a> lacus Curabitur a est est enim interdum vitae tincidunt. Gravida consequat pellentesque interdum turpis Sed libero laoreet a Aenean Duis. Semper amet nibh Sed Lorem Suspendisse sit semper tellus tempor et. Id tempus Pellentesque.</p>

<p>
<img
src=”http://www.recommendedwebtools.com/
rwt/images/posts/clickgenerate.png”
alt=”Test Image” />
</p>

<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>

<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ol>

</div>
</body>

The above code will produce the following:

Lorem ipsum dolor sit amet consectetuer platea sociis sed sed Nulla. Pellentesque mauris sem et Curabitur nulla ac tellus id lorem interdum. Dolor Quisque lacus Curabitur a est est enim interdum vitae tincidunt. Gravida consequat pellentesque interdum turpis Sed libero laoreet a Aenean Duis. Semper amet nibh Sed Lorem Suspendisse sit semper tellus tempor et. Id tempus Pellentesque.

• Item #1
• Item #2
• Item #3

1. Item #1
2. Item #2
3. Item #3

For further help with HTML, check out our recommended HTML Tutorials.

[tags]html, webdesign, body, p, li, ul, ol, div,img, a[/tags]