Website Design for ECommerce


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Design for ECommerce

  1. 1. Web Design for Beginners
  2. 2. Questions We Will Answer… <ul><li>Why Should I Have a Website? </li></ul><ul><li>How Much Will it Cost? </li></ul><ul><li>How Do I Register a Domain Name? </li></ul><ul><li>How Do I Select a Hosting Provider? </li></ul><ul><li>How Do I Organize My Website? </li></ul><ul><li>How Do I Design a Website? </li></ul><ul><li>How Do I Publish My Website? </li></ul><ul><li>Where Can I Find Additional Resources? </li></ul>
  3. 3. Do I Have to Have a Website? <ul><li>No. It is possible to market your business online without having your own website. Some popular alternatives include… </li></ul><ul><ul><li>Facebook </li></ul></ul><ul><ul><li>Myspace </li></ul></ul><ul><ul><li>Twitter </li></ul></ul><ul><ul><li>Company Blogs </li></ul></ul><ul><ul><li>Email Marketing </li></ul></ul><ul><ul><li>Search Advertising </li></ul></ul>
  4. 4. Why Have a Website? <ul><li>It Strengthens The Rest of Your Marketing </li></ul><ul><li>It Helps Customers Find Your Company </li></ul><ul><li>It Helps Customers Learn about Company </li></ul><ul><li>It Helps Customers Remember You </li></ul><ul><li>It Helps Customers Contact You </li></ul><ul><li>It Helps Customers Pay You </li></ul><ul><li>It Is a Convenient Place to Store Files </li></ul><ul><li>It Saves You on Labor Costs </li></ul>
  5. 5. Why Have a Website? <ul><li>PERHAPS THE BEST REASON </li></ul><ul><li>TO HAVE A WEBSITE IS THE </li></ul><ul><li>FACT THAT THERE IS NO GOOD </li></ul><ul><li>REASON NOT TO HAVE ONE!!! </li></ul>
  6. 6. How Much Will it Cost? <ul><li>Essential Costs </li></ul><ul><ul><li>Domain Name Registration ($5-15 per year*) </li></ul></ul><ul><ul><li>Website Hosting Space ($5-15 per month**) </li></ul></ul><ul><ul><li>**This is the cost per domain per year. If you choose to register multiple domains, you may have to pay more. </li></ul></ul><ul><ul><li>*Although there are a number of websites that offer free hosting, you get what you pay for in this respect. </li></ul></ul><ul><li>Non-Essential Costs </li></ul><ul><ul><li>HTML Editing Software ($100+ per program) </li></ul></ul><ul><ul><li>IT Personnel Salary (up to $65,000+ per year) </li></ul></ul><ul><ul><li>Professional Design ($1000+ per template) </li></ul></ul><ul><ul><li>Online Marketing (varies by industry & provider) </li></ul></ul><ul><ul><li>Dedicated Server (varies by size/type of server) </li></ul></ul>
  7. 7. What is Domain Name? <ul><li>A domain name is a series of alphanumeric </li></ul><ul><li>strings separated by periods that is an address </li></ul><ul><li>of a computer network connection and that </li></ul><ul><li>identifies the owner of the address. </li></ul>
  8. 8. What Does That Mean? <ul><li>A domain name is what you type into your </li></ul><ul><li>internet browser to get to a particular website. </li></ul><ul><li>You can purchase the rights to a domain name </li></ul><ul><li>from a domain registrar. </li></ul>
  9. 9. What is a Domain Name? <ul><li>Examples : </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  10. 10. Do I Need My Own Domain?
  11. 11. Which Registrar Should I Use?
  12. 12. Tips for Picking Domain Name <ul><li>Try to Pick a .COM Domain </li></ul><ul><li>Should Be Short & Easy to Spell </li></ul><ul><li>Use Your Company or Brand Name </li></ul><ul><li>Use Keywords or Household Words </li></ul><ul><li>Use Personal Names </li></ul><ul><li>Register Misspelled Variations of Domain </li></ul><ul><li>Register Multiple Domain Extensions </li></ul><ul><li>Consider Registering a .MOBI Extension </li></ul><ul><li>Avoid Long-Hyphenated Names </li></ul><ul><li>Register Domains for As Long As Possible </li></ul>
  13. 13. What if What I Want is Taken? <ul><li>To locate contact info for a domain’s owner… </li></ul><ul><li>1) Most registrars will perform a whois search automatically if the name you want is taken. </li></ul><ul><li>2) is a popular whois search engine. </li></ul><ul><li>3) To perform a whois search in Google, simply type “whois” in the engine. </li></ul><ul><li>THE INFO YOU GIVE THE REGISTRAR </li></ul><ul><li>WHEN YOU BUY A DOMAIN IS (USUALLY) PUBLIC!!! </li></ul>
  14. 14. Specialty Google Searches <ul><li>Calculator (5*9+(sqrt 10)^3=) </li></ul><ul><li>Stock Quotes (GOOG) </li></ul><ul><li>Dictionary (Define HTML) </li></ul><ul><li>Local Search (Computers Midland, TX) </li></ul><ul><li>Exact Search (“Website Design”) </li></ul><ul><li>Spell Check (Castcading Style Sheets) </li></ul><ul><li>Local Maps (Map 79707) </li></ul><ul><li>Unit Conversion (1 in to cm) </li></ul>
  15. 15. What is Website Hosting? <ul><li>A web hosting service is a type of Internet </li></ul><ul><li>hosting service that allows individuals and </li></ul><ul><li>organizations to make their own website </li></ul><ul><li>accessible via the World Wide Web. Web hosts </li></ul><ul><li>are companies that provide space on a server </li></ul><ul><li>they own or lease for use by their clients as </li></ul><ul><li>well as providing Internet connectivity, typically </li></ul><ul><li>in a data center. </li></ul>
  16. 16. Which Hosting Company?
  17. 17. Example from
  18. 18. Example from
  19. 19. What in the World is HTML? Hyper Text Markup Language is a standardized language of computer code, imbedded in &quot;source&quot; documents behind all Web documents, containing the textual content, images, links to other documents (and possibly other applications such as sound or motion), and formatting instructions for display on the screen.
  20. 20. Example from
  21. 21. Common HTML Tages <ul><li><b> BOLD </b> </li></ul><ul><li><i> ITALICIZE </i> </li></ul><ul><li><u> UNDERLINE </u> </li></ul><ul><li><a href=“”>Link</a> </li></ul><ul><li><img src=“;> </li></ul><ul><li><br> = Line Break (Same as enter key) </li></ul><ul><li><p> = Starts New Paragraph </li></ul><ul><li><h1>Heading 1</h1> </li></ul><ul><li><! – Inserts Invisible Comment --!> </li></ul><ul><li><a href=&quot;;>Email Us</a> </li></ul>
  22. 22. What is an WYSIWYG Editor? <ul><li>A W hat Y ou S ee I s W hat Y ou G et Editor is an </li></ul><ul><li>editor or program that allows an interface or </li></ul><ul><li>content developer to create a graphical user </li></ul><ul><li>interface (GUI) or page of text so that the </li></ul><ul><li>developer can see what the end result will look </li></ul><ul><li>like while the interface or document is </li></ul><ul><li>being created. </li></ul>
  23. 23. Popular WYSIWYG Editors <ul><li>Microsoft Frontpage </li></ul><ul><li>Microsoft Expression Web </li></ul><ul><li>Adobe Dreamweaver </li></ul><ul><li>Apple iWeb </li></ul><ul><li>W3C Amaya </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Mozilla Seamonkey </li></ul>
  24. 24. Important Skills & Techniques <ul><li>Copy & Paste </li></ul><ul><li>Browsing the Internet </li></ul><ul><li>Uploading & Browsing for Files </li></ul><ul><li>Format Text </li></ul><ul><li>Save & Save As </li></ul><ul><li>Copying & Moving Files </li></ul><ul><li>Using Search Engines </li></ul><ul><li>Understanding File Hierarchies </li></ul><ul><li>Viewing Cached Versions of Sites </li></ul><ul><li>Using the Way Back Machine ( </li></ul><ul><li>Creating New Files and Folders </li></ul>
  25. 25. Steps in Designing Website <ul><li>Map Navigation Structure </li></ul><ul><li>Choose Page Layout </li></ul><ul><li>Choose Color Scheme </li></ul><ul><li>Choose Fonts </li></ul><ul><li>Design Homepage </li></ul><ul><li>Design Other Pages </li></ul><ul><li>Publish Website </li></ul><ul><li>Troubleshoot Website </li></ul><ul><li>Publicize Website </li></ul>
  26. 26. Mapping Navigation Structure
  27. 27. Types of Page Layouts <ul><li>Site-Links Located at Top of Page </li></ul><ul><li>Site-Links Located on Side of Page </li></ul><ul><li>Other Types of Links </li></ul>
  28. 28. Example from
  29. 29. Example from
  30. 30. Example from
  31. 31. Example from Google News
  32. 32. Do I Have to Design It Myself? <ul><li>There are several options for those who do not </li></ul><ul><li>want to design their website themselves… </li></ul><ul><li>Hire a webmaster as a regular employee </li></ul><ul><li>Contract a freelancer or company to do it </li></ul><ul><li>Use a free template from </li></ul><ul><li>Purchase a professional template </li></ul>
  33. 33. Tips for Choosing Colors <ul><li>Use colors that match your logo & branding </li></ul><ul><li>Make sure that the color scheme is legible </li></ul><ul><li>Try printing each page in grayscale to make sure there is enough contrast for users to read your content </li></ul><ul><li>Consider creating a separate printer friendly version of each important page </li></ul>
  34. 34. Tips for Choosing Fonts <ul><li>Make sure that the font is legible using the color scheme you chose.Remember that most computers will not have exotic fonts. Stick to the basics ( Helvetica, Arial, Verdana, Georgia, Trebuchet MS, Century Gothic, Lucida). </li></ul><ul><li>If there is a font that you want to use for navigation or headings, consider converting it to an image. </li></ul>
  35. 35. Web Design Demonstration <ul><li>I will be using Mozilla’s Seamonkey in this </li></ul><ul><li>demonstration because it is one of the most </li></ul><ul><li>popular free web design programs available. </li></ul><ul><li>THIS SHOULD NOT BE CONSIDERED AN </li></ul><ul><li>ENDORSEMENT OF SEAMONKEY OR </li></ul><ul><li>MOZILLA. You could just as easily use any of </li></ul><ul><li>several products on the market. </li></ul>
  36. 36. Creating Your Website Folders <ul><li>Create a new folder on your desktop. This folder will house all of your website files. </li></ul><ul><li>Create a folder entitled “images” inside the website folder. Move website images into it. </li></ul><ul><li>All of the HTML and / or document files you use in your website will go in the main website folder, while all of your images will go in the “images” folder. </li></ul><ul><li>You can create additional folders if you wish, but we will stick to these for simplicity. </li></ul>
  37. 37. Creating Your Website Folders
  38. 38. Getting Started With Seamonkey <ul><li>Download Mozilla Seamonkey from & install. </li></ul><ul><li>Open Seamonkey and select File  New  Composer Page. Close original window. </li></ul>
  39. 39. Getting Started With Seamonkey
  40. 40. Getting Started With Seamonkey
  41. 41. Getting Started With Seamonkey
  42. 42. Creating The Homepage <ul><li>Select File  Save As </li></ul><ul><li>Enter descriptive title for page. This is what will appear at the top of the browser when users log on to your website. </li></ul><ul><li>Save the file as “index.html” in the folder you created to store your website files </li></ul>
  43. 43. Getting Started With Seamonkey
  44. 44. Getting Started With Seamonkey
  45. 45. Getting Started With Seamonkey
  46. 46. Creating Layout With Table <ul><li>Select Insert  Table </li></ul><ul><li>Create table with four rows, one column, 750 pixels wide, and border of one pixel. </li></ul><ul><li>Right click on the table. Select Table Cell Properties  Table and change the alignment to center. </li></ul><ul><li>You can change the properties in the Table Cell menu at any time during the design process by right clicking on the table. </li></ul>
  47. 47. Creating Layout With Table
  48. 48. Creating Layout With Table
  49. 49. Creating Layout With Table
  50. 50. Creating Layout With Table
  51. 51. Pros & Cons of Using Tables <ul><li>Pros – Easy for beginners to implement. </li></ul><ul><li>Cons - Does not make adjustments for different </li></ul><ul><li>resolutions or browsers sizes. Some users may </li></ul><ul><li>find it difficult to navigate website. </li></ul><ul><li>Alternatives – Cascading Style Sheets, </li></ul><ul><li>Frames, Tables Based on Percentages, Blog </li></ul><ul><li>Layouts, Wiki Pages, etc.. </li></ul>
  52. 52. Are You Designing for Your Users?
  53. 53. Adding Logo or Header <ul><li>Click on the top cell of the table. If you want to use a banner, select Insert  Image and select the banner from your website file folder. Make sure to add alternate text. </li></ul><ul><li>If you want to center your banner, select the banner, click Format  Align  Center </li></ul><ul><li>If you are using text in place of a banner, simply type within the top cell and reformat the text to the desired size. </li></ul>
  54. 54. Adding Logo or Header
  55. 55. Adding Logo or Header
  56. 56. Adding Logo or Header
  57. 57. Adding Logo or Header Color Size Format Alignment
  58. 58. Adding Site Links <ul><li>Click on the second cell. Type the names of all of the main pages you have planned for the site. Divide each name with a “|” or “-”. </li></ul><ul><li>These page names will become site links once you have created the pages to which the links will eventually be pointing. </li></ul><ul><li>You can resize these links or change the color to meet your planned design. </li></ul>
  59. 59. Adding Site Links
  60. 60. Adding Page Content <ul><li>The fourth cell is for page content. Insert text and / or images as you did for the other cells. </li></ul><ul><li>To change the way the images and text in the page content are aligned right click on any image, then click Image Properties  Appearance  Align Text to Image, then choose an option from the drop down box. </li></ul><ul><li>If you want to use multiple columns to format the content, create a table as before in the last cell. For Table Size, select 100% of cell. </li></ul>
  61. 61. Adding Page Content
  62. 62. Adding Page Content
  63. 63. Removing the Border <ul><li>Once you have finished laying out your content, you can make the table(s) invisible by changing the border size to zero. To do this, right click on the table  select Table Cell Properties  the Table tab  change Border to 0  click OK. </li></ul><ul><li>If you do not want to remove the border, you can leave it as it is or reformat it as you want. </li></ul>
  64. 64. Adding Page Content
  65. 65. Adding Page Content
  66. 66. Adding Google Analytics <ul><li>Google Analytics is a free tool you can use to analyze your website traffic. </li></ul><ul><li>Register for an account at </li></ul><ul><li>From the Analytics homepage select Edit  Check Status  and copy the “New Tracking Code” also called “ga.js” </li></ul><ul><li>In Seamonkey, click on the “<HTML> Source” view at the bottom of the screen. </li></ul><ul><li>Scroll to the bottom of the page and insert the analytics code immediately before the </body> tag. It will be one of the last items on the page. </li></ul><ul><li>Click on the “normal” tab for the WYSIWYG view. </li></ul>
  67. 67. Sample Analytics Report
  68. 68. Creating Other Pages <ul><li>AFTER you save your work on the homepage, select File  Save As  type a descriptive name for the next page you want to work on  save the new file with a new name into your website files folder. </li></ul><ul><li>You can leave the banner and site-links as they are. Just replace the content of the bottom cell for the content of the new page. </li></ul><ul><li>Repeat this process until you have created all of your website pages. </li></ul>
  69. 69. Creating Other Pages
  70. 70. Creating Other Pages
  71. 71. Creating Other Pages
  72. 72. Creating Other Pages
  73. 73. Creating Other Pages
  74. 74. Linking the Site Together <ul><li>Once you have created all of the pages in your website, reopen the homepage (index.html). </li></ul><ul><li>Highlight one of the site-links in the second cell and select Insert  Link. </li></ul><ul><li>Click browse and select the file to which you want the text you highlighted to link. </li></ul><ul><li>Repeat for all of the links in your website. </li></ul><ul><li>You can copy the site-links from the homepage and paste them to all of the other pages. </li></ul><ul><li>Do not create a site-link to the page on which you are currently working. Leaving this unlinked will help users determine what page they are on. </li></ul><ul><li>You can also copy the URL from any website you visit if you want to include a link to it on your site. </li></ul>
  75. 75. Linking the Site Together
  76. 76. Linking the Site Together
  77. 77. Creating an Email Link <ul><li>To create a link for users to email you, do everything you do to create an ordinary hyperlink, except put mailto: before the email address </li></ul><ul><li>It is recommended that you spell out the email address in the text of the page, instead of only putting “click here” </li></ul>
  78. 78. Creating an Email Link
  79. 79. Website Publishing Tips <ul><li>Make sure ALL of the files for your website are contained in your website folder before you copy the files to your hosting account. </li></ul><ul><li>Copy the individual files, not the folder, to the hosting account. </li></ul><ul><li>Make sure the images are in the images folder and all other files are in the main one. </li></ul><ul><li>Use only lower case names without spaces. </li></ul><ul><li>If you edit any HTML file, click refresh on your browser before you attempt to view it. </li></ul>
  80. 80. Publishing Your Website <ul><li>Log into your online hosting account. </li></ul><ul><li>Navigate to the “file manager.” </li></ul><ul><li>Upload all of your files to the main folder. </li></ul><ul><li>View your homepage to test your site. </li></ul><ul><li>If there are broken links, typos, or you want to change something, you can use your hosting accounts online editor or you can delete the file you want to change, edit it in Seamonkey, and re-upload </li></ul><ul><li>Make sure you do not change the file name! </li></ul>
  81. 81. Testing Your Website
  82. 82. Creating an XML Sitemap <ul><li>Visit </li></ul><ul><li>Enter the name of your website (once it is published) and click start </li></ul><ul><li>Download un-compressed XML Sitemap </li></ul><ul><li>Upload sitemap to your file manager in your main website folder </li></ul><ul><li>If desired, visit and sign up for a Google Webmaster Tools account. You can then upload your new XML sitemap directly to Google. </li></ul>
  83. 83. Helpful Website Resources <ul><li> ( Free Open Source Templates ) </li></ul><ul><li> ( Free Traffic Statistics ) </li></ul><ul><li> ( Free Tools ) </li></ul><ul><li> ( Free Tools ) </li></ul><ul><li> ( Free Sitemap Generator ) </li></ul><ul><li> ( Free Stock Photos ) </li></ul><ul><li> ( General Info ) </li></ul><ul><li> ( General Info ) </li></ul><ul><li> ( General Info ) </li></ul>
  84. 84. Question & Answer Session <ul><li>If you have any further questions, email… </li></ul><ul><li>[email_address] or [email_address] </li></ul>