1 / 34

Principles of Web Design: Evolution & Best Practices

Learn about HTML and its limitations, explore the impact of screen resolution on user experience, understand the role of browsers, and future-proof your designs with XHTML.

donaldsjones
Download Presentation

Principles of Web Design: Evolution & Best Practices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 1Variables in the Web Design Environment

  2. Chapter 1 Principles of Web Design Objectives • Describe the current state and design limitations of HTML • Learn how XML and XHTML could transform the Web • Describe how Web browsers affect the way users view your site • Decide if you should use an HTML editor to create markup code

  3. Chapter 1 Principles of Web Design Objectives • Describe how screen resolution and connection speed affect the user’s browsing experience • Clear the cache when testing your site

  4. Chapter 1 Principles of Web Design HTML: Then and Now • HTML is an application of the Standard Generalized Markup Language • Intended to represent simple document structure • Uses hypertext to link related topics • Designed for use over the internet • The document expression capabilities of HTML are currently pushed to the limit

  5. Chapter 1 Principles of Web Design HTML as a Markup Language • A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and lists. • An HTML file includes text and HTML markup elements • The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user

  6. Chapter 1 Principles of Web Design HTML as a Markup Language • HTML is an open, non-proprietary, cross-platform compatible language • HTML is not a What You See Is What You Get (WYSIWYG) layout tool. • HTML was intended only to express logical document structure, not display characteristics

  7. Chapter 1 Principles of Web Design Deprecated Elements • Deprecated elements are elements that the W3C has identified as obsolete. They will not be included in future releases of HTML • Some examples of these elements are <FONT> and <CENTER>

  8. Chapter 1 Principles of Web Design Understanding XML • XML is the Extensible Markup Language • XML is a meta-language; not a language itself, but a language that let’s you describe other languages • XML Describes Data, not Presentation • XML Allows Better Access to Data • XML Lends Itself to Customized Information

  9. Chapter 1 Principles of Web Design XHTML: The Future of HTML • XHTML is the Extensible Hypertext Markup Language • HTML as an Application of XML • Improved Data Handling • Style Sheets are Required

  10. Chapter 1 Principles of Web Design How Browsers Affect Your Work • One of the greatest challenges facing HTML authors is designing pages that display properly in multiple browsers • Every browser contains a program called a parser that interprets the markup tags in an HTML file and displays the results in the canvas area of the browser interface

  11. Chapter 1 Principles of Web Design

  12. Chapter 1 Principles of Web Design How Browsers Affect Your Work • The logic for interpreting the HTML tags is different in every browser, resulting in varying interpretations of the way the HTML file is displayed • Although it’s a good idea to test with the latest browsers, it’s also prudent to test your work in older browsers as well

  13. Chapter 1 Principles of Web Design How Browsers Affect Your Work • Lowest common denominator coding - use an older version of HTML to ensure portability • Cutting-edge coding - push the medium forward by coding to the latest standard and using the latest enhancements • Browser-specific coding - specify a particular brand and version of browser to access the site

  14. Chapter 1 Principles of Web Design Solving the Browser Dilemma • You must test your work in as many browsers as possible during and at the end of the development process to make sure that your pages will render properly

  15. Chapter 1 Principles of Web Design Should You Use an HTML Editor? • You can create or generate HTML code to build Web pages in many ways • Many sites on the Web are coded using simple text editing tools such as Notepad • Many different HTML editing programs are now available

  16. Chapter 1 Principles of Web Design Should You Use an HTML Editor? • As with the browsers, authoring packages interpret tags based on their own built-in logic. Therefore, a page that you create in an editing package may look quite different in the editing interface than it does in a browser • You’ll probably end up working with a combination of tools to create your finished pages

  17. Chapter 1 Principles of Web Design Coding for Multiple Resolutions • A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels • The three most common screen resolutions (traditionally expressed as width x height) are 640 x 480, 800 x 600, 1024 x768 • User screen resolution is a factor over which you have no control

  18. Chapter 1 Principles of Web Design Fixed Resolution Design • As the screen resolution changes, the content remains aligned to the left side of the page

  19. Chapter 1 Principles of Web Design

  20. Chapter 1 Principles of Web Design

  21. Chapter 1 Principles of Web Design

  22. Chapter 1 Principles of Web Design Flexible Resolution Design • As the screen resolution changes, the content expands to accommodate the varying screen width

  23. Chapter 1 Principles of Web Design

  24. Chapter 1 Principles of Web Design

  25. Chapter 1 Principles of Web Design

  26. Chapter 1 Principles of Web Design

  27. Chapter 1 Principles of Web Design Bandwidth Concerns • It is a myth that most computer users will soon have fast access to the Web • Less than 20% of American households have access to cable modems • Only 5-10% of all the households have access to Digital Subscriber Line (DSL)

  28. Chapter 1 Principles of Web Design

  29. Chapter 1 Principles of Web Design Bandwidth Concerns • If your pages download slowly, your users will probably click to another site before they see your content • Most users will simply not wait longer than 20 seconds for a page to load • The size and number of graphics on your Web pages influences the speed at which your pages display

  30. Chapter 1 Principles of Web Design Testing for Download Times • Test your site at different connection speeds • Test your site as if you were a user visiting for the first time. This is when users experience the longest download times. • Clear your cache of the files and images that the browser has stored

  31. Chapter 1 Principles of Web Design

  32. Chapter 1 Principles of Web Design

  33. Chapter 1 Principles of Web Design Summary • Decide which version of HTML you’ll use to code your pages • Decide whether to use Cascading Style Sheets • Choose the suite of browsers you will use to test your site • Decide how browser-specific your site will be. Your goal is to create a site that is widely accessible to multiple browsers

  34. Chapter 1 Principles of Web Design Summary • Choose the type of editing tool you will use to create your HTML code • Resolve to continually test your work as you build your site • Test with multiple browsers, at different screen resolutions, and at different connection speeds • If you can, try to view your site on multiple platforms, such as PC and Macintosh as well

More Related