2. Today’s Agenda : Website Best Practices Changes in Web Usage Next Steps in Development Opportunities for Training
3. Website Best Practices : Three Cornerstones of Good Design Usability Readability Accessibility
4. Usability : Achieving Your Goals What does your audience need? How can you best organize content? Does navigation reflect your organization? Is the content readable?
5. What does your audience need : Providing a good user experience Respect your visitors Inform and teach your visitors Develop your own style Respect the standards
6. Organize content : Thinking non-linearly Instead of Narrative Order Or Logical Arguments Use Categorical Organization
7. Navigation : Visitors never get lost Consistent look and feel across the site Redundant navigation Minimize the layers User hypertext links Remember three-click rule
8. Readability : You do the hard work Be succinct Write for scannability Get your readers hooked User hypertext links
9. Be succinct : The hardest work Write 50% less than you would on paper Keep scrolling to a minimum Stay focused Cut out non-essential information
10. Write for Scannability : Hard work, but crucial Make words stand out Use various levels of headlines Use meaningful headlines Use bulleted lists One idea per paragraph Write according to the inverse pyramid
11.
12. Accessibility : Make all visitors feel welcome Include people with disabilities Other users can benefit, too Visually impaired does not mean blind
13. Accessibility Guidelines : More than color is needed to mark content Give warning before the unexpected happens
14. Image Accessibility : At a minimum, include an “alt attribute” Images with extensive information deserve a long description attribute Keep images small to speed download time
15. Web 2.0 : A new way to deliver content Information sharing Interoperability User-centered design Collaboration
16. Next Steps : What’s next with Drupal Drupal 6 Upgrades User Interface Enhancements New Tools and Options
17. Questions? Don’t be shy EESC Website http://extension.oregonstate.edu /eesc/ EESC WebHelp website http://extension.oregonstate.edu /webhelp/ Contact Us Lani Jo Leigh - ljl [email_address] Bryan Mayjor - bryan.mayjor@oregonstate.edu
Editor's Notes
Welcome to Spring Training, I’m Lani Jo Leigh, software trainer for more than fifteen years, been working with EESC since 2008, Drupal has been part of the OSU web culture since ??, we started installing 5 at the county level in ???, there were issues with 5, approval cue, difficult to create menus, this year moved from 5 into 6, and we’ve done this keeping in mind the changing needs of our target audiences and the needs of EESC staff to have a system that‘s easy to learn, easy to create, and easy to maintain
Best practices - because of Cascading Style Sheets and the new book module and the ease in creating menus, these are easily accomplished in Drupal 6. While we’re looking at best practices, we’lll talk about some common problems and tasks you might face. Changes in Web Usage - new ways to share information among team members and new ways to reach your target audience – revisioning, blogs with comments, embedded video are just a few. Bryan Mayjor will cover some of the exciting new developments, and finally, today we’re just giving you a quick overview, but there are lots of other opportunities for training. new website with reference library, FAQs, screencasts, one-on-one training and consultation and we’ll make sure you know how to take advantage of them before you leave.
you know a good website when you see it. It’s also apparent when a website doesn’t work. What makes the difference? These are the three cornerstones of good website design.
Usability is simply the extent to which a website can be used by its intended audience to achieve specific goals effectively and efficiently What does your audience need – remember you may serve more than one audience How can you best organize content – so users will be able to find it AND so your site can grow with their needs Does the navigation reflect your organization – main site navigation the same on every page, pages of content should provide breadcrumbs Content should be readable – clearly written well and well organized – talk about more a little later
respect your visitors – don’t force your visitors to read the entire content of a webpage, let them choose, if you have something to tell, you’ll find your listeners inform and teach your visitors – the web is a powerful instrument to draw public attention to your work and services, if you share valuable knowledge with your users, you’ll be respected and sought after as the go-to place for information Develop your own style – be inspired by other sites, but share your services and information in your unique voice respect the standards – this is a given on the EESC websites, because the web developers and designers have taken this into consideration and provided you with a site that reflects appropriate web standards
Instead of Narrative order – which imposes a sequence that users may not want or need or Logical arguments – too long and sequential for impatient users use Categorical Organization – structure is not a single flow, but information split into coherent chunks that focus on a certain topic
consistent look and feel across the site – home page looks like a home page, serves as a visual anchor, other classes – primary pages, message pages, all keep same look and feel redundant navigation – people learn in different ways, they’ll look in different ways, so find multiple ways of finding information, include a site map Keep layers to a minimum – too many layers users can’t find the information they want hypertext links enable users to move easily around the site three click rule – starting at the home page users should be able to get to desired information in three mouse clicks, not always achievable, but by taking it into account in the site design, you’re more likely to get close to it.
be succinct – no more than 50% of text you would use in a hardcopy publication write for scannability write in a way that gets your readers hooked use hypertext links – split long pieces of information into multiple pages
Reading from computer screens is about 25% slower than reading from paper – write 50% less text Users don’t like to scroll – another reason to keep pages short if writing original text, write long and cut short – this will keep you text tightly focused cut out non-essential information – every word and phrase should have to fight for its life, for example write “use” instead of “utilize,” “decide” instead of “made a decision”
Use highlighting and emphasis to make important words catch the user’s eye – colored text, bold, save underlined for hypertext links use the various levels of headlines – the text editor offers 5 levels use meaningful rather than cute headings – the heading should tell the user what the page or section is about use bulleted lists stick with one idea per paragraph write according to the inverse pyramid – start with a short conclusion so users get the gist of the page even if they don’t read all of it
Use action verbs – which is better? “The new product is here” or “Achieve Results by Purchasing the New Product” catch their Attention with playful and clever – as long as it’s appropriate, the goal is to draw the reader in to read more be descriptive – include key elements of the thought – readers want to know what they’ll get if they read further links should be descriptive, too – a link that tells you precisely what it links to is more valuable than a generic link text, it’s more likely to attract the eye and more likely to result in an action by the user
means people with disabilities can use the Web – more specifically, it means that people with disabilities can perceive, understand, navigate and interact with the Web, and can contribute to the web – not only people with disabilities that benefit from accessibility – it benefits others like older people with changing abilities due to aging Visually impaired does not mean blind – users may be color-blind or simply farsighted
Accessibility Guidelines don’t rely on color alone to mark special content like hypertext links – people expect links to be underlined, don’t use red text to mark important text – make it boldface don’t make your webpage do unexpected things – don’t make links open in a new window, if you link to something not a web page, such as a pdf, warn users the link requires a plug-in
Image Accessibility include an alt attribute – if the image communicates any information at all, provide a brief description of the content include a long description attribute – if the image contains extensive information, and link to a file with a full text description of the content of the image keep images as small as practical to speed download time – resize the file when it’s uploaded to the site rather than setting the image width and height in the webpage
Web 2.0: A New Way to Deliver Content - A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them Information Sharing – one-to-one exchanges of data between a sender and a receiver Interoperability – the ability of two or more systems or components to exchange information User-centered design – the needs, wants, and limitations of end users are carefully considered in the design Collaboration – a recursive process where or two or more people or organizations work together toward a common set of goals
Next Steps: What’s Next with Drupal 98% of Extension County, AES and departmental sites have been converted to Drupal 6 EESC will be adding features that simplify the user experience Demo of Photo Gallery, image resizing within WYSIWYG editor, rotating announcements
![More on Drupal ,[object Object],[object Object]](https://image.slidesharecdn.com/springtraining-100414113750-phpapp02/85/more-on-drupal-osu-spring-training-2010-1-320.jpg)
