25+ New Examples of HTML5 and CSS3 Websites


h3 { font-size:15px; font-weight:bold;}

In the field of web designing newer tools are invented and introduced in the market very often. HTML is a language that is used to structure and present contents for the websites. This technology have seen many changes and goes through many improvements since its first introduction in 1990.

Now the latest version of HTML that is known as HTML5 is used to create amazing designs for websites. Both HTML5 and CSS3 are now become one of the most trusted and widely used trend of designing websites to the web designers and developers.

There are reasons why website designers and developers like to use these languages while preparing codes for a website. These languages are really very user friendly. You don’t need to be a highly qualified computer engineer to design websites with them. A basic knowledge of HTML coding can make the process an easier one for the novices as well.

Moreover, there are lots of websites templates that are created with the help of HTML5 and CSS3 to make them perfect for any kind of websites. These templates can be downloaded for absolutely free from the internet and use for creating a stunning website or else you can purchase the premium version of HTML5 and CSS3 website templates and develop an exclusive site.

HTML5 and CSS3 Websites Examples

Adobe – The Expressive Web

OrangeSprocket

Har Du Det I Deg

HTC

Beercamp 2012

Suit Up or Die Magazine

Casey Britt

Lois Jeans

Glamour.biz

Bobadilium

Societe Generale

Whiteboard

Ghost Horses

FiftyThree

lend your leg

Marcus Thomas

KRYSTALRAE

Capitol Couture

Air Jordan 2012

Bikes aus Düsseldorf

Nature Valley Trail View

Pulpfingers

Discover Bagigia

Superlovers

Soleil Noir 2012

Guns N Roses

Article Source : http://designmodo.com

How to code an HTML5 template


Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about – HTML5.

Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure.

All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest – in the end that is a great thing for us web designers and developers alike.

Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue:

“Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.”


But, don’t let that scare you. There are always people out there constantly making sure that it doesn’t get changed out from underneath of all of us. So you will certainly be aware if such a drastic change does indeed happen. Back on topic, one of the main questions people have about HTML5 is “<header>, <nav>, <footer>, these tags seem understandable enough but where in the world did the W3C come up with these?” Well, that question is easy enough to answer. It came from you!

It actually came from all of us. In 2005 Google conducted a study of over 3 billion websites and found that the most common classes used in common markup were actually what you see there on that page. Footer, menu, title, small, text, content, header, and nav are all among the top of the popularity chart. And essentially that is how the W3C decided on what to use for the new semantic tags for HTML5. Now that we know about that, let’s dive right into what those tags are and the basic fundamental changes in HTML5.


The doctype

A doctype isn’t particularly an element of the HTML, but it is a deceleration, and one that has become more and more important as time goes on. Using one appropriately can help your browser understand what sort of HTML it is trying to parse so we always want to use the appropriate doctypes. In all honesty, at this current time, you can pretty much just use the HTML5 doctype for everything though – but let’s cover some past ones as well. Here is where we have come as far as simplicity:

HTML2:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Pretty great right? You don’t need to keep a document for copying and pasting in some ridiculously long doctype, or even worse yet, try to remember the ridiculously long doctypes of versions past. For HTML5 you simply have to type <!DOCTYPE html>. Ah, what a relief.


Other simplifications in HTML5

Before leaving this section, let’s go through some of the other elements that have gotten simpler. The root element has been simplified, to which instead of having to write something like:

<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

We can just write:

<html lang="en">

The things we need to copy and paste getting smaller and smaller by the minute. For instance, also, In the head element, our character encoding went from things like:

<meta http-equiv="Content-Type" content="text/html;>

to the newer version in HTML5:

<meta charset="UTF-8">

And lastly, our links have dropped their type attribute. So for instance, this:

<link rel="stylesheet" href="style.css" type="text/css">

Becomes this:

<link rel="stylesheet" href="style.css">


So what’s with these new tags?

The “section” tag

The section element is basically any generic section of an HTML document. Most typically though, it is a thematic grouping of content – which can have a heading but doesn’t require one.

A general rule of thumb for using the section heading is only use it if it would be explicitly referenced in the document’s outline. If, in the outline, there was a ‘section’ that you referenced or feel that all the content in one area is a ‘section’ of sorts – then do indeed include the section tag. If you want to use it mainly for styling purposes though, just don’t. Instead, use a <div> tag as you normally would.


The “nav” tag

The “nav” element represents any section of a page that links to other parts of that page or other pages within the sitemap. Anytime you think of navigation links, you should think “nav tag”.

The nav element is particularly intended for larger navigation blocks. Any large element that links to other sections of the site’s page or other pages of the site. Keep in mind though, a navigation section doesn’t have to be in the form of a list, albeit that is pretty standard. It can be in prose, paragraph tags, or pretty much anything – as long as it was originally suited to be in such tags in the first place.


The article tag

The article element represents a self-contained composition in a document, page, or any site. The really important thing to keep in mind with article tags is that it is, typically, independently distributable or reusable content is what is usually placed within the tags. It could be a forum post, a magazine or newspaper article, or a blog entry, even comments – as long as it is any independent item of content.

Articles can hold “section”s inside them, “header”s inside them, even “hgroup”s inside them. But do keep in mind when and how you are using this element, as it isn’t quite as commonly used as a <div> tag. So in summation, it isn’t a one-in-all answer for everything, but it does indeed have a lot of uses.

Let’s hop into an example. For instance, let’s say you have a blog post with some comments. You can do that like this in HTML5:

<article>
<header>
<h1>The Blog Entry Title</h1>
<p>12/25/2045</p>
</header>
<p>Blog entry</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 15 minutes ago</p>
</footer>
<p>Comment text here
/p>
</article>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 25 minutes ago</p>
</footer>
<p>Another comment here</p>
</article>
</section>
</article>


The “aside” tag

The aside element represents any section of a page that consists of content that is tangentially related to the content around the aside element. The most important thing to remember with this tag is that although it is content tangentially related to the content around the aside tag, it is typically information or content that is separated in characteristic. You will most often use it in sidebars, as most sidebars are perfect to be entirely wrapped in aside tags. Other uses can include pull quotes, bits of advertising, groups of nav links, or even addresses near the address of a location in question.

To get into more detail though, it is for anytime you feel the need to quite literally take an aside and explain, reference, mention, state, or question something. You can even use an aside element for a larger section of a site, such as a side-bar for Twitter, or Facebook, or random links. You could have it be an aside, then use a header and nav section within it even to help understand what is going on there. You can use it in the footer section of blog posts to reference things about them, or pretty much anywhere it can be perfectly implemented.


The “hgroup” tag

The hgroup element represents the heading of a section. This element is best used to group a set of h1-h6 elements when the heading has multiple levels, or subheadings – such as exactly the article you are reading. This would be perfect for an hgroup. You can also use it for alternative titles, or tag-lines.

The W3C reminds us:

“For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.


Other uses, for instance, include areas of a blog where you are listing the header and subtitle for your blog post. You can also use it for book titles and descriptions, for listing doctors in your area and their areas of expertise, or even use it to help replicate the functionality of a table. Let’s take a look at such an example now. On a table we’d have:

<hgroup>
<h1>Doctor Name:</h1>
<h3>Randy McDocterson</h3>
<h2>Doctor Specialty</h2>
<h3>Slapping People</h3>
</hgroup>

So there you can clearly see, in the markup, that we have a doctor named Randy McDoctoerson who’s specialty is slapping people. Now, that is a little odd, but hey – it gets the point across.


The “header” tag

The header tag represents any group of introductory or navigational aids within a site, or sections of a site. So now that the formal definition has been stated, let’s break it down a bit. We all know what a header is, but to be specific it includes various things on the top of most site. These header areas usually include branding sections, call to action items, and perhaps some navigation. Really it can be used any place that you used to write: <div id=”header”> you can now write <header>, and get the same semantic markup structure. It is important to note, that the W3C especially remarks that a header element should contain either a set of H1’s, a sections heading individually (h1-h6), or an hgroup element. Header elements can also be used to wrap a section’s table of contents, a search form, or any relevant logos – such as what we mentioned above. Keep in mind though that the header is not sectioning, as in it isn’t a replacement for an all-in-one div either. Rather, it is just a great semantic element to use for specific situations.

To note: It can be used in any section’s beginning area, as it doesn’t have to be in the top or beginning of your HTML document. But, that is where it is most typically implemented.


The “footer” tag

The footer element represents a footer for its nearest nested parent section, and typically contains information about its parents section. The footer tag is very similar to the header tag, but for the opposite section of a page. Often times you will see a footer of a page that contains links again that were in the navigation, and perhaps a logo, or other such things – well all of these can now be housed in a <footer> tag. Though a footer is typically used at the end of a website, this tag can represent the end of any section of content (and it doesn’t even have to be at the end of said section to represent it). For instance let’s take a look at this example:

<body>
<footer><a href="..">Back to index...</a></footer>
<hgroup>
<h1>Lorem</h1>
<h2>Ipsum</h2>
</hgroup>
<p>Some text here.</p>
<footer><a href="..">Back to index...</a></footer>
</body>


The “address” tag

The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let’s dive right in.

<address>
<a href="../People/Raggett/">Dave Raggett</a>,
<a href="../People/Arnaud/">Arnaud Le Hors</a>,
contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so:

<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>

And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn’t ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today.


HTML5 Template

So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>

Now let’s add the stylesheet link, just for good practice, even though we may not use it.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Now I think it’d be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let’s do:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup></hgroup>
</header>
<section>
</section>
<footer>
<hgroup>
</hgroup>
<address></address>
</footer>
</body>
</html>

Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let’s add a navigation element as well.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<hgroup></hgroup>
<address></address>
</footer>
</body>
</html>

And there we go, we have added some navigation with a nice unordered list there in the header section. But, wait a minute. What if you have a nice big footer and want those same navigator elements in the footer as well. Well, let’s add it there also. Except, this time we aren’t going to use the <nav> tag and instead are going to use a div with the class “footer_navigation”. And while we’re at it, let’s go ahead and fill out our footer section with some content.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

Now let’s add in some bits for IE, and other such technicalities.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

And there we have it: a basic but complete HTML5 template!

HTML5 Essentials and Good Practices


HTML5, together with CSS3 and responsive design are the new buzz around web technologies these days. This article will help you get started using HTML5 on your projects today and show you some good practices to put what you learned to good use.

HTML5 Logo

Lets see a typical HTML5 page markup:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
</header>

<section>
<article>
<hgroup>
<h1>Post title</h1>
<h2>Subtitle and info</h2>
</hgroup>
<p>Content goes here.</p>
</article>
<article>
<!-- Another article here -->
</article>
</section>
<aside>
<!-- Sidebar here -->
</aside>
<footer></footer>
</body>
</html>

With some styling the structure of our page will be like the image below

HTML5 Logo

Doctype

If you come from an HTML 4 or XHTML background, the first thing you might have noticed on the sample markup above, is the new doctype declaration. Really simple, just type it as you see it. And no reasons to worry, it is backwards compatible with all browsers. You can actually change it right now on all your html pages.

Apart from the new simple doctype declaration, you will see many new tags. Most of them are pretty much self explanatory but lets see them in detail.

Block level Elements

In HTML5 we no longer have to resort to “div-itis” to give structure to our page. We have a great selection of new block level elements that help us to create a semantic structure quickly and of course our code becomes more readable and maintainable.

With the new structural elements we can begin to forget about <div id=”header”> and <div id=”footer”> and start using the new <header> and <footer> tags. They work the same as a div but hey, less writing, more semantic code. We are also introduced to other new elements such as <section> <article> <nav> <aside> <hgroup> <figure> and <figcaption>.

The use of <header> and <footer> is obvious. The <nav> tag specifies the navigation links of our page instead of having <div id=”navigation”>. <aside> refers to a section of the page that is separated from the main content. It is mostly used for sidebars today, though some developers suggest it could be used to contain some secondary information for example, for articles.

<section> is used to give structure to our page and contain parts related to a certain theme while <article> can contain a blog post, news post, comment etc. A <section> can contain many <article> elements and an <article> element can contain many <section> elements.

We also have a new container for our headings <h1> to <h6> which is the <hgroup>. Finally we have a <figure> element which is container for a representational image, related to the content but its presence is not mandatory. The <figure> element can also contain a caption using the <figcaption> element.

Inline Elements

HTML5 introduces some new inline elements too. <time> and <mark> are a couple of these new ones that help to make our markup even more semantic.

<time> is used to display time semantically. You can choose to display time, date and both. Example below

<time datetime="20:00">8pm</time>

<mark> is used to highlight parts of content for example when a user searches for a specific term. Its difference from <strong> or <em> is that it gives no special meaning or importance to the content it highlights.

Media Elements

HTML5 also brings us some new media elements. We have <audio>, <video> and tags together with the <source> tag to specify media sources. The simplest way to use them is below

<!-- simple audio use -->
<audio src="audio-file.ogg" controls>
</audio>

<!-- simple video use with multiple sources-->
<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
</video>

Unfortunately, support is not so great yet. Browser makers chose different filetypes and encoding for the sources they support so you have to use multiple versions of the same media with different encoding and you need a flash fallback to support even older browsers.

Canvas Element

One of the other great new features HTML5 has to offer, is the <canvas> element. It gives you the ability to draw shapes dynamically or even manipulate images. <canvas> by itself provides vast possibilities in modern web design and development but it is not a matter to discuss in this article.

Good Practices

With all those new elements some people are bound to get confused. Should we use a header inside an article to contain all the title info? Should we wrap every heading with an <hgroup>? To help you out, here are some good practices about these new elements.

The less is more motto stands in HTML5 markup too. For example when you have a single <h1> heading in your <article>, there is no need to wrap it with an <hgroup> tag. If you have two or more headings, then wrapping both of them with an <hgroup> would be a good use of the <hgroup> element.

<!-- incorrect use of hgroup -->
<article>
<hgroup>
<h1>Heading</h1>
</hgroup>
<!-- rest of content here -->
</article>

<!-- correct use of hgroup -->
<article>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</hgroup>
<!-- rest of content here -->
</article>

Do you really need to have a <header> and a <footer> element on your <article>? Depends. Do you have many info regarding the article like multiple headings, date information, comment information etc? Then the <header> would have semantic meaning and would be used correctly. Again refrain in using too many elements when they are really not needed. No need to nest a single <h1> in a <header>. Same goes for the <footer> element. Do you have post information, author information etc? Then a <footer> would be appropriate.

<!-- incorrect use of header -->
<article>
<header>
<h1>Heading</h1>
</header>
<!-- rest of content here -->
</article>

<!-- correct use of header -->
<article>
<header>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</hgroup>
<p>Date and Author information</p>
</header>
<!-- rest of content here -->
</article>

Should you use <section> or <article>? There really is only one way to tell whether you should use one of these elements. <section> refers to a structure that contains related content. <article> on the other side, contains independent content. So a <section> can have many <article>s and an <article> can have many <section>s. It all gets down to what the content is.

Do you use <aside> only for a sidebar structure? <aside> started out that way, but the specs have changed since then. Nowadays <aside> gets another semantic meaning when used inside an <article>. It denotes secondary content related of course to the main content inside the <article>. When used outside of an <article> it is still considered secondary content but for the page as a whole, sidebars being a perfect example.

<!-- aside outside of article -->
<div>
<aside>
<!-- use as sidebar for example -->
</aside>
</div>

<!-- aside inside of article -->
<article>
<!-- main article content here -->
<aside>
<!-- secondary related content -->
</aside>
</article>

Browser support

Support is great for most of the new HTML5 tags, especially the block level ones. All you have to do to enable all the modern browsers to understand them, is to include the code below in you css file.

article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}

For IE, this is, of course, not enough. Still all you need to do, is include the html5shiv script when the page load in IE. Use the code below

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And that’s pretty much it. You can start using these new HTML5 elements today and make your markup much more semantic, readable and maintainable.

Developing Streamlined and Efficient CSS Styles


CSS can be compared to the sculptor’s tool set when crafting a sculpture. We as web designers utilize all the assets CSS brings forth to create structured layouts for our websites. Over the years this design process has become more organized and fitted. Rules have been put in place for best-practice procedures when coding.

We’ll have a look at some ideas you can apply to your stylesheets to help speed up your code in future projects. Efficient CSS is easy to manage and easy to read while also supplying a resource to the web designer. Keeping everything organized is a big step forward, but things get a bit more complicated than that.

San Francisco night skyline

Throughout the article keep your personal idiosyncrasies in the back of your mind and try to absorb as much information as possible. The best advice you can get from any developer is to find your own way of working. Try combining a few of these techniques with your own workflow to see how you can benefit the greatest as a CSS developer.

Why Bother to Streamline CSS?

Many web designers get lost in the comparison of frontend to backend languages when talking about parsing code. CSS and HTML are frontend design languages used to format and style elements on your website. Files are downloaded and parsed by the web browser your visitor is using.

messy CSS styles on cards

This means frontend code still has a quantitative load time. Code developed and parsed by a browser still takes time to be read and computed, just like backend languages such as PHP or Ruby. This is where streamlined CSS can provide a huge benefit to your site in seeing shorter load times and quicker structuring of page elements.

This may not be so obvious with much of today’s high-speed connections and advanced Operating Systems. You may want to try viewing your site through a mobile browser to compare not only load times, but how the website is loaded.

Streamlined CSS collections on iPhone mobile

When CSS is coded efficiently you should see elements form and style as they are processed. This can change browser to browser but it’s a common occurrence you’ll see the more you test your website’s code.

You’ll also want to keep your code standardized and simple. When you’re updating your blog or personal website a few months after initial development it’ll be a lot simpler to churn through CSS styles you’re already familiar with. Adapting to a set structure for best industry practices will help in the long run.

How to Work with Efficient Code

To begin coding with ultimate efficiency in your styles you’ll have to adopt some fresh new ideas. These are some basic CSS techniques being used even today by high-tier Internet websites and app developers.

Keep your Code Simple

This seems like an easy one that many will overlook. When mapping out a set of data for how your styles will develop keep it all simple – create data sets in a column stack if you need to.

coding basic stylesheets CSS in Dreamweaver for Mac

Start by creating a list of the different sections you will work on in your styles. These can include text, forms, layout boxes, headers, footers, anything you may need. If you’d like to really get organized you can even break things down into a few known styles you will need, such as an ID or class for navigation links.

Afterwards this makes things much simpler when you go sit down to code. Having your resource list in front of you will almost create super-human coding powers to be pouring out code so quickly. This first step helps create a blueprint of your website mockup using “plain words” before going into any style language.

Keep Blocks of Code Delineated and Sparse

There has been an ongoing debate for a while between how CSS code should be written. When I first started I used block notation since it was all I had seen before. However single-line notation is much, much quicker when it comes to parsing and being able to read from a human eye.

Coding Adobe Dreamweaver CSS on Mac OS X

This isn’t to say I’m making a case to ignore block-style CSS, far from it. When you are dealing with a key element or ID holding 6 or 7 major properties it will be easier to keep it in blocked form. You’ll be isolating the important pieces and elements out of your style so they’re quicker to find at a glance.

It’s also much simpler to read longer styles in block notation. This is because most text editors will wrap longer lines and reading property:value pairs can get very confusing when you’ve got 10+ to go through. As the web designer it’s your call how you space your CSS code. Just keep the efficiency issue in mind while doing so and always use your best judgement.

Working with Other Developers

This can be an annoyance or a blessing depending on the team. However the fact stands that if you’re currently or aspire to be a professional web designer, chances are you’ll be working with a team at some point.

As designers we can be especially difficult with making major changes to our works. With CSS code it’s a bit different since you’re trying to portray a beautiful layout using only property values. This can get messy when files pass between a few hands so be sure to keep things organized.

Team Work Designing in Toronto

Comments can be a major help here. Adding comments to lines or blocks of code which may be confusing or misleading to some will save hours of working time. You want to communicate all of the work you’ve put into a stylesheet in the most elegant way possible.

Ensure while you work there aren’t any duplicate styles or appended styles being overwritten. For example imagine a website’s page headings h1-h4 are styled earlier in a CSS document but some code changes the fonts deeper in. This could be imminently confusing for somebody who didn’t even write the code and now has to go through and fix this bug.

Mac Finder, RSS Feed, and Digg throw pillows

Communication is also very important in web development teams. You can write some of the most efficient code around, but lack of communication is what kills projects. Keep your mental processes focused on the task at hand and work within the boundaries of your team, not just your own creative ideas.

Keep Track of Separate CSS Documents

Another way to keep code clean and organized is to separate the many types of styles you may be applying. This works much better on larger websites which require so many styles that a single document holding them all is an unrealistic sight.

One example of such a site could be Facebook. They would have so many different pages for styles to load on – profile, search, registration, photos. I wouldn’t want to be the guy sorting through all that code to apply a simple bug fix if it were in one consolidated file.

Granted Facebook may be garnering a lot more traffic than you would expect but the principles are the same. If organization is an issue separate stylesheets can go a long way. Commonly today you’ll see web designers keeping code organized based on how it structures the document. For example you may have layout.css, text.css, and forms.css.

CSS Home Office Workdesk

The benefit here is not all of these style documents need to be loaded on every page. This allows for greater customization when it comes to building your website. You’ll cut down on parsing time tremendously just by creating separate views and styles for each one.

Testing Support for IE

Internet Explorer has always portrayed the evil bandit for web developers, CSS coding especially. Luckily Conditional Comments can be applied to your HTML which look like regular comments to most browsers. In Internet Explorer they can be used to implement new styles based on the browser your running.

This has always been an issue and with the release of Internet Explorer 9 beta we’re getting just a bit closer to a more solidified Internet experience. Only problem is how many people are still running browsers as old as IE6 or IE7. These have serious processing bugs and sometimes require external styles to fix them, appearing only based on their flawed rendering engines.

Internet Explorer Google Instant search

Thankfully support has gotten better and Microsoft seems to be turning things around. Keep an eye out for conditional comments if you haven’t worked with them yet. They can prove to be invaluable in many cases where CSS properties just won’t work right and you need an alternative.

Adding a Table of Contents

This is an optional step which I have found to work wonders in my stylesheets. You can keep a table outside of the CSS document itself, but I have found this to be a bit counter-productive. Especially when it’s so easy to add comments in-line.

The main purpose of placing a Table of Contents into your styles would be ease of access and streamlining the editing process. Place markers in the beginning of your document to separate your code into easily-dividable sections.

CSS Table of Contents

A good way to approach this would be to create your own table key. For example, if you were splitting your table into each main area of the document (layout, font, header, navigation etc.) you could key them with a set of unique characters.

=!layout and =!font could be used to delineate the layout and font sections, respectively. Since you probably won’t run into those exact pairs of characters anywhere in your code it’s easy to add them both in your table and at the start of each section in comments. Then using the Search or Find feature of your text editor you can skip down the sections of your CSS styles with ease.

This is also a great way to approach a teamwork project where many people will be looking at the same code. It keeps things organized and easier to find in the mess of styles we see today.

Conclusion

Although there are many ways to approach optimizing the efficiency of your code these examples are a great way to get started. CSS is an ever-changing subset of the design industry and has a lot of new ideas being built around it.

Passion and dedication are required to make it in the design industry. If you can hold onto your passion for digital design it shouldn’t be difficult to keep up with the curve on CSS practices. Reaching out to the community of web designers found all over the web is a leap forward. The experts of industry are more than happy to share their techniques for streamlined CSS which evoke bouts of innovation into others.

Why Validate Your HTML


Learning to validate your HTML is an important step for most designers. By writing valid HTML you ensure that your pages are standards compliant and will run on the most user agents and web browsers.

Building web pages isn’t hard. With the software that is available now, you can write your web page and have it up and viewable in half an hour or less. And with these tools, why would you need to run an HTML validator on your HTML to find errors? Well, you don’t have to, but if you want your pages to stay viewable through future versions of HTML, or you want newer browsers to be able to display it correctly, then writing valid HTML is the place to start.

There are several specific reasons for writing valid HTML, and using an HTML validator to insure that what you write is valid:

  • Compatibility with future versions of HTML and web browsers

    As browsers evolve, they come closer and closer to supporting the standard HTML as written by the W3C. Even if they don’t fully support the most recent version of HTML, the browser builders go in and make sure that they are compliant with older versions of the standard. If you are writing non-standard HTML, there is a chance that as browsers evolve, they will no longer support your web pages. A good example of this is a trick that some web developers used with an older version of Netscape. If you included multiple body tags with different colors, Netscape would load them all in succession creating a fade-in or flicker effect as the page loaded. This trick no longer works, as it relied on an incompatibility of the browser.

  • Accessible to Your Current Audience

    Unless you know for a fact that your entire audience is using a specific browser, you are setting your site up to annoy some of your readers if you make it inaccessible to them through invalid or non-standard HTML. Many HTML validators will check your HTML for browser specific entities and alert you to their use. Browser specific HTML can be part of the standard or not a part of the standard. Don’t assume that just because only one browser supports something it’s non-standard. Or if multiple browsers support it, that it is part of a standard. For instance, HTML 5 is supported by Safari, Opera, Chrome, and Firefox, but it is not yet a recognized standard.

  • Reduce Unexplained Errors

    I am often asked to look at web pages for people to tell them why the code is doing something strange. I can usually come back in just a few minutes and tell them what is wrong. Why? It’s not because I know HTML inside and out, it’s
    because I run their page through an HTML validator. This usually points out a problem with the HTML, that, when fixed, solves their problem as well.

HTML Validators

There are a lot of validators available. You can get ones that are run on your computer, embedded into your HTML editor, or online on your live web pages. I list my favorite HTML validators in this article: Best HTML Validators.

Source : About.com