1 / 23

Basic Web Design

Basic Web Design. Technology is a tool. FIRST, understand how people actually interact with each other and with the information in their lives, in all the complex, nuanced, often unintuitive ways that they do. 

twila
Download Presentation

Basic Web Design

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. Basic Web Design

  2. Technology is a tool • FIRST, understand how people actually interact with each other and with the information in their lives, in all the complex, nuanced, often unintuitive ways that they do.  • SECOND, design ways to help support and enhance what people do in order to help them meet their goals.  • THIRD, use technology as one of several powerful tools to bring these solutions to life.Viewing technology as a solution in itself, you're almost destined to fail.  Many have.  Many will.  At a high cost.

  3. Comments about good design • Nobody should notice your design • Noticing it is a failure • Focus the person on content, not navigation or how great it looks

  4. Clean HTML • <h2>Objectives</h2> • <ul> • <li>Define information structure • <li>Explain the problems with using Word to create HTML files • <li>Explain why different browsers give different appearances to a web page • <li>Explain the type of files and naming conventions required for developing • web pages • <li>Explain why a web page designer cannot ensure how a page will look • <li>Explain meta-structure for a web page design (page titles, file naming conventions, • template construction) • <li>Discuss the reasons for using tables to layout a basic web page • <li>Explain why frames should not be used • </ul> • <h2>Readings</h2> • <p>Williams &amp; Tollett ch. 4-6</p> • <p>Writing for Websites<br> • <a href="writing_for_websites.pdf">writing_for_websites.pdf</a></p>

  5. Word HTML • <h2 style='margin-left:0in;text-indent:0in'>Objectives<o:p></o:p></h2> • <p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span • style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; • </span></span><![endif]>Define information structure <o:p></o:p></p> • <p class=BulletList><![if !supportLists]><span style='font-family:Symbol'>·<span • style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; • </span></span><![endif]>Explain the problems with using Word to create HTML • files <o:p></o:p></p>

  6. Browsers are not the same • Different browsers • Internet Explorer • FireFox • Opera • Safari • Chrome • Different levels of implementation • Different ways of interpreting the tags

  7. Browser differences • Must check your design in multiple browsers (and multiple monitor resolutions) • Yes, IE is on most machines, but many people do not like it • FireFox has about 25% of techie audience and that number is growing

  8. Cannot control appearance • Many students want to run all windows maximized. • With larger monitors, many people don’t(I rarely do.) • A design must allow for different window sizes.

  9. Design for Content • Cannot control how the user sees the page • Color can change • Graphics can be turned off • Browser window can vary • Paper can be tweaked, web pages cannot

  10. Browser set wide

  11. Browser set narrow

  12. Testing with browsers • Install multiple browsers and test on your machine. • Change resolution and test

  13. Tables on Web Pages • Only formatting method without using CSS • Only way to get side by side text • Navigation bars, etc all use tables • Not just data lists, like in paper docs • NOTE: tables do not resize • Don’t use tables to reproduce paper • In a longer course we would learn CSS, which is how most pages are now coded.

  14. Formatting with tables

  15. Same page with table borders

  16. Table Resize Problem

  17. Keep a consistent appearance • Visually show that the site is the same • Always use the same background • Same graphic style • Same type formatting • Ransom note effect can confuse the reader • Is this the same site? • Adjusting to new formatting style

  18. Templates for consistency • Build and test templates first • Get the overall design finalized • If you don’t • Making same changes on bunches of pages • Missing some changes looks bad • Less chance of inconsistent design • Create the design and then make copies

  19. Filename consistency • Web sites have lots of files and must be maintained (perhaps not by you) • The filenames you pick must make sense and say what the content is • Avoid page1, page2 names • Maintenance is hard since you forget the naming structure after a few months.

  20. Keep reader oriented • Give all pages titlesPage title of “Untitled” is unprofessionalMakes development difficult.

  21. Frames are poor design • Frame is essentially a way to have multiple web pages open on your site at the same time. • Bookmarks fail • Back button function is inconsistent

  22. Questions for discussion • Good and bad points of the web • What makes it good and bad • Correctness of people’s attitude that everything is on the web? Especially from a student’s technical-level needs?

  23. End

More Related