1 Creating Well Designed Websites Using HTML to Develop Websites. “Common sense is not that common.” – Mark Twain

2 What we will look at: l 9 design observations for clean working design l How to get a design that customer needs. l Designing with templates. »How to find and use templates »How to edit the image files.

3 Competency Objectives 1. Understand 9 principles for good design 2. Able to work with templates 3. Able to edit image files Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

4 Classic Design Criteria l A Website is a little like a business card »Must provide a needed function (address, title, contact information) »Should have good form (look nice and appealing) Plummers R Us H. Munster - President 1313 Mockingbird Lane Transylvania, Romania Lots of functionality, less form Too much form not enough function

5 9 Design Observations l 5 Functionality Observations 1.Find what you need 2.Make it easy to do business 3.Easy flow through site 4.Consistent, easy-to-find navigation 5.Work with a wide variety of browsers l 4 Form Observations 1.Design that matches the audience expectations. 2.Make a good first impression 3.Break text in logical design sections 4.Use consistent design with good color choice Competency Alert: You need to know this !

6 5 Functionality Observations 1.Find what you need Amazon makes it easy to find stuff, even though they have lots of products. Their search is effective. Provide links (bottom) for other amazon needs

7 The drop-down style navigation is not obvious until you place your cursor over it This design element took about 15 seconds to load! A man from Mars can't figure out what your web site is about in less than 4 seconds - Vincent Flanders. The Biggest Web Design Mistakes of ( 1.Find what you need 5 Functionality Observations

8 2. Make it easy to do business Amazon’s 1-click buy-now button is an example of a site with a quick transaction 5 Functionality Observations

9 Sticky forms, do not ask user to re-enter all fields again. They ‘remember’ filled in fields. Missing fields have asterisks for prompts Question to ask... Does my web site solve the customer’s problem? 2. Make it easy to do business 5 Functionality Observations

10 3. Easy flow through site Direct links to PDF, can take a long time to load and change navigation method. Pop-up ads and content windows break flow. (They are also annoying) Don’t put up links that have no content! 5 Functionality Observations

11 5 Functionality Observations 3. Don’t Break the user’s ‘flow’. This site says I got to have IE. What if I don’t like IE? Is this a good thing or bad thing?

12 5 Form Observations 1. Design that matches the audience expectations. Paul Simon’s site certainly doesn’t look like a corporate site CNN looks like a news site. This is probably what you’d expect here.

13 4. Consistent, easy-to-find navigation How do I get out of here? How do I navigate this thing? 5 Functionality Observations

14 5. Work with a wide variety of browsers In IE I can clearly see these navigation items. In firefox they seemed to have disappeared. 5 Functionality Observations

15 9 Design Observations l 5 Functionality Observations 1.Find what you need 2.Make it easy to do business 3.Easy flow through site 4.Consistent, easy-to-find navigation 5.Work with a wide variety of browsers l 4 Form Observations 1.Design that matches the audience expectations. 2.Make a good first impression 3.Break text in logical design sections 4.Use consistent design with good color choice

16 5 Form Observations 2. Make a good first impression – clean identifiable home page –Easy to tell where the person landed. Actual home pages. Took a while to figure out where I landed.

17 5 Form Observations 3. Make a good first impression. »Make a clean, easy to identify homepage. –Easy to tell where the person landed. –Make a good first impression Clearly tells you who they are Wasting all this space forces me to scroll.

18 Finally after seconds get to this page. Suppose I only wanted their phone number? This sight has a lengthy flash intro. 3. Make a good first impression. 5 Functionality Observations

19 5 Form Observations 4. Break text in logical design sections »That is, design content for display on the web This site looks like the read portion of the ACT! Notice how the fonts change, use of color, even side graphics make page more inviting

20 5. Use consistent design with good color choice 5 Form Observations You might need a template to get coordinating colors. Still its better than looking ugly. Consistent Design elements with: Colors Navigation Tag Lines Font Choice Nice coordinated color, site is also good example of text broken into inviting areas

21 9 Design Observations l 5 Functionality Observations 1.Find what you need 2.Make it easy to do business 3.Easy flow through site 4.Consistent, easy-to-find navigation 5.Work with a wide variety of browsers l 4 Form Observations 1.Design that matches the audience expectations. 2.Make a good first impression 3.Break text in logical design sections 4.Use consistent design with good color choice

22 What we will look at: l 9 design observations for clean working design l How to get a design that customer needs. l Designing with templates. »How to find and use templates »How to edit the image files.

23 Getting the right design l How to determine basic functions of the site l Need to ask some questions... »What are major categories of information (e.g., Contact, products, support, etc.)? »How dynamic is the content? (and who will change it?) »Who supplies the content for each category? »How will we/you assure it’s up-to-date? »What style image are you looking for (e.g., corporate, earthy, homey, flashy, high tech, etc)

24 Start with several mock ups You might show several different mock ups to customer. It might be templates or hand-drawn sketches. From mock-ups, you develop a better idea of what is needed.

25 Consider Designing With Templates

26 The problem with HTML templates Here is where you need to update your content. Can be difficult to work this deep in the tables.

27 Use CSS for Layout Logo Navigation Style sheet does all the positioning. So, html code looks clean

28 Consider Searching for HTML Templates l Do a search on Google for Free html templates or something similar »Carefully read their license agreement One site (myfreetemplates.com) Will download the template into a zip format. You can expand the file just by double clicking in explorer.

29 Looking at your template... l After expand and open the template. You will get These are image files that need customization Customize your text.

30 Two problems when working with templates l When Working with Many Template Files 1.How can you alter to get consistent navigation? 2.How can you customize the graphic files? Competency Alert: You need to know this !

31 1. How to get consistent navigation l To get consistent navigation can either »Set the site up to be frames based »Use a language on server side such as PHP You want this information to be the ‘frame’ This information changes when click frame link.

32 It may not be obvious The template can be quite large. This one is 140 lines Note everything is in there as one big html file

33 1. Look for start of ‘content’ area. Find where navigation ends and where you’d place your content. Line 74 starts a new table. Line 81 is the page header Line 85 shows where content goes. So, everything before line 74 is probably frame material! Save everything line 74 on into a separate file say, home.html.

34 2. Now find the top and left hand sides Look for where top table ends and left hand starts. Save top table (lines 1,53) in 1 file (call it top.html) and left hand navigation (lines 53, 72) into separate files (call it left.html ).

35 You now should have 3 pieces… left.html top1.html content.html Note: Depending upon the template, you may have to edit each of the 3 pieces. For example, to end or start tables.

36 3. Create your own frameset... l Create the frameset 1 A Nested Frames Example | | Now it’s a ‘frames’ exercise. How do you remove scroll bars? How to you size things right? How do you get the targets to work right? How do you change css colors?

37 Two problems when working with templates l When Working with Many Template Files 1.How can you alter to get consistent navigation? 2.How can you customize the graphic files?

38 How Change Navigation Buttons There are 2 graphic files for each navigation button. Each needs to be edited to change text. Competency Alert: You need to know this !

39 Use GIMP to Change Image Text Open the file in Gimp Use pick colors from image to find exact color of background Use eraser tool to remove text and text tool to add text. Eraser tool, Text tool. Move tool

40 A Few More Tools... Rotate the image Eraser tool, Change image perspective. Scale image

41 Summary: l 9 design observations for clean working design » 5 Functionality Observations 1.Find what you need 2.Make it easy to do business 3.Easy flow through site 4.Consistent, easy-to-find navigation 5.Work with a wide variety of browsers l4 Form Observations 1.Design that matches the audience expectations. 2.Make a good first impression 3.Break text in logical design sections 4.Use consistent design with good color choice l How to get a design that customer needs. l Designing with templates. »How to find and use templates »How to edit the image files.

42 Module 1 Hands on Assignment l Rework the following template to support frames. Create a file frameset.html, top.html and bottom.html

43 One possible solution – top.html 1. a

44 One possible solution – bottom.html Page Header 6. Date dd/mm/yyyy Sub-header 12. Page content goes here; To use this template you simply have 13. to build the 14. html for it from the graphic. First export all your buttons, backgrounds 15. and 16. other images. You must decide whether certain elements will be 17. images 18. or html generated. 19. First build one template page and make sure it is exactly right 20. before you 21. build the rest of the site. 22. [ Link sample ] [ Link sample 23. ] [ Link sample ]

45 One possible solution – frameset.html 1. A Nested Frames Example | 6. 7.