Stay in the Loop
Web Development Users Group
To make sure you receive important information about web development at Portland State (including, announcements, tools, resources, jobs), subscribe to the Web Development Users Group mailing list.
Web Communications
If you are starting to (re)design an official Portland State website, please contact Web Communications to set up a time to discuss your plans in detail. Before we meet, read this entire FAQ and if possible, bring a draft sitemap to the meeting.
Get Help
If your organization doesn't have the time or resources to develop a site on your own, let us help advise you on finding a student or vendor to develop your website. Many Univeristy organizations develop websites without establishing clear guidelines and responsibilities with those doing the work and end up with sites that are difficult to use and maintain and/or developers that are no longer available for help or consultation.
Use the Right Domain/Webspace
If you are developing a new website that does not already have a Portland State domain and webspace, first consider if your materials might fit better as a part of an existing website. Are your materials related to a larger Portland State organization or are they for a one-time/temporary purpose? Adding them to an existing website should make them easier to find and maintain and will present them in the context of related information users may find useful. To add your materials to an existing Portland State website, contact the appropriate website's organization directly to discuss your proposal. Once you have made arrangements to add your materials to an existing website, you or the existing website managers can request access for you through the Office of Information Technologies.
If your materials do require a new, independent site, Portland State faculty/staff/students can request a new departmental website through the Office of Informatin Technologies.
Plan Your Site Architecture
Developing a good conceptual sitemap is the best first step you can take in designing a successful site. You can then use the sitemap to start identifying and gathering the content for the new site and designing its navigational structure and graphic design. If you already have a site, make a sitemap of what's there and use that as a starting place for a redesign.
Separate Design from Content
This is a good practice for any web design project. If separate design from content, it will be far easier to change the look of your site for any reason, including to reflect changing web design standards at Portland State. There are a variety of ways to do this:
- The most complicated: store the content (including basic HTML markup) in a database and use some sort of scripting/templating system to display it (this is Portland State's Saga Web Content Management System works).
- A good middle road is to code individual pages for each page of content and design global header and footer files that contain all the code for the navigational framework that surrounds the content pages; then use just a few basic commands from some kind of server-side include scripting (SHTML, PHP, CFM, ASP, etc) to include the global header/footer files within each content page. For a basic example, see our FAQ on including a standard PSU header/footer using PHP.
- You can also use software (like Macromedia Dreamweaver's templating feature) to accomplish similar results.
- At the very least, code all your pages as consistently as possible so it would be easy to extract the encoded content from the site or change the design using global search and replace.
Use Cascading Style Sheets (CSS)
Another worthy design practice is to use global CSS to control the design of your pages as much as possible. We recommend using CSS ids/classes/etc on the common header/footer/navigation parts of your site as necessary, but encoding content for individual pages using only basic HTML tags. You can then set styles for the basic tags like <h1>, <p>, etc, in your stylesheet to control the look of your content. That way the content from your site is as portable as possible�you can display it using another stylesheet (or none at all) without having to change any HTML code in the content.
Use your browser to view the source of the main Portland Sate website to see how it uses stylesheets, noting how the styles for basic HTML tags set the look for the content.
Use the Standard PSU Template
Request and use the Adobe Dreamweaver templatewe make available. This template already includes the standard PortlandState header and footer using the methods described below. Thetemplate works best in Adobe Dreamweaver, which you can buy at a discount through OIT User Support Services or the Portland State Bookstore. Experienced web designers could use this same template with tools other than Adobe Dreamweaver.
Include the Standard PSU Header/Footer
An important part of the standard template will be to enable your site to include the standard Portland State header (which includes search) and footer so users have a standard way to navigate to university-wide web resources. See our FAQ: How do I include a standard PSU header and footer on my website?
Follow University Visual Identity Guidelines
All official Portland State websites are required to follow the University's identity guidelines.
Optimize Your Site for Search Indexing
There are several things you can do to ensure your site content is included in the Portland State search index accurately. The same practices will improve the accuracy of your site's listings in external search sites as well (eg, Google, Yahoo). See our FAQ: How do I improve where my page/site turns up in PSU search results?
Plan to Move Your Site to Saga
Learn more about Saga, Portland State's centrally developed and supported web content management system.
If you design your site as per the suggestions here, you will be well-positioned to make an easy move to Saga. Be assured that most of the work to create a good site is in designing it's architecture/sitemap and developing its content. If you've done those well in building an interim site, you will not have wasted substantial work and the move to Saga will be easy. If you anticipate wanting to move to Saga, it's a good idea to organize your content based on Saga's different "channels" of information: webpages, events, news, FAQs, and profiles and set up a time to talk to us about a migration plan. See examples of sites currently using the standard Portland State design.
More Resources
Some good sites with tutorials on these (and other) web development techniques:
