Website Best Practices Webinar
Thursday | June 7, 2018
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
- Image
- Panels IPE
- Columns
- Image
- Width & Background Color Options
- Ability to move it around anywhere on your page
- Columns
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)
- Bootstrap Menu
- 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