If you do any adaptive layout at all focus on the desktop and the smartphone sized screen. Add an extra style sheet for the small screen and make modifications to at the bare minimum remove any requirement for :hover states and position everything vertically. This way at least items can be clicked on and the users isn't forced to pinch zoom every time they visit a new page. Category: Visual
Having easter eggs on your site can make your visitors feel special as the stumble on them. An easy one is using keyboard shortcuts. Although not every user is going to find and use them, the ones that do will probably be delighted. Category: Code
Having URL's that describe the content on the page are just as important as the title of each page. "Human Friendly" URL's not only give the visitor confidence they are on the right page they also give search engines a better reason to index your pages. "/academics/accounting" is much clearer that "page.php?id=9847". Everything on your site should build confidence, even the URL. Category: Code
It's a pet peeve of mine that designers and developers miss low hanging fruit. The lowest of them all is increasing the clickable area for actionable items. If the goal is to get the user to click make it as easy as possible. Requiring the user to think for even just a few milliseconds about where to click may be just enough to loose them. Try it for yourself, install heat mapping software on your page, you'll be surprised by the results. People click on some crazy things. Category: Code
For main body copy make sure you're using an appropriate line-height. "Appropriate" is a relative term. Here is a good resource: http://www.pearsonified.com/2011/12/golden-ratio-typography.php Category: Visual
Consistency matters. When a user starts browsing a website they are really looking for trust. If all of a sudden they land on a part of the site that has a different style they have to re-learn to trust the quality of the content. Trust isn't automatic, you have to earn it. Make it easy on yourself and your users, don't force them to continuously regain your trust. Category: Visual
Don't try to re-invent the wheel, there are a lot of user constructs already in place on the web and you should rely on them. Using a standard link style, move effect or way to share content builds familiarity for your user and confidence so they know what to expect. The more confident your user is the more likely it is for them to take action. Category: Visual
The higher your social media icons are on your page doesn't mean more people will click on them. We are beyond the time of wondering if a company/institution is on social media. We now expect it. Category: Visual
Text in images without appropriate alternate text is like trying to read a book printed with invisible link. It's not going to help you to exclude the population without the decoder glasses. Category: Code
A favicon is a commonly overlooked element of any Web page. It may be something small but when someone has 25 tabs open it quickly allows them to identify and make a connection with your institution. Category: Code
If you are planning to use typeface replacement always make sure you choose an appropriate font stack. This will allow users without javascript to be able to see a similar font that is as close as possible to the desired typeface. It also will decrease the amount of change the user sees when the font replacement happens. It won't look like a drastic change, but a slight improvement instead. Category: Code
Breadcrumbs are not meant to be primary user navigation. Breadcrumbs are a trail of where you have been and meant to orient a visitor who landed on an interior page. Category: Visual
One of the best and cheapest ways to get insights in to how visitors are interacting with a page is to install heat mapping software on the page. Using a tool like CrazyEgg will show how much people scroll and where people click even if the clicks are not on links. These are two things Google Analytics can't show you. Category: Visual
Everything on your website matters, even the elements under the hood. A beautiful inside inspires a beautiful outside. Neglecting the code of your website may can impact the long tail visibility of your pages. Category: Code
Hover states on elements not only give your website a feel of texture. The feedback tells the user that the element is press-able. It can also catch the users eye as they move their mouse across the site. Something they may have overlooked can jump out if there is a slight color change. One note about mobile, with touch interfaces the hover effect does not function, so make sure you have another way to denote links from non-clickable items. Category: Visual
If you're going to embed videos on your homepage or as a side promotion item within your site make sure when a visitor clicks to view the video they can watch it in an appropriate size. If you're space is less than 400 pixel wide it is better to use a static image screenshot of your video which links to the full version than to force someone to watch it either really small or full screen. If you can employ a lightbox technique when viewing that is even better. Category: Visual
If you are going to use photos with news items make sure the photos make an impact for your visitor. Too small and the image won't be useful. Too big and they will take attention away from the title of the event. Creating a balance is essencial to visitor success. Category: Visual
If you want to make an impact with numbers make sure they actually stand out visually. Don't let other visual elements interfere with the impacting numbers. Specifically ordered and unordered list styles. Category: Visual
Using a grid system is a great way to keep your design organized. It takes the guessing of widths from your designers and gives the constraints they can work within. It also gives your developers a standard in which to measure everything. Having odd widths scattered throughout your website can distract your visitor from the real calls to action. Keep it simple, there is no need to reinvent the wheel every page. Category: Visual
Always be designing for the next step. Every page on your website should be designed around where the user should be going next. Dead ends mean lost opportunities. Not only with the visitors current browsing session but it cuts their experience short. You couldn't imagine leaving a perspective student hanging on the phone, email or in person without asking if you could help them further. The same applies online. Category: Information
When possible use the built in browser functionality. The native browser functionality is not only quicker but will work with any device that interfaces with the browser. Creating middleware with javascript to accomplish the same action could potentially lock users out of using that functionality. Category: Code
Dotted underlines may look nice because they are not as jarring to the eye as straight lines but they have another quality about them you may not realize. Users have been trained to "skip" over links with dotted lines because far too often they are used to denote pop-over ads. Although they may look great on your website, their use may have a negative effect with your users. Category: Visual
Consistency means reliability, reliability means trust. Just like any product you use the more consistent it is the more you trust and use it. This also goes for your website. Category: Information
It is important to follow the brand guidelines of external companies that you promote on your website. I am thinking social media in particular. There are so many variations of the Twitter logo that it can be difficult to identify it ata times. Adhering to the companies brand standards will ensure your visitors see and identify with that brand more quickly. The last thing you want to do is make your visitor stop and have to think about something on your page when they should be focusing on accomplishing their goals. Category: Visual
Shadows done right can make a world of difference in an website. Far too often shows are used as a way to create "depth" but are kept at the default Photoshop settings which end up making them look bland. A true graphic designer can enhance any site by adding the right amount of shadow to create the feeling of depth and bring a website to life. Make sure you are not using the defaults, everyone and their brother can tell. Category: Visual
Always, always, always validate your form data before checking against the actual database. You should never trust the user, imagine every single person is trying to take advantage of your server. This means having a whitelist instead of a blacklist for content. This means sanitizing all data and casting it to the correct type for the database. It also means, most importantly turning off all public error reporting on production. If the user (or bot) finds an exploit, errors shown on the screen only give them more insight in to their next move. Category: Code
Every page on your site should have a primary navigation, this is where your visitors will look first for direction. There can be other menus on the page, but make sure they don't interfere with the primary navigation. Once the visitor makes it past the homepage, the local navigation should take over as the primary and the university overall navigation should take a back seat. Think about each page individually as a landing page, and not as a top down view of your institution's structure. Category: Visual
Every field on every form should always have a label pointing to it. The label is the context around the fields purpose. Text on top or to the left of a field is great but if it isn't wrapped in a "label" element then it means nothing. Category: Code
Javascript should always be included at the bottom of a page. Javascript can only act on the Document Object Model (DOM), the HTML makes up the DOM. Without the HTML being loaded and rendered by the browser the javascript has nothing to work on. Avoid loading the files too early and potentially slow down the rendering of the page by the browser. It might seem like milliseconds, but those add up and your users notice. Moving your javascript to the bottom of the page will decrease visual loading time which in turn will result in more clicks by your users. Category: Code
There are quite a few philosophies about which links on a page should open in a new window and which should stay in the same. The largest group believe all links should open in the same window no matter their destination so the user can control their experience. Others believe that only links that are on a separate domain should open in a new window. And the smallest segment believe any link with a different subject should open in a new window. No matter which philosophy you follow, stick to it and be consistent. Personally I am in the first camp. Category: Information
It is important to keep your visitor engaged with your website but that engagement must happen on their terms, not yours. Making anything move on a Web page should only happen if the user has acted on something to make it happen. There are a few instances when it is ok to move elements without the user taking action but they must first be justified with real user data. It comes down to the golden rule of the Web, treat users as you wish to be treated. Category: Visual
Creating an internal API is a great way to keep data consistent across campus and off campus. Having a single source of data to read and write from keeps everyone on the same page. Duplicate information isn't just hard to maintain but more importantly can confuse visitors. Category: Code
Ensure you have enough contrast between background colors and text. This applies to all areas of your website, not just the main content section. Use a tool like http://snook.ca/technical/colour_contrast/colour.html Category: Visual
Visual design extends beyond the look of your overall template, visual hierarchy of content plays a big role in user experience. Navigating to a page is only half the battle, even less if the user uses Google, finding information on the page is the real reason the page exists. Ensure each page has an appropriate header structure, paragraphs, and lists. Then make sure the calls to action are prominent and go to relevant locations. Category: Information
CSS frameworks are great for keeping a consistent codebase throughout multiple sites but should just be considered a starting point. Once the initial site is setup, pull out the elements needed and get rid of the rest. Some frameworks can carry a large overhead that just isn't needed once the site goes to production. Category: Code
Try to think of a website that you visit purely to admire the design and don't pay much attention to the content or the goal of the site. I have a feeling you can't think of any or a handfull if you're a Web design and you browse the Web for inspiration. Believe it or not, this is exactly how your visitors see your site. You're site can have a few flaws and no one will notice. As long as the content is relevant, up to date and they can easily navigate to it. Don't get hung up in the thick of the thin details. Category: Visual
"Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn't room for any interface debris or content of questionable value. You need to know what matters most." - Luke Wroblewski Category: Visual
If an HTML element isn't being displayed on initial page load or isn't required for accessibility, it shouldn't be returned in the initial HTTP response. Any items that are interactive or timed should be built after the fact in a separate request. This will allow the initial page load to be as light as possible and give search engines only pertinent information to index. The user doesn't need to download the extra bits or search engines don't need to index the empty div tag that your site uses to "close" a hidden dialog box. Category: Code
Every page on your site has a primary audience. The primary audience of each page may not align with the majority of traffic to that page, and that is ok. Tailor each page to that primary audience and make it easy for them to see and complete actions. If there are options for a secondary or internal audience it is more acceptable to make them take a few extra steps to get to their customized information since they already have an impression and vested interest in your institution. They have a higher threshold of tolerability. Category: Visual
Your entire website should work with and without a mouse. Not everyone uses a mouse and keyboard to navigate the web and you shouldn't penalize people who browse it differently. On a mobile device you might only have touch ability so hover doesn't work. On a mobile phone, depending on the software or hardware keyboard, you may not have an "return" key. As long as you don't rely on a specific piece of hardware your site should work fine on any device. Think progressive enhancement, not graceful degradation. Category: Code
No matter what CMS you use there is no reason to put a link to it or your login page from your homepage or footer. It doesn't add any value to your page and is just another item to distract your user. Secondly, exposing what CMS you use can open your site up to potential security exploits that you may not even be aware of. It is better to be safe than sorry. Your internal audiences should bookmark the login page. Category: Information
No one likes filling out forms, including yourself. Try to fill in as much information or require as little information as possible to increase your conversions. Try auto detecting the city, state or zip of a user and pre-populate the fields. Maybe include a "hide optional fields" link on the side that reduces the form length. You already have the user on the page, make it just that much easier to take the next step. Category: Information
All content links should look like links as someone is scanning down the page. The user shouldn't have to hover their mouse over text to determine if it is a link. In addition a hover state allows the user to see that an action will happen when they click. Lastly and probably the most important and equally overlooked is the :visited state. Help your users out by coloring visited links a little differently so they don't end up on a page they have already seen unintentionally. Category: Information
Having events on your homepage is important, but what is more important is how well those events are targeted to the audience of your homepage. Too many institutions use their homepage as the "catch all" and try to appeal to every single audience. A lot of people do go there, but which ones are interacting? Every institution is different but my bet is those prospective students. Try to target your events to them and track their effectiveness in click throughs, RSVP's and time on site. You might be surprised about what you find. Category: Information
Release early and release often. Too many departments and schools wait till their website is 100% perfect before launching even though the site is 99% done, that last 1% could take an extra two or three months. For your user's sake they probably aren't going to notice those few flaws. As long as the content is there that is what the users are focusing on. Just think, remember when iOS was released without copy and paste? Everyone survived just fine till they added it. Category: Information
If you have RSS feeds on your site it is important to get a grasp on the number of readers and the change over time. Using something like Feedburner to keep track of these statistics is a good idea. It also has click through analytics and can automatically add Google campaign codes to every link. This will give you even more context when looking at your website Goals in Google Analytics. Category: Information
If you plan to promote your social media presence on your website make sure you have enough information in the account (Facebook, Twitter, Flickr, YouTube, etc) to allow a visitor to see at a glance in 5 seconds if your account is worth following. You only have one opportunity to make a first impression and you want to make sure you give the best one you can. Only having published messages without any responses to people or a lot of questions out there that don't have responses should be avoided at all costs. Category: Information
"display:none;" is not an appropriate way to hide elements from visual view, it also hides them from screen readers. The more appropriate way to hide an element is to move it from visible view and set the overflow to hidden. "text-indent:-99999em;overflow:hidden;" This way the user doesn't see the item but search engines and screen readers can. Category: Code
If you have an address on your site, I am sure you have plenty of them, make sure they are marked up with hcard microformats. This will allow machines to use the standard HTML on your page in a machine friendly format. It is also a great idea to link to the location on your campus map or at the very least your favorite mapping service (Google Maps). This will allow your user to use the content right away and not copy and paste which can be difficult on a mobile/tablet device. Category: Code
When possible use read images and original graphics rather than clip art and stock photography. You would be surprised at how many sites use the same graphics. Users have a high attention to detail and can spot those stock photos faster than you think. Real and original photos and graphics show a level of authenticity that really good stock photos just cannot accomplish. Category: Visual
How prominent are faculty on your website? You would be surprised how many students are interested in what faculty are working on. Try increasing their visibility and see if it impacts how long people stay on your site. Category: Information
Even if something looks visually correct on the frontend of a website, the backend shouldn't be ignored. To the masses of people out there who don't know your web address yet they are discovering your content through search engines. The easier you can make search engines determine what content is actually important on your site the higher it will land in the results. Do this by correctly labeling links, headers, images and paragraphs. Category: Code
Remember, not everyone has blazing fast internet as you are accustom to at your institution or home. There are still a lot of people with either slow or unreliable connections. Ensure your site and applications are fault tolerant when it comes to dropping a connection or slow response from a device. Nothing it more annoying to an end user when they have to re-do tasks because an error message pops up and the user looses the work they did. Category: Code
It is important to state your accessibility guidelines on your website. Most sites have a link to them on the footer. Make sure the link is clear, readable and labeled correctly. If you use an image to denote the link please ensure it has the appropriate alternate text attached to it. Without that alternate text someone using as assistive technology may not know it is even there. Category: Information
It's a good idea to routinely use the search on your institution's website to experience what your end users are presented with. Looking at analytics can only tell you half the story. It's great to know your top three search terms are "Admissions", "Housing" and "Financial Aid" but what really comes up when you search your site? The results might surprise you. Category: Information
Institution colors don't always transition gracefully to the web, often substitutions are made because colors look different on a screen than print. Be sure the colors are not calling unnecessary attention to sections of the page where it isn't needed. Also, make sure to pass all color combinations through a color contrast checker to ensure the meet your appropriate accessibility guidelines. Category: Visual
When a visitor is lost on our site the first thing they look for is the search box. Most institutional sites have it located in the top right of the header. As students are bouncing from site to site they are going to look in that location first. If your search isn't there at least make sure it is easy to find. Having the form right on the page is another plus. If the visitor has to click and load another page to get the search box you will increase the likelihood of them leaving your site. Category: Visual
The value of a "site index" depends on the quality of content in it. Previously, the site index was used as a way to get visitors to content without going through the navigation. Now users are far more likely to search the site instead of scanning an A-Z index of pages. Take a look at how often your site index is being used and what your visitors are clicking on. Don't let it become a dumping ground of links and assume your visitors actually find it useful. You may realize a site index isn't necessary at all. Category: Information
Using existing code published to the web can save a lot of time but also introduces a level of unknown into your site. Without a full review of the code you won't know exactly what your site is doing, how well it will run or if there is an exploit. Open source code often has more eyes on the source which can reduce exploits and increase optimization. Use your own code where ever possible, otherwise review all code even if you think it is safe because "others are using it". Category: Code
If you allow users to interact and change the state of things on your site, like tabbed content, set their preferences so next time they visit everything is where they left it. Even bouncing between pages on a single visit can get annoying if the state of the page is always reset. Help your user succeed, don't put up unnecessary road blocks. Category: Code
Background images can be used to enhance or distract your users from the content on top of it. Simple colors get out of the way quickly while patterns often distract from the content on top. Large background images can be used to give a feeling to the site that small photos on the design can't do alone. Category: Visual
According to the E-Expectations report, both students and parents first click on academic programs (38% students, 42% parents) or admission information (24% students, 21% parents) on institution websites. If you are trying to decide where to spend your dollars and/or time beefing up your site, doesn’t it make sense to start there? Category: Information
Defining a consistent link style across your site is important to your visitors. This allows them to learn what to look for just once instead of each time they visit a new section of your site. Category: Visual
Clean URL's are more than just short URL's. Make sure your URL's are human readable and rid of abbreviations. Words within the actual URL play a heavy role in search engine optimization and allow for visitors get orient themselves before looking at any of the page content. There is a fine line for URL length, too long and the user only sees half the URL, too short and it won't make sense. Craft your URL's wisely. Category: Information
If you combine multiple content areas in to one space that are controlled by a user action, make sure that user action is prominent enough. The user must be given a hint that there is additional information hidden behind an action. Without that hint the user will overlook potentially important information. If the action is to click a tab, make sure the selected tab is highlighted. Category: Visual
If you give the user the option to increase or decrease the font size of the page make sure it changes the entire page, not just the content area. Typically someone who needs assistance viewing the web will have their own setting for optimal viewing. Providing the option to increase the font size is a nice consideration, but just make sure it is applied evenly. Category: Code
The easiest way to get a visitor's attention is to place a face on the page. Eyes are attracted to faces and tend to click on promotions with face more than pure text promotions. Don't overload your homepage with faces, use them sparingly. Category: Visual
"You should be able to answer "why" for every piece of content on your website. If you can't, then it shouldn't be there." ~ @epublishmedia Category: Information
Use movement on your landing pages as sparingly as possible. It's one thing to use color or shape to call attention to elements but if items move without your visitors taking action their attention on other elements is lost. We have formed a relationship between automatic moving elements and ads. We have also become very good at ignoring ads online. If something truly is important that every visitors should see, don't make it look like an ad. It will be the first thing they tune out. Category: Visual
Images with borders stand out more than ones floating on the page without them. A border gives an image a defined space for the eyes to move from one element to the next. The border doesn't have to be very dark, even a light border can make the image pop out at the user and give a sense of purpose on the page. Often an image without a boarder can look like an afterthought. Now with that being said it doesn't mean every image needs a border, that would be overboard. Use them sparingly to get the most out of your images. Category: Visual
Your website should have ONE search box. The search box should be at the top of the page and visible. There is no need to have more than one "Site Search" box on any given page. "Filter" input areas are different as long as they react to the content on the page immediately. If there is a desire to have a "Search Entire University" and "Search xxx Sub site" you should be doing it with one input box and radio buttons for the user to choose the scope of the search. Multiple search boxes confuse the user and reduce confidence in their use. Category: Visual
Make sure that all the links on your website can be visited without a mouse. Try tabbing through your homepage and get to some basic information on an interior page to see how easy or difficult it is. Often the links that are selected don't look highlighted. Try using the a:focus CSS selector to change the style of a anchor to show the visitor which one is selected. Category: Code
If you are going to use a large photo as the background for your website allow the visitor to view all by itself. Don't force them to right click and view background image, instead make it part of the experience of your website. I know there are some great photos of your campus out there, don't let the main content of the page frustrate the visitor that wants to see more. Category: Information
There is no need, absolutely no need to have a link to your CMS administration area on the footer of every page. Not only does it add a link that doesn't serve the user but could potentially open your site up to vulnerabilities. The CMS you use may be pretty secure but giving just anyone the front door to edit anything on your .edu domain is dangerous. You should only make the URL aware to the selected few who would be using it, outside of that there is no need. Category: Information
If you have images on your site that link to another page make sure that page has some relevance to the photo. Often campus shots are very beautiful and visitors click to learn more about the location or people in the photos. Having this information available will entice the visitor to explore the site more. Category: Information
If you end up using drop downs on your site make sure they open with CSS instead of javascript to avoid delay when the visitor mouses over. The delay can cause the user to click on the main item when they could have selected a sub menu item. It also makes the site appear slow to respond which leaves a negative impression for the user. Category: Code
When listing out degree programs be sure to offer various ways to search and group them. Prospective students may just be looking for a certain level of degree or one in a specific field. While current students and faculty may know exactly what school or college offers the degree. Your list should be both functional and discoverable because you never know who is looking at it. Category: Information
Tracking outgoing links is important, they can give you insights into high bounce rates, traffic to resources you don't oversee and calls to action. Tracking these clicks are possible through the event tracking in Google Analytics. It is important to segment the clicks from "page views" (the old hack way of doing it) since you don't want to skew your actual page views. Category: Code
If you are going to use @font-face or any other font replacement technique be sure that your font definitions are well stacked. By well stacked I mean having the specialized font work for the most capable users and then have a list of fonts in order of looking the most like the desired font but have decreasing levels capability. Having a well stacked font list reduces the font change when the final font loads completely. Category: Code
Having student video testimonials is a great way to engage prospective students. Make sure they are short, engaging and their call to action is clear. Users are more likely to see and click on a person's face. Make sure the call to action doesn't have a big play button over the students face. Category: Visual
Building multiple sites will different designs can really impact a visitor's experience as the move through your website. Designing on the same grid can help make that experience as smooth as possible. Although the sites have different looks the spacing makes them feel similar. Category: Visual
If you want something to stand out on your design use a color in that spot only. This will get the users attention but so use it sparingly. You should only have ONE item on your page that is out of "brand" color at a time. Any more will confuse and muddy up your design. Category: Visual
Don't forget that accessibility is not just a link you put at the bottom of your homepage, it's something to live by. The more you understand about what makes your site accessible the easier it is to meet and exceed standards and delight anyone using this site. The most overlooked easily remedied accessibility needs are things like using appropriate headers, using link names instead of "click here", captions on videos and alternate text on all images. Category: Code
Using icons in association with links is a great way to call attention and increase scan-ability. Use them sparingly though, the most icons the less they stand out. Category: Visual
If something is clickable make sure you always change the visitors mouse to a hand when they hover over it. Anchors will do this by default but sometimes actions are placed on a div or other element with javascript. As the visitor moves their mouse over that text they just get a text selection option and likely will not click. They are trained to look for and react to the hand, make sure they aren't missing a great feature on your site. Category: Code
Full width pages work great for mobile and print views because the information can flow from edge to edge with a natural ending point that fits the device. But a computer screen full width is different for every single user. Make sure you are not penalizing the user for how they have their computer setup and ensure your website has a fixed width. It will guarantee everyone is experiencing your site in the same mannor you intend. Category: Visual
Imagine Flash is an add on, because it is. If you have an interactive area make sure there is a content alternative if the content is essencial to the visitor. And make sure there is also visual alternative so visitors don't see an empty area and they don't miss a beat. Category: Code
Your faculty are not only important to prospective students, especially graduate students but also the media. A faculty experts list is a great way to media outlets to find your faculty to interview, reference or recommend. Make sure your faculty profiles are constructed to pull areas of expertise and make sure the page to find this information is easy to find. Media don't usually have a lot of time to gather information about a story, especially if it is a current event. The quicker they can find faculty at your institution the more likely they will get referenced. Category: Information
If you have information that isn't ready to go on your site yet please don't land the user on a "Coming Soon" page. Telling a user the information they are interested in isn't ready yet is worse than not telling them you have it at all. If you must tell a visitor that information is coming soon, like the upcoming course schedule or information about an event make sure to tell them the date it will be available and make sure you stick to it. Even better would be to let visitors sign up to be alerted when the information is available. I know this all sounds like a lot of work but to your end user it is what can make or break a good experience with your site. Category: Information
At least once per month you should walk through your site from a fresh point of view. Try to find a random program and request information. Even if you have done this before it is important to keep it top of mind. Sites change over time and your visitors are potentially seeing them for the first time. This task will allow you to discover the pain points and potential dead ends in the flow of your website. Keep track of the paths and look back every once and a while to see if they are getting any better or worse. Category: Information
Ensure your page content is readable by using a large enough typeface and sufficient line height. Personally I would not use less that 11pt font size or less than 1.3em line height. In addition using bold type throughout your pages is never acceptable. Category: Visual
Make sure you are tracking analytics on your site in some way. Google Analytics is by far the most popular method but it isn't the only option out there. Some schools have begun to opt out of Google Analytics because of privacy concerns. Sending visitor information to another server could potentially be dangerous. If you are looking for something that offers similar features as Google but hosted on your own servers check out http://piwik.org/ Category: Code
Don't let your CMS ruin your beautiful website. No matter how beautiful your site is if it is bogged down by bloated code your users will still get frustrated. Clean code is accessible, maintainable and fast. CMS's that create spaghetti code were not well planned and should be avoided. Looking where they don't think you will look is a great way to expose where they see their priorities. Category: Code
Just because you are using a CMS it doesn't mean every one of your Web pages in to a single template. Each of your pages have a different audience and their needs are different. Using the same template limits you to only highlight and navigate to only certain elements. Over time these areas become stale because visitors are use to seeing the same information. Switch it up and give your visitors something interesting to look and take action on. Category: Visual
If you are going to post headlines or anything please ensure there is a call to action where the user can get more information. Snippets of content may look great but if the user cannot use it it is useless. Added value = happy users. Category: Information
Ensure the links within your site have a consistent and defining style. The easier they are to see the quicker someone can scan and click on the one they need. Don't forget to also have an "active" and "visited" style on your links. Visited styled links allow a visitor to browse more efficiently, they won't stumble across the same page from multiple locations because the link is worded differently. Remember, treat your users as you wish to be treated. Category: Visual
Make sure if you are using iframes that you are leaving enough room for content. Since the style is independent from the main website you loose some control over how it looks. If the content overflows the specific height and width the user will see scroll bars and make it difficult to use when scrolling around the site. You may want to use cURL or another method to pull in that content and view it natively on the site. Category: Code
Screen sizes are increasing on the desktop and getting more unique on mobile devices. Using a 100% width is dangerous because the flow of information is no longer in your control. Landing on a page that is full width on a desktop can make items that need to be related visually far from each other. The opposite effect happens on a mobile device, items may be squished together and the impact of the relationships are lost. It is best to stick with one resolution, design for it and ensure the visual relationships stay intact on various devices. Category: Visual
Calls to action don't only have to be Apply, Request Info or Schedule a Visit. Think beyond those three on each page you publish. Linking to the campus map, facebook, an image gallery or even student blogs. Make sure to mix up the calls so visitors are continuously looking at that area as they move from page to page. If you keep the same calls to action on every page that area may quickly get ignored. Category: Information
Take the extra time to clean up your HTML code, combine images, css and javascript files. Although no one will notice a difference on the front end your site will be easier to maintain, load quicker and more accessible. The less code you have to modify the easier it is to make changes and be agile. Category: Code
Whitespace on your homepage is necessary to separate elements and make items stand out but too much space can make your site look like something is missing. Large blocks of open space should be avoided at all cost, but moderate deliberate spacing can make all the difference when you need something to stand out. Category: Visual
Just because you have lists of things on your site, it doesn't mean they need to have bullets. For example, news, events, calls to actions may stand out more without the actual bullet or arrows denoting they are there. Be careful how many visual elements you add to a page, the more there are the more complicated/distracting it becomes. Category: Visual
Find out what makes your institution unique and embed it into everything you produce. Make sure when people see it there is no mistaking who or what the piece is talking about. Too many institutions follow the leader and end up producing design and an experience that is just like the rest. Make your site stand out so even if you remove the wordmark a visitor will still identify with you. Category: Visual
If you have pages with a lot of copy (more than one paragraph) and the goal of the pages is not to read the copy in detail your users will likely skim right past it. One way to take advantage of that copy is to selectively bold text that you think will make an impact to your user. Having key information (takeaways) being bold makes your copy work for you instead of against you. But be warned, use bold text sparingly or else your copy will look obnoxious and you will be in a worse situation than before. Category: Information
Re-use information in multiple areas. Although you have an "Upcoming Events" area your visitors may overlook it and pay attention to another area on the site. Think text promotion, visual promotion and sidebar promotion on child pages. Imagine users have A.D.D., the same representation for information doesn't work for every user. Category: Information
Be consistent throughout your site with fonts, colors and relative sizes. It is okay to change the font of headers or specific promotional items to call attention to them but make sure it is done sparsely. Changing the size and font too often will make items looks inconsistent and lost by the consistent items on the site. Category: Visual
If you are going to have an advanced search make sure it is packed with options. If your visitors can't find what they are looking for from the regular search give them enough options in the advanced search to be useful. Analyze what your visitors are searching for and try terms on both search forms and try to experience what your visitors are experiencing. How is the user experience as a whole? Is it even worth having an advanced search? Category: Code
We all know no one likes reading PDF's on the web so don't make it harder by changing the user's experience with them. It might sound like a great idea to have a fully interactive PDF online but be sure it's something your users will be able to use. Do testing and if most, I'm talking 90% of users approve then use it. Category: Information
Homepage visitors don't read news descriptions. They stay on the site for just a few seconds scanning to see if anything pops out at them. A block of text doesn't stand out and will be easily overlooked with the title of the news/event. Give your visitors something to take action on, short, quick and to the point. They didn't come to your homepage to read a newspaper, they came looking to complete a task. Category: Information
When using Flash elements on your site it's crucial to provide non-flash alternatives for visitors who may not be able to see or use the flash objects. Make sure the alternative gives an equal amount of information as provided in the flash. It is also a good idea to test your flash detection script to ensure it is functioning properly. Viewing the visitors experience from the visitors eyes is a great idea when every visitor counts. Category: Code
If you have dynamic elements on your site that changes the content on the page make sure that content is accessible. Not only from someone on a screen reader but even just using the Tab to navigate your site. In addition, make sure there is a way to link to it directly. Category: Code
A photo is worth more to your website than you think. Photos of students in actual situations that mirror actual class experiences are invaluable to a visitors impression of your institution. It may take many days and months to get enough photos but it is the only way to convey a true experience on the web as a visitor finds the program they are interested in. Malloy Wood once said "Smiling faces accurately reflect on the web the energy and enthusiasm that exists on your campus. Plus photos of smiling faces are simply more interesting to look at than photos of unhappy faces." Think about any site you have been to, what catches your attention first? What leaves a lasting impression after you leave? Category: Visual
The number one thing you want accessible and prominent from your homepage is your degree and program list. Prospective students first and formost want to see if you have the program they are interested in. The harder you make it to find the more likely they will be turned off. If you asked an admissions counselor are you school what programs do you offer, likely their response would not be "What school/college are you in looking to go into?" Make sure your website answers the question as it should be answered. Category: Information
Displaying text in all caps should be controlled through the style sheet of your site and not the actual HTML. All capitals online means you are yelling, although it may look great stylistically you may run into issues because of context. Lastly if you have capitals in the HTML it is difficult to copy and paste the text from your site context to a different place, the capitals will carry over. Using regular case the HTML and text-transform in CSS will solve most of these issues. Category: Code
Although the primary audience for your homepage is prospective students you can't ignore the current students, faculty and staff that visit the site every day. Giving them an option or area to get to the information they need without degrading or filling the entire site up with links that prospective students may get distracted by. Category: Information
As visitors move through your site make sure you are tailoring the menus and promotional items to there needs. Keeping the same global menu on the left or right of every page is like telling a visitor that you don't care. You couldn't take the time to understand the next steps and the needs of the visitor on each page. The menus and promotions should assist the user to make a next step. Category: Information
When listing items on your site, degrees, people, organizations make sure there is a default list and a way to filter it. If visitors click on a page to find student organizations they want to see a list up front, make sure you display something that a visitor can interact with. Even if it is a little too much information allowing them to filter it down gives them context for there search or filtering. Without that context the visitor can be lost with no direction. Category: Information
Speed is as important as design. Both get noticed at the same rate and have the same impact on the visitor. A slow site may even be more painful to use than an ugly one. You have the user at your fingertips, don't make them wait. Category: Code
When validating your pages strive for the 90% rule. If you can make sure your templates validate and they are ADA compliant that is half the battle. The other half of the page is content generated by your campus community, outside of your control. There are automated testing and clean up scripts available like HTML Tidy, but they can be at times more of a nuisance to deploy consistently. A few validation errors won't kill anyone but strive your hardest to not exclude segments of the population on purpose. Category: Code
Every prospective student has there passion, for some it's music, for others it's engineering. When they go to read about what you have to offer make sure the imagery and the feel of that area match the content. The last thing a music major wants to see on the music program requirements is a picture of a student interacting with electrical engineering devices. Category: Visual
If your admission information is completely different for different audiences it might be a good idea to separate it out right from the beginning. For example Freshmen might interact with a completely different department than Transfer or International students. Get the students to the right information as soon as possible to avoid confusion. Category: Information
Be sure to have someone outside of a redesign project check out the site before it goes live. No matter how many time you check over your own work you are bound to miss something. In the case of today's site it was the "Related Jobs" area. It looks great structurally but the content is a little off. I have never heard of anyone getting a job in "Drafting Job1" or "Drafting Job2"... Category: Information
Make sure the most important user paths are front and center on your homepage. Keep them simple and keep them prominent. Too many menu items will just end up confusing the visitor. Think about tasks and not about audiences, visitors come for a reason and those are they keywords they look for. Category: Information
If you want to use custom fonts on your site make sure it is just for titles and limited areas. There are a few different techniques available and each offers their advantages. Make sure you choose the appropriate one for your situation, their is no one solution that works for everyone. What ever your end result is make sure you are not compromising your visitors needs. Text still needs to be available to search engines and screen readers, in addition visitors also need to copy and paste text as they normally would. Don't let pretty fonts impact the usability of your site. Category: Code
Most institutions have multiple sites that students need to log in to on a routine basis. The course management software, email, student portal, etc. Although the primary audience for your homepage is prospective students, make sure to help your current students out by letting them log in from the homepage. One form to log in to any of your institution's services is ideal. It will not only avoid confusion but will also drive traffic to your homepage. Who knows, glancing at the news and events each day may get them more involved. Category: Information
Having a central template for your entire institution is tough, make sure the levels of branding give a good balance to the institution and the departments. They wouldn't exist without each other and should have equal amounts of space dedicated to identity. It's tough to get the right amount of balance and every situation will be different, it all depends on the personality of your institution. Category: Visual
Every visitor to your institution's website is looking to examine what you have to offer. Make sure it's easy to compare your degree offerings. Most high school students don't know the difference is between a certificate, BS, BA, etc. Having a visual representation of what each degree means can clarify what your offering to your visitor. The faster they understand the faster they can make a decision about which choice is best for them. Category: Information
If you have areas on your site that use ajax or load information dynamically to change the state of the page make sure you don't break the back button. The best way to do this is to add a hash (#) to the URL. This allows the URL have a permalink for the state of the page and if the visitor leaves and comes back it will restore the state of the page. It's something the user doesn't have to think about. Adding dynamic content like this is great but does open a whole different box of user experience needs. Category: Code
Your visitors need a direction, preferably one direction. The more choices you give a visitor they more they have to look at. The more they have to search and the longer it takes for them to find something. The longer they can't find something the more apt they are to hitting the back button and going back to their search results. Pick the top few things (five or less) things your primary audience is looking for and start there, get them to take an action and you are one step closer to getting them as a student. Category: Information
Be original, change the defaults. Prospective students are going through multiple sites when searching for the college that's right for them. Make sure yours stands out in the right way. Just because your visuals are great doesn't mean the information is all there. Just because the information is there doesn't mean it will load quickly or is findable. And just because you have the cleanest code it doesn't automatically make students inspired. The web is about balance, make sure you test and re-test your site, there is no silver bullet. Category: Visual
If you want something clicked on make the clickable area as large as possible. Arizona State has a few areas on their homepage that take advantage of this. The main promotion spans the full width of the browser and the entire thing is clickable. They also have a link to "Sun Devil Athletics" in the bottom left which has a much larger clickable area than you would think by scanning the page. It is this attention to detail combined with click tracking with CrazyEgg can give designers a lot of insight about how people actually use the web. Category: Visual
Making clear that things are links will draw your visitors eyes to them. Try to use a dotted line or lighter underline so your pages are not overwhelmed by horizontal lines. Also, don't forget to also include an :active and :visited so visitors know where they can go and where they have been. Remember, if visitors don't know where they can go they likely will not explore every piece of text with their mouse. Category: Visual
Prospective students look for confidence in the institution they choose. A consistent template and flow of information gives the appearance that the whole school is working together toward one mission. That they understand the student is at the center of their world. They can set aside their opinions to make sure the whole college looks professional. It may not seem like it makes that much impact since every department feels like they are "different" but it can make or break how organized your institution looks. Category: Visual
Hiding basic information in non-web friendly documents is not user friendly. The way you publish documents for your office is not the way to publish documents on the web. Make sure you re-purpose the information correctly in the medium you use. A requirements document should not be in a PowerPoint document, it should be in HTML. Category: Information
Non traditional interfaces sound like a great idea on paper but in execution not preform as expected. A simple list with a search box or filter options is the accepted way to display degrees and certificates. Anything beyond that will require some learning/exploring and some potential confusion. The last thing you want to do on your institution's site is confuse prospective students. Make sure if you sway from the typical way to doing things that you test and re-test with your primary audience. Category: Visual
Data consistency throughout your site is crucial to your prospective students and administration. "Write once, publish many" should be a goal every web department should be concerned with. Each semester as numbers change or course descriptions and requirements change it is important to invest the time up front on tools that make the update process easy. Category: Information
When presenting events on your institution's homepage make sure they change on a consistent basis. If someone has it set as their homepage they may start to overlook the events if they are always the same. Keep it to the next week or so to give people on and off campus a good idea of the major events going on. It's always a plus to make sure they are free and open to the public. Students looking for something to do will be turned off if they have to pay. Category: Information
Photos engage visitors. Make sure anything placed on the homepage is extraordinary. You have 10 seconds to catch someone's attention, don't leave it to chance, make sure it happens. Colors and balance should all be equalized to look good in context with everything around it. Eyes focus in on smiling faces and don't go overboard on the text. Category: Visual
Linking program requirements to descriptions to professors is a great way to keep visitors on your site. It gives the page interconnectedness that walks a prospective student through the process of course, more description and even more about the professor. Just make sure you watch visitors as the use your site, you may be able to discover small usability issues as the click around. Category: Information
Cut out distractions, cut our everything you can and focus on one task at a time. Ursuline College homepage does an awesome job keeping the top clean and bringing the main navigation front and center. Too many choices can paralyzes your visitors, know the goal for each and every page and play to it. If it takes 1-2 extra clicks to get information so what, user will click more if they are confident. Category: Visual
Your website visitors don't have a voice, you have to be their voice. Make sure you always have them in mind. This is the first step to becoming a web rockstar. Knowing your end user and advocating for their needs. Don't just sit back and let administration take control of your site, the visitor is the reason the site exists, they are in control. Category: Information
Make it a point to watch actual visitors use your site for at least two hours per month. It doesn't sound like a lot but it can make a world of difference. Require everyone in the web area to watch actual users, even it is in the library it can give a perspective that otherwise they wouldn't have. Category: Information
If your institution mashes up global items with local department items make sure they are labeled or separated appropriately. In this case it was social media icons, the visitor is presented with two sets without labels. It doesn't seem like a big deal but it can mean the difference in them following the entire university updates instead of the niche departmental updates. Category: Information
When presenting program information think about the visitors needs, they need to be able to get to related content quickly. They have drilled far into the site already, there is no need for main navigation items on that page. Category: Information
Users scroll, it's a fact; otherwise there wouldn't be pages deeper than 700 pixels. Make sure your important elements are above the fold, this includes navigation. Although there may be other things on the page the navigation gives the user a frame of reference about where they are and where they can go. More often visitors are coming directly from search engines which means they have about 10 seconds to decide if this is the right place for them. Navigation is a huge factor in orienting someone on your site, make your visitors see it right away. Category: Visual
If you decide to use icons on your site be sure to use them consistently throughout. Where ever possible use existing icon constructs so your users don't have to relearn what items on your site mean. For example, on the Denver Seminary site they had very consistent event icons except in one area. When I opened that area I was confused and confusing users is the last thing you want to do. Category: Visual
Keep your users engaged through the entire process. Middlebury did an amazing job with all the related items on the right side of each page and at the bottom of the page. It's these things that surprise your visitors and show them you care enough to provide important related information. Even if the information isn't important it makes the page stickier and gives the user something to explore. Category: Information
Pictures can make or break how engaging your website is. Make sure all photos are relevant and vibrant. Photos from this site you could tell were not just a batch of stock photos. They convinced me these were real students, staff and faculty. Authentic photos build trust. Category: Visual
Don't let marketing copy get in the way of the user's goals. If they clicked to see a list of academic programs they shouldn't be presented with the reasons why they should choose your school. They are already at your site and deciding to see what you have to offer, they don't need anything more. Once they find a program then maybe throw in why that program is right for them but don't put up a hoop to jump through before they can get to the actual information they are looking for. Category: Information
The downside of using a single template for every one of your pages is that users coming in need to orient themselves within the first few seconds. If they searched for "Art Education" and they get to a page that doesn't say Art prominently in the header and the images are all generic campus shots they may get confused and leave. You pages should be engaging your students on a personal level. Look at the goals of each page and try to put yourself in the users shoes to see how the images and placement of text would resonate with them. Category: Visual
If you are going to do something different make sure it is useful. Asbury tried a different css technique to display their menu which attached it to the top of the page as the user scrolled down. They knew that the only thing important at the top of the page is the menu. Why not make it always visible so the user doesn't have to scroll all the way back up. I think they way they did it was elegant and unobtrusive. Category: Visual
At the very least on every program page have a list of the programs offered and the requirements to graduate. This is by far the basic information a prospective student is looking for. Without this information online they will have to call or email someone and waste valuable resource time. Category: Information
100% width sites are hard to both scan and read. It might sound great that you can get a lot of information on the page but the more information you pack on the page the harder it is for users to digest it. As monitors are getting larger the worse it will look. Category: Visual
Respect your users control, don't force movement on the page without them first prompting for it. Many site administrators think "adding movement" to a site will make it look updated. The hard truth is it takes longer to update moving than static content, especially if you produce text/image alternatives. That extra time could be the difference of your site getting updated four times a week compared to eight or ten with static content. In the end you may be doing your site more harm. Category: Visual
If you're planning to go over the top to impress prospective students do what Durham did, add a student video testimonial for every program. Just the total man hours to create all the videos would be overwhelming. But, if done right the reward could be an instant connection between a prospect and your institution. Category: Information
Just because your university colors are red and black it doesn't mean those are the only colors you can use. First and foremost make sure your site is usable, scannable and then add your primary colors. As long as you are not going completely off the mark your brand will still come through. A large majority of institution's colors don't translate directly to the web. The best bet is to make sure your colors come through in a rich and professional way, no need to be pixel perfect at the cost of usability. Category: Visual
When you click on something that rotates it should stop. The user has made a choice, you should respect it. Often there are rotating images on institution home pages, make sure you have the ability to stop any movement to read or look at the images. That stop should stay until the user decides to continue the movement. Category: Information
Having a global navigation is great but make sure it doesn't interfere with the primary focus of the page. Each page has a purpose and although it is important to be able to get back to global information that should not be the focus of a page. Think locally before globally. Make sure a user who comes in directly from a search engine results page is presented with related information to that page before noticing global items. Category: Information
Take a minute to look at your site on a mobile phone. Specifically an iPhone or iPod Touch because they are the most popular devices to browse the web. Don't limit yourself to those two devices but make sure your site is usable on them. A large number of people are turning to them as their primary means on browsing the web. If you have a mobile style sheet that is great, if you tailor it to those specific devices, even better. One simple thing you can do is add a "apple-touch-icon" to the
of your document to have your bookmark branded on an iPod Touch or iPhone. Category: Code
Make sure that your university Web site has a list of the actual degree programs available in a scan able list. This will help prospective students decide if your university is right for them. It also helps search engine optimization and help the overall user experience of your site. Category: Information