From Scratch – Adventures in Independent Music Making

Posts Tagged ‘Optimization’

How did I do that?

During the 3rd week of the 2nd wave of the Music Success in Nine Weeks blog challenge, I did a complete overhaul of my website from creating a brand new background graphic (from scratch) to re-designing the layout of the content. A few people wanted to know how I did it and so I decided to take this week to finally complete the description and share it with everyone in case there are more people out there that could benefit from the answers. It’s laid out in a relatively simple format with links to sites, articles and videos I found useful during the design process. I had absolutely no training in graphic design and very little knowledge of web design going into this challenge, so if you find yourself in the same shoes you might find it interesting to read. It is posted on my website under “About: My Web Design“.

Since most or many of the people in the #Msi9w3 challenge use Bandzoogle (the builder I use for my website) and may read this blog, I thought I would include a snippet from the description of my process that guides you specifically through the Custom Style builder in the Bandzoogle platform, using my website as an example.

• First step: I selected “Custom Styles” and uploaded the custom graphic! Then set the background colour to white.
• Under “options”, which is beside the thumbnail of your image in the control panel, I chose to have the image aligned in the top-center part of the page with no repeat (you would use this if you were tiling so that the image would appear all over the page, but I have just one big image so it wasn’t necessary). I decided not to have the image scroll with the page and selected ‘no’ for that option That means that my background image stays still and the content moves up and down while someone scrolls along my website. If you select ‘yes’ for this option the image will also move with the content. Like most of this stuff, it’s easier to understand once you try it and play around with it.
• Under “Page Layout” I made the “Top Margin” 438 px (that means the menu bar will be 438 pixels below the top of the page), checked the ‘standard width’ box and ‘position’-ed it on the left.
• I chose not to put in a header, as the background image serves that purpose
• I chose the option to have the menu placed after (below) the header instead of the top of the page with 0px  padding (px = pixels & the more “padding”, the taller the menu and more space between the menu buttons and the borders of the menu bar)
• I decided not to use a solid colour instead of an image as the background of the menu bar, but I could have done either. The colour I selected in Photoshop with the eye dropper tool. I copied the colour code (this shade of orange is #9c510f) and pasted that into the colour choice box in the Bandzoogle colour picker. Opacity set to 90%.
• The Menu Button spacing I set to 5 px (that’s the distance between menu buttons) with font “Mailbomb” (a font that’s in theBandzoogle library) size 20 px
• I chose not to use custom background images for the buttons, but you can. There are a lot of things you can use custom images for in this builder.
• For the Sub Menu (aka drop down menu) I used 2 shades of grey colours from my background graphic and set the opacity to 100%. I used colour #333333 for a dark background & a lighter #525252 for when the visitor’s mouse rolls over that button in the list. This gives it the effect of being highlighted and shows the visitor which page they will be selecting if they click the mouse. You can do the same thing with the font colour, but I decided one roll over option is enough for my page and set both the font and roll over colours to white (#ffffff) so that there would be no change to the font when the visitor hovers over that submenu button.
• Under “Content” I kept the padding at 0px because my menu bar is already pretty far down the screen, I didn’t want the content of the page to be any lower (the padding in this section determines how far away your content is from the menu). I set the background to the same shade of white, but this time made the opacity 80% so that my background image still shows through a little bit when the visitor is scrolling.
• I chose Verdana (size 14px) for the content font because it is easy to read and is thin. I write a lot, as you can probably tell, so being able to fit more words in less space is important. For that same reason, I made the line spacing 0% (as close together as possible). Because the content font is on a white background I made the text colour black (#000000) and made the link colour the same orange that is in my menu background and background graphic (#9c510f) to make it easier for readers to recognize when a word is clickable.
• Under “Sub Headers” (not to be confused with sub menu, the sub headers are lines of text to indicate a new section in the actual content of your website, not in the drop down menu. I didn’t use any padding for the sub headers, though you do have the option to use vertical and/or horizontal padding in this part (meaning you can decide how far from the side and/or top of the page your sub headers will appear (this does not change the position of your content).You can also choose to have a colour or custom background image for your sub headers, but I wanted mine to be completely transparent so I chose no image and turned off colour. I used the “MailBomb” font that is already in the Bandzoogle builder library. Because I didn’t want the subheaders to be too distracting from the background graphic, I set the colour Black so that they would blend in with the rest of the text, but still create enough distinction at size 20px to create clear divisions of the content on the page.

You can read the rest of the example here

There Was More Work to Be Done …

The website wasn’t the only thing I had to consider optimizing this week though.  Caught in a fit of inspiration on Wednesday night, I emailed the most awesome person I met at NMS 2010: Vladimir Vukicevic at RocketHub to find out how fast we could put a campaign together. He responded within minutes and we spoke on the phone the next morning. It was my hope that by the weekend I could send out my newsletter with news of my latest adventure: I’m starting a button making service to go with my webcast and general music business! As some of you may have noticed, I didn’t send out the newsletter this weekend (In fact, this blog is even late because of it), but I sure did optimize the h*ll out of my campaign page! So why am I so excited about this? And why am I blogging about it? Because RocketHub provides a really cool service to artists to help you acquire funds for your music and I think you might want to check them out yourself.

In brief, I want to pay independent artists to perform on my webcast. The show isn’t ready for approaching sponsors yet, so we need to be entrepreneurs! We make fine art pieces during each show and I want to be able to make buttons out of them, sell them on my website, and give the profits to the artists :) I’d also like to be able to make buttons for artists on the cheap and rent them the machine so they can learn to do it themselves. I am offering 100 buttons for $20 (shipping included) to those who pre-order now and help me get the machine by Dec 1st so that we can start making buttons in time for the Webcast Art Show  I’m organizing (concert and auction to raise funds for the food bank during the holidays). I have exhausted my funds on new cameras/computers etc for the webcast and recognized that I needed help raising the funds for the button making machine . Many artists need similar help for financing their next album, a tour, or even music videos. I hope they’re reading this :)

If we get enough pre-orders to reach our goal by December 1st, RocketHub will give us the funds and we start making and shipping buttons! If we don’t reach our goal, everyone gets their money back and I start over from scratch (noooo!). If we raise more money than we need, we’ll put the extra funds toward other gear and programs that will improve the webcast (see the campaign page for more details).

Recognizing that a lot of my friends don’t have credit cards and lots of people don’t like to give out that information online anyway, I created a “friends without credit cards” profile so that after people contact me and make alternate arrangements for payment (paypal, cash or email money transfer) I can fuel up the rocket on their behalf. You might want to do the same if you decide to start a campaign. I’ll be blogging about my experience with RocketHub as the campaign and blog contest progress to let you know my thoughts on the service. So far I love it!

Some of Examples of our Products & Services During our Start-Up Campaign:

• 100 custom buttons for $20 (shipping included… what?! Well, express post is extra)
• Magnetic X’s and O’s game for your fridge or locker (fully customizable and comes with a gift box & card to match)
• Just one lovely button. Send me the picture you want or choose a piece from the Webcast Art Gallery OR send me your friend’s funniest facebook profile picture and surprise them with it as a gift (comes with matching gift card)

For More details go to my project page on RocketHub: http://www.rockethub.com/projects/536-i-want-to-push-your-buttons

More? I didn’t sleep much this week …

I think that’s why I’ve caught a cold. Bleh.

Naturally, after developing a webcast pitch I had to incorporate that pitch into my webcast page and the ustream page that hosts my stream. Basically, I just made adjustments to my original website background by flipping most of the horizontal images 90 degrees and shrinking them to fit along the left hand side of the screen (becuase the content is in the middle, like Twitter. In fact, you can import your Twitter background to use as your background in Ustream … and that’s just what I did!). Then I used the magnetic lasso tool in Photoshop to cut and paste images of my guests performing on the show and made a small profile picture with my pitch written on it (this shows up where the video would be when streaming). Voila! Time for a nap … no, soundcheck for the webcast starts in one hour. AH! haha Feel free to join us in the chatroom starting at 8pm EST and bring your instruments:

www.meghanmorrisonmusic.com/webcast

Sign Up for My Monthly Newsletter & Get My Album FREE

I will never sell, rent or lend your email address to anyone else and you can unsubscribe at any time

Original Blog Post

Read this blog in 27 different languages

Overhaulin‘ is my Dad’s favourite TV show. Thus, it was fitting for him to suggest that I call Chip Foose after I told him I was planning to ‘overhaul’ my website. That may have been the best plan of action, as I think I went in a bit over my head with this week’s challenge: Optimizing my website. It wasn’t enough to enhance the site I already have, oh no, I wanted to completely renovate my online communication vehicle … for a number of reasons: 1) I love doing this stuff, though I have no idea what I’m doing. The graphic design tasks are a lot of guess work for me, but luckily the content management and html business is MUCH easier since I use Bandzoogle 2) This is something I’ve been wanting to do for months now 3) We have a really big show coming up at the end of the month and since it is being advertized on a major radio station and in a magazine article, I want the site to visually represent me and where I am as an artist now. Challenge week 3 was the perfect excuse to make this project a priority for 7 days.

Ariel‘s Chapter/Challenge 3 is based around 6 key tactics in web design that have been shown through various studies to develop and maintain one’s fan base: The first builds off of the labours of Week 2 (Creating Your Perfect Pitch) and simply prompts you to put your newly crafted pitch on your website (and all other online/social networking sites). I did that as soon as I had it ready, but then I had to go back and do it again after making the new graphics. This time I wanted to make it part of the picture, not just a line of text below the menu, like it was in the old design:

You can barely see it there in yellow, right?

I wanted my pitch to have a more prominent and integrated place on my webpage, so it had to become part of the background image I was dreaming up in my head. The Pitch, along with the rest of the text on the site had to have the right font. A new font. I went to dafont.com, upon the recommendation of my housemate Beth Moore, and picked out many many many different fonts and downloaded them all, because … get this: they’re FREE! It was really hard to settle on one, but I ended up chosing Rosemary Roman as my primary font. There are some others that I’ll incorporate for menu buttons and body text, but I haven’t figured out how to upload custom fonts yet. Should hear back from the Bandzoogle headquarters tomorrow. I like this one because it has an ancient quality to it. I’ve been doing a lot of reading on celtic spirituality lately, so this font really spoke to me in a stylistic way. Incorporating visual representations of my current influences, as well as all the elements of my pitch, was also really important in the design process.

Before I could even think about putting my ideas into a digital image, I needed to learn how to make a background for a website. Though it is no substitute for an in-person teacher, I did come across this You Tube video which was a great resource for me while figuring out how to put the new site design together. There is a whole series on using dreamweaver, so if you use that builder, you should check it out.

After I got a basic idea for what I needed to do, I started searching for images. I already had some photos of me on the roof of our house back home that my Mum took of me during our informal photoshoot while I was in home in July for my brother’s graduation. She’s a great photographer. I wanted this webpage to be really visually interesting and surreal (Salvador Dali is my favourite fine artist), so I messed around with a ton of different effects and ended up using mostly a combination of “Diffuse Glow”, “High Pass”, “Photo Filter”, and “Ink Outlines”.

The rest of the background came from several hours of searching Creative Commons to find public domain and/or permission to copy images that were relevant to my vision. As soon as I have a chance (it’s 5am now and I need to sneak in a couple hours of sleep before going to the vocal school tomor- … uh, later today), in the “About” section of my website, I will be posting all of the original images (as well as crediting the authors/providers) with descriptions of how they were incorporated into the design and what they symbolize. A few noteworthy ones include the door/hedge/windows which were taken from a photo of the house Charles Dickens was born in. The water fall is the one that was used for Golum’s Pool in Lord of the Rings and the waves represent my East Coast heritage. I do miss the ocean. I grew up with the Atlantic in my backyard and though Lake Ontario is pretty big, it’s just not the same.

The finished product of the background image ended up looking like this:

If you click on the image it will open up to a bigger size so you can see the details. That being said, the image size (I learned) plays a big role in how fast your website can load. Ariel explains that if a site doesn’t load in less than 3.5 seconds, your chances of keeping potential new fans on your site is greatly decreased. I can understand that. We live in a fast paced, convenience based society here in North America. I didn’t want to sacrifice the artistic benefits of having a captivating background image, however, so I did a little research and trial-and-erroring and ended up making a 1400 x 730 pixel image which just fits into the screen (at least on my monitor. I still need to test this size out on some other monitors). I did test drive the new webpage with a few friends to see how fast it came up in their browsers and they all said it was really fast, so I think I’m okay for the 3.5 second rule.

After messing around with the Bandzoogle custom style builder, I came up with a finish product that looks like this:

For a variety of reasons, the next requirement Ariel sets out is to have no Flash intros. I don’t have an intro page, I think it’s better to just take people to the information they want, but my site does use Flash. I have a lot of content too though, so I think it balances itself out.

Having a consistent look across all of my online/social sites is the next big point of consideration. This is very important for me, as all of my sites are completely different at the moment. I didn’t have time to change them all this week, because it took a ridiculous number of hours to just create that background image. It will, however, be easy to transfer it into my other pages and I look forward to catching up with that later this week.

I was already giving away a free download of my album when people sign up for my newsletter list, so at least I was ahead with that one! It’s funny to me that Ariel describes this tactic as ‘bribing’ your potential subscribers. I had never thought of it that way before. Sure, it’s an incentive, but I’ve always thought of it as  being a gesture of gratitude. I’m more than happy to give my music to people who are keen to support me in my musical adventures. One thing I did have to do was add a disclaimer that I won’t sell or share subscribers personal information. I had never thought about that, but it makes total sense. With today’s plight of telemarkerting racket, identity theft paranoia, and general distrust of businesses folk, slipping a line of reassurance in there not only puts the subscriber’s mind at ease, but also makes you look more professional because it shows that you care about the wellbeing of your clients/customers.

That being said, I discovered from my Google Alerts today that someone copied and pasted my entire last blog entry into their own blog post. I’m very happy to be included, but it seems very bizarre to me as I’ve never been referred to as sounding like Tool before (author: if you’re reading, I’d like to hear your thoughts). What’s more bizarre is that, oddly enough, I have recently been wanting to do a cover of The Pot.

5 Successes from this past week:

1)Finished writing and recorded a new song for another compilation CD
2)Taught the guitarists the remaining songs they need to know for the “Nu Music Night” gig on August 31st
3)Put in an offer on a potential new house!
4)Finished the new web design!
5)Performed a great show at Studio BLR and the webcast went really smoothly again. We’re on a roll!

Goals Review/Update:

Well, it looks like I didn’t achieve any of the goals I had set out during Week 1 for this week. Why? I wasn’t organized enough to know what they were going in and had I kept them in mind while making my schedule for this week, I would have recognized that a) they were unrealistic due to the time I had available to me this week, given the pursuits of other more important goals and b) they were too far ahead. I need to try and keep my goals lined up with the week of the program I am working in so that I can get the most of the week’s challenge and actually manage to get it all done.

It’s now 5:35am and I have to be at the vocal school in 6 hours… sleep time.

www.meghanmorrison.com

Next Week/Chapter 4: Social Media For Musicians
Last Week/Chapter 2: Your Perfect Pitch

Share