Your SlideShare is downloading. ×
0
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
10ish five-minute ways to improve your website
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

10ish five-minute ways to improve your website

3,661

Published on

Published in: Technology, Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,661
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
80
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. 10ish five-minute ways to improve your website Michael Nolan www.michaelnolan.co.uk blogs.edgehill.ac.uk/webservices
    • 2. Edge Hill University
    • 3. Edge Hill University &amp; Me <ul><li>Acting Head of Web Services </li></ul><ul><li>Small centralised team </li></ul><ul><li>Develop, Content, Design, Manage </li></ul><ul><li>Part of IT Services but close links to Marketing </li></ul>
    • 4. 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&apos;s easier for the average Internet user to read. </li></ul><ul><li>Convey a sense of trust . If you&apos;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&apos;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&apos;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&apos;re offering lots of different options, pare them down. </li></ul><ul><li>Make an offer that visitors can&apos;t refuse . Check out your site to make sure that you&apos;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&apos;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&apos;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 &amp;quot;about&amp;quot; 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&apos;s navigation is on the same place on each page so that visitors don&apos;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&apos;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&apos;re currently asking for excessive information, rethink your data-mining tendencies. When you get greedy for data, you&apos;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&apos;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&apos;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&apos;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&apos;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-&amp;quot;www&amp;quot; and &amp;quot;www&amp;quot; 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&apos;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&apos;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 &amp;quot;red&amp;quot; and &amp;quot;widgets.&amp;quot; </li></ul><ul><li>Take off the black hat . If you&apos;ve used tactics like keyword stuffing, remove them from your site. They may be working now, but in the long run, they&apos;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&apos;ll confuse them. </li></ul><ul><li>Ditch registration. Don&apos;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&apos;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&apos;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&apos;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&apos;t support JavaScript, so make it easy for them to have access to &amp;quot;real&amp;quot; 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&apos;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&apos;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&apos;re accessible. </li></ul><ul><li>Create meaningful page titles . Make sure that your site&apos;s page names make sense for their content. </li></ul><ul><li>Place important information &amp;quot;above the fold.&amp;quot; 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&apos;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&apos;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&apos;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&apos;re going, or you&apos;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&apos;re using a ransom-note font, it&apos;s time to switch to something simpler. Chances are, your visitors&apos; 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&apos;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&apos;ve visited and which they haven&apos;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&apos;s more easily readable in a browser. </li></ul><ul><li>Update the privacy policy . Ensure that your site&apos;s privacy policy fully discloses everything it should. </li></ul><ul><li>Revise &amp;quot;deep&amp;quot; links . Update links so that they point to the home page of a site rather than a specific page, or make sure that you&apos;re attributing them correctly. </li></ul><ul><li>Legitimize images . If you&apos;re using images that you don&apos;t legally own, it&apos;s time to update them with your own images or those that you&apos;ve purchased. </li></ul><ul><li>Pay taxes . If you&apos;re making money from your site, it&apos;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>
    • 5. (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>
    • 6. 1: Microformats
    • 7. Add hCard to your contact details <ul><li>&lt;address class=&amp;quot; vcard &amp;quot;&gt; </li></ul><ul><li>&lt;a href=&amp;quot;/&amp;quot; class=&amp;quot; fn org url &amp;quot;&gt;Edge Hill University&lt;/a&gt;, </li></ul><ul><li>&lt;span class=&amp;quot; adr &amp;quot;&gt; </li></ul><ul><li>&lt;span class=&amp;quot; street-address &amp;quot;&gt;St Helens Road&lt;/span&gt;, </li></ul><ul><li>&lt;span class=&amp;quot; locality &amp;quot;&gt;Ormskirk&lt;/span&gt;, </li></ul><ul><li>&lt;span class=&amp;quot; region &amp;quot;&gt;Lancashire&lt;/span&gt;, </li></ul><ul><li>&lt;span class=&amp;quot; postal-code &amp;quot;&gt;L39 4QP&lt;/span&gt;, </li></ul><ul><li>&lt;span class=&amp;quot; country-name &amp;quot;&gt;UK&lt;/span&gt; </li></ul><ul><li>&lt;/span&gt;. </li></ul><ul><li>&lt;span class=&amp;quot; geo alt &amp;quot;&gt;GEO: </li></ul><ul><li>&lt;span class=&amp;quot; latitude &amp;quot;&gt;53.559704&lt;/span&gt;; </li></ul><ul><li>&lt;span class=&amp;quot; longitude &amp;quot;&gt;-2.87388&lt;/span&gt;. </li></ul><ul><li>&lt;/span&gt; </li></ul><ul><li>&lt;/address&gt; </li></ul>
    • 8. Add hCalendar to events <ul><li>&lt;div class=&amp;quot; vevent &amp;quot;&gt; </li></ul><ul><li>&lt;h2&gt;&lt;span class=&amp;quot; summary &amp;quot;&gt; </li></ul><ul><li>&lt;a href=&amp;quot;/events/2008/06/05/solstice-conference-2008&amp;quot;&gt;SOLSTICE Conference 2008&lt;/a&gt; </li></ul><ul><li>&lt;/span&gt;&lt;/h2&gt; </li></ul><ul><li>&lt;p&gt; </li></ul><ul><li>&lt;abbr class=&amp;quot; dtstart &amp;quot; title=&amp;quot;20080605T0900&amp;quot;&gt;Thursday, 5th June 2008, 9:00am&lt;/abbr&gt; </li></ul><ul><li>&lt;span&gt;- &lt;abbr class=&amp;quot; dtend &amp;quot; title=&amp;quot;20080605T1700&amp;quot;&gt;5:00pm&lt;/abbr&gt;&lt;/span&gt; </li></ul><ul><li>&lt;/p&gt; </li></ul><ul><li>&lt;p&gt; </li></ul><ul><li>&lt;span class=&amp;quot; location &amp;quot;&gt;Edge Hill University&lt;/span&gt; </li></ul><ul><li>&lt;/p&gt; </li></ul><ul><li>&lt;div class=&amp;quot; description &amp;quot;&gt; </li></ul><ul><li>&lt;p&gt;The SOLSTICE Centre for Excellence in Teaching &amp; Learning (CETL) at Edge Hill University is pleased to announce its 3rd international conference. &lt;/p&gt; </li></ul><ul><li>&lt;/div&gt; </li></ul><ul><li>&lt;/div&gt; </li></ul>
    • 9. 2: Feed Autodiscovery
    • 10. Add a link tag to &lt;head&gt; <ul><li>&lt;link rel=&amp;quot;alternate&amp;quot; type=&amp;quot;application/atom+xml&amp;quot; title=&amp;quot;Edge Hill University News&amp;quot; href=&amp;quot;http://www.edgehill.ac.uk/news/feed&amp;quot; /&gt; </li></ul>
    • 11. 3: Search autodiscovery
    • 12. Allow visitors to search from the browser
    • 13. Create an OpenSearch description <ul><li>&lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;windows-1252&amp;quot;?&gt; </li></ul><ul><li>&lt;OpenSearchDescription xmlns=&amp;quot;http://a9.com/-/spec/opensearch/1.1/&amp;quot;&gt; </li></ul><ul><li>&lt;ShortName&gt;Edge Hill University&lt;/ShortName&gt; </li></ul><ul><li>&lt;Description&gt;Search the Edge Hill University website&lt;/Description&gt; </li></ul><ul><li>&lt;Tags&gt;edge hill university edgehilluniversity edgehill&lt;/Tags&gt; </li></ul><ul><li>&lt;Url type=&amp;quot;text/html&amp;quot; method=&amp;quot;GET&amp;quot; template=&amp;quot;http://www.edgehill.ac.uk/search?query={searchTerms}&amp;quot;/&gt; </li></ul><ul><li>&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt; </li></ul><ul><li>&lt;AdultContent&gt;false&lt;/AdultContent&gt; </li></ul><ul><li>&lt;/OpenSearchDescription&gt; </li></ul>
    • 14. Add a link tag to &lt;head&gt; <ul><li>&lt;link rel=&amp;quot;search&amp;quot; type=&amp;quot;application/opensearchdescription+xml&amp;quot; title=&amp;quot;Edge Hill University Search&amp;quot; href=&amp;quot;/search/description&amp;quot; /&gt; </li></ul>
    • 15. 4. Minimise JS &amp; CSS with YUI Compressor
    • 16. 5. Enable gzip compression
    • 17. Apache’s mod_deflate <ul><li>&lt;Location /&gt; </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>&lt;/Location&gt; </li></ul>
    • 18. PHP Output Buffering <ul><li>&lt;?php </li></ul><ul><li>ob_start(&amp;quot;ob_gzhandler&amp;quot;); </li></ul><ul><li>?&gt; </li></ul>
    • 19. 6. Add hint text to search boxes
    • 20. &nbsp;
    • 21. 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(&amp;quot;&amp;quot;); } </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() == &amp;quot;&amp;quot;) { $(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>
    • 22. 7. Optimise page loading
    • 23. YSlow
    • 24. &nbsp;
    • 25. 8. Sell your soul to Google
    • 26. Stop using Webalizer, AWStats etc
    • 27. 9. Customise 404 error pages
    • 28. &nbsp;
    • 29. Apache 404 Page <ul><li>ErrorDocument 404 /notfound.html </li></ul>
    • 30. 10. Any suggestions?
    • 31. That’s all <ul><li>http://www.flickr.com/photos/stelladauer/1501351344/ </li></ul><ul><li>http://www.flickr.com/photos/mag3737/185139851/ </li></ul><ul><li>http://www.flickr.com/photos/bobloo17/188697388/ </li></ul><ul><li>http://www.flickr.com/photos/wakajawaka/1243561409/ </li></ul>Michael Nolan [email_address] +44 1695 584195 http://blogs.edgehill.ac.uk/webservices

    ×