Download this sweetcron theme for FREE
If you are a sweetcron user and looking for a theme like this, please take it as a gift from me. Just give me a link back thats all i ask. Thanks for visiting. Hoping to cya around.
Syndication feeds available
Examples and Tips for Great HTML/CSS Formatting
An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS. HTML Use the Strict DOCTYPE (DTD) whenever possible. If you’re beginning a new project, don’t use Transitional. You won’t be using tables for layout; so Transitional isn’t necessary, and the Strict DTD is up to standards.
You’ll notice that I’ve moved the meta http-equiv charset above the title. The title should go above everything else and W3C even puts this meta tag below the title in their example template. This meta tag however, should be above the title so that the browser knows what charset it’s working with before reading any other content to be displayed (such as the title).
Encoded Characters Make sure you use HTML encoded characters, including URL’s.
Alt Tags Make sure you’re using the “alt” tag in your images. The “alt” tag stands for alternative text and is displayed if your image is unavailable; it’s used by search engines for image descriptions and accessibility.
Properly Nest Tags Make sure your tags are properly nested. Inline elements, for things like links, should go within block elements - such as headings.
Tags should also be closed in the order they are opened as well as contained properly.
External Assets Make sure that your CSS and JavaScript is external. Try to keep your HTML files simple and free of any unnecessary code. For JavaScript, it isn’t as big of a deal - especially for a small block of code - but if it’s becoming complicated, just put it in an external .js file. Also make sure that your JavaScript files are linked after your CSS files. You want your styles loading before your JavaScript runs. * Manager’s Note: If possible, consider placing your Javascript file just before the closing body tag.
Indentation Indent your markup so that it’s easy to navigate and read. When other people look over your files, it can be much more work to navigate through markup that has no indentation. Your goal should be to make it as easy as possible for whoever may be editing or reading your markup. This is a major pet peeve of mine as I typically find myself spending far too much time fixing poorly formatted markup from someone else’s project.
Commenting Use HTML comments to indicate important notes, sections, or the end of an element. At first, the extra comments appear to clutter the basic markup, but once you load in all of the content, these comments can be a major time saver and help others who may edit the files later.
Markup Order Place your markup in a logical order in relation to the design. If your sidebar is on the right and your main content is on the left in your layout, put the markup in that order.
Validate Your Files Validate your files! Okay, this isn’t a formatting tip but this seems to be forgotten far too often. A store doesn’t sell products without quality assurance; so why would you sell your work (the files you created) without double checking to make sure you’ve done it correctly?
http://validator.w3.org http://jigsaw.w3.org/css-validator/
CSS Just as you would with HTML, use CSS comments to indicate important notes and sections. You might also want to separate your CSS pertaining to layout from your typography. For simple sites, this may not be necessary, but when you begin getting into more complicated sites, it can be a huge time saver.
There are several ways to format CSS; much of it comes down to preference. When I work with CSS files, I use the majority of the width of my screen - so I prefer single-line formatting. Many others prefer multi-line or a cross between the two. Many applications have built in features or plugins that allow you to change the formatting of existing CSS documents with relative ease. Here are some examples of the formatting types which also include proper indentation. Single-Line This is single line formatting (what I prefer). When you use shorthand CSS this method of formatting works out quite nicely I think.
Multi-Line This is multi-line formatting.
Mixed This is a cross between multi-line and single line formatting. The short rules are on a single line while the long rules are on multiple lines.
Short-Hand CSS Use shorthand CSS to keep your CSS slim and clean. The first example is normal CSS and as you can tell, it takes up a lot of space. The second example is the shorthand version of the first CSS example. Then there are three more examples showing different options. The first, on line 77, means a margin of 10px on all sides. The second, on line 78, means a margin of 10px on the top and bottom but 15px on the left and right. The last one, on line 79, means a margin of 10px on top, 15px on the left and the right, then 12px on the bottom. This rule can be applied to many more CSS rules as well. If you’re not familiar with it, set aside some time and learn, because it will greatly reduce your CSS bloat and work time. I also want to point out that if you have a value of “0px”, you don’t need to include “px”, just use “0″.
Conclusion The key to beautifully formatted markup is organization. Just like you would organize the files in an office, for school or for something else, you should organize the markup so that you can find and edit sections quickly. Use visual formatting as well as logical separation, placement, and naming. This way, the work you do will be high quality and ready for anyone else. Your clients and buyers will thank you - and you’ll be thankful yourself. Also, remember to validate your files!
http://validator.w3.org http://jigsaw.w3.org/css-validator/
Subscribe to the Theme Forest RSS Feed.
Via: http://feedproxy.google.com/~r/themeforest/~3/zFiQNrdWyKM/
blog comments powered by Disqus
