Web Services

A simplified technical overview to web design

It is obvious that the days of the Yellow Pages have come to a close. Each day more customers are finding products and services by typing a few simple terms into a Google search box.

From a business standpoint, money spent on phone book advertising has become more gamble than good business sense. This is especially true with the amazingly granular divisions found in that large paper tome these days.

The new Yellow Pages is the living internet, specifically the World Wide Web.

Get Googled!

A professionally designed web site has become the best business marketing dollar spent in the new era where 75% of all homes in the US have internet access and are using search boxes like Google, Yahoo!, MSN and others to find "stuff" instantly.

What Yellow Pages category your business falls into is less important than having a well crafted, appealing web site that will come up under searches for a variety of your products or services.

Design evolution

Ten years ago the web was still learning to walk and chew gum at the same time. Web standards were starting to come together and web designers were charging outrageous prices and producing really poor products by today's standards.

Technology is a fast moving bus, and today there are more and better standards, there are more and better web developers, and there are fewer burdens to getting online.

CSS & HTML alphabet soup

The evolution of design from cluttered HTML (Hypertext Markup Language) with colors and fonts coded for each element, and layout in convoluted tables, has given way to design that separates the web site structure and content from their appearance elements.

We craft our web pages in HTML – not XHTML (extensible HTML) – because we want our existing sites to render exceptionally well into the future.

The XHTML standard is version 1.0, and version 2.0 is being defined. But version 2 is shaping up to be a radical departure from version 1, so maintaining XHTML in the future may add unknown and otherwise avoidable costs. The current version of HTML is 4.01. Like XHTML, a newer version 5.0 is in development. Unlike XHTML, HTML 5.0 is going to be an evolution of the existing standards, so pages designed today will require little or no work as 5.0 compliant web browsers hit the streets. Little work = little cost!

CSS (Cascading Style Sheets) is the correct, modern way to handle making a web site pretty. A CSS based web site also reduces the overall cost of development and maintenance as well. This is because the CSS rule that defines a heading or paragraph, or link attribute, can be placed in one file, shared throughout the site, so changing the color or other feature can be accomplished site-wide with a simple change in one location.

We've been using CSS since 2004, and will never go back to the old way. Managing a web site's presentation is far easier when the styles are all gathered in one or more well defined places. Before CSS all appearance items, like font style, color, size had to be applied to the HTML code directly throughout all of the site's pages. Changing a color meant crawling through every page, sometimes changing hundreds of individual items... not an efficient way to spend our time and your money. CSS changes the whole dynamic of developing a site, and affords us the ability to easily tweak the appearance dramatically in very short order. Less work = less cost.

Artist or programmer?

If you draw a broad line through the web developer community, most professional designers fall into one of two camps: graphic designers doing web coding, and web coders doing graphic design.

• Graphic designers tend to create beautiful sites, but often the underlying code is often bloated and inefficient.

• Web coders tend to produce great HTML and CSS, but the appearance of the site leaves room for improvement.

Our background in software development places us with one foot strongly in the web coders camp. We produce very elegant and tight web page code, which means that pages are small, load quickly, and render well across all platforms and modern browsers.

But, we also have developed good graphic design skills along the way, so the art that we produce for our projects looks good and works well. By belonging in both camps we provide both attractive and efficient web designs.

The four legged design stool

There are four areas that our web design embraces: Graphic element creation, HTML page structuring, CSS style development, and programming tasks for specific behaviors.

• HTML structure — The underlying frame that supports everything is the site's HTML code. This happens in Dreamweaver regardless of a graphic start, or a purely stuctural beginning, Dreamweaver is the Mercedes of web design tools, and one we use correctly by mixing crafted code with rapid visual design. Here the layout structure is roughed in and initial CSS styles are created. This gives us a functional prototype of the main site for review. Further refinements are completed, and a site template is produced. This template is another time-saver as it becomes a single place to control all of the final web site's pages. Template development typically represents about 10% of the process.
• Graphic design — We will often start with Photoshop to begin developing the overall site appearance. Logos, header artwork, navigation elements, page backgrounds and other hard appearance components come from this part of the process. We also use Flash and have some pretty neat tools in our secret chest to give your visitors a great experience with this regardless of how big or small their internet pipe happens to be. Probably about 20% of development time is spent creating the graphic elements.

• CSS development — With the structural HTML under control, we hand craft the CSS rules that define and complement the site's appearance. This is also accomplished in Dreamweaver. CSS is cool, efficient, and the only way to fly, but it is a fickle mistress, and getting all the rules done right can eat 20% of the project total. Considering that this can save lots of time on back end changes, it's time well spent.
• Programming — Unless you have a penchant for getting spam, we recommend that no e-mail addresses be exposed on the web. To this end, all of our designs now incorporate a contact form, rather than a simple e-mail link. PHP (PHP Hypertext Programming language) is the vehicle for this as it hides all addresses securely on the web server. All sorts of magic can happen with PHP. We also use Javascript for some tasks. We've developed a nifty random image trick, implemented on several sites, helping them to retain a "fresh look" across visits or page views. Also, Internet Explorer doesn't play well with the pure CSS drop-down navigation we use, so Javascript beats IE into submission efficiently. Add another 10% applied time to the mix for the contact page... the other things are gravy.

So the four legs give us the stool that supports your web content. This is 60% of the task, and at this point the site is hungry for that content. This is the fun part, really! Putting meat inside the skin and watching the sections come together is really satisfying... at least we think so. This can also be the hard part, because creating content doesn't happen without your contribution. We can craft words, and we can suggest direction, but you have to be an active participant in this last 40% of the process. We will sandbox the site on our server for a collaborative refinement of all the pieces, including the legs!

Drive it away, or let us be your valet service?

So the site is done, we've given you more than you asked for and charged less than we should have, you've paid us and all is right with the world.

But a month or two down the road you need some changes. Do you make them yourself, or call us, or both? The beautiful thing about our Dreamweaver based designs is that you can make changes to your site if you so desire. Macromedia (Adobe) also has a very nice product called Contribute. Contribute is a web page editor that doesn't confuse you with all the technical stuff like CSS and HTML and such. If you can use a word processor, you can effectively and efficiently do-it-yourself. This is something we can demonstrate for you, and it's a lot better than any site design that has a dynamic content editor built in... trust us on that.

If updating your site isn't your cup of tea, then we are always available to help, on either an hourly basis, or on a monthly, quarterly, or annual maintenance retainer based exclusively on your needs.

Wow this page has a lot of geeky stuff on it!

Sorry! I really tried to cover our web design process in an understandable way. Technology tends to fog up the mirror. If this left you more befuddled than satisfied, please give us a call at 262-367-8800 and we'll be more than happy to answer any of your questions!

Copyright © 2003-2008 by MacCetera, a Wisconsin LLC owned by Marc & Tammy Wolfgram
Mac OS, Macintosh, and other like terms are all trademarks of Apple, Inc. - 25-Oct-2009