Since then, they’ve already completed more than 100 sessions on veterans and active duty military since the clinic opened just a few short months ago. With their rapid growth and exposure, Healing Warriors Program was in desperate need of a new website.
You know I’ve dappled in website design here on my own blog, and while I am no programmer by any stretch, I know enough to get by with a decent theme.
The nice thing about open-source websites like WordPress is the literally thousands of talented programmers out there who love to make great (and not so great) WordPress themes for free. In addition to finding a stable, well-coded theme (usually done with reviews, responsiveness of support, etc.), the trick to finding a good WordPress theme is looking for one that allows you flexible customization (those custom CSS boxes are super nice) and follows a basic structure that you’re looking for.
That’s where your basic wireframe comes in:
I told you, my coding skills are pretty slim. I can typically manipulate what’s already coded (within reason), but my job becomes a lot easier if the basic structure of the template already matches what the client wants. With a wireframe in hand, it’s much easier to sort through those thousands of themes to find the one that most closely resembles the vision.
Once you settle on a theme that matches with your basic structure out of the box, most of the work is just basic CSS tweaking.
For the most part, you don’t need a fancy user interface to change the CSS of your website. For those of you that don’t know, CSS refers to “Cascading Style Sheets,” which is a style sheet language responsible for describing the look and formatting of the website. The CSS is perhaps both the largest and least important task to any website, only because you could have an amazing website built with solid code but no one will care if it looks bad. I mean, that’s why we dress up and look presentable at interviews and special events right?
Now comes my favorite web tool ever: Google Chrome’s Inspect Element.
When viewing a website using Google Chrome, right click on anything in the page and select “Inspect Element,” opening up the markup language for that page. But it’s not just the markup language, it’s the fact that I can hover over elements to see what code is responsible for what on the page, and simultaneously pinpoint the lines of CSS that also affect those page elements.
Then, simply click on the CSS you see on the right, and there you go.
Did I mention that you can also type in new values for the CSS to see a preview of those changes? Maybe you want to up the font size but you’re not sure how large, just pop in a new size and watch it increase on the page.
Yup, it’s pretty fun to geek out to.
We launched the new look to the website last week, and so far I’m pretty excited by it. There are adjustments to be made, like updating the header (a little too much white space for my taste), but overall I think it’s definitely a step up from what was there before.