Chapter 13: Desiging for the Web

Starring on the Small Screen

Designing for the Web: White Space is Not Your Enemy Chapter 13

Chapter Outline

  • What to expect when working with websites
  • How the Web works (the 5-second version)
  • Getting your site on the Web
  • Print design vs. Web design
  • Anatomy of a Web page
  • That’s all great. But how do I design one?
  • Responsive Web Design
  • A website isn’t always the best tool for the job
  • Web design & accessibility
  • Keep on your toes
  • Try this
  • What’s trending

Keywords | Vocabulary

  • Accordion menu
  • Blog
  • Breadcrumb trail
  • Browser
  • Cascading style sheet (CSS)
  • Coding
  • Content management system (CMS)
  • Domain names
  • File Transfer Protocol (FTP)
  • Flexible assets, flexible grid-based layouts
  • Footer
  • Graphical user interface (GUI)
  • Header or banner
  • Hover state
  • Hypertext markup language (HTML)
  • Interface design
  • Internet service provider (ISP)
  • Media queries
  • Mobile first
  • Mobile friendly
  • Mobile sites
  • Navigation
  • Optimization
  • Pull-down menu
  • Really simple syndication (RSS)
  • Relative em, Rem
  • Responsive Web design
  • Search engine optimization (SEO)
  • Server space/Web hosting
  • Site map
  • Web safe palette
  • What you see is what you get (WYSIWYG)

This chapter covers the ABCs of designing for the WWW. In a book as short as White Space, our challenge is compromising between scaring the neophytes and boring the aficionados.

Key Student Takeaways

  1. You will work with websites in some capacity. You may prepare simple images and content for existing Web sites, work with a Content Management System (CMS), create a site from a template or work with a professional to build a custom site.
  2. Working with the Web requires at least basic knowledge of HTML and CSS
  3. Required tools for designers working on the Web include:
  • Photo-editing software with Web optimization functions.
  • An HTML editor or WYSIWYG page program.
  • Internet access and a Web browser.
  • An FTP application and an FTP client for uploading files.
  • Simple video-editing software.
  1. Don’t skip planning, including a site map as the flowchart-like outline. Establish and use a grid, too, and make your visual hierarchy apparent.
  2. Plan page design for accessibility and user-friendly intuitive persistent navigation (at the top of the page, i.e. “above the fold”.
  3. Responsive Web, where the design automatically adapts to fit the user’s viewing port, whether small smart phone or full-size desktop monitor, maximizes the viewability and usability of a website
  4. Consider designing “mobile first”: Start with the smallest screens and build your site upward, adding content and functionality as you go to bigger screens. Plan your sites and pages to be “flexible.”
  5. Keep interface patterns self-explanatory. Make buttons and links look like buttons and links.
  6. Make the purpose of each page clear at a glance.
  7. Design sites to meet the abilities of all web users. Consider text transcript options for audio, and consider audio content or captioning for the visually impaired.
  8. A blog or social network site might be a better choice than a website.

Quiz Questions

The 5-minute Motivation to Read Quiz

Share three things you learned from the reading. Be specific.

Short Answer Quiz Questions

Explain how designing for the Web differs from designing for print.

What are some design musts for developing a user-friendly website?

Compare the pros and cons of a website, versus a blog or a social network.

Multiple Choice Quiz Questions

What is the problem with SEO and graphics?

  1. Search engines only sample the text in graphics
  2. Search engines only search your graphics if you pay for it
  3. Search engines require a different coding system for graphics
  4. Search engines can’t search text embedded in graphics

Good GUI includes

  1. Learning HTML and CSS
  2. Planning for effective SEO
  3. Keeping your design user-friendly
  4. Matching the WYSIWYG to the FTP

One way to make your website more accessible is to

  1. Employ a shadow URL
  2. Develop a fixed-width site
  3. Switch to Adobe Flash
  4. Provide large clickable areas

Responsive Web design uses which three components?

  1. Hover states, logo links and broadly supported file formats
  2. Flexible grid-based layouts, flexible assets and media queries
  3. ISP, CMS and FTP
  4. Sliding panels, module tabs and accordion headers