Year: 2012

This is for the people who need to hire developers, but don’t understand how to make a website. This is for the person who doesn’t know where to start, but knows what they don’t want. In fact, this is perfect for the person who knows what they don’t want and also has an idea of what they would like.

As a developer, being able to build what the clients needs (and not just what they want) is the sign of success. Sure, I could build a site with the newest technology to impress my friends and fatten my portfolio, but this ignores what I’m being paid to do. Im being paid to insure the client’s company is successful and effective in establishing a digital facing extension.

Designing and programming is not so hard, but knowing what to build can make or break of a project. Your developer should do everything to lead you to success. A failed project is the consequence of a failed developer. A good foundation will result in a successful website.

When it comes to making websites, you can bill by the hour or by the project. You can pay X00$/hr to a well skilled developer. You can also pay a X,000,000 – X00,000 figure to develop a full scale website for your company. In either case, your focus is to get the most bang for your buck. You are looking to pay someone to lead you to success.

Your developers goal should not be justifying how much they are being paid. Your developers responsibility is making sure your digital presence successfully and effectively solves your problem. A web developer is a creator of solutions

Regardless of how you decide to pay, you need to understand there are different ways of developing. The traditional methods from the past decade is based on the “waterfall” method. The “waterfall” method depends on designing a website specification, signing a bloated contract, then pushing the contract through its individual “steps”.

Traditionally, your web developer will “design” the mockups of the website in an image editor like Photoshop. They will provide you a few examples of what individual pages may look like, and be sure to charge you for each mockup. Next, they will “code” the mockup into their preferred web framework (hopefully they are at least using a CMS) and then present you with what was intended to be the design.

100% of the time (yes, 100%), at least one side is surprised by the outcomes. The coded version of the site resembles the original design, but reveals the many points where discussion was lacking and incomplete. Additionally, when the coded mockup is viewed across devices and browsers, it completely loses it’s structure and fails.

Wait, theres more! Your “waterfall” developer recommends this methods because they believe it will expidite the website development process. They also make it known that you are limited in the number of changes you are allowed to make. Or they make sure you know the cost of making changes.

So wait, your wondering if theres an alternative. You believe, “this is how developing websites works. Its painful, costly, and both side leave having to make sacrifices”. In fact, that sounds more like poor congressional politics than web development.

It’s not the only way. (To be continued)

TLDR: The SASS Zurb Foundation install makes it easy to make a fully customized responsive website.

Making a new website can be extremely easy or very time consuming. Tools available through Opensource projects, Creative Commons, and GNU licenses make it easy to layout a prototype in no time.

Some of the obvious ones are Twitter Bootstrap (+20,000 stars on Github) and HTML5 Boilerplate. My personal recent favorite is Foundation from Zurb. I took a liking to Foundation because it gave me an edge at mocking up marketing pages without having to go through an extensive design and copywriting process.

Zurb’s Foundation uses Compass and SASS to make getting started and customizing very easy. You don’t have to track down CSS elements or worse, overwrite existing declarations. Foundation provides clear documentation regarding what is provided and how it can be used.

When paired with Compass, Foundation compiles a series of “Foundational” SASS stylesheets into a clearly documented CSS file. The SASS files make use of the variable notation, allowing new users to change the existing styles, rather than overwriting. This can be particularly useful when you are trying to keep your CSS clean and well documented.

To make changes, Foundation provides a file called _settings.sass. This file has all of the variables available for customization. All variables are presented commented out, so to make changes, just uncomment and change. Rather than overwriting the existing selectors, this keeps the CSS selectors light and easy to manage (Snooks would approve).

Foundation makes a webpage look really great from the beginning (like Twitter Bootstrap). Some of us don’t like the default Helvetica Neue and recognizable colors. Differentiating your installation of Foundation is easy. The problem with Twitter Bootstrap is that most websites using it don’t do enough altercations to make it look different.

The two major changes that make your website look different are changing the default colors and the fonts. Again, using the SASS _settings file, you only make changes to the $mainColor, $bodyFontFamily, and $headerFontFamily. Once these changes are made, you have a extremely unique, responsive, well functioning website.

One letdown of Foundation is the dependence on box-model. (Let it be know, I love box-model too. Still, it doesn’t work with old browsers.) Box-model as a CSS property which calculates the padding inside the width. This simplifies calculating percentages for fluid layouts, but sadly this property is not available in IE6.

Fortunately the dependance on box-model can be circumvented with polyfills and explicitly defined layouts. Still, Foundation’s development without consideration for older browsers makes it difficult to use for my current demographic.

Overall, Foundation makes it easy to build websites. Paired with Codekit (which deserves a post of its own) or Compass, starting and managing new sites enjoyable!

Archives for 2012