GET A FREE QUOTE




CODE
Once you have a killer design, you’ll need to turn it into a real, live website. A safe bet, no matter what content management system you are going to be working with, is to start with a generic HTML and CSS template.

Start with a Base Template

If you’re like me, you’ve already got a set of starter HTML and CSS files ready to go that are already linked to each other and already contain some basic starter code (such as a CSS reset).

If you’re not like me and don’t have these generic files at the ready, go ahead and create some that you can reuse at this stage in the future.

Before you go any further, it’s a good idea to go ahead and add in your title, descriptions and meta tags, or at least make a note of what they should be if you are going to be using a content management system later on.

Lay Out the Main Sections and Content


Begin carving up your HTML/CSS by inserting the major sections (your main <div>s) for your header, footer and content area.

Next, begin adding your text and image content. The goal is to keep your markup as semantic as possible so that each element is meaningful.

Avoid divitis — the act of utilizing too many divs. For example, you don’t need a div just to contain the logo. Try using an <h1> or a <p> instead — it can be styled exactly the same way (e.g. making them into a block elements using the displayCSS property).

Validate and Test

Don’t forget to make sure your code validates by using the validation tool provided by the W3C (but also understand that validation tools have shortcomings).

You’ll also need to do some browser testing to make sure the site looks and acts as intended and provides a uniform brand experience no matter how a user accesses it. You can use a tool like Browsershots if you have limited access to different types of computers.

Use Firebug  and YSlow  to debug your site and make sure your work is running at an optimal speed.

One last thing: don’t forget to implement Google Analytics or your favorite analytics alternative so you won’t miss out on tracking the stats during the big launch.


© 2016 MAcphix interactive, ALL RIGHTS RESERVED. PRIVACY | TERMS AND CONDITIONS