Clair,

.. took about 4 secs on my 1meg Broadband connection, I like the neater, cleaner drop downs. However it does have to re-draw the screen everytime I re-size the window that it's in. Also, if you resize below a certain size then thing start to overlap in a weird way. I guess there's a way we could stop that by having a fixed minimum size to maintain the integrity of the design.

Cerys x
(slap me if I'm being picky!)

And what is wrong with Rugby, especially if like Cerys you is Welsh??
That matter aside one thing that might help those in more sensitive positions would be a change to the TITLE script within the Head coding for each page to possibly remove the Tranny reference and replace it with something less revealing, say TW. Reason being if you don't have a chance to close the page completely but just hide it behind a spreadsheet the title is still obvious in the ickle box in the START bar. Just a thought.

Alex
xxxx

Hello girls

Katie has asked me to knock together a few ideas for a re-design of the Trannyweb interface. The existing design (or lack of it) is starting to look a bit clunky and old fashioned. But rather than go ahead and impose new ideas on the members we'd like your input.

The attached 4 images offer a glimpse of the sort of approach that we might take. At this stage these are just "mood boards" not definite fixed ideas, I'm just testing the water to see what you girls think of various approaches.

As you will see the designs incorporate the proposed "drop down" menu system - so don't panic if you can't see such headings as "TrannyBlogger" it would appear as you moused over "Members Features" etc. This allows us to reduce the amount of buttons required on screen at the same time ...

http://gendersociety.com/[...]868.jpg

http://gendersociety.com/[...]869.jpg

http://gendersociety.com/[...]869.jpg

http://gendersociety.com/[...]869.jpg

Let us know which direction you prefer and why. Or if you're a dab hand with the photoshop feel free to knock up some of your own, we'd be interested to see them ... remember it's Your TrannyWeb

Cerys xx

I like no. 3 having the drop down menu below member ID statis.
Won't be overlapping each other.

I absolutely love number 1!!!

It's simple, but effective and all curvy did you build these and take screenshots, or are these purely images you've constructed? I'm impressed anyway, but if the latter, I'm particularly impressed!!!

I suppose I'd have to ask Katie (unless you know Cerys), but is it possible to re-design the appearance of the forums etc themselves? They do seem a little square and blocky, especially against such wonderful headers in Cerys' samples.

If so, I'll start looking to other forums in particular to research layouts and see if I can think of anything.

i really like # 3...very nice...

Rhia

.. these are just built up in photoshop at the moment so they would need to be sliced into tables at some later date. The simplest changes to the body of the site, like forums could be acheived by tweaking the CSS (I think) to alter the colours of the elements, not sure if we could include curvey graphic elements in there as well. My primary skill is in making things look pretty, others would have to work out the engineering.

Cerys x

I definitely like #3!

You want a real test look at trannyshopping. 100% redo.
It needs to be more eye catching.

OK Cerys

Your "photochop" skill id far far superior to my own I've incredibly impressed.

in terms of tweaking the CSS to pretty up the rest of the pages, I don't think that that would be ideal personally. It would certainly be better than nothing, but it does seem lkike a half-hearted approach if it is in fact possible to re-structure it.

After all,as it is now, it's either a template/template set that's called into p[lace from the generation of the page, or it's HTML that's written up and placed in the script that's generating the pages. The latter may be a little bit of a problem depending on how it's done, but the former should be easy(ish) with access to the template files. They could then be re-written, curvy shapes and all

#3 is way good..

tweaking the CSS... um... has anyone else actually *looked* at the code that builds these pages....

Firstly we have a range of javascript, that would be better hived off into an external source file so you download it *once* not every time you view a page.

now t-web does indeed have a seperate CSS file... tis pretty big, but this is the point.. put this stuff here and not in the main page.

so now we move onto the page itself, i'll avoid preaching about using a table to hold the whole page .

the site proceeds to override many of the CSS styles on the page, and provide extra ones. its *that* that will make a face lift to be serious work.

This page alone defines table background colour directly. and how many pages use tables?

now we have a big in-line style block as well, not totally sure as to why, but hey it works.

some more javascript, that again would be better off in a seperate file, or files even.


we also have a huge amount of in-line style code, which again will be a big problem to adjust.

The way foreward:

To start with while people work on the graphics etc they would like to use the current site needs some serious work to get ready for it. *all* the inline style code needs removing to the external stylesheet file, or adding to a second one. ditto the javascript (though thats more to save bandwidth than anything else).

once this has been done the stylesheets control the basic appearence of the site. naturally the stylesheets are designed *first* and then the individual pages are purged of the in-line style code bit by bit, with the pages being tested each time to make sure nothing breaks. Somewhat labourious but perfectly possible. While doing this controls are allocated a style 'class' that makes logical sense where it is not already present.

Its not a case of having one style for buttons.. have one for submit buttons, another for cancel etc.

Now the pages are CSS compatable. trouble is all locations are still hard coded. thus the colours and borders etc can be changed fast, but actually moving things is still not possible.

a move to XHTML 1.0 removes all the formatting code to the stylesheet as well. now the layout *and* colours are controlled bya single file (possibly a few such files) for the *whole site* changing the stylesheets in future is thus a simple way of changing graphics and colours etc.

this is 100% comatible with having the pages written out by scripts, though the scripts themselves may require some adjustment.

Overall this is worth doing, even just to the degree of changing the colours and graphics, while leaving the layout alone, the whole hog is more complex but allows vastly greater flexability in future.

As an aside xhtml 1.0 should render on anything, even if they drop the CSS totally the data is still all there.

Finally i wish i was even 1% as good with photoshop. I'm nowhere close.. them samples are amazing.

code monkey signing off...

Claire, that was amazing. You clearly know your stuff.

I have looked at the page source, ond one of the first things I noticed is that the Jscript was in the page, and should be farmed out to a file of its own.

The only reason I didn't look further in any real way is purely because it's so daunting and appears quite un-manageable.

I'm not half as good as you are with technical web-building, from what you've just said, but I do understand what you've said, and I have to agree that I agree with most of it.

The only thing I'm not sure about is the prep work on the existing site for a re-design. It may well be the proper way of doing it, and it may well be because I am far far less professional in my approach to such things than yourself, but I have to ask why it is not possible to redesign visual elements and layout from the ground up using the current templates/scripts as a guide to the calls on the database? If it is possible, this would take out one heck of a lot of work, or so I seem to think. I'm not nessecarily questioning your opinion on this. I'm asking for my own knowledge as much as anything

Clair

I'm glad someone can get their head around the backside of this 'cos it's beyond me. If I understood half of what you just said then I would still be completely out of my depth, be careful pet you may be talking yourself into a job!!

But it looks like #3 is people's choice for the moment, but keep those thoughts coming.

Cerys x

#3 is way good

Everything after that lost me. I'm glad someone understands that stuff.

the site prep work is not an actual requirement, tis more a practical thing i'm assuming this could take a while,a nd this way the site should get faster in the mean time.

the javascript.. not sure how much of it is actually required or used, but in one (alright a bit big) file, you'll download it once, and not again till your browser cahce clears.

combining the whole site redevelopment with a pure stylesheet based design is useful since a row of buttons in one style can become a column of buttons in another. you design the page logically, then let someone else handle the actual layout.

Essentially you have a block that is described as a 'header' now if the peep doing the layout wants to place that on the right hand side as a vertical bar they can.

now it maywell be possible to handle this one script/template at a time. not one page.. thus say the page footer gets done, then the page header, then the navigation bar etc. This means the stylesheets will have to be built as we go, but thats how they are normally built anyway. get it working then tweak it. the key part is using the style right. not simply having all text in red as the same style say.. but looking at *why* the text is read.. then having one style for warnings.. one for headings and one for comments, all red, but al able to be changed independently of each other.

the other HUGE advantage of doing it this way, ala stylesheets, is it becomes possible to make the pages change *dynamically* i've got this on test at my web site its a bit clumbersome but it has a default fall back. it also makes it possible to have a style suited to say, people with a small screen monitor, or a style for people with slow modem links (light on graphics), hell a style for people with text only browsers as well (i use lynx when there are people around).

it all works, and it all works well. the side benefit is the reduced bandwidth the site uses.. thsu its faster and cheaper to maintain (bandwidth costs).

for a (very crude) example of a site laid out totally using CSS have a look at my other web site this is a prime example of why you should *never* let me loose on the actual appearence of anything.

all the colours, the bar etc are controlled from the stylesheet.. the page is (or would be apart from the ads) near as dammit "xhtml 1.0 strict" that may be a bit ott for this site. but hey.. combining the raw speed of a well lean coded site and some of the graphics cerys has previewed... omg theres nothing on the web like tweb now.. soon there be little to visually match it.

from small steps long voyages are made.

the actual coding behind html/xhtml/css/xml is easy.. javascripts a little bit more in depth.. xsl is plain strange but they are nothing compared to the abaility to turn a vision into reality.. drawing is an art form.. web coding is a science

and art is better to look at than physics.. though harder to blow stuff up with

i reckon number 3 looks best cerys.....go for it! a if you want any help then just holler and i'll do my best...love anna-marie xxxxx

i reckon number 3 looks best cerys.....go for it! a if you want any help then just holler and i'll do my best...love anna-marie xxxxx

i reckon number 3 looks best cerys.....go for it! a if you want any help then just holler and i'll do my best...love anna-marie xxxxx

nr.3 for me too, Cerys. It seems to have more space - could be the fairly large background picture top left and the horizontal lines extending off the page. I like the colours too, but misses the intense baby pink in "Tranny - its a girl thing". (But then I insisted on a red and baby pink towel with flowers for my birthday from one of my sisters - sort of a "coming out" present while coming out to her.)

Linda

I like #3 cerys, i'd also like to see another forum called "tittie talk" so we can chat about uor boobs!
luv,
angelxx

Seems like I'm agreeing with all the rest by saying number 3. As it happens I am thinking about an update to my site and trying to incorporate drop down menus and other more up to date features. Go for it girls - any help I can give just let me know.

"and art is better to look at than physics.. though harder to blow stuff up with" LMAO! so true!

Thanks for all tht by the way. I see what you mean, and I appreciate the explanation. I know just a little more science now. lol

well im another vote for no 3

Hi Cerys,
#3 looks great!! Would there be dynamic resizing based on
the current window size?

Hugz,
MichelleLynn

PS.. WIsh the real world would allow dynamic resizing....
(Waist, hair, chest, etc) ......

Cerys,

Either #1 or #3 as both are great.

But don't bother asking me for any help in designing stuff, I couldn't draw a straight line with a ruler these days!!

Alex
xxx

I like the colour as is. You might soften it a little. I'm not a pink person myself.

I studied nr.3 closer and found that you actually had put it there, Cerys - "the pink spot". In the "slide film" top center - a quite intensely pink dress. That's enough for me, I think. I'm not into pink dresses, but I think this may have some special signal value.

Linda

Linda O, the bit you're referring to is actually one of the Adverts that are run in rotation on each page, so not really part of the design. I thought "girly" pink a little too obvious hence the burgundy, but I'm open to suggestions.

Cerys x

I wondered about that. Anyway, I just wanted to tell that I liked nr.3 as it is and that the "pink spot" I mentioned had some positive meaning for me. I do agree that using this colour could be too obvious.

Linda O

Cerys bach, I think I'm with Katie on this one, I liked number one the better but only just a little over number three. So hard to decide, in fact it was literally a tossup, not that I'd let something so important be decided on the mere flip of a coin. I tossed a coin and then thought about how I felt about the outcome. Number three won the toss, but I still liked the first one more, so I tossed again.<lol> And thank you for putting my mug up on number four I'm honored to be part of the presentation.<lol>

Awesome job, girl.

Hugs, Joni

Having just attemptd to rejig a single page.. it will definatly be
faster to adjust the scripts...

bits of the code look like someone like me wrote em.

ARGH.

tis fixable though

ya *more than* welcome to join in! this is a serious case of the more the merrier.. we needs some serious input from all peeps

cerys.. quickie before me pinches some of ya designs..

any objections to me doing a sort of working mock up based on one of these bits of artwork?

having looked at the page code a re-write is faster than a re-build for bits of it.. just thinking of having a play.

Mock away to your heart's content Clair, most people do. Oh you mean "mock up", sure that's fine as well.

Cerys xx

I like # 1, particularly the color contrasted purple Username line. I like the bold-face type for menu items in #3. The burgundy is nice. Not that it matters to me, but it is also more subtle for users in "security sensitive" environments. Of course, we could have a page that looks like a rugby website with coded menu items:
JERSEYS would be fashions link. SPORT NEWS could be blogs.

Wendy you joke.. but actually thats doable.. specially with the links bing graphics. the little text bubble that pops up still would describe the actual link.. but with some sort of skin changing code that is actually perfectly possible...

though maybe not rugby. girls gotta have some standards.. mine are around somewhere, i just lost em for a while.

A part working test page.

the test page!

Just ignore the menus.. which worked well in konqueror for testing.. just mozilla & msie have a few 'issues'.. me still working on it.

but Cerys's #3 magical artwork can be (witha very slight change) be converted to working xhtml & javascript.

the page is usable without javascript as well, the menus drop of te faceof the earth, but a link bar is provided at the foot of the page.

currently the links all go to a second, somewhat dull page, with a link to get you back..

Everything is CSS controlled so should be adjustable. Hopefully some proper menus can also be integrated with it

comments welcomed.

I was half-kidding but actually the taskbar buttons for the open windows have always been my worst enemy. I would open extra windows to hide the "tranny...." in the URL there. Same problem at top in firefox browser. "TW" is a good idea, Katie. I'm happy with TW as it is, but blue and gold do make me feel a bit like I am back in the cub scouts instead of the Brownies. :-D

Ok Having had a little bit more of a play, the test page now has working menus
and i've sorted some of the colours out a bit more. have a look and see what you think.

http://www.20megsfree.com/test/page.html

Hi Clair

That link not working as of 8.00 this evening???

C x

ARGH

http://www.the-lost-plot.20megsfree.com/test/page.html

that one should work

I get no menus there at all claire. ah well.

As it happens, Katie willing, I could send you the menu scripts that we have at the moment to the email in your siggy as a zip. They seem to work very very well.

Maybe you could even tweak up the graphical element of them to be less boxy? It's DHTML and JS.

send away!

the stuff i've prototyped is part of something else i'm working on, just very easy to integrate into a page to test stuff out.

Once i've got all the files for the others incorporating them should be easy.

They will probably always be a bix boxy though, the only way round that is a pop-up gif as an image map, given a few transparent bits it could be any shape..

pity i not got a clue how to do it.. hmm.. ideas for the future me thinks.

me certanly have a look though..

P.s. what browser you using?

I've tried mine out with mozilla, konqueror without problesm. msie has a few issues with the highlighting, but they worked here.. ho hum back to da drawing board

It's IE 6 SP1 on WinXP Pro SP2, JS enabled.

Now you've mentioned the highlighting - lol - I didn't think to acctually click them!!!!

With regards to that, I was just wondering if you could use the JS file to place a blank image behind each one so that it stretches with the page, and use an onMouseOver to swap it with a coloured image in the same way, or are you already doing it that way?

the mail will come from kriss@minervapen<nospam>dragon.com

(obviously, take the no-spam out!)

Two bits...

Firstly the idea of a grphical roll over for the menus should work fine, each menu label is within a 'div' tag, msie doesn't do 'onhover'
for these tags, even if i stick with a clear gif to trigger the event it should work.
I'm trying to keep the actual graphics down to reduce the amount of downloading. Still tis an idea

We actually have the 'proper' menus ready to roll, these are just ones I'm playing around with and gave a try.

Secondly about Frames.. The problem with frames is while the navigation thing works ok they mess up bookmarking pages something terrible, also they take up screen space, the page header ads soon get scrolled out of the way. not to meantion what frames to to search engines
However once of the considerations i'm working to is that each page should be 'small' and one o my trusty testers is working on dialup with a low spec machine. The pages should also work with graphics turned 'off' hmm.. plety for me to think about, my link isn't all that fast so this is a consideration here

Hi Clair, never occurred to me to click on them either, duh

But working well, from a looks point of view I would probably lose the little bullet points and keep them really simple, but that's just me.

Now the tricky bit, changing the look of the page content .. Anyone seen the revamped Yahoo Groups? I like the rounded corners that they have given to everything .. how can that be done without big lumbering gifs ..?

C x

could the image issue be resolved for the roll-overs by using a 1x1 background gif, changing to a 1x1 gif of a different colour on rollover, tiling/stretching to fit the text?

to further save, the rollowver need only be used if the broweser viewing the page is IE.

ok http://www.the-lost-plot.20megsfree.com/test/page.html now has the correct and *working* menus on it.

the vertical positioning has to be set manually so they don't float around the page correctly.. not a problem for t-web, but my test site has an extra banner add. just imagine the menu bar in just below the purple cross bar and thats where it should be

the whole page, including all graphics and scripts is 258K which is a little on the large side, however the actual page is 5k. the rest is the scripts for the menu (which you don't load all of) and what you do will only load *once* anyway, your browser sees it already has it so doesn't request it again.

I used to do sites in frames all the time, but have you ever tried using a non-frames browser, or a small monitor with a frame based site?

Even so I'd be interested to know how long this page takes to download, from clicking the link it being fully rendered.