We all have common questions when building a website, but how do we know we are following best practice methods?
Thursday | June 7, 2018
All News

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
  • 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