Understanding the Internet: Concepts, Etiquette, and Copyright
- 2. 3. Audience Consideration 5. Creating Graphics for the Web 2. The Name Game 2. Organization of the Site 7. Conclusion 1. Introduction 6. Site Documentation and Storyboarding 4. The Name Game CONTENTS 1. Overview
- 3. 01 Overview
- 4. You have set your standards on how to rate websites. In this section, you will be presented concepts that will help you improve your ideas. Find out which are similar and take note of additional concepts that will improve what has been included in the list by highlighting or underlining them. You may also visit the websites listed under the Additional Sources section. Introduction
- 5. A website is your home in cyberspace. It is where you establish your online presence and interact with other people regardless of the great geographic and cultural divide. You can think of it as your accommodation area for people who want to reach you but do not have the time and means to visit you or your office personally. Moreover, it automates the process of answering questions and the dissemination of information to a wider audience. For such reasons, you may want to make it look good. Make the first impression a good one. Importance of a Website It should be appealing and must contain information on what the site is all about and what it offers. Hyperlinks or navigation components should be obvious and immediately noticeable to help visitors use the site. Do not overcrowd it. Just provide it with important and up-to- date information and sections that will organize it. The link to the FAQ (Frequently Asked Questions) page should be immediately made available.
- 6. Professional Appearance Animations distract the audience. Do not put one unless it is important and will complement the page. People visit websites for the content and not the ornamentation. Avoid using scrolling text, for your visitors will have a hard time following the words. Do not use visible page counters. If you want to track the number of visitors, then use the site logs provided by the system hosting the site. Site logs are records containing statistics that usually tell the number of visitors per day (or week/month), the visitors’ geographical location, the browser that was used, and the most frequented page in the site. Look professional. Someone who is new to web design may be awed by a lot of visual special effects that you can put in your site. Such are images, animations, and other effects. Use images to enhance the page but do not use unrelated graphics. Background image is not required but is also good if it will enhance the text or overall theme of the site. Pages that are under construction should not be included in the site. If you do not have it yet, then do not include them in the
- 7. Image Formats You may use the free web page analyzer at Fast Loading Times Page Loading Speed JPEG and GIF are formatting standards best for putting graphics on the web. JPEG is best suited for photographs and GIF is for line and text drawings and black and white images. Do not use bitmaps which is the formatting standard used by the Windows operating system. JPEG and GIF are compressed formats and are smaller in file size that is why they load faster. All in all each page of your site should load in five seconds or less. Web Page Analyzer Make web pages load fast. Visitors may not have the time or patience to wait for a page to fully load. Make it a point that the page is displayed within five seconds. Limit the content to what is relevant. Use graphics in JPEG (Joint Photographic Experts Group) format or GIF (Graphic Interchange Format).
- 8. 1 Organize your site. Decide which article or content goes to the section. Do not put everything in a single page. Just provide visitors with navigation for them to use to jump from a page to another and make sure that they do work. This will not only minimize clutter but also help in making pages load faster when only minimal and relevant content are included in each page. Site Organization 2 In addition, use a theme. Use a color combination that will enhance the pages. Hyperlinks, titles, and content should be easily distinguished. Make sure that each page will look visually the same. Help your visitors find what they are looking for. Do not confuse them.
- 9. Standards Compliance Follow the standards. Make sure that your site follows the standard particularly in HTML (Hypertext Markup Language). HTML is the language used to instruct browsers how to handle text and other components for display. Avoid using codes that are browser- specific. Always make sure that your site will work and look fine regardless of the browser and size of the window.
- 10. Keep it up-to-date. The main reason why people visit websites is to get fresh information. They want to know what is current or probably check what happened in the past days or months. Always keep it updated and put dates for old news for reference. If you have the expertise, make it dynamic. This means providing information on-demand the same way that airline sites are able to give out current information on flight schedules. Keeping Content Updated
- 11. Remember that special components are not always welcome. Using features which have to be installed by visitors should be made optional. This refers to materials like Flash animations, Java applets, and ActiveX controls. A Java applet is a program that runs inside another application such as a browser. Avoid Unnecessary Components Special Components ActiveX Controls ActiveX controls are similarly to Java applets but have direct access to your Windows operating system. Research first on components before featuring them in your site. They usually require additional components to be installed. In most cases, visitors may not be technically equipped or patient enough to comply with the requirements. Some may actually be prohibited by the system that they are in from installing such components.
- 12. Accessibility Make yourself available. Put contact information for inquiries and other comments. If you have the technical expertise then put a feedback form that can be used to communicate. This will also allow people to quote your work in their research.
- 13. Audience Consideration Remember, it is always safe to start with the basics. Just add components and refine the design. Content comes first. The appearance is second. Always consider your audience. Know what they require and help them find what they need.
- 14. The Name Game 02
- 15. Another key to success is the name. Make domain of your site. If it is a website for your organization then stick with the name. If it is too long then use the acronym. Make the name reflect your business or use the brand name of your product. Do not use hyphens or underscores. Typing the name, inday-cakes-and-pastries.com, is quite a bother. Importance of Domain Name Remember to consult other people with the name you came up with and gladly accept their comments. In most cases, one will think of using .COM as the top-level domain name. If the name is already taken then try using a country code such as .PH or .COM.PH. You may check the availability of a name through the website of a Philippine-based domain registrar at http://www.com.ph2.
- 16. Here are business and organization names. Recommend a domain for each. Use the URL http://www.com.ph to check the availability of the name you are recommending. Write your recommendations on the board. The class then should agree on the best name afterward. Take note of the final recommendation/# WEBSITE DESIGN STANDARDS Exercise
- 17. 03 Introduction
- 18. The main page should be appealing and informative, providing navigation components and essential information. It establishes your online presence and allows interaction across geographic and cultural divides. The link to the FAQ page should be immediately available. Overview A website is your home in cyberspace.
- 19. Special Effects 4 2 Avoid distractions like excessive animations and scrolling text. Distraction Avoidance Professional Appearance Navigation Exclusion 3 1 Do not include visible page counters; track visitors using site logs. Visitor Tracking 5 Use visual special effects wisely. Enhance pages with related images, avoid unrelated graphics. Exclude pages under construction from navigation. Images Enhancement
- 20. Fast Loading Pages Limit content relevance; use JPEG or GIF formats for graphics. 2 Image Usage Content Relevance Loading Speed Avoid using bitmaps and grab your own images. 1 3 Ensure pages load within five seconds.
- 21. Organization of the Site 04
- 22. Use a consistent theme and easily distinguishable components. Content Organization Organize content into sections rather than placing everything on one page. Consistent Theme Visitor Guidance Help visitors find what they need without causing confusion. Site Structure
- 23. Avoid browser-specific codes for consistent display across browsers. Follow Standards Ensure compliance with HTML standards.
- 24. 2 1 Provide dates for old news for reference. Keeping Content Updated Consider dynamic content for on-demand information. Regularly update the site with fresh information. Site Updates Dynamic Content 3 Old News Reference
- 25. Make optional components like Flash and Java applets, and provide instructions if needed. Consider alternate versions for simplicity. Special Components
- 27. •Provide contact information for inquiries. •Include feedback forms for comments. Basic Design Principles Availability •Start with basic elements; refine as needed. •Prioritize content over appearance. Audience Consideration
- 28. The Name Game 06
- 29. Domain Name •Recommendations on domain names for specified businesses. •Use URL http://www.com.ph to check name availability. The Name Game •Create a suitable domain name reflecting your organization. •Avoid long names with hyphens or underscores. •Check for name availability using domain registrars. Exercise
- 30. Creating Graphics for the Web 07
- 31. Creating Graphics for the Web •A pixel is the smallest element of an image. •Recommended resolution for web graphics is 760 to 800 pixels wide at 72 dpi. Understanding Graphics •JPEG, GIF, and PNG are ideal formats for the web. •JPEG is suited for photographs; GIF for graphics with fewer colors and animations. •PNG is newer and combines features of JPEG and GIF. Graphic Formats
- 32. Site Documentation and Storyboarding 08
- 33. Site Specification 1 Identify Purpose Example 2 the purpose of the site. customer actions and engagement strategies. 3 Define Actions Inday’s Cakes and Pastries bakery chain.
- 34. Website Title and Proposed Domain Ensure domain name reflects the site's focus. Overall title: “Inday’s Cakes and Pastries.”
- 35. Purpose and Audience State the site’s goals, emphasizing simplification of tasks and providing up-to-date information. Define the target audience and tailor the design accordingly.
- 36. Pastries 5 Overview of products. Cakes 4 8 List of Pages 7 2 Store location and contact info. Photos and descriptions of products. List of bread. 6 Instructions on making orders. About Us Order List of pastries. 3 Bread Home Page Contact Us List of cakes. 1 Product Page Company details.
- 37. Theme and Layout Use company colors and logos for branding. Provide consistent navigational elements across all pages.
- 38. Include client-side and server-side scripting where necessary. Additional Requirements Maintenance should be assigned to specific individuals.
- 39. Ensure clear definitions for page titles, file names, purposes, descriptions, and hyperlinks. Aim for simplicity in design while reflecting the website's organization effectively. Page Definitions Design Simplicity Creating a Site Storyboard A site storyboard visually represents page linkage and structure. Site Storyboard
- 40. Conclusion 09
- 41. The guidelines discussed serve as a foundation for effective website design. Consider practical aspects and audience needs in the design process. Conclusion
- 42. Thank You