Or how to learn loads from doing something simple…
120 replies, 922 likes. That’s a lot!
I read the above tweet on Saturday and it prompted me to finally get it together and build a simple site.
I now need one in order to become a preferred supplier for a new client where checks will be made. The landing page I’d had for years (2008) and never bothered to update was just not good enough.
Always too busy – and an old joke from my agency days was if another agency had time to build a decent site then they had a problem attracting work!
Judging from others replies, there’s a lot of us using the same excuses. I thought I’d make it ‘easy’ for myself – I should know where I get sidetracked and what takes a lot of time…
Let’s spin up a WordPress site
OK, I do a lot of work with WordPress, so this bit should be easy.
Normally I use Local by Flywheel to setup a local WP installation, set up a github repo, setup a SASS/JS workflow, install must-have plugins. This time I’m not going to do any of that. Cool, that saves time.
Luckily I have a shared linux server I use for like my site, my wifes, my daughters, My daughter’s boyfriends mums, that startup idea someone pitched… where I can spin up a new WP site quickly. Not the fastest server on the planet, but fine for purpose. Couple of minutes later, Done! Link my domain to new WP install. Oh dear I used the last free SSL certificate on my Wife’s site. Buy a certificate, assign it. OK now I’m going to have to finish this because it just cost money. Update WP address to https. 15 minutes later and I have a secure site about some French painter.
Now choose a theme…
Oh no, that rabbit hole. I’ve worked with enough designers on their own sites to know that this can take forever. It still is taking forever in some cases. At least we’re similar in that respect…
So I’m going to skip that and just use the default Twenty Twenty One theme. 2020 and 2019 get deleted. OK, so now I’m pure WP – bit like pure android on a pixel phone.
While I’m at it, I decide on a manifesto to not get sidetracked:
- No plugins – bare metal – hardcore!
- No Image manipulation. No Photoshop. Only what WP can do with images. SVG is OK, but only as markup in a custom HTML block.
- No child theme, No editing theme files.
- CSS is OK, but can only be added via the customiser, and should be minimal.
- No custom fonts. Well not yet.
- Embeds are OK – pens on codepen are fine as are videos, except I don’t have any…
I must stop myself from breaking these rules, I must stop myself from breaking these rules, I must stop myself from breaking these rules, I must stop myself from breaking these rules, I must stop myself from breaking these rules…
Now what?
Some time later, and I’ve still got a page about a French painter. This is what it must be like for someone who’s never built a website and gets handed the keys to a blank WordPress site – “Job done, here’s your new website”
Let’s change the background, get rid of the pages from the menu we’re not going to use, disable comments and get rid of those French paintings. A blank canvas. Get a cup of coffee. I wish I was a copywriter.
Thankfully I’ve always used my domain name as the business name and have no logo, so I’ll enter that and use the tagline thing to explain what the Italian word ‘adatto’ means. I occasionally get enquires from people looking for a Finnish chair called Adatto…
Ooh, cool, it’s got dark mode built in – just hadn’t noticed it – it’s in the bottom right corner and because I haven’t got any content yet it’s easy to miss, so lets add the first bit of CSS and move it to top right ‘cos that’s where I expect it to be.
Later I put it back because it interferes with the mobile menu…
I go back and look at Andy’s thread to get some ideas:
Services, About, Portfolio, Contact are normally a good start.
Andy Griffiths
OK, that sort of matches those notes I made recently. As I sidestepped design and leveraged all of the WP in-house theme developers design skills there’s now only some content.
The design is probably the easy bit. It’s when you start trying to write decent content it becomes very time consuming.
Andy Griffiths
Content, content, content…
Intro
I start with a brief intro to what I do, hoping it makes sense to someone who’s not a web developer. After some time I realise that I’m rubbish at this. I try and avoid all the phrases like; “Cutting edge”, “latest technologies”, “responsive design”.
I also need to appeal to a bit of a wider audience than small businesses as I’ve often worked as a contractor. Eventually I’ve got something that’ll do. Now I need a photo.
I don’t want one of those monochrome corporate site avatar things, so look through my phone to find a photo.
As I only recently took a selfie for the first time and that is totally inappropriate, it takes some time to go through years of photos. You don’t tend to take photos of yourself on your own phone and the wife is away and I want to get this done today.
As the current copy is explaining that a lot of what I do is getting rid of rubbish accumulated on sites by third party scripts, frameworks, bad/no image management and plugins, I toy with the idea of using a photo of me after having a beer after digging out a 20 meter trench for a new sewage overflow in August. In Italy. In full sun. In rocky ground. On a hillside.
That beer was good and brought back memories. But the photo is not really appropriate.
Find another one of me looking over a wall I’ve just dug underneath, upload to WP ( Image #1 woo!). Crop it in WP and apply the rounded style to “avatar” it. Fiddle with columns in the block editor to get it next to my headline and apply some CSS filters ‘cos it was dark and low contrast.
Portfolio
For a portfolio section, I opened up some recent work, and in the devtools device toolbar capture screenshots of each site at full HD and on a Moto G4.
They’re PNG’s and there’s no way to convert them without breaking my rules, so I’ll rely on the WP image sizes. After loads of fiddling with columns, columns in groups in columns and a few lines of CSS I get the following. OK now we’re on a roll.
Barbara Bertagnolli
Jewellery Designer
WordPress / WooCommerce
Portobello Cashmere
Independent Clothing Shop
Shopify
WOW Toys
Toy Manufacturer Online Shop
Laravel / Vue / E-commerce
While writing this post, I tried to make this a ‘reusable block’ so I could insert it here. Uh uh – got mangled. Thankfully Undo and good old Copy and Paste works fine. What does the ‘Move to’ option in the block menu do? Nothing as far as I can tell. RTFM / Google…
Clients, Skills/Expertise, Technologies, Background, Loves, Interests
Just a bunch of lists.
Footer
This was a bit painful. Had to hide the default footer and layout my content in the footer widget area.
Hey it’s good enough for now
It’s not winning any awards, but the hardest thing is starting.
Strangely creating all those limitations made the whole process quicker as it was all about the content.
All in all it took about 4 hours. Fun? Hmm not sure, but I was inspired to write this first blog post.
Lots of column stuff – the portfolio section and lists don’t really work on mobile out of the box and there are some vertical spacing issues, so they need looking at.
I’ll add client logos for some of well-known clients, some SVG icons before the list section headers (‘cos everyone else does), add a CV/resume page and maybe add something about what I did before HTML.
I did learn A LOT about the quirks of the WP block editing experience – it doesn’t feel 100% to me and some weird stuff and WTF moments happened. I hate to think what’s going on under the hood, but I do now appreciate WP content block editing from a users perspective.
Duplicate is a life saver when you have anything but a simple block, ‘Move to’ has hidden powers – so hidden they’re invisible.
Typographic and page/full width alignment options aren’t consistently available. Some numeric inputs are spinners, some aren’t. Padding units can only be integers…
Light/Dark mode is inconsistent – background colours / gradients are a no-no. Drop shadows had to be the same colour as the dark background, so only appear in light mode.
No fonts, no JS, no image ‘editing’ and so far just this CSS – only two instances of !important
Try it! Build your own.
I’m either mad or a masochist because I’m now going to enable comments to a bunch of fellow developers.
/* GLOBAL */
body.is-light-theme {
--global--color-primary: #222;
}
/* DARK MODE */
#dark-mode-toggler.fixed-bottom {
top: 5px;
bottom: auto;
max-height: fit-content;
}
/* HEADER */
.site-title, .site-name{
--branding--title--text-transform: normal;
--heading--font-weight: 700;
--branding--title--font-size: 2.5rem;
}
.site-description{
font-style: italic;
}
/* CONTENT */
.site-content{
--responsive--aligndefault-width: 100%;
}
.wp-block-separator.alignwide {
width: 100%;
height: 1px;
margin: 4rem auto;
}
figure.wp-block-image.size-medium.is-resized.is-style-rounded {
filter: brightness(1.3)
saturate(0.8)
drop-shadow(2px 4px 6px #28303d40);
}
.wp-block-image.is-style-rounded img {
border: 5px solid #fff;
}
.is-style-twentytwentyone-columns-overlap .wp-block-column:first-child figure {
width: 150%;
}
.is-style-twentytwentyone-columns-overlap div:last-child {
text-align: right;
}
.is-style-twentytwentyone-columns-overlap .wp-block-column:first-child img {
box-shadow: 2px 4px 6px 0 #28303d20;
}
.is-style-twentytwentyone-columns-overlap div:last-child img {
box-shadow: 2px 4px 20px 0 #28303d40;
}
/* FOOTER */
@media only screen and (min-width: 1024px) {
.widget-area {
grid-template-columns: repeat(2, 1fr);
}
}
.widget-area {
border-top: 1px solid var(--global--color-border);
padding-top: 0;
margin-top: 2rem
}
.widget-area .wp-block-column {
flex: 0 1 auto !important;
}
.site-info {
display:none !important;
}