Stuff what we're doing at Edge Hill University

Stuff what we’re doing at Edge Hill University Michael Nolan http://blogs.edgehill.ac.uk/webservices

“ See what a small, centralised web team can deliver without a £1 million CMS! “ More buzzwords than you can shake a stick at and not afraid to get technical .”

1 ½ hours

You really don’t want to hear me talk non-stop for that long

“ Interactive” Workshop

Buzzword Bingo Rules <ul><li>Each person has a 4 x 4 bingo card </li></ul><ul><li>When I say a buzzword cross it off your card </li></ul><ul><li>Call BINGO! when you complete a row, column or diagonal </li></ul><ul><li>Only words I mention are valid! </li></ul><ul><li>Drink of choice from the bar for the winner </li></ul>

Who are you?

Where are you?

Where do you sit? Marketing Academic IT Services

Areas of expertise Uber-Developer Manager Content / Marketing

Web team structure <ul><li>Centralised </li></ul><ul><li>Faculty or </li></ul><ul><li>Department </li></ul>

“ For the next hour we will control all that you see and hear”

Coming up <ul><li>Applicant Communications </li></ul><ul><li>GO Staff and Student Portal </li></ul><ul><li>CMS – Friend or Foe? </li></ul><ul><li>10ish five-minute ways to improve your website (if there’s time!) </li></ul>

How do we go from here…

… to here?

Hi from Edge Hill University

Blogs

Forum

Specially written content

Online applications

Discuss stuff <ul><li>Letting current students do the work for you </li></ul><ul><li>What do you offer students in the run up to Fresher’s Week? </li></ul><ul><li>Converting offers to students </li></ul><ul><li>Anything else? </li></ul>

In The Beginning…

Disparate systems

GO 1.0 – September 2006

GO 2.0 – September 2007

Discuss stuff <ul><li>What portals / intranets are in use? </li></ul><ul><li>What institutional systems are available? </li></ul><ul><li>How open are the systems? </li></ul><ul><li>How do you handle document management? </li></ul>

Caution! Ranting Likely!

June 2006 Design

March 2008 Design

Content Management Systems

Systems to Manage Content?

News

Events

eProspectus

Search

Binding it all together

Discuss stuff <ul><li>Is long term development of “bespoke” websites maintainable? </li></ul><ul><li>Is the adoption of a content management system inevitable? </li></ul><ul><li>CMS == Jack of all trades, master of none? </li></ul>

10ish five-minute ways to improve your website

101 ways to improve your site <ul><li>Tell readers why they should perform a task . If your site is full of passive suggestions, toughen it up. People are trained to follow a request, as long as you give them a good reason to do it. </li></ul><ul><li>Make the most highly trafficked pages easier to scan . If your current site consists of large blocks of text, break it up so that it's easier for the average Internet user to read. </li></ul><ul><li>Convey a sense of trust . If you're experiencing skepticism, offer social proof like testimonials or risk-mitigating offers like a free trial. </li></ul><ul><li>Stress benefits . Ensure that your copy always shows users exactly how your site will benefit them. </li></ul><ul><li>Make headlines meaningful . Be sure to change any vague or cutesy headlines to something more up-front and meaningful. </li></ul><ul><li>Repeat yourself . Check over your copy to make sure that you're really driving the point home by making it in a number of ways. </li></ul><ul><li>Tell visitors what to do . Revise your site to ensure that people know exactly what the next step is. If you want a visitor to click a link, tell them </li></ul><ul><li>Keep the reader engaged . Make sure that your current content gives visitors a reason to keep reading throughout the entire piece; otherwise, you need to spice things up a bit. </li></ul><ul><li>Stay consistent . Check your copy for consistency, or else your site may be seen as unstable or flighty. </li></ul><ul><li>Stay simple . Simplify your message simply to avoid confusing visitors, while at the same time improving conversion rates. </li></ul><ul><li>Structure content persuasively . Restructure your content so that it's more focused, specific and credible. </li></ul><ul><li>Offer social proof . Seek out testimonials and case studies to show just how effective your services are. </li></ul><ul><li>Keep offers simple . If you're offering lots of different options, pare them down. </li></ul><ul><li>Make an offer that visitors can't refuse . Check out your site to make sure that you're giving your visitors a reason to pick your company out of an overcrowded field. </li></ul><ul><li>Avoid making hollow promises . Check out your guarantee, and ensure that you're backing it up with something of substance, like a money-back guarantee. </li></ul><ul><li>Keep each block of text to a single topic . Make sure that your text isn't too overwhelming with many different thoughts in one place. </li></ul><ul><li>Offer comparisons . Make it easier for your reader to understand and relate to your business by offering metaphors, similes and analogies. </li></ul><ul><li>Be concise . Make sure that your copy is only as long as it needs to be to get your point across reasonably. </li></ul><ul><li>Go with what works . Study other copywriters to adopt the words and methods that have worked for them. Customize these words and phrases until they become your own. </li></ul><ul><li>Add a short "about" page . Put a real person behind your site by allowing your visitors to learn a bit about you. </li></ul><ul><li>Make navigation consistent . Make sure that your site's navigation is on the same place on each page so that visitors don't get confused. </li></ul><ul><li>Make text links clear . Be sure that your links are descriptive enough so that visitors know exactly where they're going. </li></ul><ul><li>Use underlined link text . Get rid of your fancy link navigation. Visitors expect to click underlined links. If you dislike underlines, use CSS (Cascading Style Sheets) to employ a different method of highlighting, like a different text color or font. </li></ul><ul><li>Never ask for more information than you need . If you're currently asking for excessive information, rethink your data-mining tendencies. When you get greedy for data, you'll turn off some visitors. </li></ul><ul><li>Always have text links . Although your JavaScript menu might look great, some browsers and users have JavaScript disabled. </li></ul><ul><li>Have a text-based site map . With a text-based site map, lost visitors can find their way, and you'll make it easy for search engine spiders to find your pages. </li></ul><ul><li>Link the site logo to the home page . Visitors will expect your logo to link to the home page, so make it easy for them to find it. </li></ul><ul><li>Add a search box . Are your current visitors lost? Make it easy for them to find exactly what they're looking for with an internal search box. </li></ul><ul><li>Use plenty of contrast . If text seems to melt into the background, change things up and make your text easy to read by using colors that highly contrast one another. </li></ul><ul><li>Customize the error page . If you have a standard set of error pages, you need to step things up. The error page should not only reflect your site's design but also provide useful links that will get your visitor back on track. </li></ul><ul><li>Ask for feedback . Create a contact form that makes it easy for customers to speak with you about your site. </li></ul><ul><li>Test the site on real users . Ask regular people to navigate your site to find usability problems. </li></ul><ul><li>Create specific landing pages . If you want to sell, make sure that you have landing pages for specific campaigns and that each of those pages has a purpose. </li></ul><ul><li>Add more internal links . If you'd like to get more traffic to your income-producing pages, add some internal links to your most highly trafficked pages. </li></ul><ul><li>Replace underscores with hyphens . In search-engine results, words separated by underscores will run together, while hypens will create a space between each word. </li></ul><ul><li>Implement 301s to consolidate page rank . If your site lives on both non-"www" and "www" domains, redirect one to the other in order to consolidate. </li></ul><ul><li>Add a dynamic meta description . Make sure that your meta description makes sense so that your excerpt in search-engine results is more appealing. </li></ul><ul><li>Use heading tags . Let search engines know what's important by highlighting titles and more in header tags. </li></ul><ul><li>Update content often . Give search engines a reason to keep coming back with fresh content. </li></ul><ul><li>Ensure that your host is up to snuff . Make sure that your host is providing maximum uptime so that your site is visible at all times. </li></ul><ul><li>Create a robots text file . Make life easy for crawlers by creating a file just for them. </li></ul><ul><li>Make sure that your domain is brandable . If your name isn't easy to say or remember, you need to find something that is. </li></ul><ul><li>Build link popularity . Actively seek out relevant, inbound links to your site to build trust and profile with search engines. </li></ul><ul><li>Turn off music. No one wants music to greet them every time they click a link, so turn off the music — or at least offer an easy option for disabling it. </li></ul><ul><li>Give pages real names . For example, if your page is about red widgets, its filename should be, or at least include, the words "red" and "widgets." </li></ul><ul><li>Take off the black hat . If you've used tactics like keyword stuffing, remove them from your site. They may be working now, but in the long run, they'll only hurt. </li></ul><ul><li>Open up the drop-down menus . Let your user see all of the navigation options available, or you'll confuse them. </li></ul><ul><li>Ditch registration. Don't turn off users by forcing them to register to access content. </li></ul><ul><li>Ditch frames . Frames are horrible for search-engine optimization and design in general. Just stay away from them. </li></ul><ul><li>Fix broken links . Don't send search engines and users down dead ends. Clean up links for better search-engine optimization and usability. </li></ul><ul><li>Avoid resizing the user's window. Let the user be in control of their browser, or your site will lose credibility. </li></ul><ul><li>Create accessible forms . Make sure that your forms can be filled out by all visitors. </li></ul><ul><li>Specify spacer images as empty . Make sure that nonvisual browsers know to ignore your spacer images by noting them as empty. </li></ul><ul><li>Set captions on tables . This will ensure that your captions render correctly even in visual browsers. </li></ul><ul><li>Modify color . Ensure that pages are readable by using appropriate colors. </li></ul><ul><li>Summarize tables . Add a summary of tables so that visitors with screen readers will understand what they're all about. </li></ul><ul><li>Provide real lists . Use list tags to ensure that lists render correctly for disabled browsers. </li></ul><ul><li>Remove text from images . Using image text will make it difficult for those using screen readers to read text. </li></ul><ul><li>Offer an alternative to JavaScript links . Many browsers for the disabled don't support JavaScript, so make it easy for them to have access to "real" links. </li></ul><ul><li>Identify the language . Screen readers need to know how to pronounce words, so let them know what language your site's content is in. </li></ul><ul><li>Add titles to links . Ensure that links are descriptive enough for visitors by adding link titles. </li></ul><ul><li>Create accessible tables . Make sure that tables are accessible to all by using scope, header and ID attributes. </li></ul><ul><li>Allow text resizing . Make it easy for readers to resize text if necessary. </li></ul><ul><li>Supplement navigational aids . Offer additional navigational aids to help visitors who use text-only browsers. </li></ul><ul><li>Define keyboard shortcuts . Set up keyboard shortcuts so that disabled users can navigate your site with ease. </li></ul><ul><li>Provide alternate text for images . Alternate text will let disabled visitors know what images represent. </li></ul><ul><li>Set a document type . Let readers know what sort of programming language your site uses so that content can be displayed correctly. </li></ul><ul><li>Present content first . Make sure that text-only browswers aren't being presented with your navigation before main content. </li></ul><ul><li>Set horizontal rules . Instead of just using an image to break up your pages, use horizontal-rule tags and CSS to display them properly for disabled users. </li></ul><ul><li>Accessible pop-up windows . If your site uses pop-up windows, make sure that they're accessible. </li></ul><ul><li>Create meaningful page titles . Make sure that your site's page names make sense for their content. </li></ul><ul><li>Place important information "above the fold." Move your most important content high on the page so you can be sure that visitors will see it. </li></ul><ul><li>Keep background colors and images at a minimum . Backgrounds are often less than visually appealing and can make your site load slowly. </li></ul><ul><li>Reduce choices . Avoid overwhelming your visitor with lots of different options. </li></ul><ul><li>Design small . Cut your Web pages down to 50KB or less so that they load quickly for anyone. </li></ul><ul><li>Nix banners . Abandon banners for a more effective design element, or they'll be ignored. </li></ul><ul><li>Stay consistent . Check to make sure that colors and design are in the same general scheme so that visitors know they're still on your site. </li></ul><ul><li>Validate design in alternative browsers . See how your design renders in browsers like Safari, Opera and Firefox to make sure that it looks right no matter who is viewing it. </li></ul><ul><li>Minimize columns . Reduce columns to avoid distracting the reader with excessive visual choices. </li></ul><ul><li>Lose the splash page. No one wants to sit through a fancy Flash introduction. Replace it with a helpful home page instead. </li></ul><ul><li>Create a tagline . Stand out with a striking tagline that will draw visitors in. </li></ul><ul><li>Ditch frames . If your site uses frames, you need to move on to another method, like CSS or SSI (Server-Side Includes). </li></ul><ul><li>Make sure that text outnumbers HTML . Provide good content with text rather than HTML. </li></ul><ul><li>Slow down the technology . Although you may have state-of-the-art computers, many of your visitors don't. Get rid of memory-hogging technologies like JavaScript. </li></ul><ul><li>Remove link cloaks. Make sure that your visitor knows exactly where they're going, or you'll lose credibility. </li></ul><ul><li>Limit each page to one topic . Give each page a singular purpose to avoid confusing visitors. </li></ul><ul><li>Ditch crazy fonts. If you're using a ransom-note font, it's time to switch to something simpler. Chances are, your visitors' browsers are rendering it as Times New Roman anyway. </li></ul><ul><li>Reduce your graphics . Graphics not only slow pages down, but they also steal attention away from what's important: content. </li></ul><ul><li>Add functional links to the footer . Make it easy for visitors to find contact information or your privacy policy just by scrolling down. </li></ul><ul><li>Standardize link colors . Make sure that users know which links they've visited and which they haven't. </li></ul><ul><li>Update information. Put on a fresh coat of paint with a new header, logo or other design element. </li></ul><ul><li>Convert PDF files to HTML . Make browsing flow a little smoother by converting PDF files to a format that's more easily readable in a browser. </li></ul><ul><li>Update the privacy policy . Ensure that your site's privacy policy fully discloses everything it should. </li></ul><ul><li>Revise "deep" links . Update links so that they point to the home page of a site rather than a specific page, or make sure that you're attributing them correctly. </li></ul><ul><li>Legitimize images . If you're using images that you don't legally own, it's time to update them with your own images or those that you've purchased. </li></ul><ul><li>Pay taxes . If you're making money from your site, it's a business and is taxed as such. Take care of your taxes or you could end up in hot water with Uncle Sam. </li></ul><ul><li>Protect content . Keep your content safe from thieves by copyrighting it and taking steps to shield it from unscrupulous eyes. </li></ul><ul><li>Form a legal entity . Get liability protection by forming an LLC (limited liability company) or other formal legal entity. </li></ul><ul><li>Register a trademark . If you own your domain name but not a related trademark, a trademarked entity with the same name could take it from you, so be sure to register it before someone else does. </li></ul><ul><li>Store a Web site cache . Keep a copy of your site handy in case of copyright disputes or loss. </li></ul><ul><li>Revise the email campaign . Make sure that your email campaign complies with the CAN-SPAM Act. </li></ul>

(Almost) all a bit rubbish <ul><li>“Stress benefits” </li></ul><ul><li>“Use heading tags” </li></ul><ul><li>“Ditch frames” </li></ul><ul><li>“Lose the splash page” </li></ul><ul><li>“Pay taxes” (!!) </li></ul>

1: Microformats

Add hCard to your contact details <ul><li><address class=" vcard "> </li></ul><ul><li><a href="/" class=" fn org url ">Edge Hill University</a>, </li></ul><ul><li> </li></ul><ul><li>St Helens Road, </li></ul><ul><li>Ormskirk, </li></ul><ul><li>Lancashire, </li></ul><ul><li>L39 4QP, </li></ul><ul><li>UK </li></ul><ul><li>. </li></ul><ul><li>GEO: </li></ul><ul><li>53.559704; </li></ul><ul><li>-2.87388. </li></ul><ul><li> </li></ul><ul><li></address> </li></ul>

Add hCalendar to events <ul><li><div class=" vevent "> </li></ul><ul><li><h2> </li></ul><ul><li><a href="/events/2008/06/05/solstice-conference-2008">SOLSTICE Conference 2008</a> </li></ul><ul><li></h2> </li></ul><ul><li> </li></ul><ul><li><abbr class=" dtstart " title="20080605T0900">Thursday, 5th June 2008, 9:00am</abbr> </li></ul><ul><li>- <abbr class=" dtend " title="20080605T1700">5:00pm</abbr> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Edge Hill University </li></ul><ul><li> </li></ul><ul><li><div class=" description "> </li></ul><ul><li>The SOLSTICE Centre for Excellence in Teaching & Learning (CETL) at Edge Hill University is pleased to announce its 3rd international conference. </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>

2: Feed Autodiscovery

Add a link tag to <head> <ul><li><link rel="alternate" type="application/atom+xml" title="Edge Hill University News" href="http://www.edgehill.ac.uk/news/feed" /> </li></ul>

3: Search autodiscovery

Allow visitors to search from the browser

Create an OpenSearch description <ul><li><?xml version="1.0" encoding="windows-1252"?> </li></ul><ul><li><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> </li></ul><ul><li><ShortName>Edge Hill University</ShortName> </li></ul><ul><li><Description>Search the Edge Hill University website</Description> </li></ul><ul><li><Tags>edge hill university edgehilluniversity edgehill</Tags> </li></ul><ul><li><Url type="text/html" method="GET" template="http://www.edgehill.ac.uk/search?query= {searchTerms} "/> </li></ul><ul><li><InputEncoding>UTF-8</InputEncoding> </li></ul><ul><li><AdultContent>false</AdultContent> </li></ul><ul><li></OpenSearchDescription> </li></ul>

Add a link tag to <head> <ul><li><link rel="search" type="application/opensearchdescription+xml" title="Edge Hill University Search" href="/search/description" /> </li></ul>

4. Minimise JS & CSS with YUI Compressor

5. Enable gzip compression

Apache’s mod_deflate <ul><li><Location /> </li></ul><ul><li>SetOutputFilter DEFLATE </li></ul><ul><li>BrowserMatch ^Mozilla/4 gzip-only-text/html </li></ul><ul><li>BrowserMatch ^Mozilla/4.0[678] no-gzip </li></ul><ul><li>BrowserMatch MSI[E] !no-gzip !gzip-only-text/html </li></ul><ul><li>SetEnvIfNoCase Request_URI </li></ul><ul><li>.(?:gif|jpe?g|png)$ no-gzip dont-vary </li></ul><ul><li>Header append Vary User-Agent env=!dont-vary </li></ul><ul><li></Location> </li></ul>

PHP Output Buffering <ul><li><?php </li></ul><ul><li>ob_start("ob_gzhandler"); </li></ul><ul><li>?> </li></ul>

6. Add hint text to search boxes

jQuery function <ul><li>/* -------------------------------------------------- * </li></ul><ul><li>* ToggleVal Plugin for jQuery * </li></ul><ul><li>* Version 1.0 * </li></ul><ul><li>* -------------------------------------------------- * </li></ul><ul><li>* Author: Aaron Kuzemchak * </li></ul><ul><li>* URL: http://kuzemchak.net/ * </li></ul><ul><li>* E-mail: afkuzemchak@gmail.com * </li></ul><ul><li>* Date: 8/18/2007 * </li></ul><ul><li>* -------------------------------------------------- */ </li></ul><ul><li>(function($){ </li></ul><ul><li>jQuery.fn.toggleVal = function(focusClass, value) { </li></ul><ul><li>this.each(function() { </li></ul><ul><li>this.defaultValue = value; $(this).val(this.defaultValue); </li></ul><ul><li>$(this).focus(function() { </li></ul><ul><li>// clear value if current value is the default </li></ul><ul><li>if($(this).val() == this.defaultValue) { $(this).val(""); } </li></ul><ul><li>// if focusClass is set, add the class </li></ul><ul><li>if(focusClass) { $(this).addClass(focusClass); } </li></ul><ul><li>}).blur(function() { </li></ul><ul><li>// restore to the default value if current value is empty </li></ul><ul><li>if($(this).val() == "") { $(this).val(this.defaultValue); } </li></ul><ul><li>// if focusClass is set, remove class </li></ul><ul><li>if(focusClass) { $(this).removeClass(focusClass); } </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>} </li></ul><ul><li>})(jQuery); </li></ul>

7. Optimise page loading

YSlow

8. Sell your soul to Google

Stop using Webalizer, AWStats etc

Google Alerts to track the Interweb

Give in now… <ul><li>Google AdWords </li></ul><ul><li>Google Webmaster Tools </li></ul><ul><li>YouTube </li></ul><ul><li>FeedBurner </li></ul>

9. Customise 404 error pages

Apache 404 Page <ul><li>ErrorDocument 404 /notfound.html </li></ul>

10. Any suggestions?

Creative Commons <ul><li>http://flickr.com/photos/stelladauer/1501351344/ </li></ul><ul><li>http://flickr.com/photos/mag3737/185139851/ </li></ul><ul><li>http://flickr.com/photos/bobloo17/188697388/ </li></ul><ul><li>http://flickr.com/photos/wakajawaka/1243561409/ </li></ul><ul><li>http://flickr.com/photos/lwr/60496147/ </li></ul><ul><li>http://flickr.com/photos/denmar/116618828/ </li></ul><ul><li>http://flickr.com/photos/finsterbaby/98928021/ </li></ul><ul><li>http://flickr.com/photos/8042947@N03/486083550/ </li></ul><ul><li>http://flickr.com/photos/icesabre/2142494372/ </li></ul><ul><li>http://flickr.com/photos/jmcphotos/2131206015/ </li></ul><ul><li>http://flickr.com/photos/hippie/2450911647/ </li></ul><ul><li>http://flickr.com/photos/glynnis/19523654/ </li></ul><ul><li>http://flickr.com/photos/garibaldi/179022206/ </li></ul><ul><li>http://en.wikipedia.org/wiki/Image:AdhesivesForHouseUse004.jpg </li></ul><ul><li>http://flickr.com/photos/rschreff/1679647647/ </li></ul>

The End Michael Nolan [email_address] +44 1695 584195 http://blogs.edgehill.ac.uk/webservices