Time it took: 60 hours
Total time until Beta shown to friends – 60 hours over three weeks, over this time I got the site to about 90 percent of where I would like site design to be.
Week 1, approximately 4 hours per day
Week 2, 2-3 hours per day, includes writing two brief posts
Week 3, 2-3 hours per day, includes writing four 400-1000 word posts
I’ve distilled my journey as a beginner building a website into seven steps, summarized below in case you want to give it a try!
As an architect and designer, I thought it would be a fun challenge to jump into something I have never done before and build my own website. I always love to learn new things, yet I was sure that getting exactly what I wanted would be no easy task. My only previous experience with something like this was an attempt, a few years ago, at a basic website on a free service for my partner. That experience was frustrating, but we managed to get a passable website. I don’t remember the name of the service, but they had their own, limited site builder, and at the time I was living a life with virtually no web presence – the only thing I had was a Facebook page that I checked about once every six months. So How was I going to build a site from scratch this time, with virtually no experience?
I developed a plan, but the process took some twists and turns. I was prepared for it to be frustrating, and it was, but I’d struggled before through teaching myself some incredibly challenging software as an architect – things like AutoCAD, 3D Max, and Revit – so I had some idea of what to expect. I had hoped there would be something intuitive and super simple out there, let’s call it the iPhone of web design software, but my experience is that there is nothing like that – yet.
Step 1: my plan started with some research.
We’ve all seen sites that we like and sites we don’t, so i started with sites that are some of my favorites. I looked at a lot of them and realized that I didn’t particularly like the look of a lot of them. I know when I see a site that I like, and I’m sure you do too. I narrowed it down to about 20 that I liked, and began looking at them in depth. A couple of important things to me were:
- Ease of use – is it easy to find your way around the site? A lot of architects, for example, try to be too clever for their own good, making sites that look graphically nice and are incredibly hard to navigate.
- Graphically simple – I started to notice a theme in the pages I liked – the layouts tended to be very simple, almost going away, letting the content rise to the forefront. I think that might be the quiet meditator in me – I don’t enjoy needless clutter on a website
- Right amount of info on the home page – I realized I gravitate to sites that present me with a bit of diversity on the first page, graphically presented. Not always, but many of the pages I’m drawn to have between 3 and 9 large images with a small bit of text that draws me to click and explore more. I find that much more than 9 choices and it becomes too many options and I often just leave.
- Device aware – I use my phone a lot for looking at websites and I noticed the trend of websites that automatically format themselves based on the device you are using. My favorite design for this type of site is Chris Brogan’s. Though I haven’t looked at much of his content, I absolutely love the way the site looks on my phone, it manages to be minimally, clear and friendly all at the same time. Chris’ site will enter the story again later.
As I was looking closely at sites, I noticed that they often have a “designed by” and/or “powered by” at the bottom of the site. I found the names of some really cool designers this way, and I also collected the names of some possible companies to use for hosting and themes.
At the time I was also listening to some design podcasts as well as frequenting Tina Rothberg’s wonderful blog swiss-miss.com. Tina advertises as a total web design/hosting solution and I started to hear advertisements for Squarespace on some podcasts as well. I went over to the Squarespace website and was very impressed. I poked around and found some very good reviews. Plus they have some very nice looking templates which are supposed to get your site up very quickly. They have a 14 day free trial so I decided to jump in.
Step 2: getting the domain name.
I had been calling business ChrisBrownStudios for a while. It started with graduate school in North Carolina, when girls with their cute southern accents would call me Chreesbrown, as if it was one word. When I wanted to add a name describing what I did, studios made sense, covering the yoga studio, and the architecture & design studio. Researching how to get a domain name, I heard from fellow architect turned entrepreneur Pat Flynn www.smartpassiveincome.com, that godaddy www.godaddy.com sells domain names for 99 cents. So I went over there and had my first shot of excitement when I found that chrisbrownstudios.com was available for purchase! Within a few minutes I was the proud owner of chrisbrownstudios.com and really felt like I was on my way!
Step 3: my first detour.
I was full of energy to get my site up and running, so I headed over to Squarespace and started my free trial. I had a site going quickly, within a few hours I had a basic site with my name on it and enjoyed seeing that paired with some beautiful templates. Then I started trying to add some content. This is where I started having problems. I realized I had in my head a fairly specific way that I wanted the site to look, and that further down the road I would want things like the ability to have people sign up to receive my posts by email, and maybe even have some helpful content to download. Though the Squarespace navigation looks nice, I found it to be not very intuitive and it was taking me hours to puzzle out the simplest little thing like getting a couple of images on the first page in the format that I wanted. For example, I could see in my head how I wanted the text displayed below my images on the home page, but with Squarespace, I could either get the font I wanted or the text displayed the right distance below the image, but not both. I spent a total of 16 hours over 4 days and began to feel there was no way to get close to the site I imagined. The final straw was the program forced me to have a word below the title of my site – there had to be a word there (it wouldn’t even let me fake it out with just a space) and that word was in an ugly font that was completely different from the rest of the site. The other problem I had is with the way I work – I like to use the web and YouTube all the time, looking up solutions to questions I have, on the fly. Squarespace is still fairly new, so the library of online resources, forums, and info provided by users is fairly limited. I understand what Squarespace is trying to do, and I think they will probably get there, but their service just wasn’t going to work for me at this point.
Step 4: The switch to Genesis.
I went back to Chris Brogan’s site again to see what he was using. He has a designer, but it also says that the site is powered by Genesis. So I went over to studiopress.com and took a look at Genesis and the themes associated with it. With a bit of experience under my belt now, I was able to see that Genesis both looked great and would have the ability to grow with me. Genesis sits on top of the WordPress framework. I looked at some sample videos of people using WordPress and Genesis, and although the graphics of the interface are not as fancy as those at Squarespace, it all seemed very logical and functional to me. So I decided to abandon my Squarespace site and the 16 hours I spent there and make the switch to Genesis.
Step 5: Getting WordPress and Genesis up and running.
I started at the studio press website site which required an outlay of money to buy Genesis and the Metro theme. They then sent me over to get WordPress, which is the underlying system that is used to build the website. With those set, I then needed a host, which can be thought of as the cloud space which holds your site and allows it to be up and running 24/7. I chose bluehost.com as they are supposed to work well with Genesis and WordPress and have great reviews for customer support. I realize this may sound a bit complicated, but there are plenty of great tutorials along the way that spell things out very clearly, and I had the system up and running in no time.
Step Six: The initial site look
…And my first code! With the Metro theme plus a few great online tutorials, I had the site looking close to how I wanted in about two hours. At this point the stuff on the site was only place holders, made with drag and drop “widgets” which made it easy to get the site formatted the way I wanted. I didn’t like any of the color options provided with the Metro Theme, and I found a tutorial on how to go into the style.css code and change the colors. I really didn’t want to mess things up, so I made a copy of the code in MS Word in case there was a problem. The process of changing colors simply involved searching online for some color combinations that I liked, then taking the numbers for those colors and replacing them in the code. I searched the code for words like “header color”, then changed the numbers and tested each one to see what it did in order to make it easy to go back if I needed to.
Step 7: Painful Tweaks.
There was no way around it, even though I got the site looking good pretty fast, it has taken a long time to go through multiple settings and get the right information in the right format in the right place. Even with tutorials, I got stuck 3 or four times for hours at a time, trying to get a picture to load in the right place, or making something link the way I wanted it to. I find though, that the more research and struggle I go through to figure something out, the more rewarding it feels once I find a solution. Another benefit of this process, as opposed to having someone build a site for me, is that I now feel I really know every corner of my site and how it works.
Best Next Steps
There is still a lot to do to get the site working properly. Fore example, as of this writing, if you click on the follow me buttons at the very upper right of the page you get some fun stuff – click on the e-mail button and you get a warning that this is probably a phising site (I have no idea why), click on the Pinterest button and you are directed to a site that appears to be Japanese knitting site! So I’m sure I’ll spend a lot more time making tweaks and I’ll pass along any tips I learn at my blog Yoga and Design for Conscious Living. I also have a much greater appreciation of the skills and worth of website developers. But I’m excited that the site is 90 percent there in terms of design, I can shift to making content. I’ve developed a basic knowledge of my site and how it works, and that will pay off many times over. So now on to the most important thing – sharing lots of high quality information that improves people’s lives.
Enjoyed this article? Subscribe to my updates and you’ll never miss out on the chance for self transformation. It’s easy, just enter your e-mail on the right side of this page at chrisbrownstudios.com