Posts Tagged ‘web development’

Case Study: The Kilpatrick Company

Posted by Selene M. Bowlby

on May 13th, 2008 / Add Comment »

The Kilpatrick Company

The Kilpatrick Company, based in Boynton Beach, Florida, has been in the Irrigation and Landscape business since 1958. This year marks the Kilpatrick Company’s 50th Anniversary. To coincide with this milestone, they wanted to drastically update their web site and give it a modern look and feel.

The company approached me in late 2007 to request a re-design of their existing web site. Their old site had been around for a while, and it was time for a change - both in terms of design, as well as the features and information that they offer to both new and old customers, alike.

About the Company

With thirteen locations, and growing, The Kilpatrick Company specializes in Irrigation and Landscape Products, as well as Turf Equipment. The web site currently focuses on their three main divisions:

  • KILPATRICK Irrigation & Landscape Products
  • KILPATRICK Turf & Commercial Equipment
  • KILPATRICK International

“The Kilpatrick Company has been established as one of the largest distributors of turf care equipment in the world with customers in over 35 countries. The company has been named the Distributor of the Year several times by Jacobsen/TEXTRON.”

Project Details

Client: The Kilpatrick Company
URL: www.kilpatrickco.com
Site Launch: March 2008

Project Scope:

  • Web Site Site Design
  • Front-End Web Development
  • Flash Header Animation
  • Valid Standards Compliant Tableless XHTML / CSS
  • Continued Site Maintenance / Updates

Before

The Kilpatrick Company: Before

It had been some time since The Kilpatrick Company had re-designed their web site. The old site was much more conservative in nature, featuring a “safe” white background. The old design was based on the shades of blue and green found in the company logo.

After

The Kilpatrick Company: After

The main objective for this project was to design a web site for The Kilpatrick Company that has a professional and corporate feel, while still maintaining the company branded blue and green color palette. After a complete overhaul, the site now has a modern edge to it, with colors that “pop” - all while maintaining a clean and simple style.

New features of the site include a flash header animation on the home page - which rotates through images of the company’s three main divisions - as well as a calendar of events, voting poll, and store locator.

As part of regular site maintenance, I update the company’s Bonus Buy’s on a monthly basis, as well as periodically add new locations and make other minor content changes. Site development is not 100% complete yet - there are a few areas, such as the FAQ, that the company is still working on creating content for (I’ll be adding this to the site as it becomes available).

Client Testimonial

It was nice working with iDesign Studios.

Thank you for your hard work in creating our website. Everyone likes it and they are happy with it. We look forward to continuing to work with you.
Thanks again!

Angela P. Thomas, Marketing Manager
The Kilpatrick Company

How Can I Help You?

If you like what you see, please don’t hesitate to visit the main business site - iDesign Studios - to view the complete portfolio, full list of services, or to contact me directly for more information.

I look forward to hearing from you!

Category: Portfolio
Tags: , , , , ,

New Portfolio Section of Blog

Posted by Selene M. Bowlby

on May 1st, 2008 / Add Comment »

Web Design Portfolio

2008 has proven to be a very busy year for me, so far. In the last four months, I’ve completed the design and development of three client web sites - two of which have officially launched today!

This is among other development only projects, several email and banner ad designs, as well as on-going content maintenance for existing clients. Not to mention, of course the re-launch of my business site (which includes a new shopping cart for the Services area), and the re-design of this blog.

New Blog Section

This has been in the works, but I’m happy to announce a new Portfolio section of my blog today. Here I will be highlighting recently completed projects as they launch. I have a little bit of catching up to do for the past few web sites, but once caught up, I’ll be announcing new site launches from this section as they happen.

Sneak Peek - Just Launched Today!

So as not to bombard you with too many new posts all in one day, I’ll be posting each of these portfolio pieces over the course of the month. For a sneak peek, though, below are the two web sites that have officially launched today.


Pick Nick’s Brain

Pick Nick’s Brain

My involvement in this WordPress driven web site and blog includes complete web site design and development in the form of a custom WordPress theme. Although this will be my third WordPress theme, it is my first for a client. Soon to be followed by an official announcement of new WordPress services.

picknicksbrain.com


A Miner Miracle

A Miner Miracle

My involvement in this site includes the re-design of the company home page, based on the existing interior site pages. The main focus of this project, however, was the creation of a flash intro animation.

aminermiracle.org


More Portfolio Pieces

As a note, you can view all of the sites about to be profiled through the Portfolio page on the main site.

I hope you enjoy this new section. I’m going to enjoy being able to spotlight recent projects with more inside information than what’s found through the main portfolio.

Of course, I can’t end a post like this without another shameless plug! If you like my design style, please feel free to contact me to see how I can help make your web site stand out from the crowd!

Category: Portfolio
Tags: , ,

Save the Developers! Taking a Personal Stand!

Posted by Selene M. Bowlby

on April 10th, 2008 / 1 Comment »

Save the Developers! Taking a Personal Stand!

I wanted to follow up on my recent post highlighting the Save the Developers campaign, which is focusing it’s efforts on getting everyone to upgrade their outdated web browsers - specifically Internet Explorer 6.

Internet Explorer 6 Woes

I’ve been making several design updates to this blog, which is still in the Soft Launch phase while I tweak a few design elements, etc.

I have access to an older computer with IE6 for testing purposes - of course, even though this blog utilizes valid XHTML / CSS, it looks terrible on IE6!

On a personal note, this post marks the launch of version 1.2 of this WordPress theme. I’ve still got several tweaks in the works. Next stop? v 1.3 ;)

Finally - Transparent PNG’s!

As far as the IE6 issues with this blog… well, there are too many to count! But one major issue that has been holding me back is IE6’s inability to use transparent PNG’s without an IE6 hack, or creating two separate stylesheets (one for IE6 and one for everyone else).

So far I’ve just avoided the issue and not used transparent PNG’s, so as to not have to deal with the excess hassle in trying to make it work for IE6. I’ve been using GIF’s if I need a transparent image, or done work-arounds with JPG’s instead.

Business…

Of course, I want my main business web site to be as accessible as possible, regardless of the end user’s web browser. So that site has been setup to accommodate IE6 users with fully validated code.

All sites that I create for my own clients are fully accessible with the latest browser versions and IE6.

There’s no way around that! Business is business, and it’s important to get your message across to as wide an audience as possible.

… vs. Pleasure

But, with this being my personal blog, I have made the decision to send a different message to my audience, by taking the stand for web standards!

I will be fully promoting the Save the Developers cause by NOT worrying myself over compatibility and display issues with IE6.

I have installed the script provided by savethedevelopers.org. IE6 users will see a little graphic at the top of their screen, urging them to upgrade. Hopefully at least one or two people do take the opportunity to upgrade their browser!

This will save hours, if not days in trying to make a fix for an out-dated browser that does not comply to the current web standards. Not to mention, I can finally fully utilize the transparent PNG’s that I’ve been wanting to use for the longest time now.

Together we can make a difference!

If you are a web designer, I hope you’ll join me in promoting this cause!

Please feel free to post a comment below with your web site or blog link if you are promoting the Save the Developers campaign by urging all IE6 users to upgrade their browser and installing the Save the Developers script on your web site or blog.

Maybe this time next year, we can get that number of 30% IE6 users down to 10% or less!

Category: Web Design
Tags: , , , , , , ,

Save the Developers! Upgrade Your Browser

Posted by Selene M. Bowlby

on March 26th, 2008 / 19 Comments »

Save The Developers!

Thanks to @womanchild on Twitter for posting this link. I love the concept!

Save The Developers is promoting a campaign for everyone to…

Say NO to IE6!

Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a less stressful and complicated environment for web developers by hastening the retirement of an outdated browser.

A Massive Time-Suck

My goodness, the countless hours that could be saved if IE6 wasn’t still such a popular web browser. It just does not comply to all of the current web standards, making life difficult for web developers all over the world.

What looks good in just about all of the other web browsers - IE7 included - often degrades terribly on IE6. Which is a major time-suck for web designers / developers everywhere.

As web developers, we have to appeal to the masses and spend the time trying to make it work across the board. We either have to loose features or have to come up with crazy hacks, etc. All because so many people are still using IE6, so therefore we still have to cater to it.

Current Statistics

According to W3Schools - February 2008 statistics show that:

  • 30% of online users are still using IE6
  • 22% are using IE7
  • 36% are using Firefox
  • everything else is 2% or less

I’m glad to see the Firefox numbers rising, but am really disappointed that IE6 is still so popular. I would have thought the percentage of IE7 users would have at least been equal to the percentage of IE6 users.

Clearly there really is need for the Save The Developers campaign.

Please Upgrade!

So, if you are still using Internet Explorer 6 - or know anyone that does…

Please upgrade your browser! You can upgrade to Internet Explorer 7, Mozilla Firefox, Apple Safari or Opera. Anything BUT Internet Explorer 6, LOL.

IE8 is in the works, btw… the beta is already out, though I have not tried it yet.

Just for the Record…

Firefox is my browser of choice, although I’ve recently discovered Flock - also by Mozilla - which will likely soon be my new favorite.

Flock - known as “The Social Web Browser” - has all of the same standards support as Firefox. However it incorporates many tools that help integrate the browser with several of the more popular social media sites such as Twitter, Facebook, Flickr, Del.icio.us, etc. New post on this coming up soon, btw.

Anyway, go check out savethedevelopers.org… If your a web designer / developer, please promote it! If you’re a web user and still using IE6…

Please upgrade! Thank you!

Follow-Up Post: Taking a Personal Stand

I wrote the post below a couple weeks after publishing this one. I hope you’ll join me - at least on your personal sites (I understand we have to deal with IE6 at least for client sites…)

Category: Web Design
Tags: , , , , ,

6 Phases of the Web Site Design / Development Process

Posted by Selene M. Bowlby

on March 20th, 2008 / 54 Comments »

6 Phases of the Web Design & Development Process

About a year ago, I wrote an article for the main site that outlines The 6 Phases of the Web Site Design & Development Process. As part of my business web site, the article is slanted to how I personally help clients through the process of creating a web site.

Here, however, I wanted to create a more generalized post. Same basic idea, however this version can be utilized by anyone, regardless of who they hire to design their web site.

I hope this helps when considering building your own site!

The Web Site Design and Development Process

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.

The exact process will vary slightly from designer to designer, but the basics are generally the same.

  1. Information Gathering
  2. Planning
  3. Design
  4. Development
  5. Testing and Delivery
  6. Maintenance

Phase One: Information Gathering

Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you - what your business goals and dreams are, and how the web can be utilized to help you achieve those goals.

It is important that your web designer start off by asking a lot of questions to help them undersand your business and your needs in a web site.

Certain things to consider are:

  • Purpose
    What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
  • Goals
    What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information.
  • Target Audience
    Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests - this will later help determine the best design style for your site.
  • Content
    What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?

Phase Two: Planning

Phase Two: Planning

Using the information gathered from phase one, it is time to put together a plan for your web site. This is the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the web site - aka your customer - must be kept in mind when designing your site. These are, after all, the people who will be learning about your service or buying your product. A good user interface creates an easy to navigate web site, and is the basis for this.

During the planning phase, your web designer will also help you decide what technologies should be implemented. Elements such as interactive forms, ecommerce, flash, etc. are discussed when planning your web site.

Phase Three: Design

Phase Three: Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel of your site.

Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.

Your web designer will create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress.

Either way, your designer should allow you to view your project throughout the design and development stages. The most important reason for this is that it gives you the opportunity to express your likes and dislikes on the site design.

In this phase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your web site.

Then development can begin…

Phase Four: Development

Phase Four: Development

The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas.

Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well.

This entire time, your designer should continue to make your in-progress web site available to you for viewing, so that you can suggest any additional changes or corrections you would like to have done.

On the technical front, a successful web site requires an understanding of front-end web development. This involves writing valid XHTML / CSS code that complies to current web standards, maximizing functionality, as well as accessibility for as large an audience as possible.

This is tested in the next phase…

Phase Five: Testing and Delivery

Phase Five: Testing and Delivery

At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions.

A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your web site validates. Valid code means that your site meets the current web development standards - this is helpful when checking for issues such as cross-browser compatibility as mentioned above.

Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.

This marks the official launch of your site, as it is now viewable to the public.

Phase Six: Maintenance

Phase Six: Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most web designers will be more than happy to continue working together with you, to update the information on your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site.

If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you.

A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!

It’s really up to you as far as how comfortable you feel as far as updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.

That’s where the help of a your web designer comes in, once again, as they can take over the web site maintenance for you - one less thing for you to do is always a good thing in these busy times!

Other maintenance type items include SEO (Search Engine Optimization) and SES (Search Engine Submission). This is the optimization of you web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines. The previously mentioned code validation is something that plays a vital role in SEO, as well.

There are a lot of details involved in optimizing and submitting your web site to the search engines - enough to warrant it’s own post. This is a very important step, because even though you now have a web site, you need to make sure that people can find it!

Note to self… write post on SEO/SES. ;)

The Bottom Line

All in all, your web designer should work closely with you on a very similar process to this one. A good working relationship with your designer, including an open line of communication, is important to ensure they are creating a successful web site that will help your business grow.

Shameless Plug

Shameless Plug

I’ve personally been designing and developing web sites for a full decade now. So… if you’re ever in need of a web site and happen to like my design style, please don’t hesitate to contact me! You can also read more on the specific details of my own personal web design process on the FAQ page.

By the way… if you found this article helpful - and I hope you have! - please subscribe to this blog, because there are more informative posts on the way!

Category: Web Design
Tags: , , , , ,

Web Design Tools

Posted by Selene M. Bowlby

on September 23rd, 2007 / Add Comment »

Link Love

In gearing up to reach my goal of creating tableless XHTML / CSS web sites, here are a few some helpful links and resources I’ve come across. (Yes, I know, I know… I shouldn’t still be using tables. It’s tough to teach an old dog new tricks, though, lol.) At least my most recent sites I have been making sure validate - they just validate with tables, is all, lol.

Validation

CSS Validator
XHTML Validator

Code Reference / Tutorials

HTML Dog
Tutorialistic: Create a Tableless Layout
CSS Library: Equal Columns Height Script

Category: Web Design
Tags: , , , , , ,