The structure of a web page matters

It’s not just about making the page look pretty but the actual HTML behind the page has meaning. The initial thought when charged with updating or maintaining a web page is to initially write up the content in Word, get everything finalized, approved and then copy and paste it into the content management system (CMS). This is a great process but a lot may get lost in the translation from Word to HTML.

It’s all about context

The web is comprised of a collection of individual pages, these pages are linked together and the way visitors get from page to page makes up the users experience. The user experience of your site is not interacting with just a single web page but when they visit dozens if not hundreds each time they set out to accomplish a task. Moving from page to page on your site the visitor is presented with not only the primary content for that page but also the supplemental information surrounding the content. This gives the visitor motivation as they click on links and confidence they are going to eventually end up at the right spot. Writing content without this context is like writing in a white box. You don’t know what else the visitor has seen or is seeing while they are reading your page and can miss some great opportunities to motivate them. With that context though you can make some smart decisions about how long, short, prominent or urgent your copy is. Drafting your page in the CMS and previewing as you go is the more appropriate way to author web content.

Quality of HTML structure matter

While drafting your page in a CMS you will notice hitting Enter will probably create some space between the current sentence and the next, this defines where one paragraph ends and starts. Already the HTML behind your writing will start to describe the structure of your page. The paragraph <p> tag shows there is a separation in ideas from one block of sentences from the next. It is not merely just a way to add spacing in your document.

The next think you would probably do is group these paragraphs under specific topics, just like the larger text in this post. These are called headings. In HTML there are six levels of headings <h1> – <h6>. The central idea of your page should be at the top and marked up with an <h1> (the most important heading) tag then each idea below that should be marked up with the next level heading. Titles within the same idea can have the same level designation so you are not limited to only using it once on your page. This creates a hiarchy of nested topics on a single page. It relates paragraphs to titles and titles to their larger ideas. Think of it like a table of contents in a book, chapters then topics then sub topics then paragraphs.

Underlining isn’t emphasis

Beyond the base structure of your page you may want to call attention to certain sentences or words. Underlining is not an appropriate way to do this on the web. Generally underlines mean the text is a link to another page. Often visitors will try to click on underlined text thinking they are links, especially if they can’t find what they are looking for. If it doesn’t click through they might end up even more frustrated. The preferred way to add emphasis is to make something italic or bold. In HTML it will be denoted as <em> for “emphasis” or <strong> to stand out. This describes your desire to make this text stand out. Where a <u> (underline) tag would not, it just describes the style of the text.

Click here

Eye tracking studies have shown when a visitor is scanning a page they are initially looking for heading, bold items and underlined links. Imagine you land on a page with good heading and structure but every link just says “Click here”. You would have to actually read the sentence before to figure out what you will actually get when you click here. The better option is to link the most descriptive words in the sentence to to the document or page behind it. That way when a visitor scans a page the links are called out and they have appropriate context around them without additional reading.

Images

Without images the web would be boring, it would look like never ending encyclopedia pages. Adding images to the content of your page not only breaks it up but is often necessary to display certain information. On the web each image is actually a separate document and your page just references the location of that image and is pulled in separately.  Making sure the image is resized before uploading it is important. I’m not going to go into a deep discussion about image optimization on the web except to say images that are resized before had to fit the needs of the page not only load faster but are also crisper.

Tables

CMS’s get a bad name because they restrict the content creator to just a small portion of the page and basically sandbox the style of that section from all available style sheet definitions for the site. I bring this up because all too often if you want to have publish an image on the right side of the page with a caption it is easy to revert to a table to position and format the image. It works but this is not the point of an HTML table. Tables are meant for tabular data with rows, columns and headers. This is a sticky issue because it takes coordination between the web team and the content contributors to get the appropriate styles in place for the images and captions.

When it doubt, keep it simple

As you add content to a page and it starts to get complicated try breaking the page into multiple. You website visitors don’t care how complicated your page is, they care about finding the information they need. Most importantly of all your pages must be scannable, it doesn’t matter if they have to scroll, visitors scroll. Using the basic elements above is the simplest way to make clear, concise and usable web pages. Your visitors will thank you.

Related posts:

1. Need a Link Building Strategy? Create Content!
2. Spring Cleaning: Finding your lost sock. The guide to content audits.
3. Best practices for training content contributors

Delivering Happiness first thoughts

Upon hearing the title of the book I was excited because every thing I have seen Tony do comes from his drive to be real and make a difference. He doesn’t sugarcoat things or think in a theoretical terms. His examples are all real world and from his own experiences, this makes things even more relatable and applicable.

Tony’s writing style is a little like mine, he was not formally trained as a writer so often his grammer is a little off, I found it okay because the style is very conversational and easy to read. The book was a personal narrative about how he got to where he is now, his dreams, successes and mistakes. My hope was to learn something that can be easily transitioned to higher education.

My hope for at least one thing was an understatement, the book is filled with examples and personal stories that can be applied to any industry. The overall take away from the book is happy employees make a happy company. This has been talked about over and over but Tony goes on to prove it.

If you have ever purchased anything from Zappos you know the feeling Tony is trying to convey. Free standard shipping is the norm but often you are upgraded to free overnight shipping, I know it makes me smile when ever I see that pop up. If you have ever had to return something you know how dead simple they make it, It’s almost easier than the Amazon’s one click checkout. And if you have a questions about anything calling, emailing or chatting with them will feel like you just got a new shopping buddy. They don’t just answer questions and hang up, they give opinions and talk to you like a real person. It’s this type of caring that makes an experience worth spreading.

What higher education can take away

In most cases higher education is a completely different beast than the corporate world but where it is similar is in the people. Regardless, the experience a student has can make a break how they view an institution, which in turn changes how they talk about it with their friends and family.

As students we would love institutions to make us happy, empower us and really feel welcomed. Any institution that doesn’t have clearly defined values or mission that everyone can undertand and stand by is going to have a hard time giving that student an experience they are looking for.

Often employees don’t know any better, they are not trained to think about the student as a customer. I know a few of you will disagree with the statement but I believe it is true, students can go anywhere they choose. They are currently at your institution because you have a product they are interested in paying for.

It’s time to break the knee jerking fear of being human. I have seen it far too often, students working the call center in admissions reading off a script, following the steps and passing a student off to some unknown department because their screen told them to. Zappos has a communication policy that states “Be real and use your best judgement”, they let their employees be human and trust they will do the right thing. Administrators biggest fear is some sort of “incident” where the blame gets put on them, this paralyzes them to take the safest route possible which in turn produces a sub par experience for the students. If Tony ran a higher education admissions office who knows what could happen. One thing I know for sure is the administrators wouldn’t be able to turn a blind eye  from the true culture of the institution.

Administrators can learn a lot from this book and Zappos in general, it’s not all about numbers, it’s about doing what is right for the students. Don’t sell your institution to someone who isn’t a good fit, their experience will spread far too wide because of it. Be real and embrace the potentially “ugly” side of your institution and don’t be afraid to take risks. As long as your intentions are good there is always something to learn from the experience.

With what seems to be more and more institutions popping up overnight the choices for students are becoming harder. Fully online institutions are complicating things even more. As students are interacting with your institution at a younger age be sure to always deliver happiness at every interaction. Even if they don’t end up applying they will remember it and spread it to their friends and family.

Win a free copy!

Like I mentioned above, Tony also sent us a copy to give away. One of the many things I like about Zappos is their Core Values. These values run through every decision their employees make and are engrained into the atmosphere of the place. Winning a copy of the book is easy, just answer the following question in a comment before midnight on Wednesday, June 9th and we will pick one comment at random to win the book!

Which of the Zappos core values do you think is most important for a higher education institution to embody and why?

That’s it! We will announce the winner on Thursday, June 10th via @eduGuru on Twitter and on the blog.

Related posts:

1. Book Review: Inbound Marketing the Book
2. Book Review: Problem Solving 101 – A Simple Book For Smart People
3. Book Review: World Wide Rave by David Meerman Scott

What is a content inventory?

A content inventory is a document, most often excel, which is an index of every page on your site. Now at an institution it may be one document per site which is still acceptable but may lead to complications later. Having it all in one just makes it easier to scan and spot duplicate or unnecessary content.

I will admit, the process is painful from a cold start but once you get rolling you can easily see why it’s worth it. Below I started a base document for a generic institution. I suggest starting with the columns below as the base minimum, you can always add more later but you don’t want to leave these ones out.

Necessary Columns

• Page ID
• Page Title
• URI
• Owner
• Last Updated
• Goal
• Accomplishing Goal?
• Visits
• Content up to date?

Download an Example (xls)

Inspecting the content

The goal with looking at every page is to determine first if the content is relevant and up to date. Determine a goal for every page, the primary audience and actually read the page to determine if it is accomplishing the goal.

List out who actually owns the content on the page. Ultimately who’s responsibility is it to provide the content. Not every page is going to be in the marketing department. Seeing which chunks of content belong to who can give you a complete understanding of which areas are overworked and who is being delinquent.

Next list out for the past month how many visitors each page received. This will give you a good understanding how important it is to make sure the content is up to date and relevant. Or may sway your decision to remove the page.

Lastly make sure you give an honest answer for how up to date the content actually is.

Remove and edit

The less content you produce the easier it is to manage. If you can cut 10-20% off in the first round you are doing good. Remember to think of the point of each page, do you really need three paragraphs to get to the point if can you do it in just one? If you have five pages that all talk about the same type of financial aid why not combine them?

After you trim the fat it’s time to get down to business. Read each page one after the next to make sure they all follow the same tone, energy and flow. Make sure the calls to actions are findable and lead the user to be successful. Make sure related information is helpful and within reach. Always ask yourself, where does the user need to go next? What would they do if they had a question right now? How can they request more information? Be sure not to leave them at a dead end, it may be the only thing they remember about your site.

Who is your web strategist?

With potentially hundreds of content editors across your campus who is keeping them in line? Do you have a central content strategist to get them all beating to the same drum? If not, why not? In most cases a dictatorship doesn’t work, with hundreds of pages published per day it would be too much for one person to review and edit them all. I have found a partnership is the best long term solution.

Having one department, usually marketing or communications with oversight is necessary. Otherwise what is published will sound like it’s coming from eight hundred different directions and can impact how a prospective student sees your institution, very disjointed.

A single published and understandable content strategy document should be the central source for content contributors to look to when publishing. It should spell out the tone, voice and best practices for each audience. The document should be a helpful resource, not a burden for editors. Make sure it is human readable and understandable.

Rinse and repeat

This process may take you a few weeks or months the first time but the second and third it should only take a fraction of the time. Make sure it gets on the calendar and the time is allotted so it doesn’t sneak up on you.

In the end it will increase the end user’s experience and their impression of your institution. Not to mention having a single document you can look to when someone asks to add something to the site. With a full overview of how things fit in context you can make wise decisions based on the real situation.

Related posts:

1. University Twitter Accounts: Spring Cleaning
2. Best practices for training content contributors
3. So What if Butler Lost Monday Night! A BIGGER Lost Marketing Opportunity Occured!

I go through a few quality and consistency checks almost every day. Typically it’s the student assistants who are the worst offenders but even seasoned web workers make mistakes. It’s good to keep everybody on their toes and make sure the whole team (even if it’s just two of you) are aware when someone makes a mistake. It’s an opportunity for everyone to learn, not a platform to criticize.

Below are some testing patterns I use on a daily basis based depending on the stage of the project.

Navigation / User Experience

First and foremost I click every link possible. The LinkChecker plugin for Firefox is a must have but be careful, I’m not just looking for 404’s, it’s blank or incorrect content that I look for.

If the site is a redesign I make sure in the navigation there is also references to all the old URL’s for each new menu item. We do this as part of the navigation process so when the site is ready to launch we can create the redirect list quickly and painlessly.

For every one of our projects we create a list of user goals. These are the primary actions an ideal user should take for us to call them “successful”. This could be as broad as clicking to view the program list or as detailed as getting them to sign up for an open house. Regardless, for each user goal I create a step by step list of the pages and screens they would see to get to that goal. This way we can see them compared to each other and determine where we can optimize.

Design

I love the five second test, I think it’s a great way to get immediate feedback from someone who has no vested interest in the site. It gives an objective view from an outsider with no repercussion of their thoughts and feelings, it’s as honest as you can get. Before showing mockups to a department or client I like to run a few of these, just to see how outsiders react and often it gives us data to back up our own opinions.

I then bring up the mockup and the actual coded site side by side and check to see if any details are missing. I’m not looking for pixel perfection but at the very least looking for the same colors, relative spacing and feel.

Code

I typically have every different type of browser I can get my hands on open all the time. I <3 Spoon.net. From doing so much front end development I get use to the browser quirks, know how to spot them and know how to get around them. As IE 6 is fading it doesn’t mean you don’t still have to support it, it just means you support it in a different way. Make sure there are no peek a boo bugs or double margins. Developers should know better.

If there is an address or location making sure the HTML is correctly formatted with microformats. Although it might not be immediately apparent why they should be there, in the not so distant future they will be connecting information all over.

Making sure Google Analytics is set up and installed on every page prior to launch. If this is an existing site, make sure the same analytics id is installed on the new site. You want to have all the historical data you can get your hands on. In addition make sure all you filters and user goals are setup beforehand. You don’t want to loose those first time visitors when your new site gets announced.

Accessibility

Using the Webmaster Toolbar for Firefox the first thing I do is turn off CSS. Looking at the pure hierarchy of the page to make sure it makes sense. H2’s are nested under H1’s and skip to navigation and content links are in place and working.

I then turn javascript off. Making sure everything still works including any flash areas and rotating promotions. If there are expanding areas or embedded video I make sure there is still a way to get to that content or download an alternate version of the video.

Lastly I try to navigate the entire site with my keyboard. A user should be able to go from area to area in a logical order without having to back track or loose track of the selected item. I make sure I can get to the sub menu items, I can click back to the home page and lastly making sure any javascript that moves elements changes my selection focus to the new items. I don’t go into all the WAI-ARIA guidelines but as many as time allows.

User Experience

Lastly I take a look at the whole user experience. What happens if someone hits a 404? Are they presented with a pretty page with navigation intact and a friendly error?

Using that redirect list I make sure to type in a few random old URI’s to make sure they forward to the right pages on the new site.

I also make sure any promotion areas, news or event lists have enough content in them to last for the next few weeks. This way as the department is fixing odds and ends they notice after launch they don’t have to worry about the small items that move over time. It’s won’t be cool two weeks in to see the site with blank areas where news or promotions should be.

Final Thoughts

Every one of our departments want a new site and they want it up as soon as possible. This is totally understandable but there is no need to sacrifice quality for speed. As Karlyn posted earlier this week, “Ultimately it’s what you deliver that matters.” Keep your quality standards high, so what if the department heads get a little annoyed, your users will thank you.

Photo by mollyjolly

Related posts:

1. Live Blogging AMA Higher Ed: The New Power: Social Media Marketing Strategy for Higher Education
2. Large Sites and Information Architecture
3. Don’t lose your identity – Create an effective print style sheet

Content experts are all around campus

You’re not going to find a single department that knows everything, don’t even try to look. The key to successful Web presence is giving the people with the knowledge training to publish pages. Many, if not all of these people won’t have the word “web” in their title or job description but I am sure it is where the “other duties as assigned” comes in to play.

Why direct editing access is good

The web is not like writing a book, it’s flexible, changeable and breakable. From the State of the University Web Department survey I did a few months ago we learned just over 80% of all institutions are using some sort of content management system. I hope most of these institutions are allowing department input of content. Even if they don’t have publish ability, the more farmed out content the faster information can be updated.

Training topics all content contributors must know

Here are a few basic things that are part of the training I do for secretaries, student assistants and faculty who will be publishing web content. I train in a group setting or one on one. Of course the one on one is always the best but the key in either case is making sure everyone understands something before moving on to the next step. It’s useful to have a helper jumping from computer to computer if the group is large. In addition if you ask them to bring in a content update they want to see done it’s a great way to get them involved with real pages.

Make sure they have a basic understanding of the web

Not everyone can use a content management system. A few things I look for first is to see if the user knows what it means to link to another web page (seriously). Also I make sure they understand how an image is embedded on to a page. Basically do they know they are two separate files and a web page doesn’t work like MS Word. It’s also good to get them away from the design of the site, make sure you focus on the center content column only.

Start with the goal of the web page

Diving deeper into theory about why people even visit a web page is key before you put any tools in front of them. Make sure they understand every page has a goal and a next step. Then what I like to do is have them all do a five second test. Just go to the site, pick a random test on their homepage and see what people remember. It gets them thinking about scanning and action items. Typically headers and images are the only things they remember, this is good.

Cutting down content

This will be the most difficult for faculty to grasp, but hopefully after they understand that each page has a goal and the five second test they will begin to understand the web is different than a published paper.

• The user needs just enough information to be successful. Anything more or less can turn them off.
• Short paragraphs, 2-3 sentences each broken up by headings as anchors for the users eyes.
• Only use underlines for links and it’s okay to bold things in the middle of sentences for emphasis.
• Last but not least if you are naming off more than two things in a sentence it might work better as a bulleted list.

When to use PDF’s

PDF’s are for printable documents and official forms, that is it. You will probably get a lot of resistance because it’s so easy to update content in a PDF and just upload it. The best approach I have found to combat this is to train on a computer that doesn’t have the PDF plugin in the browser. A lot of office computers already have it installed so PDF’s often look like web pages, but this is not the case one every computer. Getting the download/open dialog box should be a reminder the PDF’s are documents and not Web pages.

Understanding file management

File naming is important not only from a user perspective but also for SEO. I use some basic rules, keep filenames to 1-2 all lowercase words. If you have to use a space use a dash(-) instead of an underscore (_) because it’s easier to read, less technical. Use the most descriptive words possible for a file and never put a year on a file unless that file will be out there forever (ex. annual reports or publications). It’s easier to replace the scholarship-application.pdf each year than to remove the old scholarship-2009.pdf and relink all the new pages to the scholarship-2010.pdf.

Resizing images before uploading

This discussion can get lightly technical as you go into bandwidth and page speed. Be sure not to lose anyone because the point should be to make each web page as fast as possible. You don’t want a 2.5 meg image loading on the homepage when someone is viewing your site from a mobile phone. Most content contributors don’t have a copy of Photoshop on their computers so I always recommend the site Picnik.com, it’s free and web based. There are a few others out there but I have found Picnik to be the most user friendly, not to mention it creates pretty decent looking images. The goal with images it to make sure the browser is not doing any resizing, it will produce the best result from a user and bandwidth standpoint.

Paste as plain text from Microsoft Word

I have yet to find a WYSIWYG editor that handles MS Word content gracefully. The best approach it is train everyone to paste as plain text and do all your formatting in HTML. It will lead to the least amount of frustration and produce the best end result. It may take the user a little longer to format but during that time they may realize they can cut out half of the content and still accomplish the goal of the page.

Leave them with a training manual

We created a small training manual in house, it’s only 4 pages that goes through step by step the basic content editing functions of our CMS. How to add/edit/delete a page, news items, image galleries and faculty profiles. It is written in plain english and not just the vendor provided CMS manual. We always leave this will each content contributor after training. It has been a huge help to reduce the number of phone calls and emails.

Your tips, tricks and war stories

That is my basic process when training content contributors and now I open it up to you. What are some tools or methods you have used or have seen to create successful content contributors?

Photo by acpl

Related posts:

1. The Content Editor’s Missing Manual
2. Spring Cleaning: Finding your lost sock. The guide to content audits.
3. Need a Link Building Strategy? Create Content!

Personally I think it’s great they are making people aware of the fold. And working in a higher education Web office we hear “everything needs to be above the fold” all the time. I’m sure we aren’t the only group that hears this but we do hear it a lot.

An example

I have been meaning to write a post and show off the heatmap of a landing page we’ve used recently and this seemed like the perfect opportunity. The campaign was mainly image building and was targeted nationally and to various age groups. The goal was to get visitors to learn a little something about our institution and then click one of the action items on the right. Explore our programs, request information or schedule a tour.

Google does a great job putting the fold into prospective but I have always said that people do scroll if you give them a reason to. This page is a good example of that, the fold is just below the thumbnails so we made the “In the News” title was visible to someone with a 1024×768 screen. Taking a look at the heatmap you will see the majority of clicks were above the fold except the Wayne Bloggers image, the second most clicked link and it is quite a bit down the page.

Heatmap of test page

We use a service called CrazyEgg to track visits and clicks. In total this heatmap contains:
1035 clicks from total 3021 visitors. The clicks are from both both links and background areas.

Now compare that to the same page with Google’s visual hierarchy. The blogger button is at about the same distance down as the “Give Now” button in Google’s example. 30% of visitors could not see the button but it still accounted for 11% of all the clicks on the page.

A few things to notice

• Most of the clicks did happen above the fold
• Offered Programs was the most clicked link with 15%
• The blogger image at the bottom was the second most clicked with 11%
• People like to click on faces
• Don’t put links you don’t want clicked on the site (ex. our header top menu)

Looking at these results we learned a lot about how an average user reacts to elements and positioning. We run these heatmaps every time we test a new design and continue to refine our designs based on the results. If you have not done heat mapping on your site before I encourage you to test it out at least once, you might be surprised.

Related posts:

1. Quick Observations About Browser Resolution Design
2. HootSuite: Twitter Tool with actual Business Value
3. eduWeb 2009 LiveBlog – Web Wide Architecture

First and foremost I wanted to thank everyone who took the time to fill out the survey. The feedback from this has been amazing and I know everyone has been anticipating the results. These results will help others shape and make informed decisions about their web environment. I have a feeling most of you are already scrolling through it right now, I don’t blame you.

For each question I included a mix graphs, tables and some commentary about the results or question. If you want more information about a particular question or clarification just ask. In addition the questions that required a little cleaning up to be grouped I included the download for that cleaned up information. Also at the bottom of the post is a link to the complete cleaned up results in case you are interested.

How large is your institution?

Overall the range of institutions by size was evenly distributed except for the 1,500-4,500 column which double any of the other sizes.

What is your current title?

The titles were all over the place, the top six were are shown here but the “Other” column is huge. You can download the full list of titles with totals in CSV format.

What is the landscape of your web environment?

I was quite surprised to see almost 50% of the institutions have a centralized web environment. But you cannot ignore the 30% that are completely decentralized. Reading through all the responses the trend was a need or want to centralize control as you will see in later questions.

If centralized, how large is the full time staff?

Not surprising these number are small but a quarter of the institutions have a web staff of one or two! It is amazing across the board 77% of all institutions with a centralized web environment have a staff of five or fewer. Download the results in CSV.

If centralized, how is priority determined?

The question of priority is always a sticky subject at an institution. Typically it is who makes the most noise gets bumped to the top of the list. It is surprising to see that the majority of central web staff has some pull out there and is able to say no. Hopefully focusing on the sites that effect the end users the most.

Roughly how many full time staff institution wide work on all the web sites?

Yet again the low numbers dominate this question with one slight variation. The “100″ mark which creaped into the top results. It seemed to be a popular number for institutions had a decentralized content environment. My guess it is a generalization but it still needs to be noted. Download the results in CSV.

What is the state of a content management system (cms) at your institution?

The almost 45% of institutions that have a central CMS that everyone must use, this surprised me. It might have to do with the number of smaller institutions that took the survey because I know getting a large institution on board with one system unless it is a mandate is almost impossible.

If you use a CMS, how was it adopted?

Personally it was nice to see how many people were using an open source CMS. Obviously administration feels more comfortable purchasing a CMS with the possibility of support to ensure the site is running its best at all times. But open source and building in house give an institution the most amount of flexibility.

If your CMS was built elsewhere, what is the name/company of that CMS?

Quite possibly the most popular question in this survey. Everyone wants to know what CMS every other institution is using. A few stood out, Cascade Server and OmniUpdate tied for first spot but there are plenty of “Others”. Be sure to check out the full list to see them all in relation to institution size. Download the results in CSV.

What department controls your institutions home page?

Marketing by far has the most control over institution homepages. This comes up quite a bit in the open ended question later in the survey. I will give you a hint, staff agree marketing should stay in control of the homepage.

Does your institution have a home page committee?

I thought this would be overwhelming yes but I am glad to see how many departments have direct control over their homepage. Committees in general tend to slow down advancement and removes focus from the end user. The only downside to direct control is sometimes broader goals may get overlooked.

When was your last home page redesign?

It is great to see how many institutions have redesigned recently. Although 4+ years is still on the map, thinking about the technology 5 years ago, IE6 and 800×600 were dominant. I hope those institutions have been realigning along the way.

How was your last home page redesign handled?

Again, another response that slightly surprised me. I initially thought that vendors would be a larger part of the homepage redesign process. It has been a trend in higher education that we laugh at the idea of bringing in consultants even though they have competent staff on hand. It is good to see over 60% of redesigns were accomplished in house.

What is the primary programming language that runs your institution’s Web environment?

After cleaning up the data a clear winner emerged, PHP and the LAMP stack. ASP and ASP.NET come in second but the gap is pretty noticeable. Download the results in CSV.

If tomorrow you could change one thing about how your institution’s Web site is managed what would it be?

This and the next open ended question took the bulk of the time to clean up. What I did was read every answer and summarize the central idea into a few words. Making sure I was consistent through the results I then grouped them by their main ideas to come up with the graph above. The overall theme for what to change was centralizing the control and adding the resources needed to make that happen. Download the results in CSV.

What is the one thing you would not change about how your institution’s Web site is managed?

With this question, after summarizing the results a few major themes shined through. The things people did not want to change was the centralized control, their CMS and decentralized content control. Having a centralized management of how sites are implemented but then giving the control of the content to the experts was the biggest take away from this question. Download the results in CSV.

Wrap Up

The unedited data will be available to anyone who wants access (institution names removed of course), but a cleaned up version is available here. I am making sure this data is available because it belongs to all of you, not me. Please remix it, analyze it, produce your own results and point out if I overlooked anything.

Through this those process I learned a great deal. The thing that stuck out the most was the openness and willingness of the higher education community to share and learn from each other. We are all traveling same path trying to get to the same goal. With a little help that goal can be achieved and expanded much quicker. Thank you all again.

Photo by jeffedoe

Related posts:

1. 5 min survey: State of the university Web department
2. Reining in the outliers for a university-wide cohesive Web presence
3. [Guru Survey] Are Classes In Your Toolbox?

You can make a well branded and copy written ad and spend hours on your landing page. Making sure to catch every user possible and track all your conversions but it can all be destroyed by the context you ad is placed in. An example of this was brought to my attention last night.

An Example

The twitter account @420revolution posted this status:

Oakland University Supports Marijuana Use http://bit.ly/4joFGJ

Which leads you to a Digg.com article with the same title and description:

Self Explanatory

You finally end up at a YouTube video of a screen cast which shows an Oakland University commercial with the words “The following clip is brought to you by Oakland University”. What follows is a video by HowCast explaining “How to legally obtain medical marijuana.” Here is the video:

The tweet was eventually re-tweeted a few times and dugg a handful of times. Luckily this example was not a PR nightmare for the institution and it was on a site like Hulu which does have a good grasp on the content they push out. But as site start to push out more user generated content be prepared for the sorts of things an ad could endorse.

The Lesson

Obviously Oakland University did not place this ad on this particular video but the more online ads are being dispersed on sites with wide ranges of content it becomes impossible to control what context your message is being displayed in.

I am not sure the advertising policy or options Hulu gives to its advertisers as far as targeting. But this would apply to any site your university advertises on that could have questionable content or user generated content. Where does the line get drawn between promoting yourself and endorsing a product/service/opinion you have no control over?

Your Thoughts

Have you come across other examples of university advertising #contextfail? Or have policies/guidelines at your institution that only allow you to promote in approved spaces?

Related posts:

1. Taking the idea of a cohesive Web template in a slightly different direction
2. Reining in the outliers for a university-wide cohesive Web presence
3. Reining in the outliers for a university-wide cohesive social media presence

Looking at the example above, (I am not picking on Duke, I just choose them at random) most higher ed sites end up this way. Not accounting for the print style the spacing is all off, unnecessary items get printed and paper is wasted, usually the user get confused. There is a simple way to prevent this, setup a print style sheet.

How to make a separate print style

In HTML:

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

or in CSS:

@media print { ... }

What is important to keep on a printed page

• Wordmark/Name
• Department name
• Page heading
• Central content
• Footer/URL
• Department contact information

What is not as important to keep

• Navigation
• Images (other than content specific)
• Colors
• Keeping the same pixel perfect layout

Some basics about print style

Make the content 100% – Since you don’t know what size paper or how your users will be printing you pages it’s best to change everything to 100% width. This will us the maximum area possible and not leave blank sections on the paper.

Use a print friendly wordmark – Most university Web sites have their wordmark in the top left of every page. Sometimes the web version may not be appropriate for print so using an image replacement technique will yield the best results for the end user.

Get rid of anything unnecessary – display:none is your friend, use it for anything that isn’t directly related to the content of the page. Navigation, background images, promotion images

Include the URL and date – This one is not necessary but could be helpful especially for news items or anything that changes frequently. Although it is enabled by default having the URL, date and any other important information on the page may be helpful.

Compare the above example to the one at the top of this article. UNL has a completely different feel when printing. They take everything in account and tailor everything to the print medium. 100% width, friendly wordmark, removing the menu and focusing on the content.

Additional Resources

Although it is just starting I stumbled across a site dedicated to the print versions of Web pages. http://printfancy.com/ – “showcases and honors websites and companies that take the extra step to maintain their brand across all areas”

• Print Different – Eric Meyer
• CSS Design: Going to Print
• Printing the Web: Solutions and Techniques

Related posts:

1. Speaking for the Trees…
2. Need a Link Building Strategy? Create Content!
3. Case Study: Email Still Beats out Print and Social Media for Engagement

In all the discussions I realized how similar but yet very different all the web offices are. They range from large and centralized to small 1-2 person teams. I summed it up in this tweet:

“Major theme from #heweb09: There are a lot of great people underfunded, understaffed and underappreciated doing some great stuff!“

I wanted to try and get an understanding of the landscape of higher education web environments to see what works, what doesn’t and how we can all improve. I created a survey for anyone who’s primary job is working on any part of an institution’s Web site. It should not take more than 5 minutes to complete.

The survey will be open until October 25th so spread the word to any higher ed web professionals. The more responses the better the results and analysis.

Survey closed. Stay tuned for results.

Related posts:

1. [Results] State of the University Web Department survey
2. Guru Interviews: Shelby Thayer, Penn State University
3. [Guru Survey] Are Classes In Your Toolbox?

In this post I’ll focus on using a horizontal grid, vertical grids are not as popular so ill leave them up to you to explore.

So what is a grid?

Grids exist for the single purpose of bringing uniformity to a traditionally nonuniform environment. The horizontal grid consists of a set of columns with left and right margins that create gutters. Page elements fit within these columns and gutters.

Using a standard grid allows for fast prototyping, wireframing and designing. By having a set of element widths it gives the designers constraints and the developers a global stylesheet to work from.

The above screen shot is from the University of Nebraska-Lincoln and it shows how nicely the page elements fit into the grid. You would be surprised at the number of sites that use this same grid structure.

Calculating a grid

Step 1 is to determine the site width. 960 is the standard width but you can choose anything you wish.

Step 2 is to choose how many columns you want. The most common numbers are 12 or 16.

Now the tricky part, each column has an equal left and right margin. A typical 12 column grid has 10px on each side which leaves you with a 20px gutter.

Determine your column width by taking the:

(960 px page width – 240 px total gutters) / 12 columns =  60 px wide columns

Reasons to use a grid

• Designers love constraints, no really, they do
• Consistency without mandating a template
• Developers don’t have to start from scratch
• Breaking the grid can make things stand out
• Gives you the upper hand when working with demanding departments

Simple steps to start using a grid

• Make a list of your most common page elements
  • Header, Menu, Search, Main Image, News, Events, Contact Info, Promotions, etc.
• Dividing up the page into the desired number of columns and gutters
• Place the elements on the grid
• Using a framework
  • Design frameworks for Illistrator, Photoshop, InDesign..
  • CSS templates to get the structure up fast
• Will soon become embedded in the culture of the designers and developers

Downsides of using a grid

• They are constraining
• CSS frameworks have been known to be bloated
• Changing the grid after sites have been launched can be difficult
• Can lead to non-semantic naming conventions

Some frameworks and resources

• 960.gs
• YUI Grid CSS
• Blueprint
• Grid Overlay Bookmark
• Grid CSS Gallery

Photo by adactio

Related posts:

1. Spring Cleaning: Finding your lost sock. The guide to content audits.
2. Redesign once, increment forever.
3. Inspiring Design for Higher Ed

A New Doctype

HTML5 brings a doctype we can all remember, its short, simple and doesn’t take up unnecessary HTTP space.

1

<!DOCTYPE html>

That’s it! Set it, forget it and move on.

Semantic Structure

If you have developed any web site in the past few years and care about accessibility, lite markup and structure, your document probably looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
    <body>
        <div id="header">
            <h1><a href="/">My University</a></h1>
        </div>
        <div id="navigation">
            <ul>
                <li>Future Students</li>
                <li>Current Students</li>
                ...
            </ul>
        </div>
        <div id="content">
            <h1>Welcome</h1>
            <div class="photo"><img src="..." alt="..." /></div>
            <p>...</p>
        </div>
        <div id="footer">
            <p>...</p>
        </div>
    </body>
</html>

HTML5 builds on that same very structure but now instead of having a bunch of div’s to contain your content you have these tags to better explain what you’re marking up.

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>

The new structure would look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
    <body>
        <header>
            <h1><a href="/">My University</a></h1>
        </header>
        <nav>
            <ul>
                <li>Future Students</li>
                <li>Current Students</li>
                ...
            </ul>
        </nav>
        <section>
            <h1>Welcome</h1>
            <aside><img src="..." alt="..." /></aside>
            <article>
                <p>...</p>
            </article>
        </section>
        <footer>
            <p>...</p>
        </footer>
    </body>
</html>

Quite a bit cleaner and even reduces the overall size of the HTML document.

But wait, there’s more!

• <time>
• <figure>
• <dialog>
• <mark>
• <canvas>

I’m not going to go too far into these tags except to explain how they’ll allow you to further refine our page content.

Time

Uses a common time format to mark up the human readable time you display on your site.

1
2

Published <time datetime="2009-08-22T09:30:00-05:00">
Saturday, August 22, 2009 at 9:30am</time>

Figure

Finally a way to distinguish between a photo and an image which has data in it.

1
2
3
4

<figure>
 <legend>Fall 2009 Enrollment Data</legend>
 <img src="/images/enrollment-2009.png" alt="Enrollment Data, Fall 2009">
</figure>

Dialog

Building on the same structure as the definition list <dl> which is great for FAQ’s, the <dialog> tag is used to mark up conversation. For example a chat transcript or interview.

1
2
3
4
5
6
7
8
9
10

<dialog>
 <dt>Student</dt>
 <dd>Where can I find information about scholarships?</dd>
 <dt>Counselor</dt>
 <dd>That information is available at http://scholarships...edu/</dd>
 <dt>Student</dt>
 <dd>Thank you so much.</dd>
 <dt>Counselor</dt>
 <dd>If you need anything else just let me know.</dd>
</dialog>

Mark

This is an interesting one, it’s kind of like the <strong> tag but is more about increasing the relevance of the content than the importance. Think of it as a “highlighter”, you probably won’t use it often but it might come in handy.

1
2

<p>Despite the drop in applications <mark>the average
ACT score for applicants has risen to 32</mark>.</p>

Canvas

The <canvas> tag is pretty amazing, it has been touted as a flash killer (probably not) but right now I just don’t think the support is there yet. I am not going too deep into the <canvas> element because there are already so many great tutorials out there but I will mention it is going to significantly raise the level of user interaction especially with visualizing data.

Audio and Video Tag

Probably the most exciting addition to HTML5 is the native <audio> and <video> tags. It is about 1000% times cleaner than the current <object> and <embed> tags that you have to use today.

1
2

<video controls src="campus-tour.ogg" id="campus-tour">
Video decoder not found.</video>

It will be amazing one day when we don’t have to rely on flash to serve video or audio. The browsers will do the interpretation automatically. Currently not very many browsers support the <video> tag, but if you want to use it you can follow this example and serve up video for everybody. It is a beast though.

I am not sure about anyone else but I think the next best thing about the <video> and <audio> tags are native javascript manipulation. For example attaching an event to the end of a video, it would be great to give the watcher some next steps like donate now or visit campus.

1
2
3

campus-tour.addEventListener('ended', function () {
 alert('video playback finished');
});

Compatibility

This is all great until you look at it in IE and Firefox 2 (bug). There is a solution, but it required javascript. My suggestion is to use this hosted HTML5 enabling script. It basically does this:

1
2
3
4
5
6
7
8

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>

It creates the elements so IE knows about them and you can style them. Notice also there is no “type” attribute in the <script> tag above? It is not necessary in HTML5, all scripts are assumed to be type=”text/javascript”.

On another note now that these elements are created its best to define them as “display:block” since they will by default be inline.

Validating HTML5

There are a few validating services out there. Of course the W3C has its validator and it works pretty good. There is also the Validator.nu (X)HTML5 Validator. Both I believe are experimental so use at your own risk.

Should you be using HTML5 now?

Yes, absolutely. Even if you don’t use it on a production site start playing around with it. I have yet to review a site on EDU Checkup with HTML5 markup but I know the day is coming soon, it’s only a matter of time.

HTML5 is not going away so get your coding hat on and get to work!

I would love to get your feedback, thoughts and concerns about using HTML5. Have you started implementing with it at your institution?

Image credit to vincentgallegos

Related posts:

1. Tracking outgoing clicks with Google Analytics
2. Large Sites and Information Architecture
3. Facebook Privacy and Admissions Counselors: Know Your Settings

There are many ways to promote your faculty, just giving their contact information, linking to their personal or university web sites or give them the ability to control their own profiles with some constraints. Faculty seem to be pretty particular with their information and control of their content which can make promoting it quite difficult.

Why are Faculty so Important?

Talking to graduate students (especially Ph.D.) about why they choose the university they did it comes down to two key factors, faculty research and grant availability. What happens if that information is not available online? Prospective graduate students could easily overlook your university. Although the faculty do a pretty good job of publishing and talking at conferences, why not throw in some SEO and self promotion?

At Wayne State University we have ~2,800 faculty in over 350 degree programs and since our department does not oversee all the web sites at the university its hard to keep track of them all. I have put together a list of base information that every faculty should have on their site or profile page. I have also included a base profile from one of our faculty to the right.

Base Profile Information

• Name, Title
• Contact Information
• Office Hours
• Homepage, Blog
• Biography
• Degrees and Certifications
• Academic Interests
• Courses Teaching
• Recent Research
• Recent Publications
• Recent Grants
• In the News
• Photo
• CV Download

Motivating Faculty

Motivating faculty can be hardest part, but what I’ve found to be the best motivator is their peers having a better looking and a more complete profile. Basically competing internally to look the best. Giving them the tools to update their own profile and the fields that make them feel good and sell your university at the same time can go a very long way.

Motivating them to keep it updated is yet another story. I recommend sending an email after the end of each semester with a link to edit their profile. If you are lucky enough to tie your profiles into course management software it might be more apparent and likely they will update it, especially if they don’t have to remember a second username and password. Otherwise a nudge each semester from the dean with a nice note thanking them for a great semester seem to work well also.

So how does your institution promote your faculty?

I think this is the most overlooked piece of the web puzzle, there are many content managers to keep track of pages and files but what about faculty profiles? Is your faculty profiles stored in a central database and linked to the appropriate departments? Or do you even have trouble keeping track of your faculty’s externally hosted web sites? Does your institution offer web hosting for your faculty and have you had success or failure with it? What university site have you seen that does a really good job promoting their faculty?

Photo by: Paul Chenoweth

Related posts:

1. Negative Facebook Comments: @#$% Me
2. 3 Ways to Build Knowledge Base #FAIL
3. When advertising on Hulu (pre-roll ads) goes wrong

reCAPTCHA

Solve a CAPTCHA and help digitize books. reCAPTCHA is the human extension of a project designed to digitize old textbooks. While scanning often there is words that the ORC scanner cannot recognize. These words are then pumped into a central repository where they are randomly displayed on screen for a human to decipher. Each reCAPTCHA has two words, one known and one unknown. If you get the known word right it is assumed you got the unknown word correct. If at least two people get the unknown word correct then it is marked as deciphered. Simple concept and for a great cause.

The biggest complaint about reCAPTCHA or CAPTCHA in general is the complexity of the images produced, sometimes almost unreadable by humans (especially if you have used ticketmaster.com). At least reCAPTCHA has the ability to refresh and grab a new pair of words or even read the words aloud. If you are forced to use a CAPTCHA, reCAPTCHA is your best option in my opinion

The biggest issue in my book with reCAPTCHA is Javascript is required to show the image. Although most bots don’t use Javascript neither do some legitimate users. Not only ones with disabilities but also ones on mobile devices.

Simple Questions

What is 3+2? If you can answer a simple math problem you must be human. This method relies more on someone comprehending a sentence and placing the right string in the form field. It can range from simple math to just repeating a word.

It’s great because the only programming needed is to validate a field is submitted with specific information. The down side is when someone cannot answer the question. Making questions too difficult or obscure can result in frustrated users.

Hidden Field

Bots rarely render their forms in a browser so hiding a field with CSS (or Javascript) allows you to determine if the form was submitted without being looked at. Only someone in a browser would not see a specific field, so if that field has content its likely filled in with a bot and you can ignore it.

Bots often fill fields with junk or things that look like text and try to match up the “name” attributes with almost valid data so “first_name” might result in an actual name. But they cannot resist a good type=”text” field since it allows them a great deal of space to inject HTML or BB code. Hidden text fields work great with they are type=”text”. Downside of this approach is someone viewing your page with CSS turned off might get confused to see a field with no label just sitting there.

Check Referrer

Did the form submission come from your site? If not do you care about its contents? After a form is submitted checking where it was submitted from is as easy as $_SERVER['HTTP_REFERER'] with PHP and Request.ServerVariables(“HTTP_REFERER”) with ASP (I think, I despise ASP).

Bots often will pull down your form and submit it remotely which creates a blank referrer. No referrer often means the form was not submitted through your site. The plus side of this method is the user does not have to do anything extra, the downside is you have to be careful when throwing away data, it might be legitament.

Confirmation Page

Is this information correct? A confirmation page is probably one of the best ways to supply a form to a user and verify if they are human while still making them feel comfortable with the information they submitted. Bots almost certainly don’t analyze the “Thank You” page so if your form goes to a confirm page where they have to click another button to confirm and submit their information it will more than likely not be compromised by a bot. The only down side to this method is the user has to click a Submit button then a Confirm button, there is a likelihood you loose someone in the middle.

Just Deal With It

You could also do what most people do and just deal with it. Make sure your data has to go through an approval process before bring posted publicly or sent via email. This will ensure a human verifies the information on the form was submitted by a human. Too bad this is the most effective and time consuming option, there is no better way to spot a human than with a human (currently).

Some forms like login’s don’t interrupt your daily routine when captured by bots but a full inbox all the time can really get on your nerves. None of the methods above are foolproof so some spam may still get through but any one of the above is better than nothing. Don’t be left with an open form for bots to clog the internet, inbox and databases with.

Lets not forget about accessibility

While all these options are fine and dandy the first two require extra work on your users end. This throws the red flag to make sure they are accessible. Opting for an option that does not require any extra work on the users end is best but can lead to a higher spam rate. Weigh your options and determine which method is best for you, each form is unique and one solution cannot work for all situations.

Main image from XKCD.

Related posts:

1. The Content Editor’s Missing Manual
2. Redesign once, increment forever.
3. The Three Pages That Every Site Should Have

CMS’s come in a million different shapes and sizes but their primary goal is to mash up a template with the content for each page. It doesn’t matter if you use a single template for every page (unlikely and ill advised in my opinion) it still has to be combined with the writers content.

Content editors can be your worst enemy (sometimes)

The difficulty comes when you cannot control the elements and formatting that a content editor puts in the CMS. As a designer or developer have their ideals, it rarely turns out that way.

I have seen web content editors who are not web writers by trade, they are usually secretaries, tech support or just the most tech savvy person in the department. And often they do not edit web pages every day, so when they do maybe they forget to hit the “Paste as Plain Text” or “Paste from Word” button and now their site is filled with a bunch of HTML junk.

Are you planning for all this junk?

I recommend a two prong approach, first using HTML Tidy to clean up the HTML on the server end before it even gets to the browser. Now this will create some clean code but it will also give the user a misrepresentation of what they may have thought they put in. But it is for their benefit so make sure its brought up during CMS training.

The second is to make sure you style ALL HTML elements that could possibly be entered. A designer or developer would hate to get caught with some naked <dl>’s or <address> tags.

I have been using the XHTML, CSS Style Guide by Ross Johnson which allows you to import a CSS style sheet and see how it reacts to every HTML element out there (I am pretty sure he covers all of them). It can work one of two ways, either view the style on his site or you can just copy and paste the HTML into a new page on your site and style away!

Planning ahead

Planning ahead for these types of things can avoid embarrassments down the road when you have an under or over active web writer on your hands.

Last but not least I cannot end without mentioning CSS resets which are either loved or despised by developers out there. Worst comes to worst you can use Eric Meyer’s CSS Reset or Yahoo YUI Reset to obtain a completely flat style less content area to build upon. Although it will add some weight to your CSS pages it will give you the finest control of all your elements.

What’s your strategy?

Are you a designer making sure you account for all this content? A developer endlessly styling tags hoping you don’t forget any? Or a writer trying to clean up your Word pasted HTML?

Related posts:

1. Feeling Naked: A Tale of the Disappearing Facebook Fan Page
2. Website Optimization: The Why and How (Part II)
3. The Content Editor’s Missing Manual