An Introduction to Website Design
Last Revised: August 17, 2008

“An Introduction to Website Design” © 2008 Bokash Business Consulting

1

Table of Contents
1. Table of Contents ...................................................................................................................... 2 About This Document .................................................................................................................... 2 2. The Goal of Website Design ..................................................................................................... 3 3. Website Design – Functional Specifications ........................................................................... 4 (1) Website Site Map ..................................................................................................................... 5 (2) Webpage Wireframe Diagrams ................................................................................................ 6 (3) Documentation of Transactional Scenarios .............................................................................. 7 4. Search Engines: What you really need to know before you build the Website! ................. 8 Introduction .................................................................................................................................. 8 How Search Engines Work (The Basics) ....................................................................................... 8 Google’s Webmaster Central ......................................................................................................... 9 Yahoo! Search Help ..................................................................................................................... 11 MSN\Live Search Webmaster Help Center ................................................................................. 12 Recommendation: Start with the Resources on Google ............................................................... 12 5. Basic Website Design Considerations for Search Engines .................................................. 13 Introduction ................................................................................................................................ 13 Google’s Quality Guidelines ........................................................................................................ 14 The Importance of Links to Search Engine Rankings ................................................................. 14 Gentlemen may prefer Blonds, but Robots clearly prefer Text ................................................... 15 Strive for Robot friendly Website Navigation ............................................................................. 16 The Importance of Rich and Unique Content .............................................................................. 18 What to know before restructuring or moving your Website ...................................................... 19 Why you really want to make use of Meta Tags? ........................................................................ 19 6. General Guidelines for Website Content .............................................................................. 22 Evaluate Everything from your Customer’s Perspective ............................................................. 22 The SBDC E-Commerce Guide & Other Issues .......................................................................... 22

About This Document
PLEASE NOTE: This document is a work-in-progress. I almost feel compelled to apologize to the first few people that will be reading it, hoping to get an understanding of what they need to do to start a Website. I only request that as you work your way through this material, please make note of topics, paragraphs or sentences that could be omitted without any significant loss in useful content. And of course let me know if you find any mistakes or unclear explanations, so that the next group of people who read this document will have an improved version from which to start.

I very much would have preferred to send expectant Website owners to a handful of online or hardcopy resources where they could obtain everything that they needed to get started on their Website. Unfortunately, it would have required several references just to cover the content in the Functional Specifications section of this document. To explain the Search Engine aspects of this document, the only simple option appeared to be sending people to Google’s Webmaster Help Center and suggesting that they read almost all of the more than 50 online articles.

“An Introduction to Website Design” © 2008 Bokash Business Consulting

2

The Goal of Website Design
The goal of any small business wishing to create a Website to sell or market their products should be to create the best possible Website at the lowest possible cost and/or minimal expenditure of resources. In order to define what is meant by “the best possible Website” the small business owner/manager need only consider their rational for creating the Website in the first place. Invariably the potential customer will be the key element driving creation of the website, and whether the role of the Website is to drive demand or close the sale, “best possible Website” must be viewed in terms of the customers’ wants and needs. So to take this one step further, we must identify everything that the customer wants and needs to make the purchase or convince themselves of the value of our product, while on our Website. The next step is to determine exactly what is driving the cost of the Website. Whether a Website is built or modified in house by full-time employees, contracted to outside resources at an hourly rate or some combination there of, the cost of a Website is directly proportional to the time required to design, develop, test and implement it. By far the single largest source of preventable expenditures result from changes in specifications after development has begun. To more clearly illustrate this point to those who have not written software themselves, think of a carpenter building a house. Now picture our imaginary carpenter having just completed an outside wall to your new house, when you arrive to tell him that plans have changed! Instead of the wall he just built being there, you now want that wall to be here. In order to fulfill this request, the carpenter must now disassemble the previously constructed wall, and build another wall in the new location. Now lets examine the cost of this new wall; first we have the cost of creating the first wall, the costs of disassembling this wall and then the cost of constructing the new wall. So in effect, we have one wall for the price of three!

So by analogy, if someone would completely change the specification of a Website after it had already been created to a previous specification, the cost of Website would now be at least twice what it should have been if the correct specifications were used the first time. Rarely would a completely different design specification be provided after a Website had already been created. In fact, specifications most often change a little bit at a time, but by changing the design a little bit at a time you are in effect persuading that carpenter to use pieces of the old wall to build the new wall. Consequently, we are back to the situation of the carpenter (or the programmer) disassembling the old wall while building the new wall (or new Website). Consequently, design changes can double or even triple the cost of creating your Website. Therefore our bottom line is, if we want to build our Website at the lowest possible cost, strive to minimize, if not eliminate, design changes once development has begun. Consequently, the goal of any small business wishing to create a Website to sell or market their products should be to evolve the functionality of the Website to the point where all of the user functionality has been identified and designed, before programming begins.

“An Introduction to Website Design” © 2008 Bokash Business Consulting

3

Website Design – Functional Specifications
So what is required to know that you have “fully identified and designed” the user functionality? The answer to this will vary somewhat depending on who is answering the question, but most so called “experts” will say that all of the user processes need to be defined in detail and the layout of content for each of the web pages needs to be specified, and hierarchical organization of the web pages needs to be determined. This collection of elements, most often referred to as “Functional Specifications,” will enable a developer to create an operational version of the desired Website in an expeditious fashion, as the inevitable design changes have been minimized or eliminated.

So to summarize, there are three core elements of Functional Specifications for Website Design:
• Site Map detailing all of the Website pages and their hierarchical organization • Wireframe Diagrams to illustrate the layout of individual web pages • Documentation of Transactional Scenarios or “User Functionality” (e.g. buying, selling, creating a listing, etc.).

Each of these documents should be provided to the Website developer before they start work. For a comprehensive but vocabulary intensive overview of Website Design, I suggest “Web Design” on Wikipedia. This would be a good resource to bookmark with your browser, due to the avail...

/webmasters/ 1 10 101 11 12 13 14 15 16 17 18 180 19 2 20 2003 2008 21 22 3 301 4 404 5 50 6 7 8 9 abil abl accept access accid account accur acquaint across action activ ad add addit address adjust advers advertis adword aesthet affect affili aim algorithm allow almost along alreadi also alt altern although alway analog analysi analyz and/or anim anoth answer ant anyon apolog appear appli applic appreci approach appropri area around arriv articl ask aspect assist associ assum attempt attract attribut audienc august authent auto auto-gener autom automat avail avoid awar away back background bad badwar bandwidth bar base basic becom beforehand begin begun behavior behind benefit best beyond bit block blog blond boilerpl bokash bonus bookmark bot bottom branch brand breadth break brief broad broken browser build built bullet busi buy calendar call campaign cannot capabl caption care carpent cart case caus cell center central certain chanc chang charact chart check choic choos cite classifi clear click cloak close coat code collect color column combin comfort commerc common communic compani compar compel compet compil complet complex complic compon comprehens comput conceiv confus conjunct connect consequ consid consider consist consolid construct consult consum contact contain content context contract contradict control convinc cooki copi copyright core correct correspond cost could couldn count coupl cours cover crawl crawler creat creation criteria critic current custom cutter d damag data day dead debug deceiv decept deciph decis deeper defin definit demand depart depend depth describ descript design desir detail detect determin develop devic dhtml diagnost diagram didn differ difficulti direct directori disallow disassembl disciplin discount discov discover discuss display distinct distinguish distract divers document doesn domain done doorway doubl drive due duplic dynam e e-commerc e.g easi easier easili effect effort either element elimin email emb employe empti enabl end engag engin ensur enter entir equival error especi establish etc ethic evalu even everi everyon everyth evolv exact examin exampl excel excess exchang exist expand expect expediti expenditur experi expert explain explan explanation/description explor express extern extrem face fact fail fair familiar far fashion favor feel file filter find first first-tim fix flair flash flow flowchart focus follow foremost form format formul forum found four fourth framework frank friend front fulfil full full-tim fulli function fundament futur general generat gentlemen get give given go goal gone good googl google-friend googlebot graphic graphic-rich great group guid guidelin hand hard hardcopi help hidden hierarch hierarchi high high-qual histor home homepag hope host hot hour hous howev html human hyphen i.e id idea ideal ident identifi illustr imag imaginari impair implement import impos impress improv inadvis includ incom incorpor increas index indic individu inevit infinit influenc inform insid instal instanc instead intellig intend intens intent interact interest interfac intern internet interpret intim intro introduct invari invest investig involv irrelev isn issu item javascript keep key keyword know label languag larg larger largest last later launch lay layout learn least left lengthi less let level leverag like likelihood limit line linear link link-bas list littl live load locat logic long longer look loos loss low lowbandwidth lower lowest made main maintain major make malici mani manipul manner map market massiv match materi matter may mean meant measur media mention menu meta microsoft might minim minimum minut mission mistak mistaken mobil modifi most motiv move msn msnbot much multipl must name natur navig near necessari need negat neighborhood neither nevertheless new next nofollow noindex non non-javascript non-malici non-standard non-text noscript note notic number numer object obtain offer offic often old omiss omit one onlin oper option order organ organiz origin outlin outsid over overlook overview owner owner/manager ownership page page-to-pag pagerank paid paragraph paramet part particip particular pass path penal peopl perceiv perfect perhap perman person perspect persuad phase phish phone pick pictur piec pitfal place placehold plan pleas plenti plethora point popular popup posit possibl post potenti powerpoint practic prefer present preserv prevent previous price primarili principl print printer printer-friend prior proactiv probabl problem problemat procedur process product program programm progress proper proport provid psycholog public publish punctuat punish purchas purpos qualiti quantiti queri question quick rank rare rate rather ration re reach reachabl reaction read readabl reader readi real realli reason rebrand recogn recommend red red-coat redcoat redesign redirect refer regard regist regular rel relat relev remain rememb remind remov reorgan repeat repetit report reput request requir research resembl resourc restructur result retain return revis rich right robot robots.txt role root rout rule run sale say sbdc scan scenario scheme scope scrape screen search searcher second section see seem select sell send sens sentenc separ sequenc serv servic session sever shop short shorten shot show shown sign sign-in signific silverlight similar simpl sinc singl site sitemap situat slurp small sneaki snippet softwar someon someth somewhat sooner sourc space spammer spare specif specifi spider splash sponsor stabl standard start stat static statist step stopwatch store strateg strip stripped-down strive structur stub studi subdivid subdomain subject submit subpag substant substanti success suffer suggest suit summar summari support suppos sure symbol tabl tag take taken target technic techniqu technolog tell term terminolog test text text-bas text-on therefor thing think third thought three throughout thumb time tip titl tool top topic toward traffic transact transcript transpar tri trick trigger trim tripl trojan troubl twice two type typic unabl unauthor unclear underscor understand uneth unfamiliar unfortun uniqu unnatur unnecessari unnecessarili unpaid unwant updat upon url us usag use user usual util valu valuabl vari variat ve vendor verifi version versus via video view violat virus visit visitor visual vocabulari wall want way web webmast webpag websit welcom well well-organ whenev wherea wherev whether wide widen wikipedia wirefram wish within without won wonder word work work-in-progress workaround world worm worth would written www www.google.com www.google.com/webmasters/ yahoo yet youtub