• 09/28/2008 - My Lovely Wife Lou is Pregnant
• 12/14/2007 - ArtistServer News and a new site: FreeMusicLicensing.com
• 09/18/2007 - AritstServer and ToneThis Serve Up Indie Ringtones
• 09/11/2007 - Running LightTPD and PHP on Windows
• 09/06/2007 - Compete.com -vs- Alexa.com - Comparing Website Rank
• 08/29/2007 - HostMySite.com Limits ColdFusion, Does Not Tell Customers
• 08/14/2007 - New Song: Chocolate Rain - Sonic Remix
• 08/03/2007 - If You Use Open Source, Leave the License and Credit
• 07/31/2007 - Add Links to Profiles on MySpace, Facebook, and More
• 07/23/2007 - SocialNetwork.in API Promotes Cross Site Networking

Post Comments to this Blog:
name	[required]
email	[required]
url http://
Add HTML:    P        BR     Bold    Italic    Quote    Link
Basic HTML allowed. HTML tools add code to end of contents. MAX width of blog is 490 pixels. Characters left:
CAPTCHA Text: please enter this text in the box above
Auto Format:	YES   NO

My initial task was to modify the site to expand to a larger width. We are currently designed for 800x600 screen resolution, but as of this year, only 9.7% of the site visitors are using 800x600 - which means we can now scale the site up for a 1024x768 resolution. The new target resolution is 1024x768, which will put us at 990px wide (we gain 220 more pixels in width). You just can't set a new width though, if you did, the layout would no longer look 'tight.' While any layout 'could' be liquid (fully expand and contract), the end result is often an inconsistent look. Personally, I like to create a consistent experience, so I never use liquid layouts.

Here's a screenshot of the new site homepage:

click to view full size

With the site getting wider, I had to adjust the spacing and layouts of all the pages on the site. Most of these are done, except the artist pages.

The left column will be 270px, and the right will be 695px. The main change here, is the smaller column is now on the left, and the wider will display songs in 2 columns.

Since the artist and member pages were going to change, it seemed like a good time to update and fix the site designer tool. As a site tool, I've felt it's always been a bit confusing, and I view it as 'almost useful,' so it was time to start from scratch. The Web has evolved a bit since I originally wrote the site designer, so I decided to go all out and create what I felt was the ideal tool and utilize modern Web design concepts.

My goals were to make the tool simple, and to make it as it should work - with real-time updating, drag-n-drop functionality, and an intuitive interface. With the help of an amazing Javascript library called "Jquery" and a set of plugins called "Interface Elements" - I was able to create the tool exactly as I imagined in only a few days. Let's take a look!

You'll see there's a top section with directions, and a lower section where you'll setup your page layout and design. Let's move from left to right over the screenshot:

• Available Modules - each item or object you place on your page will now be called a "Module" - for example, you'll have a module to view show your profile, and another for showing the first 8-10 photos, etc. The Available modules column shows you the modules that are available for you. To add one, click on it and drag it to the Page Preview on the right. To remove a module, drag it to the Available Modules list. And yes, we'll support more modules, like adding your external RSS feed, or your Flickr photo feed.
  
• Page Preview - this works in real-time, all color or background image changes are applied to the Page Preview area. You can also drag your modules around the page, setting their order and position on the page. In the screenshot, you can see that I'm dragging the photos module. When you click on the Update button, the site will reorganize your page's layout to match what you setup in the Page Preview.
• Color Settings - this works similar to the current site design tool, where you can click on a color setting to select it, then change the color and see the preview. What's new, is that you now have control over the border of your page items, and the selection of colors is much easier.
• Color Picker and Background Images - this color picker is much easier to use, and you have access to any color your monitor can generate. Just click on the color setting you wish to edit, then click on the color picker to set it - no more popup color picker! You've always had a page background image, but now you'll also get to set it's position and repeat settings. For those who already use a backround graphic, I'm sure you'll be excited about this new addition - you now have much more control. But wait... there's more! You'll also have the option to set a background graphic for the title bar and container for the items on your page, and again, you'll have position and repeat attributes available to you. Just like the color picker, the background images load and display in real-time.