This document provides guidance on planning and hosting a web portfolio. It discusses determining the audience and purpose, choosing between static and dynamic sites, incorporating social media, creating site maps and copy, and hosting options like the UW publishing platform or WordPress. It also covers best practices for accessibility, URLs, terminology, images, and more resources for web design.

1. Web publishing basics
for portfolios
Kristina Courtnage Bowman
kriscb@uw.edu
Twitter: @kris_bowman

2. Planning your portfolio
• Who is the audience?
• Do you want a static site or dynamic site?
• How often will your content change?
• Will you incorporate other aspects of your
digital identity like Twitter, Facebook or
LinkedIn?

3. Site Map for portfolio page
Home page:
Introduction
/photo
Resume Portfolio Contact References

4. Sadie

5. Site Map for Sadie
Home page:
Introduction
/photo
Foster
Siblings
Portfolio Contact References

6. Copydeck for Sadie

7. Hosting your site
• UW web publishing (Activate Dante account)
– https://uwnetid.washington.edu/manage
– Transfer files using Secure FTP
(http://www.washington.edu/itconnect/security/tools/#sftp)
– Also access files from
https://catalysttools.washington.edu/filemanager/
– URL is http://students.washington.edu/uwnetid
• Wordpress (http://www.wordpress.com)
• Google sites (http://sites.google.com)
• Workspace
(https://catalysttools.washington.edu/workspace/getstarted)

8. Wordpress
• Themes
• Custom headers
• Static or dynamic
• Widgets
• Post vs. Page
• Linking

9. Wordpress Settings
• General settings
– Tagline
• Reading Settings
– Front page: Static page
• Discussions Settings
– Require moderation
• Privacy Settings
– Enable or disable search engines

10. Accessibility
• Make images accessible to readers who use
screenreaders, who have images turned off
• Makes easier for mobile devices
• Alt tags for images
• Don’t use fixed font that can’t be changed in browser
• Use flexible layout
• Make header tags descriptive
• Follow conventions (Search, no ad-like images)
• Try different browsers

11. URLs
• File and folder names become part of the URL
- keep them short
• Use lower case letters
• Don’t use spaces

12. Web terminology
• HTML (Hypertext Markup Language): Controls
content and some structure of site
• CSS (Cascade Style Sheets): Define styles such
as font, size, colors, margins, etc. (exp.
http://csszengarden.com)
• Tags: < > defines structure of content. When
editing content, don’t change anything inside
tags.
• JPG, GIF, PNG: Image types

13. Other resources
Catalyst Web publishing resources
• http://www.washington.edu/lst/workshops/web
Basic terminology useful for Web design:
• http://www.washington.edu/lst/workshops/resources/terms.html
Top 10 Web Design Mistakes:
• http://www.useit.com/alertbox/9605.html
Guidelines for Link Design:
• http://www.designbyfire.com/deye_web/alertbox.htm
Learn to code:
• W3 Schools
• Webmonkey