As some of you know I’ve moved to Taiwan since my last post, and while spending time out here I have learned that being w3c compliant is a MUST. Validation help ensure your website can be seen by web browsers of any type, including mobile users (it may not be pretty but it wont be broken).

The Firefox add-on “Developers Tool Bar ” can help you be

1. standards compliant
2. css error free
3. javascript error free

But if you really want to be proud of your work, you need to go that extra mile, spend that extra time to ensure that your site is w3c compliant. If your looking for the validation? Shoot on over to their website and test your pages for yourself.

• XHTML Validation
• CSS Validation

If your valid you can stick one of those stickers onto your site letting people know.

No related posts.

This is not an attempt to create a mega list of tools for CSS developers; only few but really useful tools have been selected and placed under appropriate categories. If you see that a really useful tool has been missed, please feel free to share the link in comments.

Note that for a tool to be really useful, it also needs to provide easy to follow instructions and user friendly interface unless it is really straight forward. Unfortunately several tools listed in this list may not fulfill this criteria. If you are aware of another tool that is more user friendly and feature rich than one of the  listed tools, please let us know and we may replace it with an existing tool.

Layouts

• CSS Layout Generator
  This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
• Grid Designer
  Generates fixed and scalable grid layouts along with basic reset and typography.
• Layout Generators
  Generate multi-column and grid layouts with CSS techniques using %, px, or em.

CSS Frameworks

• Boks
  Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Boks is an Adobe AIR application, which means it will works on Windows, Mac and Linux.
• Useful Tools & Resources For Blueprint CSS Framework
• YAML Builder
  YAML Builder is an online tool for visually creating YAML-based CSS layouts.
• YUI CSS Grid Builder
• 960 Grid System – Variable Grid System
  Based on the 960 Grid System; the variable grid system is a quick way to generate an underlying CSS grid for your site.
• Grid System Generator
  The grid system generator will create fixed grid systems based on 960 Grid System in valid css / xhtml for rapid prototyping, development and production environments.

Fonts

• Typetester
  The Typetester is an online application for comparison of the fonts for the screen.
• CSS Type Set
• TypeChart
  Lets you flip through, preview and compare web typography while retrieving the CSS
• CSS-Typoset Matrix and Code Generator
• CSStxt
  Tool for generating CSS for web typography.
• EM Calculator AIR Application
  Calculator for Vertical Rhythm in XHTML & CSS; easily convert px to em based on base font-size and line-height; Padding and margins automatically calculated
• Em Calculator
  Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
• PXtoEM

Colors

• CSS Color Editor
  CSS Color Editor allows you to replace the color scheme of your website without going through the entire CSS file. You choose your local CSS file, select new colors and then download the new CSS file with new color codes automatically replaced for you.
• Color Palette Generator
  Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
• Color Contrast Check
  The Color Contrast Check Tool allows to specify a foreground and a background color and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.

Sprites

• CSS Sprite Generator
  CSS Sprite Generator will combine the uploaded images into a single sprite and generate the CSS for you.
• YASC (Yet Another Sprite Creator)
  This tools is useful when all your sprite images have been created in a single file. The process is fairly straight forward: you upload this file, then visually select each individual item and specify its CSS id; once you have selected all your sprites you can generate all the required CSS  with a single click.
• SmartSprites
  SmartSprites is Java command line utility that will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

Forms

• Accessible Form Builder
  Create accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• Wufoo
  Wufoo is an online service that allows anybody to easily build great looking online forms. You can use Wufoo as an easy way to create good-looking, valid CSS/XHTML form markup. It allows you to use your account to design and download the markup and CSS for FREE.

UI Components

• List-o-Matic
  Create CSS-styled navigation blocks based on unordered list <li> items. Get your semantics on!
• CSS Menu Generator
  Generates horizontal, vertical & dropdown CSS menus
• ThemeRoller
  ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

Text Wrappers

• CSS Text Wrapper
  Generates HTML/CSS to wrap content to any shape
• The Box Office
  The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in HTML pages.

Analysis & Debugging

• W3C CSS Validation Service
• CSS Analyzer
  CSS Analyzer checks the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
• Firebug
  One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use Firebug Lite in IE, Opera, and Safari.

Maintenance

• Dust-Me Selectors
  Dust-Me Selectors is a Firefox extension that finds unused CSS selectors
• CssCleaner
  Windows desktop application that removes unused CSS Classes from your web application
• CSS Redundancy Checker
  Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

Optimization

• CSS Drive CSS Compressor
  Normal mode allows you to choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. You can switch to Advanced mode for greater customization.
• Robson CSS Compressor
  A good CSS Compressor still in development.
• MinifyMe – AIR Application
  Adobe AIR application that allows you pack multiple files together.

Formatting

• CleanCSS – CSS Formatter and Optimizer
  This tool comes with several options for formatting as well as optimization. It also provides ready made sets of options for various level of balances between optimization and readability.  Important feature includes ability to automatically merged the same selectors and properties.
• Styleneat
  It organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
• CSS Toolbox
  Free CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. Compilers for Conditional-CSS are available in PHP, C# and C.
• Litmus
  Litmus shows you exactly how your designs look on various platform, across every popular web browser.
• Web Browser CSS Support
  Detailed information about CSS support in major web browsers, allows you to pick which browser appear on the information tables.
• When Can I Use?
  Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Allows you to specify browsers, features, time period,  status, search and sorting options.
• IE7.js
  IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Cheat Sheets

• CSS Cheat Sheet
  The CSS cheat sheet is a one-page reference sheet, listing all selectors and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
• CSS Shorthand Cheat Sheet
• YUI Library: CSS Reset, Base, Fonts, and Grids
• Blueprint CSS Cheat Sheet

via List of Really Useful Tools for CSS Developers | W3Avenue .

No related posts.

The series will be separated into days, starting with day two… ok lets get started.

Day 2 : WordPress Admin panel.

Introduction

In our video here we quickly reviewed all the necessaries that we would be using in order to use and edit our new WordPress install. He quickly went over the WordPress file structure. The necessary changes that needed to be made to the wp-config.php file when we upload, and the location of our all important theme files.

www.example.com/wp-content/themes/theme1

Body

Moving on through the video the main bulk of this video was getting the understanding of the different template files in your wordpress theme, what they do and how they work, so lets move through a few of them.

As described in our video if we go to APPEARANCE | EDITOR we will be able to see all the template files included in the wordpress theme currently activated.

If we start by importance usualy index.php would come to mind in a wordpress site. We can see there’s no doctypes or much html data in our file at all, but rather many simple php requests to header and footer and sidebar etc.. These are essentially statements that calls in those files from you directory. So header.

In our header.php we find our doctypes and titles tags and start of our html elements. This is loaded at the top of every page or post that calls get_header(). Pretty easy to understand.

Similarly our files typically end with out get_footer() call and our footer.php contains all the closing tags for information contained within our document.

Single.php – used for individual post pages.

404.php – used when a page within your wordpress blog cannot be found.

Sidebar -  calls widgets and other custom information into the 1 or more sidebars in your wordpress theme.

Conclusion

After looking through and familiarizing yourself with the themes directory withing your wordpress install you should be able to identify the different files and what they more or less accomplish. With this basic knowledge we will be able to simply identify where and what files we need to be editing in the future while we move on to developing our own theme, in the new few videos.

If you’re having problems understand the videos or information please comment and we will see if we can help you out.

No related posts.

Automatically Retrieve The First Image From Posts On Your Home Page

The problem . Many WordPress users use custom fields to display a thumbnail on their blog home page. Of course, this is a nice solution, but how about automatically retrieving the first image from a post and using it as a thumbnail?

The solution . This hack is quite easy to implement:

1. Open the functions.php file in your theme.
2. Paste this code in. Don’t forget to specify a default image on line 10 in case a post of yours does not have an image.function catch_that_image {
   global $post, $posts;
   $first_img = ”;
   ob_start;
   ob_end_clean;
   $output = preg_match_all’//i’, $post->post_content, $matches;
   $first_img = $matches [1] [0];
   ifempty$first_img{ //Defines a default image
   $first_img = "/images/default.jpg";
   }
   return $first_img;
3. Save the functions.php file.
4. On your blog home page index.php, call the function this way to get the URL of the first image from the post:

<?php echo catch_that_image() ?>

Code explanation . The function uses the global variable $post to parse the post’s content with a regular expression. If an image is found, its URL is returned by the function. If not, the default image URL is returned.

via 10 Exceptional WordPress Hacks | Developer’s Toolbox | Smashing Magazine .

No related posts.

First SEO Quake found at seoquake.com

Seo quake is both for Firefox and IE, and its primary function in is to help quantitatively define the information presented on a website or page being viewed. The main feature I would point you guys too is the keyword density ability, basically it can read through your pages and find out how many times a word or group of words appears on your site. VERY HANDY if your going for SEO optimizations this is a must, try and get your good key words between 5-20 density for maximum effect on your home page.

Next we have the all powerful Developers toolbar from Chris Derick

The toolbar can be downloaded from addons.mozilla.org

Developers tool bar is a multifunction toolbar allowing users to view style information, edit css, outline styles, edit their browsers width and height and so much more. Just with those key features makes the developers toolbar the #1 Firefox extension any kind of web personnel should have. Being able to specifically target a browsers width and height is something I think we all have had to do at a specific time, and with 2 clicks boom you can view the site in that exact resolution.

Being able to edit css on the fly even on another website and save it off also a helpful or potentially a time saving feature. and of course most praised feature in my opinion is the ability to highlight hovered objects, and see their css roots. See what div, what class and what id they came from, makes editing your styles that must faster.

Umm lets see, Colorzilla downloadable over there colorzilla.com !!

Colorzilla is simple, it places an icon down in the lower left hand corner status bar and  you just select it to get an eye dropper in Firefox, thus allowing you to retrieve any color on the firefox screen. Oh its sOo handy.

Finally we have Firebug available addons.mozilla.org

Firebug has some similarities with the developers toolbar but its a lot more complex. In other words it can be used to help diagnose css related issues and help you dig deep to find what id or class your having trouble with, but where this thing has shined for me in the past is with the development of dynamic sites, the ability to track what files are specifically slowing down the loading or display of my site.

My list of Firefox plug-in’s again are

• SEO quake
• Developers toolbar
• Colorzilla
• Firebug
• and of course Firefox is the browser.

Do you  have your own plug-in you think should be included in this, feel free to comment and let everyone know about it.

No related posts.

Before

Completely unsure about how good bots scan and index files and sites, myself and other bloggers alike had come up with a million different ways to present their own robots.txt file, and a million more ways to do theirs if they where using a wordpress site.

they ranged from

User-agent:  *
Disallow: /
Disallow: *

to something similar to this.

User-agent:  *
Disallow: /wp*

After

Some of what we have in our typical robots.txt is indeed valid, but bear with me for a second as i explain what i did to come up with some new results.

to gather statistics on what was being indexed I cross referenced the results from some analytic tools that I had available.

1. Google analytics (google search stats)
   
2. Stat press (wordpress stats)
   
3. awstats (server side built in stats)
4. Web mastering tools (By Google)
   

From the data I was able to pull from these resources I specifically looked for what was being hit. Because of the special way that wordpress loads, and imports I could see that /index.php was being indexed as a file, but most other FILES on the site where not indexed. All other PAGES or what would be considered a page by a typical computer user where not indexed as an actual FILE but rather indexed by its permalink location.

hmm … interesting Google bot indexes files and paths. Interesting  but not unexpected.

By now most of us know this, you set up a permalink structure in your website and it dynamically changes the links throughout your site to reflect the change. This is great for dynamically driven websites looking for a cleaner path or some SEO optimization.

The Google bot can in most cases follow an average custom permalink structure, I will note that the more difficult the permalink structures are ether crawled slower if crawled at all. I would shy away from lots of string names within your structure =?etc …

Back to robots…

So how does all this effect your robots.txt structure you ask? Well if you have gotten yourself a good permalink structure and you can then you can essentially set up your robots to block everything but the categories, pages, or posts you want it to crawl, and is perfect for helping eliminate duplicated content.

Here’s an example.

My own robots.txt file

User-agent:  *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /category/archive/
Disallow: /feed/

I have disallowed my wp-admin directory, and a category in my wordpress permalink structure /category/archive, and finally disallowed my rss feeds, accessed through http://www.cssorigins.com/feed if my site was indexed properly by Google then all the content that would be in the feeds would already been indexed and thus the feeds would be duplicated content. The same goes for the archive category, since I post all my posts into that category as well as their individual categories.

But remember that the bots index files as well, so it would be a bad idea to do something similar to this.

Disallow: /*.php

as your index file now would not be indexed, along with the rest of your website. =(

Don’t understand? Think there’s a better way? Please comment and help us build a better understanding of how the web works.

No related posts.

Here are 50 beautiful websites with landscape illustrations in a variety of styles.

Find Out How Serious…

Green Globe Ideas

DivVoted

StrawPoll

ten24 Media

Banjax

Visit Cascadia

DrupalCon DC

Studio7Designs

Adit Shukla

Iceberg

Vimeo

Go Glamping

Twither

Sensi Soft

volll

Tomas Pojeta

Jiri Tvrdek

Boagworld

Rawkes

10 Volt Media

Web Design Beach

Schneeballschl8

Stylized Web
S

Project Vino

Arbutus Photography

Moshi Monsters

IL FRUTTETO

eAnka

Colchester School

Cloudred Multimedia

John Cow

Dean Oakely

Brad Colbow

Nine Lion

RedBrick Health

polargold

Carbonica

The Octonauts

Yes Insurance

Viget Inspire

Reservoir34

Biowind

Happy in Greenville

Miki Mottes

Pinjata

via 50 Beautiful Websites with Illustrated Landscapes | Webdesigner Depot .

No related posts.

A Few High Quality WordPress Themes: Evan Eckard
Over 2000 Free Web Templates: OSWD
A Small Selection of Nice Templates: Open Source Templates
A Large List of Free Templates: Free CSS Templates
Nice WordPress Templates for Download: Free CSS Templates
A Combination of Free and Pay Templates: Free Templates Online
Affordable, Quality Templates: Templamatic
Free Blog Templates: Blogging Themes

CSS Galleries

The Best Sites on the Web: CSS Remix
A Frequently Updated Gallery of Sites: CSS Mania
An Organized List of Nice Sites: Most Inspired
CSS Gallery of Quality Sites: CSS Design Yorkshire
A Selection of Only Nature Based Sites: CSS Nature
A Selective List of Well Designed Sites: Web Creme
High Quality CSS Showcase: CSS Tux
Nice CSS Websites: The Designed Tree
A CSS Collection Organized by Category: CSS Elite

Inspiration

A Great Site About Everything Type: I Love Typography
An Incredible Illustrator: Burst of Beaden
A Great Designer and Illustrator: Fully Illustrated
Customizable List of Design Resources: Cork Dump
The Society of Graphic Designers of Canada: GDC
Freelance Advice Blog and Resources: Freelance Switch
Amazing Collection of Logos: Logopond
Stunning Desktop Wallpapers: Desktopography
A Graphic Design Magazine: Computer Arts

Tutorials

The Best Photoshop Tutorials: PSD Tuts
A Talented Photoshop Designer: Abduzeedo
Photoshop Tutorials and Web Design Resources: Web Design Library
Tutorials for Photoshop, Illustrator and More: Tutorial Vault
A Few Neat Illustrator and Photoshop Tutorials: Design Spice
Great Photoshop Tutorials and Downloads: PS Wish
Tutorials for Every Computer Program: Tutorialing

Design Blogs

A Frequently Updated Design Blog: Veerleas Blog
A Design Magazine and Blog: Smashing Magazine
A European Design Blog: Design In Europe
A Unique Nerdy Blog: Design You Trust
The Personal Blog of a Graphic Designer: Larissa Meek
A German Design Blog: David Hellmann
The Blog of a Canadian Geek/Model: Mostly Lisa
A Graphic Design Blog: Bittbox
A Blog About Freelance Graphic Design Advice: Freelance Switch
A Design Blog Full of Resources: You The Designer
A Popular Design Blog: Fazai 38

via Eco Design Blog a: 101 Design resource sites .

No related posts.

• The personal design blog, web.print.andbeyond  at Jilnteractive
• Gonno Design’s Dark theme focuses your attention to his work | Gonzo Design
• Web design company employing the funner side of illustration | GetMeFast
• Creepy animation, solid design skills | STPo
• A personal favorite, Abduzeedo links all of us to great inspiration over and over again | Abduzeedo
• Popular css gallery website | css Fresh Blend
• a UK biased company, and not so known in my circles but a very beautiful css Gallery | CSS Showcase
• Theme forest home page is what makes this site wonderful, pictures, content, nice big power button | Theme Forest
• The ever popular Smash Magazine

If you have comments about this list please feel free to leave them. This list is comprised almost in its entirety by my own personal feelings about these websites look and feels.

Additionally if your interested in a larger list studio7designs has come up with a list of 101 sites most of whitch are simply stunning. A list that I myself with be reviewing in great depth in the comeing weeks. The Additional list can be found at http://www.studio7designs.com/blog/101-design-resource-links/ and will be added to my news press section.

No related posts.

WordPress – features

• incredibly easy to use CMS
• open source, and free
• millions of worldwide developers
• unlimited supply of user-created plug-ins
• standardized php
• great support forums

All of which made my choice easy when selecting my own CMS for this website (cssOrigins.com).

let me rack my brain here for a second and tell you my fear with building a website. Why has it taken me so many years to come up with something even half decent? something like this website? As i said before because there is so much to do. I could talk on and on about website SEO, or how security is something often times neglected. A blog needs information and as I further develop this blog please feel free to express your own opinion to me on the topics that I will be covering.

My first few posts are going to be posts geared towards the development of my own blog  and what I have been doing to permote it, secure it, add to it, and prep it to overall be my website for years to come.

No related posts.