building better websites
TRANSCRIPT
![Page 1: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/1.jpg)
Building Better Web Pages
Sonja Fuchs, Web Technology Specialist
Permission accepted to use some content from "Building the Web Backwards” by Mike Vysocka, web developer at North Carolina State University
![Page 2: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/2.jpg)
Baked In
• Accessibility• Security• Branding• Usability• Mobile Friendly• Creative Commons• Contact Information• Search Box• Share Buttons• Uptime
Photo by Dan Parsons on Flickr
![Page 3: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/3.jpg)
Is This Your Website?
What does this mean?
![Page 4: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/4.jpg)
Dig In
Photo: http://commons.wikimedia.org/wiki/Hyacinthe_Rigaud
![Page 5: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/5.jpg)
Who is Your Audience?
![Page 6: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/6.jpg)
What Does Your Audience Call It?
![Page 7: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/7.jpg)
Titles: Short and Sweet Relevant
![Page 8: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/8.jpg)
Say Bye to Inverted Pyramid
See Hubspot blogpost about skimmable content examples
![Page 9: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/9.jpg)
Picture, please
Don’t have a photo? Try: http://www.ag.ndsu.edu/agcomm/photos-illustrations
![Page 10: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/10.jpg)
Keep Mobile in MindDate Range Visits to Ag
CMS sitesNotes % of all Ag
CMS visitsAug. 2012 – Aug. 2013
53,256 4%
Aug. 2013 – Aug. 2014
103,545 94% increase
11%
![Page 11: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/11.jpg)
Mobile FirstPC Mobile
- For more tips, visit my presentation Mobile Optimization Presentation Spring 2014
- If you don’t have a smartphone, sign up for Mobilizer to preview your website
![Page 12: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/12.jpg)
The Web is Not a NewspaperEasier to digest - skimming
![Page 13: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/13.jpg)
PDF = pretty darn futile
• Must have Adobe Program to open• Data usage on smartphones to download files• Less searchable than a web page• Hard to Share• Can’t measure behavior• Extra clicks
PDFs do not belong on the web, unless you’re CERTAIN people print it
![Page 14: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/14.jpg)
![Page 15: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/15.jpg)
Ag Comm Hard at Work
Redesigning Pubs pages to be web-friendly with the option to download PDF
![Page 16: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/16.jpg)
“Content Audit”
Photo by Roosh Inf3ktion on Flickr
Check every page on your site:
• Delete or update old or irrelevant content
• Add relevant content, as often as possible
• Make sure all links are working (Check My Links add-on in Chrome app store - free)
• Call to action or “for more info” on every page
• Share on social media
• Test on mobile
![Page 17: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/17.jpg)
LinksIf it’s already online, link to it. No need to re-create.
Link to social media
Counties should have pages for these: • 4-H Youth Dev• FCS• Ag & Natural Resources• Community Vitality
If relevant, link to other NDSU ag sites like: • Publications• Crop and Pest Report• Variety Trials• NDAWN• Crops • Livestock• FCS• Community Vitality• Apps • Lawns, Gardens & Trees• Extension social media• Extension News• Nourishing Boomers and Beyond
Fix link text:• Burleigh County Extension, not
http://www.ag.ndsu.edu/burleighcountyextension/4-h
• Sonja Fuchs not [email protected]
Ask local organizations to link to your site
Link to Impact Reports
![Page 18: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/18.jpg)
SuggestionsTell them who you are and what you do • Bottineau does a nice job with Meet the Staff• Burleigh county does a nice “Who we are” page• Are you a courthouse? • Impact Reports • Check out Ag CMS How-To Guide for ideas
• Don’t put everything on the homepage. All your pages are potentially your homepage
Ugly web:
![Page 19: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/19.jpg)
Ask an Expert Widgets (eXtension)
![Page 20: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/20.jpg)
Feeds
Image by RRZEicons (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
Share info from other sites on yours using the Feed Mixer Portlet
![Page 21: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/21.jpg)
Events• Create the event• The event portlet will display events and allow you to put the event on your calendar
Events portlet
Outlook calendar
![Page 22: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/22.jpg)
Google Maps
Create your own Google Map
Great way to show events or locations around the state
![Page 23: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/23.jpg)
Organization
• Editorial calendar– Online Content Calendar example
• Build and schedule ahead of time
![Page 24: Building Better Websites](https://reader035.vdocuments.mx/reader035/viewer/2022070601/58870f2c1a28abf2228b5c8f/html5/thumbnails/24.jpg)
Questions? Need Help?
Web Technology SpecialistsSonja Fuchs (701) 231-6403Bob Bertsch (701) 231-7381
Ag CMS training & tutorialsWeb Services on FacebookAg CMS How-To’s on YouTube