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?
You read my emails. There was an email on Sept 23rd on it. ;) Hit my twitter DM and we can go from there.
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.
Apparently the comments section doesn't respect my spacing for code formatting, but it should all still work.
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.
I'm glad it's valuable to you.