As a starter or a seasoned web developer, we usually tend to skip out on some great practices that we should be using merely because we have never heard about them. To reduce this gap of missing goodies, we cover several practices no developer should live without.

Doctype Declaration

Many do it, others choose to not. However, it is in your best interest to declare the doctype in your HTML files for better standards compliance. Browsers usually have their own ways to fix errors you accidentally or unknowingly left in to get the HTML better interpreted. However, as with most browsers, they all have different ways to interpret things and thus, when it comes to individual browsers trying to fix or “patch” your errors on the fly, things start to get messy and your website will appear different across these different browsers and platforms.

Therefore, by declaring the doctype, you force these browsers to enter standards compliance mode, which cancels out their correction systems. With this, you can easily locate the errors you have made and be able to fix them to get your website to look and work the same across many browsers and platforms. Think of the doctype as a keycard to open all the doors in a building versus a key that may or may not open a few. You would definitely choose the keycard that opens all the doors rather than a key that may or may not work, the same applies to declaring the doctype so definitely use it, you will be glad you did.

Meta Description Attribute

Many search engine optimization radicals always seem to deter us from using the meta description attribute with the argument that search engines do not use them anymore. Actually, they do, but if they are not available, they will use other means to formulate a description about your website. Therefore, as a good practice, always include a meta description attribute with a great description of the website as this is what search engines use to formulate that description right below your title when you search for your website.

To get back to the search engine optimization radicals, they do have a point, especially for those who misuse the meta description attribute. Search engine bots are getting smarter by the day and can detect whether you deliberately misused the attribute or not. Therefore, use it as intended, as this is a gold mind for HTML as well as the key to improved search engine optimization.

Footer Content

This HTML practice is a bit subjective however very useful and vital to keeping your website running smoothly. We all have landed on a website that takes a good several seconds to a minute to load anything that is viewable due to the cause of external scripts bogging down on the load time. The way HTML is loaded is in sequential form, from top to bottom, line after line. What this means is, it will halt on a line of code until it is fully interpreted or executed, and in this case, it will wait until the external JavaScript file is fully loaded before proceeding on to the next line.

Therefore, stick this JavaScript code in the footer to have the content that is important to load first. For example, if you have your analytics code such as Google analytics, stick it in the footer right before the end of your body tag so that your website can load the content quicker and not bog down until it reaches the end of your content where users do not have to actually wait for it to load.

The reason this idea is subjective is that some may disagree with the idea of taking JavaScript code outside of the head tags, however, in such situations, it is a better practice to take upon as it is what keeps your website running more efficiently in such a case.

Using Unordered Lists for Navigation Bits

Many developers whip up all sorts of concoctions to create a navigation bit. So instead of using the accepted and preferred markup they decide to use a set of divs and all sorts to achieve similar results. This technique is not only inefficient, but it is also very tedious and redundant. Therefore, use unordered lists as a basis for your navigations as the code is simple, the functionality is pretty much completed for you already, and all you need to do is give it some style. Remember, reinventing the wheel is not something you want to do, let alone reinventing it and losing efficiency.

Leaving Your Front Door Open

Whenever you are in your home, out of your home, or on your way home, you always have your doors closed and locked. I mean, who would want to leave their home doors unlocked and open when they are not around? Other than the neighbor I once had who left their front door wide open at night, we all know it is a good practice to keep our windows and doors closed when we are not home. Similarly, always close the tags you open for clean and validated markup.

I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.

Validate Your Code

Validating your code helps you keep your code clean from nasty errors you may have missed or unintentionally thrown in. While having valid code does not indicate you are a great developer or not, it does help eliminate possible errors you may find in the future within many different browsers and platforms. It additionally throws a good image about your practices for your portfolio for future hires.

A really interesting question was asked recently on Answers, discussing the importance and relevance of CSS validation. It would be interesting to discover how much stock developers actually do put in to it, or, is it more important to focus on the actual page being able to function? We would love to hear from you.

You can leave your thoughts, tips and insights in the comment section below, or you can leave your answer on the original question on Answers here: CSS validation, How Important Is It

This question was originally asked by Ben G.

Here is the best answer, as voted by our users, so far:

So, what do you think, how important is CSS validation?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we feature four powerful and new jQuery plugins that will add plenty of cool functionalties to your sites or applications.

Phono – jQuery Phone Plugin

Phono is a simple JQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.
Phono – jQuery Phone Plugin

Wijmo – jQuery UI Widgets

Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.
Wijmo – jQuery UI Widgets

SlideNote – A jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.
SlideNote – A jQuery Plugin For Sliding Notifications

IMGr – jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.
IMGr – jQuery Image Rounder

By Paul Andrew (Speckyboyand speckyboy@twitter).

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block. It aims to cut down on development time and help you create beautiful-structured websites.
The Square Grid ?

Jo – HTML5 Mobile App Framework

Jo is a new and lightweight JavaScript framework designed for HTML5 apps.
Jo – HTML5 Mobile App Framework ?

Frame Box – Lightweight Tool for Creating Mockups

Frame Box – Lightweight Tool for Creating Mockups ?

Ultimate CSS Gradient Generator

HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. This easy to use copy-and-paste tool gives you complete control when creating your CSS3 gradient.
Ultimate CSS Gradient Generator ?

By Paul Andrew (Speckyboyand speckyboy@twitter).

One of the most sought after resources for a web designer are high quality and, preferably, free CSS/XHTML/HTML web templates. And this exactly what we have for you in today news round-up: 5 New High Quality CSS and HTML Templates.

Schizo Octopus Website Template

This template has a fixed layout one page portfolio template with two columns with the download containing the Photoshop Files, XHML/CSS Coded template and also includes documentation.
Free for personal or commercial use. No need to credit.
Schizo Octopus Website Template

CSS Heaven 2

CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs.
This template is released under GPL License.
CSS Heaven 2

Euphoria

Euphoria has been licensed under a Creative Commons Attribution 3.0.
Euphoria

Template 6

This template could be used as a corporate website & blog, it contains: Two template pages , valid HTML & CSS and all of the PSD files.
Template 6

SilverBlog

SilverBlog is a minimal template suitable for blog designs that has been built with HTML5 and CSS.
It has been released under GNU GPL license.
SilverBlog

By Paul Andrew (Speckyboyand speckyboy@twitter).

If you are a WordPress developer there is no doubt you will have your own personal collection of code snippets, hacks or even short-codes that you can call upon in time of need. They are those little lifesavers that can solve complex problems with only a few lines code… they truly are indispensable no matter which host monster you use. In this design news round-up we have highlighted some recent articles and posts that will freshen-up your WordPress toolbox.

WordPress Snippets

The idea behind WordPress Snippets is simple; to provide small snippets of code, helping you to create a magic WordPress Theme. The original documentation of WordPress is excellent, but not as straight forward as you may want. Straight forward is the lead word for WP Snippets. No talk, just Snippets.
WordPress Snippets

10 useful new WordPress hacks

This WP hack list, from CatsWhoCode, has a whole of lot fresh new snippets to help with WordPress dev. Want to remove comments autolinks? Or, are you looking for a hack that will display a Twitter style “time ago” date? If so, you will find the answers in this post.
10 useful new WordPress hacks

10 Useful WordPress Search Code Snippets

In this post will find 10 really useful code snippets that will help improve your WordPress Search functionality.
10 Useful WordPress Search Code Snippets

By Paul Andrew (Speckyboyand speckyboy@twitter).

Slideshows and image galleries are all the rage at the moment, there are loads of new techniques, plugins and tutorials cropping up everywhere. In this design news round-up we have chosen our favorites from recent weeks.

SIDEWAYS – jQuery fullscreen image gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery and some simple CSS.
SIDEWAYS – jQuery fullscreen image gallery

Full Page Image Gallery with jQuery

In this tutorial you can learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background.
Full Page Image Gallery with jQuery

Orbit: A Slick jQuery Image Slider Plugin

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.
Orbit: A Slick jQuery Image Slider Plugin

By Paul Andrew (Speckyboyand speckyboy@twitter).

One of the most difficult tasks web designers have to tackle is ensuring that all web pages work consistently across all web browsers. As the most of you will already know, this is no easy task. And recently, on Design Reviver Answers, this topic was brought up in discussion, and we would like to share with you some of the tips that were offered from our readers, and we would love to hear about any more you may have.

You can leave your tips and thoughts in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Most Effective Way to Make Sure That My HTML/CSS Works On All Browsers?

This question was originally asked by Themans.

Our favorite answer comes from Handrus Nogueira:

The answer came from Trevor:

This answers came from Scunliffe:

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

There are hundreds of ways to writing out code with hundreds of methods to achieve certain functionality. However, out of these many ways of writing code to get to the final product, there are many habits that are not great to the programmer or to the functionality of what you are trying to achieve. Furthermore, we discuss 10 tips for improving and writing better PHP code.

Development Style

Tabbing, double-spacing, all on one line; we all have our style of writing out code and there really is not a right or wrong way of laying your code out. However, many developers tend to fail at keeping their development style fluent throughout a project. I myself have been caught a few times adapting to new styles within one project.

Furthermore, it is best to keep your code laid out using one development style rather than several to keep your code easily readable and organized. If your development style sometimes evolves to something different, it is best to not use your new development style on a project that uses a different style, but rather implement your new development style on new projects you may start. This keeps all of your projects fluent and organized.

Good Variable and Function Naming

Many developers do not really care about proper variable and or function naming. However, good function and variable naming is key to have more organized code, which categorizes under better-written code as it becomes clearer to understand and comprehend.

Naming variables and functions properly is rather something easy to do and should be based on what the variable value is and what the function achieves. This not only provides easy to understand names, but it also helps you and other developers understand what each function or variable performs and holds by just reading the short name.

Commenting Your Code

Commenting your code is a major step to organized and readable code and actually compliments most of what you can do to organize your code, as it is a key aspect in organization and usability. When writing comments to describe certain actions, functions, or code, it is best to keep the comments strict and to the point without describing what everything is.

For example, if you have a code snippet that is quite obvious in terms of its functionality, it is best to either leave a few words about it or not to comment it at all, as too many comments can be obnoxious.

Do Most of the Work

Copying and pasting code is something we tend to do most of the time, from one project to another, or from code, we may find useful on the net that has been done for us. However, copying and pasting code can sometimes hurt you in the end as you may not be familiar with your project or code as much as you had hoped you were or as much as you need to be. Furthermore, copying and pasting a few snippets is fine, but you should do most of the work to freshen your memory.

Look Around

Sometimes we might be doing something new and do not know what the best route is to take in terms of speed and performance, thus, looking around at other code from people who created something similar to what you are creating is sometimes a great idea to do to obtain a general idea on how to approach it better. This does not necessarily mean copy and paste the code, but rather just get a general idea of how it works.

Understand the Language’s Limitations

We sometimes try to achieve many things the language was not designed for or is not capable of doing by creating workarounds. This is not a great idea, as your created workaround may not work sufficiently or effectively. Therefore, it is best to understand the language’s limitations, and to work within them.

Receive Structural Feedback

We sometimes think that we are the only ones, who know how to properly develop, but we are not and in fact, there is always someone out there better than us. My point is, it is always good to receive a second opinion on your code in terms of structure, as some feedback can be critical to enhance the performance of your script.

Testing Your Code Often

Part of making your scripts closer to bug free is to test your work often and as you go along. The problem with many developers is that they think what they develop should work fine the first time and decide not to test certain aspects of their script as they go along, and in the end, they end up with several bugs and many they may not catch immediately. With that said, it is in your best interest to test many aspects of your code or script for bugs as you go along in development, this is proven to reduce bugs in the long run.

Built-ins over Building Your Own

We sometimes tend to recreate a built-in function just to have it. The problem with unnecessary recreation of built-ins is that the performance is affected. Moreover, using built-ins when applicable is a better idea and not only does it increase performance, it also keeps your scripts clean from unneeded code.

Don’t Split Everything into Files

Splitting your code into several files is actually part of keeping your scripts or projects organized instead of having everything all in one file. However, many projects I have seen tend to split everything into many files, sometimes separating individual functions into individual files.

This overkill and not only affects the way your code is laid out but it also affects performance. For example, instead of splitting individual functions into individual files, create a functions file and store all of them there, or group them into files. This still keeps your project organized and it keeps things reasonable.

Remember, doing something beneficial is great, but overdoing it or not doing it at all causes a negative effect, thus, use your judgment, and use techniques and methods reasonably.