Building Managing Web Sites Web Page Design 172022

Essential Design Questions • • What do I want to say? Who do I want to say it to? Why should they care? How would they best hear my message? Where? – The Internet When? – Any time 1/7/2022 © 2000, Valtara Digital Design 2

Web Site Design Introduction • Web is so visual that everyone wants to jump right in and make sample screens. • OK on small, informal sites, but professional sites require a plan, design, and maintenance. • Identify audience, their needs, and limitations. • Many design principles are intuitive, but understanding fundamentals makes a professional. 1/7/2022 © 2000, Valtara Digital Design 3

Web Site Design involves: • Identify the vision and goals of the web site. • Determine the content and features of the web site. • Develop the site’s organization, navigation, and searching features. • Continue to adjust and revise the activities above as the client and site evolve over time. 1/7/2022 © 2000, Valtara Digital Design 4

Web Site Design Skills Web design involves many skills, may require many people to be involved. . . • Project management • Content Organization – intellectual approach to the content • Navigational structure and Search features • Page layout and design • Graphic design 1/7/2022 © 2000, Valtara Digital Design 5

Internet Page Design Goals • User friendly layout • Cross Browser Compatibility • Low

Fundamental Design Problems • Web pages have many similarities to print…but also many differences – Difficulty in providing readers with context – Web browsers render pages differently – Screen resolution reduces readability – Expectation of concise content – Expectation of content currency 1/7/2022 © 2000, Valtara Digital Design 7

Page Creation Basics • Basic HTML page elements • As soon as you create a page, add these fundamental page elements: – A meaningful <TITLE> – A meaningful <META> description – Page header/footer with contact/context information 1/7/2022 © 2000, Valtara Digital Design 8

<TITLE> Element • Critical for page selection in search engines. • Since titles often viewed out-of-content, should stand on its own. • Ideal size: 40 -60 characters (5 -8 words) • First word should be important and informationrich. Avoid leading articles. • Avoid “teasers”, puns or “cute” titles. • No markup allowed except character entities. • Make <TITLE> element first line in <HEAD>. 1/7/2022 © 2000, Valtara Digital Design 9

<TITLE> Examples • Poor Titles – “Wall Street loves Sin” – “Fast page downloads” – “Order Confirmation” • Good Titles – “Gaming-related stocks popular on Wall Street” – “Techniques for speeding web page downloads” – “ACME Products order confirmation for J. Doe” 1/7/2022 © 2000, Valtara Digital Design 10

<META> Description Element • The other half of describing a web page… • Provide 1 -3 sentences abstracting the most important parts of that specific page. • Most important points should be first. • Start sentences with strong verbs or specific nouns when possible. • Expand on title if necessary (e. g. , acronyms) 1/7/2022 © 2000, Valtara Digital Design 11

<META> Description Example • <META name=“description” content=“Gains during 3 Q 1999 in gambling-related stocks has attracted the attention of mutual fund operators and other institutional investors. Industry insiders forecast strong performance in 2000. ”> 1/7/2022 © 2000, Valtara Digital Design 12

Page Header/Footer • Include a standard header and/or footer on all pages that ideally includes: – Who created/owns the page. – Who to contact for questions. – A URL and link to a higher-level page. – A date the page was last updated, formatted for an international audience (September 1, 1999) • Good Headers/Footers provide credibility. 1/7/2022 © 2000, Valtara Digital Design 13

Low Bandwidth Page Size • For pages to load quickly on low bandwidth connections, page size should not exceed 30 -40 KB in size. • Page size is the total of: – – – 1/7/2022 the HTML page Sub-pages (frames) Graphics and other media includes Stylesheets Javascript libraries © 2000, Valtara Digital Design 14

Response Times • 1/10 th second response perceived as instantaneous. • 1 second response maintains user’s flow of thought. • 10 second response is the limit for maintaining user’s attention. • Typical modem speed is 33 -42 KBPS, – 1 second response is approximately 2 -4 KB – 10 second response is 30 -40 KB 1/7/2022 © 2000, Valtara Digital Design 15

Frames -- Making Problems • Frames introduce many unnecessary problems. – More difficult for the user to "bookmark" a specific view and be able to easily return to it. – Easy to forget to code links properly with target attribute. – Use up valuable vertical/horizontal page space. – Slows down loading and displaying of pages. – Printing problems for some web browsers. – Search Engines get confused. 1/7/2022 © 2000, Valtara Digital Design 16

Using Frames • Use Frames/Framesets rarely and with caution as they tend to confuse users. • Frames can be emulated using tables and serverside includes. • Never use more than two or three frames per page. • Frame “refresh” effect can be used with “inline frames introduced in HTML 4. • Add META search elements to sub-pages, e. g. , <META name="robots" content="noindex, nofollow"> 1/7/2022 © 2000, Valtara Digital Design 17