Higher Education Websites: A Few of the Best

Colleges and universities are in the business of attracting new students, maintaining their current student population and faculty, recruiting talented faculty and support staff,  and perhaps most importantly, fundraising to ensure their institution has the resources to provide their constituents with a first-rate education and experience. A key outlet to address all these parties is through a website. Unfortunately,  many colleges and universities lack powerful websites (which is absurd considering their own faculty teach web design and online communication). Therefore, I’ve compiled a list of what I believe are the leading higher education websites today, and have highlighted their strengths in the caption boxes.

W&M

The College of William & Mary. What I like: simple layout, vivid imagery, straightforward navigation bars, uncluttered, and easy on the eyes

Bates

Bates College. What I like: beautiful imagery, large image, white space, many quick links, and clear navigation bar

Hampshire

Hampshire College. What I like: ample white space, easy on the eye, straight to the point, non-busy, and simple

McGill

McGill University. What I like: unusually placed navigation bar, list of popular pages and tools, succinct list of news and events, and background imagery on the footer

Alberta

University of Alberta. What I like: prominent “apply now”, “careers”, and “give back” buttons, and interesting button navigation bar

NYU

New York University. What I like: minimalist design, lots of white space, extensive list of links, and color balance

WPC

Warner Pacific College. What I like: tailored to student users, tabs for faculty and parents, non-busy design, even balance between the header and the main content (news, links, and events)

OSU

Oregon State University. What I like: extensive footer with relevant links and easy-to-absorb events list

Depauw

DePauw University. What I like: header and footers are balanced, simple design, lots of white space, listing of key stats, and beautiful imagery

Loyola_accepted students page

Loyola University Maryland’s page for accepted students. What I like about this: innovative way to engage with students before they even step on campus, fresh colors, inviting, clear layout, big buttons, and lots of white space

Tufts_virtual tour

Tufts University’s virtual tour page. What I like about this: innovative idea (let’s face it, few prospective students can afford the road trips/flights required to visit schools), and eye-catching landing page

Defining Split Testing and Multivariate Testing, and Revealing Their Many Benefits

Multivariate testing diagram

There is a lot more to running a website than getting the code right. To make sure your website is getting the views it deserves, you need to understand who exactly you need to reach and how to target them. This can be achieved by using several tools.

To be frank, this is entirely new territory for me. Indeed, I have heard of SEO, or Search Engine Optimization, but I was not aware of the many tools that fall under this domain. The two in particular that I looked at this week are split tests and multivariate tests.

You might be wondering what split testing and multivariate testing are. I certainly did. Thankfully, the required class reading filled me in on these very interesting mechanisms that optimize websites.

Split Testing

First, split testing allows different visitors of a webpage to see different versions of one of the individual webpages. Through this technology, a designer can test out changes to their webpage before rolling it out full-scale. For instance, half of visitors will see an existing headline for a homepage, while the other half will see the new headline for a webpage. Now you are probably wondering how anything is actually “tested”.  This part, I cannot explain in detail but what I do know is that software keeps track of which version of a page generates the most positive responses or conversions over a period of time. A conversion is an industry term that can mean anything that the website is aiming to do—have customers place an order, click somewhere, register, or sign up, etc. So now you are probably wondering how this is helpful. Ultimately, you can test two different versions of a webpage and find out which one is more successful, thereby allowing your website to better reach its objectives.

Multivariate Testing

Next, is multivariate testing, which is basically the same as split testing but taken a step further. Split testing can take time to be completed depending on how often a website receives conversions. This is where multivariate testing comes into play. With this technology, you can conduct several tests on different pages versions at once. So if you need to test two different buttons along with different conversions, this is possible.

Example of Google Website Optimizer data

Thankfully, for novice web designers or for people who are on a shoestring budget, testing can be free through Google Analytics, which can perform split testing or Google Website Optimizer, which can conduct split testing and multivariate testing. However, people with larger budgets can pay for more advanced multivariate testing services. These can range from hundreds of thousands of dollars to a few hundred dollars to set-up testing and maintain it.

After delving into this topic I have a few lingering questions. What percentage of websites use split testing or multivariate testing? How accurate is it? When could you justify paying hundreds of thousands of dollars on these testing mechanisms? Would these tests be worthwhile for a portfolio website?

Since I will be taking a second stab at designing and coding my online portfolio per course requirements, I will definitely consider these testing mechanisms. I look forward to learning more and implementing these optimization tools in future designs.

The Beauty of Web Design Patterns

An example of a customer-centered pattern.

As a third semester student in a web design graduate program, you would think I’d have heard of customer-centered web design patterns by now. Actually, I haven’t, and it’s an extremely fascinating subject and the topic of an entire course I’m taking this fall semester. Basically, any webpage can be categorized into a design pattern (assuming it’s designed properly and for a purpose). For example, there are webpages that feature cross-selling patterns to news mosaic patterns, and everything in between. Essentially, each pattern addresses an issue. So for instance, if a company identifies that its problem is that clients are buying just one product, rather than many related ones, they can pinpoint, and then implement, the appropriate pattern. In this can, the pattern would be among “Pattern Group G”, entitled Cross-Selling and Up-Selling. These patterns are available in brief online and in-depth in the textbook, The Design of Sites: Patterns for Creating Winning Web Sites, which I’m required to read for class. Although this topic is a bit complex, I think it would have been beneficial to have been introduced it a few semesters earlier. Indeed, being armed with a collection of customer-centered web design patterns that are tried and tested is useful to any designer, especially a novice web designer like me!

I looked at a few websites and noted that Kohl’s uses the Recommendation Community Pattern.

The Cross-Selling and Up-Selling Pattern is used by Williams-Sonoma.

Sephora’s homepage employs the Featured Products Pattern.

Generating Some Big Bucks–Web Advertisements!

ImageIn the last lecture of my web design class we discussed advertisements. I have to say, somehow I never considered that ads might be featured on any of my websites. I’m still curious to know who might want to advertise on my personal website which may get only a few hits per month (if I’m lucky). However, I do think my blog could gain enough attention to one day allow for advertisement (fingers crossed).

Accordingly, I am going to explore advertisements and how they Imageaffect web design. If I were to revamp my blog and create a proper domain beyond this wordpress account, I’d have the chance to design it my own way—and that means I could keep some space open for advertisements. I guess when designing my own blog, or any website, it would be best to know whether ad space should be considered and the amount and dimensions of each one. With this in the mind of the designer, ads have a greater chance of seamlessly being integrated into a web design. From wireframe development to final launch—the website’s advertisements must be a consideration. Too much ad space or a messy layout because of last minute advertisement add ons could easily spoil users’ experience so it’s always best to plan ahead for the possibility of ads.

Web Carousels: How to Use them Effectively

You know how some websites have a rotating slideshow of sorts that goes through their news of day or highlights? I’ve just been informed that among web designers and coders it is known as a carousel. Good to know!

For those of you who are also in the dark, carousels provide a neat way to showcase content on a website’s home page. Not only is it neat, but often efficient because it allows designers to take advantage of precious page space.

I decided to get a better idea of carousels by checking online for the best of the best. I was pleasantly surprised to find Smileycat.com’s compilation of noteworthy carousels which lists a University of Florida webpage (go GATORS!) as its first example.

Image

The Department of Recreational Sports webpage isn’t the only place you’ll see carousels on this university’s sites. In fact, many UF pages take advantage of them—the main homepage and the College of Journalism and Communications both do it well.

UF homepage:

Image

UF College of Journalism and Communications homepage:
Image

If I were required to add a carousel to the website I’m designing and coding, I’d really have to think about how to do it right. My site features myself and my work so one option would be to have the carousel highlight news about myself. However, this poses more issues. How much news can on myself can I produce? And how can I be sure that it really interests my audience? I wouldn’t want to bore my audience or seem to be tooting my own horn. Taking this into consideration, another idea for the carousel would be to have recent blog posts rotate across the screen. That may best accommodate the need to have a carousel. I would say it is not impossible to add a carousel, but it must be studied in order to ensure it is employed in a way that enhances users’ experience instead of diminishing it.

Taking Critique Like a Champ

ImageHearing feedback is not always easy or fun. In fact, it’s a bit tough, especially, when you’re a new web designer and after painstakingly learning the ins and outs of Photoshop and Illustrator you’ve created a decent mock up of your website only to have it torn to pieces. Well, it actually wasn’t that bad. In fact, I learned so much from hearing my colleagues’ feedback on my web design (and from seeing the designs they were working on).

ImageMost importantly, my colleagues and instructor were able to give me a fresh perspective on the design and could catch things that I couldn’t (or wasn’t trained to see). That was definitely a benefit and I’ll be incorporating some new changes into the design. However, I say that feedback is tough to take because when you get so far along with a design, it’s sometimes hard to have yet another go at it. Sometimes you just want to move forward and get on with it (probably not the best approach!). But that’s life and I know first-hand from my job as an editor that the more times text goes back and forth in the revision process, the better. I guess I will just have to get used to it!

“Criticism is a necessary evil for growth. We all get it, and we all unfortunately need it.”

The Intertwining of Web Design and Storytelling

ImageSince my class instructors believe I have a solid grasp on code (which couldn’t be further from the truth), we will now turn to storytelling. A good website tells a story which can help improve the users’ experience and keep them engaged. One website that was discussed earlier this semester was www.dayswithmyfather.com. Through photos, text, and a unique web design that is quite minimalist yet in line with the content being conveyed, Phillip Toledano was able to tell a complex and heart-wrenching story that kept me engaged until the very last photo–a perfect example of storytelling and web design being intertwined. Toledano’s web design told a story in itself–the white space, reminding me of the author’s empty life, the endless trail of photos to scroll through, indicating the author’s despair of his father’s ongoing illness.

Image

While, Toledano literally told a story about the relationship between him and his father and the process of him losing his mother and soon his father, there are plenty of websites that do the same but without as many indicators and direct methods. I believe that successful websites often tell a story but also recognize that there are some websites that just don’t require it yet can still be successful. For instance, news websites don’t quite tell a story–rather they are a medium for telling other stories and yet you cannot say the New York Times or Wall Street Journal are not successes!

ImageFor the portfolio website that I’m designing for myself, I will try to reflect on how I can tell a pertinent story that will strengthen my overall site! That and learn how to code properly!

Why in the World Am I Learning Outdated Code?! I’ll tell you.

ImageFor the past several months I’ve been learning the basics of HTML and CSS. From making ordered lists to reworking cells, I’ve gained an intense amount of information that seems to be of some use to an aspiring web designer and developer like me. However, with HTML5 and CSS3 quickly gaining more speed and acceptance by the web’s governing bodies, it would seem that my coursework will be positioning me for failure as the HTML and CSS code that I’ve learned will not even be in practice soon.

So for people like me that are in the early stages of their journey to understand web design and development—should we continue with the other soon-to-be-outdated code like XHTML and CSS2 when there is a very good chance that it too will no longer be of use in the near future? While I’m no expert, I believe that laying down a solid foundation is the key to success in learning new skills or gaining knowledge.

ImageWhile some of the code may be out of use by the time we become full-fledged web developers, I believe learning what other, more successful coders learned is a wise path to follow. It doesn’t hurt to learn the basics and build on it! That said, I’m not looking forward to learning several versions of HTML and CSS just because of the time consuming, mind-numbing process of it. And knowing my luck, by the time I get caught up to HTML5 and CSS3, the latest versions of the code–HTML6 and CSS4–will be on the horizon!

 

Is it Possible to Determine a Website’s Success?

While there are millions of sites on the Internet today, not all of them are successful. How does one determine a website’s success? Some might consider a website successful if it makes a “Best Designed” list. Others might deem a website appropriate if it shows up in the top ten page results for Google searches. Lastly, some might judge a website’s success based on whether enough people know it and recognize it (i.e. Google, Yahoo, Facebook, etc.).

Sure, it’s important to be searchable via Google, be recognized by the public, and have a web design that is worthy of being mentioned by fellow designers online, but I think that a successful website is based on a few other things, such as: a) the website reaches its target audience b) the website’s users’ experience is at least satisfactory c) the website’s content is clearly organized.

Some web designers get caught up in the hype of creating something that will draw attention. I think that creativity is a great addition to a website but its main purpose is to reach and serve its target audience while providing them with an extraordinary user experience that includes information that is laid out in a logical way. I’m fully aware that my personal portfolio website may only reach a few people and may not be easily searchable via Google, but as long as the right people are able to find my website and have an enjoyable time seeing my work and reading my material, I would consider it a success!

HTML5 Redefined

The original HTML5 brand and corresponding logo was meant to encompass HTML5 plus CSS, SVG, WOFF, and others. Because the brand covered more than its namesake, there was some controversy among web designer and developers. Those against HTML5 being all-inclusive were web designers and developers who felt that the brand and logo were “blurring the lines between separate technologies” that were already being bundled together and mixed up.

I’d have to agree on this one. As a novice web designer and developer (and I’m using those titles very loosely), I know first-hand that HTML5 is already a pretty complex concept and field. Adding more technologies under its umbrella makes it that much more confusing. Today, I think HTML5 is more clearly defined as just that—the latest version of hyper text markup language—which works for me.