|
Forums
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
Site Width, Layout Changes, New Site Designer Tool
Friday, March 23, 2007 at 9:58 AM
|
Quote
Top Bottom
|
[begin tech babble]
It's funny how updating one's site is similar to updating your house... you decide you're going to make one change, but then suddenly that one thing grows to 2 or 3 things and then suddenly... you're into a deep project. 
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).
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.
Here's a layout sketch of the new artist/member sites:
click to view full size
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. It's always been a bit confusing and I view the current state of the tool 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.
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" - I was able to create the tool exactly as I imagined in only a few days. Let's take a look!
click to view full size
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:
1. 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.
2. 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.
3. 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.
4. 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.
I suggest clicking on the link to see the full size version
I have to make some database changes before I can integrate the new design tool, and I have to finish modifying all the pages for the larger layout - so expect to see the new changes on the site in about 2wks or less.
|
|
|
A Bit Crusher
Joined: 01/26/02
Location: Tilburg
Posts: 1794
|
|
RE: New Site Designer Under Development
Saturday, March 24, 2007 at 4:40 AM
|
Quote
Top Bottom
|
Hey...this looks great!
|
|
|
Kylo
Joined: 02/16/05
Location: San Francisco
Posts: 787
|
|
RE: New Site Designer Under Development
Monday, March 26, 2007 at 10:22 PM
|
Quote
Top Bottom
|
Yes, the designer tool being spruced up was a great thought- I remember having a bit of trouble with that back when.
Looking great gideon!
"Energizer bunny arrested- charged with battery."
|
|
|
(((stereofect)))
Joined: 09/02/01
Location: Ontario, Canada
Posts: 1333
|
|
RE: Site Width, Layout Changes
Tuesday, March 27, 2007 at 6:42 AM
|
Quote
Top Bottom
|
Sonic Wallpaper wrote:as of this year, only 9.7% of the site visitors are using 800x600
Looks like I'm in the 9.7%. That's OK. I hate being part of the majority anyways...
I'll manage. It's just a pain when I wanna read posts.
Scroll to the right... scroll to the left... scroll to the right.. scroll to the....
Cheers on the great job yur doin', Gideon.
Place is lookin' better every day.
“Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction.” Albert Einstein
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Tuesday, March 27, 2007 at 12:51 PM
|
Quote
Top Bottom
|
Thanks for the support guys 
====
>>> Looks like I'm in the 9.7%. That's OK.
Sorry about the width not working for you. Does your video card/monitor support 1024x768?
====
The increasing of the site width is done, as well as a few layout changes on the site. If you see any odd bugs - first try holding shift down and refreshing your browser (should cause your browser to request a new version of the page. If you still see a problem, let me know - and include what platform/browser and version you are using. Thanks
Here are some of the updates:
* site width - we've grown from 770 pixels up to 990 pixels in width
* homepage - displays new photos, new blog posting titles, and has a new layout
* music - this page now has 3 columns, and displays a listing of all genres
* People/Artists/Members - these pages now have 3 columns and display recent visitors
* Reviews - has a slightly different layout
There were several under the hood changes here too, including a consolidation of most of the CSS on the site (style sheets). I rewrote how the site skins were generated/used, which included writing all the Skin CSS to flat files, and storing all Skin data in a structure in memory (as opposed to querying the database and generating the CSS dynamically). This change shaved between 10-30ms off of each page request to the server.
There's still more to do:
==============
* Photos - change to 3 columns
* genre areas - the root genre pages, like 'electronic' - they need some work
============
Lower Priority
============
* home page playlist browser - needs opacity on play btns
* Music Map - make shorter
* charts - spacing
* Reviews - needs proper padding
* Artist - reviews - needs 2 col layout, and use the layoutreview.cfm file
* Genre Pages- Ringtone output - needs to be minimal and focused on the ringtone
* search tabs - align search content to right
* issues with Mac Safari browser only
My Account - 2 column photo layouts are messed up - rt side is off screen
My Account - the wysiwyg editor doesn't work
My Account - the selected color on tab isn't selected correctly
|
|
|
(((stereofect)))
Joined: 09/02/01
Location: Ontario, Canada
Posts: 1333
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 5:06 AM
|
Quote
Top Bottom
|
Sonic Wallpaper wrote:Sorry about the width not working for you. Does your video card/monitor support 1024x768?
Don't worry 'bout it. My system can support 1024x768 but on my lil' ol' 12inch monitor the fonts get pretty teeny. I need a magnifying glass in order to see everything.
“Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction.” Albert Einstein
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 9:13 AM
|
Quote
Top Bottom
|
ok - so we need to start a donation drive to get you a new monitor.
It shouldn't take us long at all to pull the cash together to get you a 17in monitor. How about it? I see used 17in monitors on Craigslist.org for $35 - then we'd just need to find out how much it would be to pack and ship it to you
How does that sound? Would you allow us all to do that for you?
|
|
|
(((stereofect)))
Joined: 09/02/01
Location: Ontario, Canada
Posts: 1333
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 9:52 AM
|
Quote
Top Bottom
|
Oh, god... that's totally unnecessary.
Seriously, man... I'm perfectly OK with what I have. Anything bigger might pose a bit of a problem fit wise. Things are pretty cramped in here.
“Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction.” Albert Einstein
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 10:12 AM
|
Quote
Top Bottom
|
 ok - was worth a shot
|
|
|
(((stereofect)))
Joined: 09/02/01
Location: Ontario, Canada
Posts: 1333
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 10:30 AM
|
Quote
Top Bottom
|
“Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction.” Albert Einstein
|
|
|
Brainbelly
Joined: 05/03/02
Location: Mellow Mendocino California
Posts: 124
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 11:20 AM
|
Quote
Top Bottom
|
Expansive!
Much good lookie lookie!
Now one question
Even before the road widening my right column content boxes lapped outside the 800 pix background and now with the 990 back the same effect is in evidence. This is not on every page in my site, just the home page with songs. What can I do to snug this back up and keep within boundaries?
"Reality leaves a lot to the imagination, but crossing the road with your eyes closed is easy" -John Lennon - “What relates to reality, is not certain; and what is certain, is not real.” --Albert Einstein
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 11:35 AM
|
Quote
Top Bottom
|
Brainbelly wrote:
Even before the road widening my right column content boxes lapped outside the 800 pix background and now with the 990 back the same effect is in evidence. This is not on every page in my site, just the home page with songs. What can I do to snug this back up and keep within boundaries?
I just fixed it
what you were seeing was the effect of stripping out the html from the blog postings - and the text running too long, not wrapping and/or run on words caused by the formatting being stripped out.
The blog editor, is a WYSIWYG setup - so it's generating html in the background. When I display blog postings anywhere 'other' than the blog pages on your site, I strip the HTML out. This helps keep the formatting under control, removes big images, etc - all in the places that the blog is only displayed as a preview. BUT, I was causing the run-on problem.
It's still possible to blowout the layout - simply by entering long strings of text.
This should all change after the new artist/member sites are launched.
|
|
|
Brainbelly
Joined: 05/03/02
Location: Mellow Mendocino California
Posts: 124
|
|
RE: New Site Designer Under Development
Wednesday, March 28, 2007 at 11:48 AM
|
Quote
Top Bottom
|
Thanks... It was a mystery from my side of the code but that also explains the weird display of blog content on that page. I had previously tried adding breaks to get the line layout and wondered why it didnt work. Poetry as a single line can be difficult to read with the forced concatenation
"Reality leaves a lot to the imagination, but crossing the road with your eyes closed is easy" -John Lennon - “What relates to reality, is not certain; and what is certain, is not real.” --Albert Einstein
|
|
|
Michael Chocholak
Joined: 01/14/04
Posts: 135
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 12:23 AM
|
Quote
Top Bottom
|
well, doesn't fit my screen either, but the real issue is that there is no scroll bar on the bottom of some pages - the forums, my account pages, and this page for example - so the whole right side of the page is inaccessible to me 
Que la musique sonne - Edgard Varese
You don't need a mouth to communicate, you don't need rules to create. Anything is a potential instrument. Play it. - MC
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 2:11 AM
|
Quote
Top Bottom
|
Michael Chocholak wrote: but the real issue is that there is no scroll bar on the bottom of some pages
i'll fix that when I wake up this AM - it's a css issue, the forums and my account area are not using the new skins system.
|
|
|
Michael Chocholak
Joined: 01/14/04
Posts: 135
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 9:40 AM
|
Quote
Top Bottom
|
well I went to 1024 anyway assuming sooner or later all the sites will. now the interweb is a teenier tinier world than it ever was.  fortunately the music didn't shrink 
Que la musique sonne - Edgard Varese
You don't need a mouth to communicate, you don't need rules to create. Anything is a potential instrument. Play it. - MC
|
|
|
Sonic Wallpaper
Joined: 05/22/01
Location: San Diego, CA
Posts: 1266
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 10:43 AM
|
Quote
Top Bottom
|
>>now the interweb is a teenier tinier world than it ever was.
you can adjust your base font size for your OS - if you feel the text is too small.
I'm running at 1280x1024 - but the only sites that look small - are the ones set to fit an 800x600 screen - in that case, it's just the width of the site that seems small.
I haven't adjusted the CSS for the forums yet - we'll see a few of the fonts get bigger and the layout to be slightly adjusted - for example, the text box you type in to post to the forums can be made wider now
I'll still need to make that CSS fix for the 800x600 people.
|
|
|
A Bit Crusher
Joined: 01/26/02
Location: Tilburg
Posts: 1794
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 11:39 AM
|
Quote
Top Bottom
|
Running at 1280 * 1024 over here....looks great!
|
|
|
Michael Chocholak
Joined: 01/14/04
Posts: 135
|
|
RE: New Site Designer Under Development
Sunday, April 1, 2007 at 12:51 PM
|
Quote
Top Bottom
|
right. I adjusted the font - but that doesn't cover everything. and lots of icons, etc are matchbox size, but whatever. just takes getting used to. in a few weeks I won't even think about it. at least I don't have to continually scroll back and forth to see a page, so that's a plus.
Que la musique sonne - Edgard Varese
You don't need a mouth to communicate, you don't need rules to create. Anything is a potential instrument. Play it. - MC
|
|
|
|
|
