Sunday, November 1, 2009

Blog #6 - Checklist of 10 Things to Always Remeber

Here's a top 10 checklist of concepts and ideas to keep in mind while designing a successful website that may be over-looked.

10. Padding and Margins will count towards your total width. This will always be a problem with people when trying to float items in their style sheets, they add padding or margin and suddenly the design messes up. Always remember that padding + margin + width = total width that you've defined for a body of text/graphic.

9. Citation vs. Address. This can be difficult sometimes, determining the proper usage of both of these tags. There's a bit of a gray area, but usually one ends up being more right than the other. Just remembering the definition can be helpful for this situation; address is used for contact information for the author or maintainer, citation is used to identify a reference.

8. Font-color. It doesn't exist. Don't use it.

7. Acronyms and Abbreviations. These will sneak up on you a lot when marking up a lot of text in HTML. Make sure you scan through the text multiple times before moving on to something else.

6. Inheritance. Always check in Firebug for this one. It'll tell you every single property that the selected area is inheriting and from where. This will save you a lot of guessing when trying to pinpoint font sizes, line length, etc.

5. Alt for IMG, Title for everything else. Easy way to remember when creating an alternative bit of text for something else is Alt has 3 letters just like the IMG tag.

4. Break to clear the background. Floating elements and the container background stops just before all those floating elements? You didn't clear it.

3. Check your spelling. A lot of code errors can be attributed towards simple spelling mistakes. Always check spelling in both your CSS and HTML when something goes wrong. It could be from either side. Validating can help fix this problem, but not always, especially with file names.

2. Validation. Don't just validate your HTML, validate your CSS as well. This will help you find simple spelling mistakes a lot of the time and should be done before you post anything as a final.

1. Cincinnati Bearcats are awesome. Even just thinking about how awesome the Bearcats are will make your coding/designing that much more awesome. I will help out by wearing a Bearcats shirt as often as possible to help out everyone else focus on the awesomeness.

(the real) 1. Display: Block;. Changes inline elements to block level elements, mostly helpful for when you want to click on a box for a link instead of the actual text. This is also the only way to make image replacement work properly. Simply putting this in your anchor tag for whichever link you're working on will make everything that much easier.

No comments:

Post a Comment