In order to keep the serious stuff from the cartoons, I'm creating a new cartoon blog called "Tales from Redesignland" to chronicle the lives of us poor web developers... particularly those in higher education.
Y'all come visit us, y'hear?
Thursday, December 20, 2007
Tuesday, December 18, 2007
Thoughts on the Redesign Process - The Cartoon Version
No, I'm not bored, I've just wrapped up all of my projects for the semester.
I saw this page and thought it was a very cute way to visually describe the design process. I don't have any Lego men, so I adapted some free icons to do the job.
1. Get the right high-level decision-making organization in place
Their role is thinking about big picture issues, not micromanaging the process or the design.
2. Assemble the Redesign Team
This team may consist of people from several different departments. The team as shown, is made up of roles; one person may play more than one role. Though boundaries may not really exist, I've divided the team into four groups: technical, design, content, and quality.
3. Define High-level Redesign Goals
Ideally, this should be a conversation between the high-level stakeholders and the team leads (project lead, graphic designer, information architect, usability designer, communications specialist, and technical lead). The stakeholders need to communicate the goals and direction for the new Web presence and the team leads need to ask questions and provide feedback from their specific perspectives.
The conversation needs to be focused on eliciting clear direction from the stakeholders while educating them as to best practices and standards on the Web.
The trap at this stage is to begin to micromanage the process before it even starts. Talk should be in general terms, rather than discussing specific design, content or technology issues.
Wrong: "I think that going with an Aqua-style design, but in green, would be best."
Right: "How do you envision the redesign affecting our branding?"
Wrong: "We should have more dropdown menus!"
Right: "One of our top goals is to simplify the interface of the home page and reduce the clutter of links."
4. Establish Scope, Timeline and Budget
Scope creep will kill you. Avoid it.
5. Establish Standards
Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.
6. Do your Homework
Everyone should be involved at some level in this step, but it is most important for the graphic designer, information architect and usability designer to do as much research on trends and best practices as possible.
7. Profile Site Users
Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several personas and some scenarios to go with them. This step should start out as a series of 'blue sky' sessions, just exploring the possibilities, but should evolve into a prioritized lists of tasks.
8. Develop & Test Information Architecture(s)
Building off your work with personas and scenarios, begin building out structures and organization...
... and testing them on users using card sorts and wireframes.
9. Develop & Test Visual Designs
Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.
Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.
10. Create and Test a "Protosite"
Probably the smartest thing you'll ever do.
11. Create and Implement Real Site
After fixing all of your mistakes on the protosite, time to build out and test the real thing.
12. Finish Documentation
13. Go Live
14. Plan for Maintenance
I had fun making this. I hope you had fun reading it. I'm sure that there will be more of the motley crew to come.
I saw this page and thought it was a very cute way to visually describe the design process. I don't have any Lego men, so I adapted some free icons to do the job.
1. Get the right high-level decision-making organization in place
Their role is thinking about big picture issues, not micromanaging the process or the design.
2. Assemble the Redesign Team
This team may consist of people from several different departments. The team as shown, is made up of roles; one person may play more than one role. Though boundaries may not really exist, I've divided the team into four groups: technical, design, content, and quality.
3. Define High-level Redesign Goals
Ideally, this should be a conversation between the high-level stakeholders and the team leads (project lead, graphic designer, information architect, usability designer, communications specialist, and technical lead). The stakeholders need to communicate the goals and direction for the new Web presence and the team leads need to ask questions and provide feedback from their specific perspectives.
The conversation needs to be focused on eliciting clear direction from the stakeholders while educating them as to best practices and standards on the Web.
The trap at this stage is to begin to micromanage the process before it even starts. Talk should be in general terms, rather than discussing specific design, content or technology issues.
Wrong: "I think that going with an Aqua-style design, but in green, would be best."
Right: "How do you envision the redesign affecting our branding?"
Wrong: "We should have more dropdown menus!"
Right: "One of our top goals is to simplify the interface of the home page and reduce the clutter of links."
4. Establish Scope, Timeline and Budget
Scope creep will kill you. Avoid it.
5. Establish Standards
Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.
6. Do your HomeworkEveryone should be involved at some level in this step, but it is most important for the graphic designer, information architect and usability designer to do as much research on trends and best practices as possible.
7. Profile Site Users
Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several personas and some scenarios to go with them. This step should start out as a series of 'blue sky' sessions, just exploring the possibilities, but should evolve into a prioritized lists of tasks.
8. Develop & Test Information Architecture(s)
Building off your work with personas and scenarios, begin building out structures and organization...
... and testing them on users using card sorts and wireframes.
9. Develop & Test Visual Designs
Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.
Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.
10. Create and Test a "Protosite"
Probably the smartest thing you'll ever do.
11. Create and Implement Real Site
After fixing all of your mistakes on the protosite, time to build out and test the real thing.
12. Finish Documentation
13. Go Live
14. Plan for Maintenance
I had fun making this. I hope you had fun reading it. I'm sure that there will be more of the motley crew to come.
Thoughts on the Redesign Process
A look the redesign process for the CSU, Chico home page.
The key to success for any large-scale Web site redesign is a process that works.
Four years ago, I put together a PowerPoint presentation on the Web design process for the Chico State home page. No one ever looked at it, but it's almost as useful today as it was then. With the benefit of four more years of experience, here's a revised version.
The Short Version (for the attention-impaired)
1. Get the right high-level decision-making organization in place
Before you can even begin considering doing a redesign of your home page, you need to have functional, authoritative structures in place for making decisions, and determining and enforcing standards. This should involve people at the highest level possible in order to ensure buy-in as the redesign progresses.
The role of high-level administration should strategic, not tactical, in nature. Their role should be in setting priorities, overall goals, and high-level messaging instead of micromanaging the design, information architecture, labeling, etc.
At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.
2. Assemble the Redesign Team
You can't actually conduct a redesign without competent people in responsible positions. Nor can you respond to questions posed by administration concerning the redesign without qualified people on staff.
A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):
At Chico State, we have the design/technical/IA/usability people under two closely related roofs, but lack a close relationship with the Advancement folks.
3. Define High-level Redesign Goals
This step really needs to be a conversation between the administration and the redesign team. The administrators bring an awareness of the university's top priorities, goals, concerns and issues to the table, while the design team brings knowledge of technologies, standards, best practices, other university Web sites, as well as a lot of experience with the Web redesign process that administrators may lack.
A strictly top down approach is likely to result in a site neither well organized, well designed or usable. A bottom up approach is likely to result in a site that lacks focus and fails to meet the top priority needs of the campus.
Example goals might include:
The biggest danger in undertaking a project like redesigning a campus Web site is scope creep. Scope creep will kill any project and can permanently damage working relationships on campus. It must be avoided at all costs.
One thing that has saved Web Services from endless trouble and heartache over the years is the fact that we invested a lot of time early on in developing standards (everything from design standards to file naming standards to accessibility standards to labeling standards).
Before you get into do a redesign, you need to develop a comprehensive standards document and make sure that everyone sticks to it. Some standards to consider:
You can't fix a problem if you don't know that there is a problem, and you still can't fix a problem you've identified if you don't know what your options are. So this step is two-fold:
To better understand your existing site, you should:
7. Profile Site Users
Real Web designers profile their site users; the rest of us are just posers. Profiling (in this case profiling is good) allows you to role play in a sense; to get inside the heads of your users and see your site from their perspective. This is vital for administrators and designers who have a radically different view of the campus Web site than a 17 year-old high school student looking for a place to go to college.
Some steps in profiling:
Now we start to get to the meat of the process.
To most people, this phase is the only phase of a redesign. Certainly, it is the most visible.
The purpose of testing a protosite is to give people a chance to use the site before it goes live. This allows you to work out a lot of bugs in design, IA and usability before subjecting it to the entire campus. Some universities do a public "beta" with the protosite in order to get a wider range of feedback. Protosites are easy to set up if you have a WCMS.
This is the final dress rehearsal before going live and the last chance to tweak designs, templates and content. This is where the QA and testing really kicks in to find bugs and problems, make sure that all pages are accessible, make sure that all pages work with supported browsers, etc.
You might consider making this site available to users as well for testing and feedback. Using a tool like Google Analytics, you can get valuable information about how people are using the new site even before it officially goes live.
12. Finish Documentation
Haha! Documentation is never finished. Documentation should have started no later than step 4 (Establish Standards). We use a wiki for all of our documentation and I can't recommend that approach highly enough.
Finally. Couldn't we have just hired a student to do a new home page and left it at that?
Actually, this should be done long before the site goes live. If you have a WCMS, maintenance will be part of that project's implementation plan.
The key to success for any large-scale Web site redesign is a process that works.
Four years ago, I put together a PowerPoint presentation on the Web design process for the Chico State home page. No one ever looked at it, but it's almost as useful today as it was then. With the benefit of four more years of experience, here's a revised version.
The Short Version (for the attention-impaired)
- Get the right high-level decision-making organization in place
- Assemble the Redesign Team
- Define High-level Redesign Goals
- Establish Scope, Timeline and Budget
- Establish Standards
- Do Your Homework
- Profile Site Users
- Develop & Test Information Architecture(s)
- Develop & Test Visual Designs
- Create and Test a "Protosite"
- Create and Implement Real Site
- Finish Documentation
- Go Live
- Plan for Maintenance
1. Get the right high-level decision-making organization in place
Before you can even begin considering doing a redesign of your home page, you need to have functional, authoritative structures in place for making decisions, and determining and enforcing standards. This should involve people at the highest level possible in order to ensure buy-in as the redesign progresses.
The role of high-level administration should strategic, not tactical, in nature. Their role should be in setting priorities, overall goals, and high-level messaging instead of micromanaging the design, information architecture, labeling, etc.
At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.
2. Assemble the Redesign Team
You can't actually conduct a redesign without competent people in responsible positions. Nor can you respond to questions posed by administration concerning the redesign without qualified people on staff.
A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):
- Project Lead
- Technical Lead
- Graphic/Visual Designer
- Information Architect
- Interaction/Usability Designer
- HTML Coder
- Programmer
- Web Server Administrator
- Multimedia Developer
- Photographer
- Accessibility Designer
- Writer
- Content Manager/Editor
- Communications Specialist
- Quality Assurance
At Chico State, we have the design/technical/IA/usability people under two closely related roofs, but lack a close relationship with the Advancement folks.
3. Define High-level Redesign Goals
This step really needs to be a conversation between the administration and the redesign team. The administrators bring an awareness of the university's top priorities, goals, concerns and issues to the table, while the design team brings knowledge of technologies, standards, best practices, other university Web sites, as well as a lot of experience with the Web redesign process that administrators may lack.
A strictly top down approach is likely to result in a site neither well organized, well designed or usable. A bottom up approach is likely to result in a site that lacks focus and fails to meet the top priority needs of the campus.
Example goals might include:
- Create new, fresher, more “hip” look
- Implement strategic goals for university web presence
- Improve navigation/site structure
- Make site easier to use
- Address accessibility issues
- Attract more new students
- Fulfill university core objectives
- Improve site performance
- Make site easier to maintain/change
- Enhance university image/branding
- Increase design consistency across entire site
- Implement new technologies (e.g., WCMS)
The biggest danger in undertaking a project like redesigning a campus Web site is scope creep. Scope creep will kill any project and can permanently damage working relationships on campus. It must be avoided at all costs.
- Establish a clear list of what will and will not be done
- Clearly define personnel to be involved (including timebase and responsibilities)
- Establish clear milestones
- Plan for content lag
- Write a detailed production plan outlining major goals, strategy, resources & timeline
One thing that has saved Web Services from endless trouble and heartache over the years is the fact that we invested a lot of time early on in developing standards (everything from design standards to file naming standards to accessibility standards to labeling standards).
Before you get into do a redesign, you need to develop a comprehensive standards document and make sure that everyone sticks to it. Some standards to consider:
- Coding (XHTML, CSS, file naming, etc.)
- Accessibility
- Security
- Graphic design
- Communications (branding, brand usage)
- Labeling
- Content (writing guidelines, etc.)
You can't fix a problem if you don't know that there is a problem, and you still can't fix a problem you've identified if you don't know what your options are. So this step is two-fold:
- Analyze and test your existing site
- Educate yourself as to what other sites are doing
To better understand your existing site, you should:
- Examine log files for usage and patterns (Google Analytics is great for this)
- Do a page structure analysis
- Create a visual site map to better understand the site’s existing structure
- Conduct usability testing of existing site (to identify specific problems)
- Audit existing content
7. Profile Site Users
Real Web designers profile their site users; the rest of us are just posers. Profiling (in this case profiling is good) allows you to role play in a sense; to get inside the heads of your users and see your site from their perspective. This is vital for administrators and designers who have a radically different view of the campus Web site than a 17 year-old high school student looking for a place to go to college.
Some steps in profiling:
- Categorize users (currents students, faculty staff, alumni, etc.)
- What are their characteristics?
- Demographics
- Browser versions used
- Internet access (broadband/modem)
- Develop personas for testing/designing purposes
- 6-8 should be sufficient
- Why personas?
- They personalize the users you are designing for
- Helps you visualize how each persona might approach the site
- Used in testing scenarios (how would Davin the art student use this feature?)
Now we start to get to the meat of the process.
- Examine what other universities have done
- Develop taxonomies
- Do card sorting tests
- Conduct task analysis for common tasks that have poor task modeling on current site
- Develop site maps
- Develop and test wireframes
- Conduct user scenarios to keep IA on track
- Get feedback from administration on IA finalists
To most people, this phase is the only phase of a redesign. Certainly, it is the most visible.
- Develop design concepts
- Refine into designs (must follow wireframes)
- Insure that designs stick to the architecture
- Get feedback (e.g., focus groups)
- Get approval (powers that be must sign off on the design)
The purpose of testing a protosite is to give people a chance to use the site before it goes live. This allows you to work out a lot of bugs in design, IA and usability before subjecting it to the entire campus. Some universities do a public "beta" with the protosite in order to get a wider range of feedback. Protosites are easy to set up if you have a WCMS.
- Create skeleton site (ising proposed visual design, navigation & site structure)
- Multiple alternate designs can be tested
- Conduct usability testing with real users
- Refine design and structure based on results
This is the final dress rehearsal before going live and the last chance to tweak designs, templates and content. This is where the QA and testing really kicks in to find bugs and problems, make sure that all pages are accessible, make sure that all pages work with supported browsers, etc.
You might consider making this site available to users as well for testing and feedback. Using a tool like Google Analytics, you can get valuable information about how people are using the new site even before it officially goes live.
12. Finish Documentation
Haha! Documentation is never finished. Documentation should have started no later than step 4 (Establish Standards). We use a wiki for all of our documentation and I can't recommend that approach highly enough.
- Style Guide (fonts, colors, page dimensions, banners, etc.)
- Production Standards Guide (file naming conventions, code standards, CSS, etc.)
- Page Templates (can be in WCMS)
Finally. Couldn't we have just hired a student to do a new home page and left it at that?
- Freeze all design and content
- Complete QA testing
- Plan announcement strategy (vitally important! - people HATE surprises)
- Consider phased, or soft, launch
- Have a “What’s Changed” page
- Transfer to live server
- Party!
Actually, this should be done long before the site goes live. If you have a WCMS, maintenance will be part of that project's implementation plan.
- Get post-launch feedback from users
- Fix bugs, serious problems
- Determine who is responsible for maintaining what
- Train departmental editors (make them familiar with standards, and with maintaining site integrity)
Monday, December 17, 2007
Analyzing the Future - Part 4 - Home Page Elements
An analysis of the placement of page elements on 18 newly redesigned college/university home pages.
This post is in essence a repeat of the research I did a year ago on the top 20 university Web sites. You can read that post here. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.
I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.
Most Common Page Elements
No major changes here except that features and events have become more popular, and "quick links" have become much less popular.
Page Element Placement
I've placed the results from 2006 on the left and from this year on the right. Overall, there were few earthshaking changes, but there were a few trends:
Identity/Logo
Search Box
Primary Navigation
Secondary Navigation
Main Photo
Other Photos
Feature Item
News
Events/Calendar
Quick Links
This post is in essence a repeat of the research I did a year ago on the top 20 university Web sites. You can read that post here. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.
I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.
Most Common Page Elements
No major changes here except that features and events have become more popular, and "quick links" have become much less popular.
| Element | Sites 2006 | Sites 2007 |
| Photos | 100% | 100% |
| Primary Navigation | 100% | 100% |
| Search Box | 100% | 94% |
| News | 85% | 83% |
| Top Banner | 90% | 78% |
| Secondary Navigation | 70% | 78% |
| Feature/Spotlight | 55% | 78% |
| Events | 30% | 67% |
| Quick Links | 45% | 22% |
Page Element Placement
I've placed the results from 2006 on the left and from this year on the right. Overall, there were few earthshaking changes, but there were a few trends:
- Identity/logo branding is more consistently placed in the upper left-hand corner
- Search box placement in the upper right-hand corner has become almost universal
- Primary navigation is less concentrated on the left side of the page, and is becoming more common on the top or upper right
- Secondary photos have become more common and tend to be concentrated below and to the right of the main photo
- Feature item area is increasing in size
- News and events continue to be concentrated on the lower left-hand and right-hand portions of the page (respectively)
Identity/Logo
Search Box
Primary Navigation
Secondary Navigation
Main Photo
Other Photos
Feature Item
News
Events/Calendar
Quick Links
Thursday, December 13, 2007
Analyzing the Future - Part 3 - Navigation
A look at at links and navigational structures used on newly redesigned college/university home pages. Topical organizations (About, Admissions, Academics, etc.) are most popular in the most prominent navigational areas, while audience-oriented links are most common in secondary navigational areas. The usual crud (Contact, Directory, Site Map) is most common in tertiary navigation areas.
Navigation (which links, what they're called, where they're placed, how they're grouped and organized) is probably the single most fascinating topic for me in reviewing Web sites.
There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.
Methodology
Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.
I've done other examinations of home page navigation (here and here), and I will revisit those. But for this analysis, I wanted a slightly different approach.
Home pages are complex entities, serving many purposes. As a result, most have more than a single navigational area (by navigational area, I mean a clearly defined area with a cluster of links and no other content).
For the purposes of this analysis, I've broken these navigational areas into:
Results
Primary and Secondary Navigation
Virtually every home page examined had navigational areas that could be interpreted as primary, secondary and tertiary, though there could easily be disagreements as to which was primary and which secondary. I made my best guess.
Far and away the most common navigational setup among these sites was to split the primary and secondary navigations between topical and audience-oriented organizations. Most common was to use the primary navigation for topical links and the secondary navigation for audience-oriented links, but a significant minority reversed this approach.
The most common topical links in the primary and secondary nav areas were:
Interestingly, "Programs" and "Colleges & Departments" (and equivalent terms), which I expected to be prominent, were not common at all. Programs appeared in the primary or secondary navigation only 4 times, and Colleges & Departments only twice.
The most common audience-oriented links in the primary and secondary nav areas were:
Tertiary Navigation
Tertiary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:
Number of Links
The average number of links in each of the three navigational areas was between 5 and 6, though there was a higher variation in the tertiary links because they were scattered around the page. The primary nav tended to have more links than the secondary nav, which was more concentrated at 5 or 6 links long.
Navigation (which links, what they're called, where they're placed, how they're grouped and organized) is probably the single most fascinating topic for me in reviewing Web sites.
There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.
Methodology
Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.
I've done other examinations of home page navigation (here and here), and I will revisit those. But for this analysis, I wanted a slightly different approach.
Home pages are complex entities, serving many purposes. As a result, most have more than a single navigational area (by navigational area, I mean a clearly defined area with a cluster of links and no other content).
For the purposes of this analysis, I've broken these navigational areas into:
- Primary navigation (usually the largest and most prominent navigational area)
- Secondary navigation (usually not as prominent, but still easily identifiable, often providing a contrasting navigational scheme to the primary; e.g., audience vs. topical)
- Tertiary navigation (the fine print links typically clustered at the top and/or bottom of the page)
Results
Primary and Secondary Navigation
Virtually every home page examined had navigational areas that could be interpreted as primary, secondary and tertiary, though there could easily be disagreements as to which was primary and which secondary. I made my best guess.
Far and away the most common navigational setup among these sites was to split the primary and secondary navigations between topical and audience-oriented organizations. Most common was to use the primary navigation for topical links and the secondary navigation for audience-oriented links, but a significant minority reversed this approach.
| Primary | Secondary | |
| Topic | 12 | 5 |
| Audience | 4 | 10 |
The most common topical links in the primary and secondary nav areas were:
| Link | # of Sites |
| About (university) | 16 |
| Academics | 13 |
| Athletics | 12 |
| Admissions | 12 |
| Campus Life/Student Life | 11 |
| Research | 9 |
Interestingly, "Programs" and "Colleges & Departments" (and equivalent terms), which I expected to be prominent, were not common at all. Programs appeared in the primary or secondary navigation only 4 times, and Colleges & Departments only twice.
The most common audience-oriented links in the primary and secondary nav areas were:
| Link | # of Sites |
| Alumni | 16 |
| Current Students | 14 |
| Faculty/Staff | 13 |
| Prospective/Future Students | 10 |
| Parents | 8 |
Tertiary Navigation
Tertiary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:
| Link | # of Sites |
| Contact Us | 12 |
| Employment/Jobs | 9 |
| Directory/A-Z Index | 7 |
| Maps | 7 |
| Site Map | 7 |
| Giving | 6 |
| Portal | 6 |
Number of Links
The average number of links in each of the three navigational areas was between 5 and 6, though there was a higher variation in the tertiary links because they were scattered around the page. The primary nav tended to have more links than the secondary nav, which was more concentrated at 5 or 6 links long.
Wednesday, December 12, 2007
Analyzing the Future - Part 2 - Page Dimensions
Looking at page dimensions of newly redesigned college/university home pages.
In my last post, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.
So what first?
Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.
OK, OK, I have two 1280x1024 monitors on my desk, but in general, I find that a browser window width of about 900-960 is the most comfortable for me. I HATE having to blow my browser up to full screen to see a whole page. Other people on campus have different, less correct, opinions on the matter. But hey, that's just my personal opinion.
So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.
This chart shows things a bit more visually:
Given an average of 20 pixels of horizontal chrome and 120 vertical pixels of browser chrome, effective viewport sizes are about 1000x650 (for 1024x768) and 1260x900 (for 1280x1024).
You can see that there are two width clusters, one around 800 pixels wide, and another around 1000 pixels. You would think that this reflects people designing pages for 800 pixel and 1024 pixel monitors, but all but one of the pages in the ~800 pixel width group are actually more than 800 pixels wide. So, something besides monitor size is driving that width decision.
Also note that with two exceptions, page heights are clustered between 750 and 1100 pixels, which, with browser chrome, is generally more than a screen tall on a 1280x1024 monitor.
At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.
In my last post, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.
So what first?
Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.
OK, OK, I have two 1280x1024 monitors on my desk, but in general, I find that a browser window width of about 900-960 is the most comfortable for me. I HATE having to blow my browser up to full screen to see a whole page. Other people on campus have different, less correct, opinions on the matter. But hey, that's just my personal opinion.
So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.
| Site | Min Width | Height |
| Rocky Mt. College of Art+Design | 795 | 1619 |
| Skidmore College | 805 | 1105 |
| IUPUI | 825 | 1022 |
| Our Lady of Holy Cross College | 825 | 920 |
| University of St. Thomas | 829 | 812 |
| Biola University | 839 | 1309 |
| Imperial College | 875 | 766 |
| Rice University | 925 | 1084 |
| North Carolina State University | 927 | 1103 |
| Loyola Marymount | 950 | 1052 |
| Portland State University | 984 | 798 |
| Notre Dame University | 985 | 1075 |
| University of Tennessee - Knoxville | 985 | 1085 |
| Cornell College | 1006 | 905 |
| Saxion Universities | 1015 | 950 |
| Denver Seminary | 1015 | 1050 |
| Ball State University | 1025 | 846 |
| Carnegie Mellon University | 1029 | 981 |
| Average | 924.4 | 1026.8 |
This chart shows things a bit more visually:
Given an average of 20 pixels of horizontal chrome and 120 vertical pixels of browser chrome, effective viewport sizes are about 1000x650 (for 1024x768) and 1260x900 (for 1280x1024).You can see that there are two width clusters, one around 800 pixels wide, and another around 1000 pixels. You would think that this reflects people designing pages for 800 pixel and 1024 pixel monitors, but all but one of the pages in the ~800 pixel width group are actually more than 800 pixels wide. So, something besides monitor size is driving that width decision.
Also note that with two exceptions, page heights are clustered between 750 and 1100 pixels, which, with browser chrome, is generally more than a screen tall on a 1280x1024 monitor.
At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.
Analyzing the Future - Part 1
Selecting 18 newly redesigned college home pages to analyze for trends in design, navigation, structure, content and technologies.
Today, we finally got 'official' word that the redesign of the Chico State home page is a priority project. That means that within three years we'll have a new home page!
Well-placed sarcasm aside, it's a good time to begin taking a fresh look at what other colleges and universities are doing with their redesigns. Not that we will necessarily want to copy them, but in order to be able to say (with authority), "these are the trends", "this is a common practice", "70% of the sites reviewed are taking this approach".
As some wise person said, "When decisions are based on opinions, he who yells loudest wins." And the point here - as it has been from day one of this blog - is to elevate the discussion above opinions to actual facts based on research (sloppy, biased and subjective research, yes, but still research).
Methodology
I went to the eduStyle.net site and selected redesigned sites to review based on the following criteria:
I ended up with 18 sites that met my criteria:
Today, we finally got 'official' word that the redesign of the Chico State home page is a priority project. That means that within three years we'll have a new home page!
Well-placed sarcasm aside, it's a good time to begin taking a fresh look at what other colleges and universities are doing with their redesigns. Not that we will necessarily want to copy them, but in order to be able to say (with authority), "these are the trends", "this is a common practice", "70% of the sites reviewed are taking this approach".
As some wise person said, "When decisions are based on opinions, he who yells loudest wins." And the point here - as it has been from day one of this blog - is to elevate the discussion above opinions to actual facts based on research (sloppy, biased and subjective research, yes, but still research).
Methodology
I went to the eduStyle.net site and selected redesigned sites to review based on the following criteria:
- Site must have been redesigned within the past year
- Site must have at least three positive votes ("My style") as of 12/12/07
- Site must have more positive votes than negative votes as of 12/12/07
- Site must be college or university main home page
I ended up with 18 sites that met my criteria:
- Saxion Universities of Applied Sciences
- Rice University
- Denver Seminary
- Indiana University - Purdue University Indianapolis
- Cornell College
- Imperial College London
- Loyola Marymount University
- Ball State University
- Carnegie Mellon University
- Notre Dame University
- Portland State University
- Biola University
- University of Tennessee - Knoxville
- Rocky Mt. College of Art+Design
- North Carolina State University
- University of St. Thomas
- Our Lady of Holy Cross College
- Skidmore College
Subscribe to:
Posts (Atom)
