Tips Archive

Purdue Online Engineering - Episode #321
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.
Colorado Mesa University - Episode #317
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
Grand Valley State University - Episode #316
If you have to label something as "Quick" it probably isn't.
Columbia International University - Episode #315
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.
Keystone College - Episode #314
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.
Eastern Michigan University - Episode #313
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.
Concordia University St. Paul - Episode #311
If the "website feedback" button is more prominent than your apply button, you're doing something wrong.
Clarkson University - Episode #308
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.
York College of Pennsylvania - Episode #307
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.
Providence College - Episode #305
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.
Indiana Wesleyan University - Wesley Seminary - Episode #304
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.
Marist College - Episode #303
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.
Southern Illinois University Carbondale - Episode #302
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.
Purdue University - Krannert School of Management - Episode #298
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.
Everett Community College - Episode #296
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.
Langara College - Episode #295
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.
University of Northern Iowa - Episode #293
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.
Grantham University - Episode #289
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.
Davenport University - Episode #287
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
University of Notre Dame - Mendoza College of Business - Episode #284
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.
Centenary College - Episode #283
"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
University of Minnesota - Episode #281
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.
International Academy of Design & Technology - Episode #270
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.
Baylor University - Episode #264
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.
Endicott College - Episode #263
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.
Heald College - Episode #259
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.
Seattle Pacific University - Episode #257
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.
Mary Baldwin College - Episode #255
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.
USC Marshall School of Business - Episode #253
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.
Belmont University - Episode #251
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.
Roger Williams University - School of Law - Episode #247
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.
Western Michigan University - Episode #246
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.
Berkeley College of NY & NJ - Episode #237
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.
Oakton Community College - Episode #236
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.
Siena College - Episode #235
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.
University of Maryland, Baltimore - Episode #233
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.
Saint Mary's College of Maryland - Episode #231
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.
Creighton University - Episode #225
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.
Remington College - Episode #222
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.
Wittenberg University - Episode #220
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.
University of Saskatchewan - Episode #218
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.
Ashland Community & Technical College - Episode #215
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.
Kent State University - Episode #214
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.
Sierra Nevada College - Episode #213
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.
Wentworth Institute of Technology - Episode #210
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.
Medicine Hat College - Episode #204
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?
Multnomah University - Episode #196
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.
University of Vermont - Episode #190
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.
New River Community College - Episode #186
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.
Arizona State University - Episode #185
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.
Eastern Kentucky University - Episode #184
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.
Florida Atlantic University - College of Education - Episode #183
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.
Cornell University - College of Arts and Sciences - Episode #181
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.
Virginia Commonwealth University - Episode #178
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.
Ursuline College - Episode #176
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.
Sierra Nevada College - Episode #171
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.
Denver Seminary - Episode #170
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.
Carnegie Mellon University in Qatar - Episode #167
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.
Jackson Community College - Episode #165
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.
Asbury Theological Seminary - Episode #164
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.
Hudson Valley Community College - Episode #161
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.
University of Kentucky - Episode #158
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.
Southern Illinois University Carbondale - Episode #156
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.
Southwest Minnesota State University - Episode #146
Make sure when a user clicks on something the appropriate amount of feedback gets displayed so their attention can be moved to the necessary area. In this case a menu updated content on the page but if the user was not paying attention the style of the information is exactly the same as the current content. If it highlighted the background and then faded away it would bring the users attention to the new content on the page.
Monash University - Episode #145
If you are going to try making a site variable width make sure there are some limits. Monitors are getting larger every year, what use to look good at 1024px wide might look horrible at 2048px. It is better to control your width and keep some limits to maintain readability and scalability. More real estate doesn't always mean a better experience.
Scripps College - Episode #144
Don't let base templates strip the identity of a department. At the very least each department should have photos of actual professors in real settings with real students. Prospective students can sniff sniff unauthenticity from a mile away. Invite them in to your reality.
Eastern University - Episode #133
Breaking the grid or having portions of things break the grid is an easy way to call attention to them. Even if it is a few pixels the user will notice, it is something that doesn't fit the formal grid of the web. Use it sparingly though otherwise nothing will stand out.
University of Denver - Episode #132
Sometimes visuals make all the difference. Great photos can increase the amount of time someone explores your site. Especially when the users drills down to a specific subject area and the photos are all related to that topic. It not only shows the user what it's like at your institution it shows you care about each and every one of your pages.
Rasmussen College - Episode #124
Its okay to break through the structured template every once an a while to get the users attention and get them involved. Using colors is a great way to get attention but breaking the grid can also bring attention to things without using crazy colors.
Duke University - Episode #123
Make sure the user is in control of the content on your page. Duke has a promotion area the automatically rotates. Although the user is not choosing the speed if they miss something they can click through at their own pace. Without this option users who miss a desired slide they are likely to leave instead of engage the page further.
Grove City College - Episode #120
Little things like the star on the selected menu items gives a little extra fun or surprise to the site that a user doesn't typically expect. These types of things used sparingly can improve the users impression of the site overall. It shows some personality from an institution site that may feel cold.
Fairfield University - Episode #119
Too much movement can distract from the users goals. It is great to the them involved but make sure the movement emphasizes the goals of the site and is not just there to make the page look active.
Colorado State University - College of Liberal Arts - Episode #118
Simple is usable. Design and layout your site to emphasize the content. Users are coming to your site to get something done, they don't want an experience. You can impact how they feel by the colors and photos butre-inventing the wheel can only confuse them more.
University of the Cumberlands - Episode #117
If you are going to put an events calendar on your homepage a user is more engaged if you give them automatically what is going on today right up front. This way they are not forced to choose a day then see the events for that date.
Thunderbird School of Global Management - Episode #107
If you are going to use a full width template make sure there is a maximum width for the main text. People are buying wider and wider monitors, the longer the lines of text the harder they are to read. Short lines, bullet points and headers make users happy.
Lewis University - Alumni & Friends - Episode #101
Make sure your menu items have enough padding around them to allow for someone who is no precision skilled at using a mouse the ability to still get to menu items with ease. Nothing can be more frustrating when you only have a few pixels of room to click on a menu item or link.
North Carolina Central University - Episode #100
If you are going to use iframe's or scrolling div's in your site make sure they are absolutely necessary and you test them with some real users before implementing them.They sound like a great idea because they act like a window to a large amount of information but they totally break the users scrolling and the information seems to be disconnected from the rest of the page.
Asbury College - Episode #97
One thing you don't want to hide on your homepage is the search box. Users who cannot find something in the first 15 seconds will often use the internal search. If they cannot find it they will probably use their first instinct to use Google. If you pages don't rank well on Google or their favorite search engine you could be at a loss.
Washtenaw Community College - Episode #94
If you are using a table with rows that range in height it is a good idea to add additional padding to the cells or style to denote where a row starts and ends. Zebra stripes are a good way to go as long as they don't distract from the data in the table. Zebra stripes are when you have an alternating row background colors in a table.
Centre College - Episode #92
If you are going to use promotions on your homepage to drive traffic to specific spots make sure they have a call to action with them. If they look too much like regular images the users eyes might just pass over them. For example "Check out A Year of Lincoln" lets people know there is something behind the button and not just an image.
Lewis University Online - Epsiode #84
If you are not using bread crumbs use some other visual representation to show your user where they are. Not every user is coming in through your homepage, make sure they know if they are in the prospective student area or in the alumni area by highlighting the top menu item related to the page they are on. Your users will thank you.
University College Falmouth - Episode #83
When ever you have movement that is controlled by the user give them hints about what is going to happen when the mouse over or click on objects. You may even find that more users click on interactive elements because they know what is going to happen or they just discovered they were there. There is no single way to use a web site so each visitor has to essencially rediscover how to use your site on their first visit, giving them clues will help keep them longer.
Washington State University - Episode #80
Less is more. The less you have on the page the more the important items will stand out. This is key to get across to your administration, the more cluttered the page gets the less anything stands out. Keep it light up front so when something needs to stand out it can hit your users in their face.
Lansing Community College - Episode #78
Only display errors if they are absolutely necessary. Errors are a large distraction and if they are not needed a prospective student can miss important information. Be smart, don't waste precious real estate.
The Union Institute and University - Episode #71
If you are going to have links on your page make sure they look like links. Also make sure all text has enough contrast against the background to allow everyone to scan your page easily without having to squint or adjust their monitors. The WCAG 2.0 recommends "The visual presentation of text and images of text has a contrast ratio of at least 4.5:1"