The freedom to do whatever you want on a website is amazing and compelling at the same time. We all have common questions when building a website, but how do we know we are following best practice methods?

Co-op Web Builder Best Practices from Touchstone Energy Cooperatives on Vimeo.

June 7, 2018 | 12 p.m. EST

The freedom to do whatever you want on a website is amazing and compelling at the same time. We all have common questions when building a website, but how do we know we are following best practice methods?

Things we covered include...

Demo Pages

• Delete them if you don't want them
• Make sure to change the content on them
• Update privacy/legal information pages
• File them under your own menu structure

Image Dimensions for components

• Slideshow w/ Captions
  • All same height
  • Width at least 1600px, ideally 1920px for homepage
  • Page Layout regions for slideshow
  • Slide image width settings
• News Card Dimensions
  • 660x430 or 1320x860 for super high quality, longer load times
• Media Cards
  • 380 x 200 (homepage full width)
  • 300 x 200 (child page, not full width)

Component Tips

• Document Embed only for PDF files that are < 10MB
• Create a link or button that opens the PDF for anything else
• Full width paragraph –can be used flexibly to display content http://midlandpower.coopwebbuilder3.com/membership
  • Enhancement added that automatically highlights links and makes them obvious within the paragraph text.
• Slideshow w/ Captions
  • If your image isn't wide enough to span the page
  • Example > http://mckenzieelectric.coopwebbuilder3.com/
• Embed Content
  • Google map
  • Video Card
  • Width needs to be 100% or it will bleed out of a container, this is just web design in general

Do your filenames and formats make sense to a web browser?

• No spaces or special characters
• Underscores and dashes are OK
• Do not use foreign browser file types on websites (.tiff, .psd, .ppt), the browser won't know how to handle them.
  • Convert to web friendly format (.jpg, .png, .pdf)

Create links and/or enhance them with title attributes

• Link-it
  • External website link for text
  • Intenal webpage link
  • File link
    • Right click for EDIT LINK
    • Title
    • Open in a new window
    • Classes
      • button
      • btn btn-primary
      • btn btn-default
      • btn btn-warning
      • btn btn-secondary
• Use IMCE link button
  • Link an image to a file in your file manager
• Paragraph Blocks
  • Image
    • Link field
  • Most components have a link field for any images
• Panels IPE
  • Columns
    • Image
  • Width & Background Color Options
  • Ability to move it around anywhere on your page

Menus

• Bootstrap Menu vs Mega Menu
  • Bootstrap Menu
    • Main links route:<nolink>
  • Mega Menu
    • Keep it simple (gosemo.com)
    • Small images and/or videos work well (gosemo.com)
• Header vs Main vs Footer
  • Update footer links
  • Add privacy legal information to pages
• External Links
• PDF Links

Regions

• Fill out Footer Columns II & III
• Try a sidebar out and see if it fits you
• Visibility by page/s selection
• Visibility on specific pages or by user role

Mobile Site

• Check your site on mobile
• Design for mobile too
• No need for view full site options
• Browser inspection tools or your phone itself

SSL

• Best practice
• Encryption for login
• Encryption for form data as users enter it
• Required for embedded bill pay component