Front End Web Development Workflow

On: March 27, 2010   By: Travis Millward   In: Web Development

A few things that I've found to be helpful to keep in mind while developing/coding for the front end are....

1. Start with a solid web framework

Mine would have to be django which is written in python. Django's tagline pretty much sums it up. "The Web framework for perfectionists with deadlines." Make use of things that the framework offers as freebies. Like Django's amazing templating system. :)

2. Write up some solid HTML

This will be what everything will fall back on to. I feel that it's very important to write your markup first so that in an environment that does support CSS, your site still holds to a strong hierarchy and will still make sense with OUT the CSS. This means write it with out any classes up front and focus on making use of available html tags. Not only use them but use them for what they were meant for. Remember that the site still needs to be functional when CSS isn't present.

3. Enhance your markup with CSS2

Start a base style sheet and make use of very common tags. I know this is a no brainer but I used to create a class of "heading-main" and "heading-sub" instead of making use of the H1, H2, H3, etc...

Some people use reset style sheets or css libraries such as blue print. This works for some, however, I prefer to use my own reset stylesheet. I used to write something like:

However, I find this to be very annoying now as you have to go through and redefine every single elements padding and margin. And every time you want to use bullet points you have to define them very specifically. I'd suggest making use of all of the freebies that the browser will give you and find out what works best for you. Here's an example for a good way to define headings:

accompanied with paragraphs like

However you write it. Try to keep it clean and organized. CSSEdit is an awesome program for doing this if you're on the mac :)

4. Enhance Your Site With JS and AJAX

Yes, MAKE IT WORK with OUT javascript! Not every browser/device has javascript. Not everyone has javascript turned on. If your javascript fails you'll have a fall back. Example. I made a photo app recently that when you click a link it links you to another page to confirm your action. Sweet it works with out javascript. Now, I enhance the page to instead of having you confirm the action on the next page, so that it ajaxes that url into a popup on the screen and has you confirm it right there with out leaving the page. BAM. It's sexy with the JS, but has a fallback that still works. 

5. Test your site against IE 6 - 8

Why? we don't like IE, who cares about them... Okay, that being said. Do you have analytics on your sites? Do you see how many users that don't know the difference between google and the internet? It's so easy to not care about them but I suggest writing the site in a way that rewards the visitor for having a modern browser ( like using pngs and advanced CSS that makes the site look oh so sexy ) but allowing it to fall back to basic markup and css. Example: Say you want to have a gradient on your navigation bar. Give that element a base background color, then further define the gradient using CSS3. Bam, all modern browsers see the sexy shiny bar, ie gets a plain, yet still semi attractive, gradient free bar. 

6. Enhance your site with CSS3 and other new practices 

Now that you've checked and your site works with all browsers. Let's add some spice to it and reward those users with the modern browsers! Make use of css rounded borders, or text drop shadows, box shadows, background image gradients, the use of rgba colors, etc... IE and non compatible browsers will just see these things and ignore them like how ie6 ignores the standard box model!

7. Make it work? Check. Make it work right? Check. Now make it work fast.

Now that you're site works and it works right. It's time to go back and carefully examine all of your code. If three different functions are doing similar actions. Make one very useful function and make it intuitive enough to handle all of those actions. Take pride in making your code clean and readable. Thanks to Mike A for teaching me this.

Posted in: Web Development