I’ve done enough site audits recently that I’ve started to develop a mental process. I thought I should write down a *majority* of the things I look for to help my subscribers come back and audit their own site occasionally.
I just made an effort to update the branding on my site. Here are some tools/tips others might find helpful. The 2nd two are applicable to WordPress GeneratePress.
1. Colors: Here is a site to help you pick your colors: https://www.themes.dev/tailwindcss-colors/. Once you pick a primary color, it has 10 different shades of that color. It also has various tones of gray which can help you differentiate your site in a subtle way.
2. Rounded Corners: You can round the corners of the article and widget blocks using the following additional CSS. Update px for larger/smaller rounding. The @media line removes the rounded corners at the default WordPress break point for mobile. It looks weird to keep the corners rounded on mobile because the margin around the articles/widgets are removed.
@media screen and (min-width: 786px) {
.widget,
.inside-article {
border-radius: 5px;
}
}
3. Box Shadows: Add box shadows to main navigation, article, and widgets with this additional CSS:
Check out this site to adjust your box shadows if you want more or less: https://tailwindcss.com/docs/box-shadow. Those are the numbers for the default shadow.
Thanks opossum! Great content as always! How do we sign up for the website audit?
I just made an effort to update the branding on my site. Here are some tools/tips others might find helpful. The 2nd two are applicable to WordPress GeneratePress.
1. Colors: Here is a site to help you pick your colors: https://www.themes.dev/tailwindcss-colors/. Once you pick a primary color, it has 10 different shades of that color. It also has various tones of gray which can help you differentiate your site in a subtle way.
2. Rounded Corners: You can round the corners of the article and widget blocks using the following additional CSS. Update px for larger/smaller rounding. The @media line removes the rounded corners at the default WordPress break point for mobile. It looks weird to keep the corners rounded on mobile because the margin around the articles/widgets are removed.
@media screen and (min-width: 786px) {
.widget,
.inside-article {
border-radius: 5px;
}
}
3. Box Shadows: Add box shadows to main navigation, article, and widgets with this additional CSS:
.inside-article,
.site-header,
.widget {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
Check out this site to adjust your box shadows if you want more or less: https://tailwindcss.com/docs/box-shadow. Those are the numbers for the default shadow.
Holy shit an audit from an autist? Thanks Opossum
This alone is worth $100, thanks for the sick content mate. Will be useful when I’m reviewing my businesses.