Menu
Okay, so maybe you won’t find your website populated by a cadre of early 20th century baseball heroes, but if you build it properly you’ll certainly earn the gratitude of your site visitors. And that is the point of this guide – a general design guide of good practices and direction to be built in so as to ensure a great visitor experience.
Elementor provides a convenient way to export and import site kits. When a project begins the most recent and up-to-date version of “Thrive-SEO-Idaho Site Kit” should be imported and adjustments made to the theme settings where necessary (font types, font sizes, colors, etc.). Font types, sizes, line-heights, and site colors should be provided at this time along with a mockup for the homepage build, and one inner page design. The inner-page design serves as a general guideline for inner-page development.
The site kit provides a baseline starting point that will simplify the build. It contains various templates for headers, footers, and inner page designs. These templates have basic styling parameters built in (specific paddings, margins, etc.) and only need content and visual styling to be added to their respective modules.
The site kit will provide ease of use when tasking out the site dev. Tasking should be capable of being simplified to directions such as “Use header template A, footer B, and templates C,D, and E for pages X,Y, and Z.”
Unless otherwise stated at the beginning of the project design, main content area sizes, paddings, and margins should be maintained. When creating custom sections to the site not available from the Site Kit templates, the design trends of the site kit should be maintained.
General Settings
Ensure the site title is properly entered in the General Settings. If there are any custom settings that need to be entered here, do so.
Reading
It is generally good practice to check the box for “Discourage search engines from indexing this site” to keep Google or other bots from indexing the stage site, specifically if the stage site is not behind a maintenance screen. This necessitates UNCHECKING THE BOX once the site is live.
Checking the reading settings is a priority on site launch.
Permalinks
Unless requested otherwise, or necessitated by site build/design, the permalinks should be set to Post Name.
Custom styling is to be added to the Global CSS in the Site Settings of the Hello Elementor theme.
Add this to the global CSS
html { font-size: 62.5%; }
Breakpoints should be set like the following unless otherwise directed.
The following mobile responsive breakpoints are based on Bootstrap breakpoints, and their use is intended to “future-proof” responsive work.
Additional breakpoints can be added in the stylesheet on a as needed basis for one-off situations that arise (example: navigation menu items wrapping prior to the mobile switch).
Defining a base font-size of 62.5% has the convenience of sizing rems in a way that is similar to using px. This would be added to the site’s Global CSS and set on the html tag.
html { font-size: 62.5%; }
Example:
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Fonts should be set in Rems (Root EM)
In the site settings, under Typography, settings should be enacted for the body font and headings. The design guide will have the information needed. Font choice, size, line-height, and color should be provided as a design guide at the time the homepage mock-up is sent.
Some things to cover – gutters, navigation wrapping, overlapping logo, items too far apart, items too close…
Gutters
Examples…
Good Spacing
Examples…
Bad Spacing
Examples…
Examples of columns that are too smooshed and should be stacked prior to natural stacking.
Good and bad examples of color and contrast
Images are to be .webp due to the advanced compression. Any images provided or used on the site should be updated to .webp. Ensure the compression settings produce a good quality image. When compressing to .webp in Photoshop, the 75 setting level tends to do a good job of both compressing and producing a high quality image.
Temp Images to come from – https://unsplash.com, Pexels, or from Shutterstock (watermarked version) to ensure we don’t have copyright issues.
If we are choosing images for clients: Watermarked versions of Shutterstock images are to be used until the client signs-off on them, whereupon non-watermarked versions will be uploaded. This adds an extra bit of work in sourcing and sizing (essentially doing the task twice) but mitigates purchasing images that the client rejects and requests replacement.
If an image is also serving as a link, a hover effect should be applied. Unless requested by a client, please refrain from using the more obnoxious effects (wiggles, jiggles, etc.).
Copyright © 2023 Idaho Medical Academy | All Rights Reserved | Sitemap | Website Development By Thrive, A Boise Web Design Company