Happy Fourth of July all! A lovely day filled with fireworks and usually a day off of work (in the US, anyway). It’s also the anniversary of CSS-Tricks. It’s been two years now. It actually feels like it’s been longer than that sometimes, just because of how far the site and myself have come. Last year we didn’t do anything special, but I thought this year we’d kick it up a notch and celebrate a little harder. That’s right, it’s giveaway time!

Check out the prizes below. If you want to enter, the only requirement is to fill out this survey. (Notice the form is a Wufoo form, one of the prizes!). Winners will be picked totally at random. Of course provide your real name and real email address on the form so I can reach you if you win.

Today, I am literally on the road in a UHAUL truck moving from Portland, OR to Chicago, IL. Portland is an incredible city, I’m just moving to be a bit closer to family and friends and for a change of scenery. Please forgive me if the posts are light for the next few weeks while I settle in.

Because of the move, I’m gonna need a little time. I’m going to close the survey July 16th and announce the winners on July 17th.

The Goods

Ya’ll probably know I’m a big Wufoo fan, so I’m very pleased that someone is going to snag a free account for a year. The bona fide plan is what I personally use both for my personal account and our account at work.

Even if you already know how to convert Photoshop designs into code, it sure is nice to save yourself all the time by having someone else do it. Snobby slice is donating their own time to one lucky winner winner who will get a high quality 2-page slicing.

Packt has books on all kinds of subjects. My personal favorite is the Learning jQuery 1.3 book, but I’m thinking about picking up the Magento book, for next time I need to work on a major eCommerce site. Three people will will a PDF of any of their books.

I advocate, especially for beginners, that downloading templates and customizing/altering them is a great way to learn HTML/CSS. It also can be a real time and budget saver for you and your potential low-budget clients. Flash Mint is giving away three free CSS templates to three winners.

Flipping Book makes an extremely cool Flash component for displaying interactive booklets. These aren’t substitutes for entire websites, but rather a cool way to present things like PDFs, brochures, or books. We just used it at work recently to display a PDF we did for a client on their website. Two winners will win the compontent of their choice.

StayValid literally crawls your site looking for validation errors in the code. What better way to stay on top of errors on websites and their ever-changing ways. Two winners here, one for their premium plan and one for the basic plan.

Are My Sites Up watches your website for you. If it goes down, you’ll be notified by any methods of your choice: Email, SMS, Twitter, or the iPhone application. Two winners will receive the Premium Pro service for a full year.

Enter to Win

Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever JavaScript.

Note that I did not include an option for “it’s complicated” or “it depends”. I’d rather just see the final judgment call. Poll is in the sidebar, and you can discuss below. RSS readers have to make the jump over to the site!

Firefox topped the polls, showing that you guys still like the browsing experience on Firefox best even without fancy tools. Personally I like Firefox OK, but I have some crashing issues and I would definitely be a Safari man if mostly just used browsers for browsing. I think WebKit is the best rendering engine, and Safari 4 is just smoking fast all the way around. The web inspector with Safari is also fairly nice, it’s definitely second to Firebug, it just needs the “inspect” feature of Firebug (mousing around to drill down to the exact element) to really be of great general use. If there was a final version of Chrome for Mac I could even seeing going that route, since I really dig how it localizes each tab so you can’t crash the whole browser. Safari and Chrome were neck and neck for second, but ultimately Safari took it.

Opera took fourth, happily beating out Internet Explorer, which was in last place other than the Other category. I’m sure some of the “Others” were specially purposed browsers like Flock, built around social networking.

I’ll leave this up for most of the day probably. I have a new Poll idea I’ll put up and post about tomorrow. As a heads up, Friday is the 2nd anniversary of CSS-Tricks, so definitely pop back over that day if you are only an infrequent reader!

But CMSs are for web people. Even my beloved WordPress can be challenging to train/explain to someone who has no experience working with websites. Perhaps this is the motivation toward a new trend in CMSs I’m calling “light” CMSs. Each of them attempt to make the task of updating content on a website easier and more intuitive. This is largely at the cost of features. These are for simple, otherwise static websites where updating content is the name of the game.

Unify

Unify is the dead-simple, in-browser content editor that anyone can use. No CMS, no database, no backend interface, no proprietary tags or syntax. Just you, your website, and your browser.

Unify is still in private beta, but it sounds like it’s going well and should be out soon. You simply apply class names to block level elements you wish to be editable. You log into Unify directly on the website you wish to edit. You then are looking directly at the website again, but can click on the editable parts to bring up an inline editor to edit the content and save it. Publishing then literally rewrites that file and makes the changes live.

CushyCMS

Finally, a free and truly simple CMS

I’m not 100% sure but I think CushyCMS might have been the first player in this market. They have been around a while, anyway. The theory is similar to Unify in that you apply a special class name to blocks of content you intend to be editable. You then set up an account at the CushyCMS website, provide FTP details for your site, and add the editable pages. Anyone with access to that account can then edit the content on that site. It’s free, which is awesome, and has a premium component for branding it.

PageLime

PageLime is a hosted Content Management System (CMS) for designers, web agencies, and web developers. It allows you to manage text, images, and documents on your site by logging into a web-app that’s hosted on our servers. The best part is that it doesn’t matter where your site is hosted, it doesn’t matter whether you use PHP, Java, or ASP (or no scripting platform), and you don’t have to make a single change to your site architecture.

PageLime is a combo of CushyCMS and Unify. It’s like CushyCMS in that you have an account on it that you provide FTP details and give your pages editable classes (although you can add multiple websites to a single account). It’s like Unify in that it has a live page preview with clickable editable regions and save/publishing. PageLime is a free public beta.

Perch

Perch is a really little content management system for when you (or your clients) need to edit content without the hassle of setting up a big CMS.

Perch is a PHP based system, which does use a database, but is otherwise just as easy to set up as the others. Instead of applying class names to editable content, you make the editable content special PHP functions provided by the Perch class. Logging into the backend gives you access to edit these specific regions. Perch is completely self hosted and brandable, meaning it will work for life and no third parties are ever involved again.

Browser – A browser is a software application that is used to visit websites. Firefox, Internet Explorer, Safari, etc. If you think this is obvious, think again.

Server – When a webpage is visited, data is sent from some computer somewhere to your computer over the internet. That other computer is a server, essentially just like the one you are looking at, only specially configured to deliver information to other computers asking for it. Even though any computer could technically be a server, far more commonly people purchase server functionality from companies that specialize in it, like Media Temple. In addition to “server” being used to describe the physical machine, it also may be used to describe the software program used on that machine which handles serving up that data, like Apache.

URL – Uniform Resource Locator – is one of those things like this: http://css-tricks.com/video-screencasts/64-building-a-photo-gallery/ Some people also use URI – Uniform Resource Identifier – for the same purpose, although URL is far more common. I honestly read the entire Wikipedia article for both and I still don’t really understand the difference. A domain name is the first part of the example above: css-tricks.com. Anybody can purchase a domain name, from companies like Go Daddy that specialize in it.

Tag are text that go around content in HTML code to identify the type of content they surround. For example, in this code <li>Go dancing.</li>, the tags are <li> and </li>.

Anchor – An “anchor” tag is a tag that looks like this in HTML code: <a href=”http//url.com”>link text</a>. Most HTML tags are referred to by what they look like, for example, a <ul> tag would likely be called an “Yoo-Ell” tag out-loud. The reason anchor is used is because it sounds weird both written and spoken to say “An a tag”.

Wrapping refers to putting an opening and closing tag around content in HTML code. If you hear “You’ll need to wrap it in an extra div,” they mean that whatever content area is being referenced needs to have a <div> tag added before it and an </div> tag added after it.

Nesting is a lot like wrapping but implies being several layers deep. For example, this is a series of “nested” divs:

<div id="outer">
   <div id="inner">
      <div class="section">
      </div>
   </div>
</div>

Borked – Something is wrong, usually used in reference to the visual layout of a webpage. “The sidebar dropped down and borked the layout.”

Markup – Markup is just another way of saying HTML code, but is slightly more generic and may also be used to reference XML or other “describing” languages. If you hear a phrase like “The site uses very semantic markup”, that means that the website’s HTML code uses very appropriate tags to describe the content it displays, which is a desirable and sometimes difficult thing to do.

Accessibility – When accessibility is talked about in reference to websites, it means how easy or difficult it is to access the content for people with disabilities. For example, how easy it is for mobility impaired uses to navigate the site, blind users to read the site, or colorblind people to differentiate links from regular text.

Usability – Usability is similar to accessibility but differs in that it refers to ease of use for all visitors, not limited to disabled people. For example, a site that requires lengthy registration to view content or that has navigation that is in different places on different pages may be considered to have bad usability.

Findability – Findability is a subset of usability and refers to how easily users can locate the content they are looking for on a website. Often a elusively difficult task.

Validation – It is possible, even probable, that code contains mistakes. But who says what constitutes a mistake in code? When it comes to HTML and CSS, the W3C does. They offer tools to run these types of code through to check for errors. If it there are no errors, the code passes and is said to be valid code (or “markup”!) ALTERNATIVELY, validation can refer to data. For example, if you enter a phone number that is 5 digits long, software might “validate” that data and reject it as invalid.

Standards – This again refers to the W3C, the organization that puts forth the “rules” describing how browsers should behave in interpreting code. Can you imagine how difficult any job would be if everything you did you had to repeat five different times with slight variations? That’s what web standards are trying to prevent, buy putting forth rules so that everyone’s job is easier things only need to be done one way. If you hear someone say they “write standards compliant code”, it probably means the code they write validates, but hopefully it also means they have an understanding of the importance of web standards and fight for them.

Semantics – The word itself generally refers to the meaning of words or word choice. On the web, semantics means choosing the correct HTML tags to describe to content. For example, using table tags to lay out your site isn’t very semantic because those tags don’t relay any meaning to the content they contain. Whereas, a tag like <navigation> is extremely semantic.

Rendering is the process the browser goes through when interpreting HTML and CSS and turning that into the visual end result you see on your screen.

Client-Side refers to a language that is interpreted by the browser itself. For example, JavaScript is downloaded by your browser and then run locally on your machine. Your browser is the “client”.

Server-Side refers to a language that is interpreted by the server. For example, PHP is interpreted by your server, processed, and then delivered to you. As an easy example to remember the difference, if you ask a client-side language to display what time it is, it will display the time set on your computer. If you ask a server-side language to display what time it is, it will display the time set on the server.

DOCTYPE – This is the gibberish looking code at the top of HTML documents that looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

There are a number of different ones. They tell the browser what specific set of rules should be followed when interpreting the rest of the code in the document.

Copy – It just means text. “I need some copy for that” means “I need the text that you want to go in that area.”

White Space – Areas of a design (not necessarily white!) that are intentionally left blank for aesthetics.

Vector – A form of graphic where the design is saved as points and mathematical formulas. Because of this, the files are “resolution independent” meaning they can be scaled to any size without losing their crispness. Adobe Illustrator files are vector files (although it is possible for them to contain bitmap data). AI, EPS

Bitmap – A form of graphic that is saved as individual pixels, meaning it has a set resolution and cannot be scaled up or down without affecting its crispness. Adobe Photoshop files are bitmap files (although it is possible for them to contain vector data). JPG, GIF, PNG.

Analytics – Means data about the usage of a website. How many people viewed the website that day? What countries were they from? What browser did they use? How long did they stay? Those are questions Analytic data can answer. It is gathered by using special software built for capturing it, like Google Analytics.

Kerning – Adjusting the spacing between two specific letters, to improve how a word looks aesthetically. Tracking is similar but refers to overall letter spacing.

Sprite – An image that actually contains multiple images. The images are typically displayed cropped down to only show a small area. As counter-intuitive as it seems, this can improve efficiency by requiring less total images to be used.

Elastic – is a type of web layout where font sizes and widths are declared with a special unit of measurement called an Em (an abstract concept just meaning “relative size”). This allows for the entire web layout to scale up and down, rather than just the font size. This differs from a Fixed Layout where theoretically the width of the site would stay the same and just the text would scale up and down or a Fluid Layout where the width of the layout is determined by the browser window.

Framework – Generic term to describe software that is built to simplify things. For example: RoR , or Ruby on Rails, a development framework designed to help creating applications on the web easier.

Acronyms

CSS – Cascading Style Sheets – a file ending in .css, which is linked to from the HTML, which controls the look of the rendered page.

HTML – Hyper Text Mark-up Language is the code that forms all websites and describes the content it contains. It is important to understand that ALL websites end up as some form of HTML, regardless of the languages used to build them. For example, a file might be PHP (Hypertext Preprocessor), as in index.php, but ultimately what is served up to the browser is HTML. The file extension PHP just lets the server know to process any of the special PHP code inside before serving it up.

JS – JavaScript – a client-side language with the unique ability to A) watch for events (e.g. mouse clicks, key presses, etc) and B) make things happen on a webpage without a page refresh. For example if you see a button on a website that you click and a new area slides down, that’s (probably) JavaScript.

AJAX – Asynchronous JavaScript and XML – A popular technique of loading content from a server and placing it onto a page without the need for a page refresh. This has grown to be an extremely popular technique for building websites that are more responsive and feel more like desktop applications. While AJAX is still technically an acronym, it usually doesn’t have a heck of a lot to do with XML.

CMS – Content Management System – a software program that runs on a server with the purpose of making managing the content on the website easier. For example, a site may have hundreds of pages (like this one). Each of those pages does not exist as a separate HTML file. Instead, the content is kept in a database and injected into templates and served up as needed by the CMS.

SEO – Search Engine Optimization – Doing things to a website specifically to rank higher in searches done on search engines like Google. On the web, traffic = money, and search engines drive big traffic, hence the big desire for everyone to rank as highly as they can.

SERP – Search Engine Results Page – You search for something in Google, you get a page of results, that a SERP.

TLD – Top Level Domain – .com, .net, .org … there are a lot of them.

CRUD – Create, Read, Update, Delete – generally used to describe a web application with the primary purpose of doing those things. Think of blog software, where you can Create a blog entry, Update or Delete it later, and the Front-End of the site Reads it to display it.

DOM – Document Object Model – is a bit of an abstract concept. It is the system browsers use to represent and interact with the objects (elements) in HTML. For example, that DIV in your HTML is definitely part of the DOM, but so is the browser window itself and it’s immediate page history. Maybe the easiest way to think about it is that it’s basically the HTML that makes up your page, plus a bunch of more stuff that only web nerds care about.

RGB – Red Green Blue – The color model that is used by electronic media to display graphics. Commonly used to describe the “mode” an image is saved in. Images used for electronic display (web, video, etc) should be RGB.

CMYK – Cyan Magenta Yellow Black – The color model used by traditional 4-color printing. Photo-realism can be achieved by printing only these four colors. Commonly used to describe the “mode” an image is saved in. Images ultimately being used to be printed on paper should be in CMYK.

RSS – Really Simple Syndication is a special (and standards based) form of XML for publishing content. For example, most blogs provide RSS of their content. Other people (even basic users) can take that RSS and use it in different ways, like republishing that content elsewhere, or just reading it through special programs, like Google Reader). May be referred to an an RSS Feed, or even just Feed by itself.

DPI / PPI – Dots Per Inch and Pixels Per Inch. “Dots” are literally physical dots of ink on paper, determining the resolution of a print image. “Pixels” are bits of data, determining the size of an electronic image. Commonly swapped and used incorrectly.

WYSIWYG – What You See Is What You Get – Describes anything where you interact with the visual end result rather than an abstraction. For example, a font menu that shows what the fonts actually look like is a WYSIWYG font menu. A web design program that allows you to place boxes and drag them around is a WYSIWYG program.

SVN – Subversion – A system for maintaining different versions of code. Changes are “checked in” and can be “rolled back” to previous versions (in the case of problems).

Phrases

Above the Fold – This comes from the newspaper industry, where the space on the top half of the front page is far more valuable than the space below it. On the web, content that is visible without scrolling is referred to as above the fold, and is also more valuable (as in, to advertisers or just generally for users attention).

Browser Safe – or “Web Safe” refers to a specific set of colors that, in the long long ago, would be acceptable to use because they would display properly on all computer monitors. No longer very relevant.

Hover State – When your mouse cursor rolls over a link, and that link changes color, that is the links “hover state”. A mockup web design might contain both a buttons regular state and hover state. Differs slightly from Active State – which is a the circumstance a link would be in if, for example, the link was “tabbed to” in a browser.

Back End – Generically refers to anything going on “behind the scenes” of a website. There are all kinds of things that happen on complex websites underneath what people actually view in their browsers. A CMS is an example of a “Back-End”.

Front End – The part of a web application that people visiting the site in a browser see. Essentially the “website” part of a website.

Slicing a PSD – Phrase used to describe the process of converting a Photoshop document (PSD) into an HTML/CSS website. There is a “slice tool” in Photoshop, which can be a part of this process, but not necessarily.

Pixel Perfect – A finished web design that matches perfectly the mockup from which it was created.

Browser Zooming is a feature in browsers where entire website are magnified, rather than just text resizing. Somewhat controversial, as it can cause Horizontal Scroll, a situation where a websites content is wider than the browser window meaning that a user would have to move the scroll bar left and right as well as up and down to browser content.

Got some more words/phrases/acronyms that probably confuse regular folks?

1. It should still look like your website

If you don’t specifically tell your web server how to handle 404 errors, it will serve up a very plain and generic looking error page. That just says something like “Not Found – The requested URL was not found on this server.” on a plain white page. This is an unhelpful and rather painful roadblock for a user. A 404 page should look like an error page, but it should still look like your website. If you are using a CMS, this is probably already handled for you. If you have a static site, you can specify a 404 template through your .htaccess file.

2. Apologize

Nobody is trying to land on your 404. Most likely they came from a bad link either on your own site or out in the wild. They probably aren’t very happy about it, so this is a golden opportunity to apologize and hopefully turn that frown upside down.

3. Search

It’s possible the page they are looking for still exists, it’s just the URL has changed or it was incorrectly typed somewhere. Since your site should already have search anyway, this is a good opportunity to provide that search box front-and-center. This gives the user the opportunity to search for what they were trying to link to and dig up the correct URL for themselves.

4. Give readers useful links

Maybe the page they are linking to isn’t broken, it just doesn’t exist anymore. In addition to search, you may want to dish out some links they will find useful. Perhaps links to the homepage, the archives page, or other pages you already know are commonly visited / popular pages on your site?

5. Way to Contact / Report Error

It is possible a user landing on a 404 page is having some strong emotions about it. They could be very concerned, worried, or they could be down right ticked off. It is a good idea to give that user some way to release, and since you can’t hand them a punching bag, a contact form might do the trick. This is, of course, not only good for them but good for you, as you can learn about the problem in order to fix it or otherwise prevent it from happening again.

6. Automatic Reporting

Having users help report errors for you through a contact form is great, but only a small percentage of users are likely to do that. An alternative is to have your 404 page automatically report the error to you. There are many ways you could do this. A quick-and-dirty way to do it would be to make your 404 page a PHP file, and use the mail function to send an email of the URL that was landed on.

<?php
  mail("chriscoyier@gmail.com", "404 report", $_SERVER['REQUEST_URI'], "From: chriscoyier@gmail.com\n")
?>

NOTE: The above code is probably fine for a small site but not very practical on high traffic sites. Writing the errors to a Database in those circumstances is probably more practical.

7. Humor

Even serious sites can get away with a little humor on the 404 page. This is definitely a good opportunity to loosen up a little and do something funny.

8. Redirect?

I’m on the fence about this one, but it’s possible to automatically redirect a 404 error to another page. Perhaps the homepage displaying a message about the error? Perhaps a search page with keywords from the URL parsed out?

9. File Size

You might be surprised at the amount of malicious activity that your web server has to deal with. One thing that surprised me a while back was how many requests there were for “weird” files. Things like requesting the favicon in strange subfolders or looking for random images that don’t exist. When these things don’t turn up, the server loads up your 404 page. Needless to say, serving up a full webpage for all these requests adds up to some serious bandwidth. Your best bet is to fight against these malicious requests, but you should also take care to consider the total page size of your 404 page size and reduce it if bandwidth is a major concern.

I won’t be cross-posting everything every little thing from Digging into WordPress over here as well, just big news like this. And again, I’m going to close comments on this post to keep all related discussion in one place.

I was recently asked by the guys at WP Coder if I would do a review of their service. I don’t do it very often, but they seemed like nice guys and WordPress is of particular interest to me lately. As it happens, I was tinkering with a theme in Photoshop right as they asked me so it was perfect timing. I finished up the theme and shot it over to them to start the process. I thought their order form was quite nice:

Completing the ordering form gets you all set up in their system. Their backend client area is quite nice. From here you can view your current, pending and complete projects, as well as view and take care of your invoices. I particularly like how the communication on the project takes place. Each project has its own page that holds all the files for the project and a back-and-forth conversation between you and them during development of the theme.

How much does it cost?

Like any reasonable design company, it depends. How complex is the theme? How much custom WordPress coding does it need? JavaScript? Lots of page templates?

You fill out the order form and explain it as best you can and they will be in touch with a price quote within 24 hours. To begin work, you pay half up front, which is perfectly acceptable for a non face-to-face service like this. They only accept PayPal in USD.

So you have some idea, prices start about about $300 for very simple themes, and average about $400-450. Turn around time is 5-7 days on average.

Do they do a good job?

Yes, they do. I gave them a theme that looks pretty simple at a glance but is fairly complex once you start breaking down the actual layout. I had a few things in there that were pretty high on the ridiculous scale that honestly I had no idea if they were even possible. For example, I wanted to use literally typographic periods as background circles for numbered comments. Turns out this is an incredible difficult thing to pull off cross-browser and they weren’t able to pull it off (neither was I!), so we scraped it. All in all, the theme was a perfect representation of what I asked for.

What else?

A big one is that they don’t outsource the work to weird under-paid slave coders in a warehouse somewhere. Their coders are themselves (based in the U.S. and Australia) and do all the coding by hand. They won’t publicly display your theme anywhere unless you give them the go ahead, and they hold on to the complete theme for 6-8 months in case you somehow totally screw it up.

So, what about this theme of yours?

I’m glad you asked. Later this week I’ll be giving it away for free, so stay tuned!

The book itself isn’t ready yet. It’s going to take us a while to get it all together and ready to go. We are hoping for a late summer or fall release. What is ready though, is the accompanying website/blog: DiggingIntoWordPress.com

If you are interested in WordPress, make sure to check it out and pick up the feed. We’re both very excited to have a new outlet for posting stuff specifically about WordPress.

I work with WordPress a ton and have lots of tips and tricks and advice I’d like to share but isn’t always appropriate for CSS-Tricks. All that stuff will now be redirected to DiW.

The book itself will be a more comprehensive and in-depth version of things that end up on the site. Ultimately, buying the book will be buying a lifetime subscription to the PDF, which we intend to keep updated forever. You can make sure you are the first to know about the book by adding your email here. Users on that list will be notified before it is officially announce and will get an exclusive discount larger than the launch discount will be.

I’m going to turn comments off on this post, to keep any discussion focused on DiW over on that site.