If you had a piece of software to visualize your thoughts, organize them, and put them in context, you will write better. Visualizing the organization of your content is called mindmapping. I use MindManager to create a map of the posts I’m writing. To you reading this blog, it’s all linear by date. But here is what it looks like to me:
As you can see, there is a heirarchy. While I’m traveling the internet, I run across ideas, other posts, and over time, I add them to the map, and the blog posts practically write themselves. This saves you from the feeling of having to face the wall of a blank page. So, what else can do with all this stuff? Well, do you need to plan projects, Brainstorm new ideas for products, develop presentations, manage meetings, create a resume…
So far, I don’t think [iFreelance] is the best use of Bidders or Buyers time. - Jeff Knooren
IMO, one of the best things about this type of sofware, is it allows you too look at the map in different ways. Craft an outline of your thoughts and develop a logical progression of your points. If the flow doesn’t work, rearrange the order of your points. Switch back between linear outline and non-linear map view. Then, you can export/import it to MS Office.
A Bit Of History
I remember just 15yrs ago, if you wanted to make a spreadsheet, like excel, or have a document scanned in, you needed an expert to do it. A person was paid quite a bit of money to write the formulas to calculate a column of numbers. Or, making a newsletter required someone with years of experience in PageMaker. That level of expertise took so much time to acquire; they were considered highly skilled experts.
Computers are still a mystery to most people. In fact, even though I’ve built sites for IFAW and National Geographic, I still take jobs for the most basic tasks, like formatting PowerPoint presentations. I’m not too proud I’ll have you know. But I’ve also noticed that the world of computing has change quite dramatically, and not many people have noticed.
Todays World
Flash forward to today, and creating spreadsheets and HTML newsletters can be done by junior high school students. Creating a ready made site was impossible just five years ago. Look around at how many sites there are, built on blogs. It is obvious that blog software has become the next “killer app” because blogging is so easy, anyone can do it. Blogging changed the world, because in 5 years it created an army of Instant Experts. Now the problem has gone from “How do I create a newsletter” to “What do I fill by blog with”
… they had different file names and attributes, yet they were essentially the same icon. Frustrating. - Jeff Knooren
Creating basic websites is automated, and the fastest I’ve ever done it, was 3 minutes. That’s registering the domain name, to having a dynamic site all configured that the internet could enjoy; 3 minutes. The caveat is: Just because it’s automated, doesn’t make it automatic. It’s there, but totally useless unless you put something in it. Once you start a blog, you better keep it running.
Still, it is quite a challenge to publish something that stands out from the noise of a total of the estimated 3.5 million blogs that are out there. But have you ever stared at a blank page, not knowing what the blogosphere wants to read? The internet rewards interesting blogs with attention. But help is on the way, all it takes is a little planning before you start.
My life revolved around stylesheets when I lended a hand to The Web Standards Project. Web sites/software today is pretty much designed using CSS and Web 2.0 methods of prototyping. So when I was Lead Interface Designer at Kintera, I really enjoyed questioning every decision about interfaces, and how we use CSS so we’re not locked into decisions we can’t get out of.
No PX for font size
If the majority of your visitors use Internet Explorer, then specify PX on the BODY tag only. Let this be a starting point that the other tags will inheirit the relative sizing from. Don’t use pixels for anything else. Using percentages (or other relative values) to specify page layout in CSS allows readers adjust the font sizes. The exception being; You’re building a piece of software
Avoid Unnecessary Selectors
I’m still trying to explain this properly, so here it goes; In HTML layout, CLASS and IDs do not have to be filled out for every HTML element on the page. Tags are nested within each far enough, that they become unique quite easily. This is due to the DOM or Document Object Model, and all webpages ever made on the internet follow this structure. It simply means that what ever you put on a webpage is nested in some kind of container. In that sense, it is like a book with a Table Of Contents. Therefore, each webpage is a book with table of contents.
Here I’ve created a basic table. There is a header, and two columns. But notice how they have a layout which can be mapped to a table of contents. There is a Title, Subject, etc… Using this general format of a book, make it easy to communicate to someone else where content is on a page. Simplying say “it’s a title” is easier than “customformat_IU_600xLEFT” Because no-one wants to memorize the names of selectors.
If you want a tableless/CSS mapping for this convention; Using H1 -> H6 should be the HTML code equivalent. The H1 though H6 tags are the easiest way to apply style to your content, without having to manually type in the ID or CLASS of that element. If at all possible, you want to eliminate custom classes, because it’s just more things you have to remember on a daily basis. CSS does the hard work for you by rewriting these tags. It is acceptable to use HTML to align text right, left, center because using CSS to do this might create too many custom classes.
Here I put the above convention to use. Another benefit, is that software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. Jack Slocum has a similar method using compass directions (North, South, but without the ability to use shortcut keys.)
CSS declarations on one line
I’ve always put my entire declaration on one line. Here’s an example to explain what I mean:
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an ID or a CLASS. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many. Here is a stylesheet I use as a template.
#xxxx{}
#xxxx .input{}
#xxxx .selected{}
#xxxx .textarea{}
#xxxx a,#xxxx a:link,#xxxx a:visited{}
#xxxx a:hover{color:#FF6600}
#xxxx b{}
#xxxx h1,#xxxx .title{}
#xxxx h2,#xxxx .subject{}
#xxxx h3,#xxxx .regular{}
#xxxx h4,#xxxx .highlight{}
#xxxx h5,#xxxx .special{}
#xxxx h6,#xxxx .help{}
#xxxx i{}
#xxxx img{}
#xxxx p{}
#xxxx span{}
#xxxx td{}
#xxxx th{}
#xxxx th a,#xxxx th a:link,#xxxx th a:visited{}
#xxxx th a:hover{}
#xxxx ul li,#xxxx ol li{}
#xxxx ul,#xxxx ol{}
Software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. - Jeff Knooren
Allow Block Elements To Fill Space Naturally
I set a width but not the margins or paddings. If setting margins or paddings, I don’t set a width. The box model is such a pain, especially with percentages. Therefore, width on the containers and then set margin and padding on the elements within them.
CSS Shorthand
It has been argued for quite some time that setting margin-top, margin-right, margin-bottom and margin-left is too verbose, and it will take fewer bytes to use shorthand. However, the savings won’t make that much difference. Additionally, paddings and margins are STILL not properly rendered in all browsers. The long form version is the only one that works without hacks.
Browser Support
Support only the latest browsers. That means dropping IE5 and IE5.5 support. phasing out these old browsers means having to use less hacks to get things working. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that’s it. You have to consider your audience before dropping browser support.
One of the good things about making a time tracking application from scratch, is that over time, you can make small improvements to it as the need arises. - Jeff Knooren
Containing Floats
After many frustrating attempts with relative and absolute position techniques, you might have figured out the only way to put things where you want them is to use the Float attribute. But only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container. The content within the container should be designed to stay within the container. Anything too big and it’ll get clipped. Shifting things using negative margins outside the container will also get clipped. Here is an example, of floating images, from the main page of my website
This isn’t one floating image, it’s 7 images floating and overlapped. The arrows can be positioned using CSS.
Overflow
Overflow is usually where people get bit by IE. If you’ve got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you’ve messed up your margins, widths, or padding on one of these containers but Firefox (et al) won’t reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you’re better off trying to fix the issue in the design.
Floating multiple elements on the same line
For basic positioning, relative and absolute positioning work just fine. But when your layouts become a little more complex as they always tend to do, tyring to position div’s within div’s using this method can become a real struggle. The cool thing about Float, unlike the other positioning attributes it makes it so easy to position elements right next to each other. For example, if your wante to create a navigation menu that spanned left to right with say 5 different boxes, the Float attribute makes this so simple. When you create a floated div tag using the following code: float: left; providing it fits into the length of the page it will position this flush with the side of a previous floated element:
Spending an hour to prepare an estimate, along with 100 other people isn’t a productive way to do business. - Jeff Knooren
Summary
When you get to be in a position to lay down some rules for others to follow, you have to go beyond a preliminary examination of your choices. This questioning lead me to examining issues such as, WHY is that font THAT size? Or, why is this thing light blue, and not dark blue? To begin such a questioning process, you need to start somewhere, and document those choices. This post, is what the first version of that foundation might look like. Additionally, I think developers tend to go overboard in creating CSS selectors. Well, what have you got to say for yourselves?