How does it look so far?

[mrstmb73]

Re: How does it look so far?

I have been up all night trying to get this just right, and somehow it still doesn't look right. I can not get the left side shape to look right and I do not think the nav bar is right either http://adhd-bipolar-child.com/test2.html

Taking a small break while I take my 8 month old son to Doctor, then when he is napping, back to it I go! I will get this right sometime!!!

[Vasili]

Re: How does it look so far?

I have been up all night trying to get this just right, and somehow it still doesn't look right. I can not get the left side shape to look right and I do not think the nav bar is right either http://adhd-bipolar-child.com/test2.html

Taking a small break while I take my 8 month old son to Doctor, then when he is napping, back to it I go! I will get this right sometime!!!

Actually, this is a major improvement overall, and one that serves you better than the layout currently used on the site for one reason in particular: the "Left" side of any website is "premium space" insofar as it is the first location both the Search engines and the human eye travels to when "reading" and this is where you should have supplementary Navigation and Important Content start ..... your previous layouts had placed AdSense in the most upper-left position (even within the Navigation area!), and all along the Left Content area and these areas need to be reserved for actual elements of your website! This also might help to demonstrate why in all the Demos I consistently positioned AdSense as I did, along the Right side of the page only, and never within the page Content Area.

This "new" layout properly places AdSense to the far right of the page, and is sized complimentary to the "gutter" position defined by the width of your "Forum" image.

As for your Navigation issues, it really is all simply a matter of Spacing (for the Main Navigation consider reducing by one the extra Spaces added to each Item) and possibly re-formatting: the Left navigation might be easier to deal with if each "Heading" with links be created in separate, smaller Text Boxes that can easily be aligned similarly but which will allow that extra vertical spacing that seems obviously unequal. Also, it is a fact that Text Boxes that are "too long" generally lose formatting, so it is important to create longer Content displays as multiple Text Boxes instead of just one. This same principle applies to any Text Box, including those used to configure Navigation in a gutter.

[mrstmb73]

Re: How does it look so far?

Thank You...I will make the changes!! So is it best to only have 1 adsense ad on my pages, and that being where it is currently? One last question. Where is the best place to put my RSS feed button?

[Vasili]

Re: How does it look so far?

Yes ... AdSense should always be a strategic "non-interfering" minimal contribution to a web page, not an obvious emphasis, if only to "reign in" the number of Outbound Links that are disfavored by the Search Engines.

Were it me, I would place the RSS icon (no text necessary, as any savvy Visitors that understand RSS already know what the icon means) in the same general area that Social Tools are relegated -- in the upper-right of the website, preferrably in the Header Area distinctly apart from the Content area (illustrated by my example here). You may wish to simply place the coded icon on the lower-right of your Header Image itself, thus freeing up more actual Page Area for the more important things ... as suggested here:

HOWEVER …. I have a feeling you do not really understand RSS in current times, or what it is intended to do, and, as such, you may wish to re-think your overall web design strategy.

RSS was the first original tool intended to “Share Content” typically between a website and a Blog (such as a similarly themed Wordpress site) so that when you published an article on your website, it would be auto-populated on another website that was subscribed. Not too many individuals have a website that want to have Content from another website auto-populated, as this diminishes their own efforts and runs the risk of having the Search Engines flag their site as having too much “duplicate content.”
Thus, RSS soon became a different Content sharing device, mostly for sharing PodCasts, or “streaming sessions” instead of static content (which was much more suited for people to view using a cell phone - the convenient choice of the majority). You are not regularly producing PodCasts, are you? This means another negative aspect from devoting a simple website to using RSS in a less-favored format. Another aspect is that individuals typically do not have the technology to poll and display static Subscribed Content using RSS methodology, and this is the exact reason why Twitter has become so popular and effective in maintaining engagement with followers/subscribers. But it is not the only reason ….

The advantages of properly integrating Visitor Engagement using the most popular and universally accessible methods is imperative in these times, and the compelling reasons to add this functionality to your website are far too many to list even here. “Social Media” has become the basis for maintaining engagement with a verifiable and typically ‘convertible’ consumer segment, and these most important Social Media platforms are still free to participate in and manage effectively. It should be something any webmaster should include in an overall web design strategy.

The second image below illustrates the Social Media you should concentrate on:
1. FACEBOOK If you have not created a free “ADHD” Page already, this is something you should do immediately. It is by far the most active manner in which to engage (and engage effectively) with individuals on the internet. You can post articles, updates, and anything else that is relevant to a subscribed audience.
2. TWITTER If you have not created a free “ADHD” Twitter page already, you should do so immediately, as this is the primary means to communicate directly to subscribers (followers) using the tools they already have in their hands without the need to have them visit a website to review content. It is very easy to announce a newly posted article or web feature in the 140 character spaces allowed, that should include a link directly back to the page it was posted on so you can draw visitors back to your page easily and conveniently... and it is delivered directly to their phones!
3. GOOGLE PLUS (G+) Another free site that many are commonly using in addition to Facebook and Twitter, G+ is considered “more business oriented” and generally engages with a much more converting and loyal following. If you do not yet have a free “ADHD” page on G+, you need to create on immediately and manage it just as you would the Facebook page (even duplicating FB posts onto G+).
4. SHARE Allow your website Visitors the ability to share your site or page with their friends and following on their own across whatever platform they desire – it is simply an expansion of exposure that is free and unpredictable. There are more than 250 ways a Visitor can share your site, including email to a friend, add to favorites (which places your URL in their browser for convenient re-visit), Digg, Pintrest, etc. The point is to offer whatever support you can for others to share and expose your site with others. It’s free, you know.
** It is very important to note that the "Share" icon shown is separate from the other icons that link directly to the sites they represent: AddThis is defaulted to configure the button to display other icons (FB, G+, etc.) as a means to Share, not as a link to another site, so be careful in how you actually configure your Share button. You will need to "edit" the actual code before pasting into a BV HTML box to only "show" the AddThis Share icon (as is done on my site mentioned above). You can configure your Share button at www.addthis.com More on this is detailed below.

Once you fully understand these strategies, the following suggested “Social Layout” will make more sense:

You will note the difference in the Icon size in the second Banner Demo, as AddThis only has two sizes to choose from - 32x32 pixels (which would be much too large to use with three others on your banner as needed, as even the first Demo was done using 24x24 images) and 16x16 pixels, which is the smaller icons layout shown just above.

For instance, this is what your uniquely generated AddThis Code should look like that you should use and paste into a BV HTML Box alongside your other Social Icons in order to show only the AddThis icon and not any others for sharing purposes only:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=****dd3*****2301***"></script>
<!-- AddThis Button END -->

* You need to visit www.AddThis.com to create your own code that will include your own specific website ID info (shown in goldenrod above) and simply "edit" this unique Publisher ID into the code as shown above before pasting into your BV HTML Box and publishing.

Note that the above coding specifically configures the solo Share icon as 16x16 pixels (shown in red), meaning that all the other icons you should use need to also be 16x16 in size to create the uniformity required. You can use this 16x16 set of icons if you wish:
.
... ... ...

Thus, when the BV HTML Box is placed in alignment with the other 3 independent images (which are each unique images separately linked to the respective sites) you will have a fully functional and minimally intrusive set of Social icons to aid Visitors in subscribed engagement.

[mrstmb73]

Re: How does it look so far?

WOW!!! Thank You very much! I will remove the RSS and do the things that you have so wonderfully suggested ;)

I added my content to my test page and I think it is formatted correctly. Should I shorten the left side navigation ( and move the links that will be removed when I shorten it, and place those in the main navigation) to make it look better?

http://adhd-bipolar-child.com/test2.html

[Vasili]

Re: How does it look so far?

As far as "adjusting" your navigation, I would suggest the following:
1. In your "Main" navigation (the one that is at top and horizontally displayed), I would EDIT Menu Items:
A. EDIT "ABOUT" Menu Item to "ABOUT US"
B. EDIT "MISC/CHILD DISORDERS" to simply "OTHER DISORDERS"
C. EDIT "BIPOLAR DISORDER" to simply "BIPOLAR" to 'fit' with how ADHD and OCD is described;
D. EDIT "FAMILYLIFE" to the proper "FAMILY LIFE"
E. EDIT Positions of "CONTACT" and "PRIVACY" by at least switching them ('Contact' is traditionally at far-right) ... do all of these suggestions so all Items both appear more cogent and "fit" better within Page Boundaries.

2. With regard to your Left navigation, I would:
A. be sure it is aligned precisely as is the right side gutter on the Page area, meaning that it is exactly as far down from the top of the white page edge and as far left as the page edge as your "Forum" image is on the other side, and
B. your Left Navigation area could be thus adjusted in WIDTH to better accommodate all the links displayed in that section, making this the Left Gutter the same width as the Right Gutter.

Also, do not forget to "break up" your 'long' navigational Text Box into smaller, shorter individual ones in order to preserve formatting across all browsers and to better manage spacing within the gutter section.


It is important to not ignore the same method of Text Box management when designing your Content/Page Area .... since you will be using multiple Text Boxes to better preserve the formatting of your Textual Content, defining the actual Page is important with regard to assisting the Search Engines properly caching your Content --- thus it is strongly suggested you not attempt to "wrap" your text around objects on your page, but instead maintain the same overall dimensions and precisely aligned positioning of your Text Areas. Currently, you are "wrapping" Text under AdSense on the right page gutter, which should not be done: it should naturally extend in the same margins down your page. (As it is now, the page text can be centered better between the Left and Right gutters only after you properly edit and re-size the Left navigational gutter as mentioned above)

[mrstmb73]

Re: How does it look so far?

It is important to not ignore the same method of Text Box management when designing your Content/Page Area .... since you will be using multiple Text Boxes to better preserve the formatting of your Textual Content, defining the actual Page is important with regard to assisting the Search Engines properly caching your Content --- thus it is strongly suggested you not attempt to "wrap" your text around objects on your page, but instead maintain the same overall dimensions and precisely aligned positioning of your Text Areas. Currently, you are "wrapping" Text under AdSense on the right page gutter, which should not be done: it should naturally extend in the same margins down your page. (As it is now, the page text can be centered better between the Left and Right gutters only after you properly edit and re-size the Left navigational gutter as mentioned above)

I understand what you are saying about the text, when I do this, should I extend the left navigation and right gutters down the page, or just leave them as they are?

[Vasili]

You can leave them properly sized (the Left gutter needs to be adjusted somewhat longer, and the links vertically spaced better) just the way they are .... the "Page" is thus more defined and traditionally "read."

Besides ... you can always use the space to "fill-in" with other items that are page-Relevant (especially on the 'index' page), or did you forget about such suggestions as I displayed on the very first Demo such as the "Donation" Link?? You might have other things to show, such as an eBook title, a Link to another related Article, a link to an Event, etc. You are not limited to creating visual links to other pages within your site, and this "extra space" becomes quite valuable as a self-promoting element in the long run ...


PS:
I forgot to mention above that the main Menu "rollover" Style is really bad .... the shift from white to a peach color on the Sub-Menu items is a very poor choice, for so many reasons. You need to change them to be all the same, and to a more legible color: I suggest from WHITE to PURPLE (the same Purple used elsewhere on the site) or WHITE to BLACK, with the Main Items and Sub-Items with the SAME BACKGROUND -- which is fine currently, being the same color as the Site background.

... and ...

One last suggestion: when working with Square Shapes to define sections as shown in the first Demo, it is quite acceptable to have the very top edge of the Header flush with the top of the web page. Not so when working with "rounded-corner" shapes!

Make the corrections easily in this manner:
1. With the Page open in the BV Workpane, use the keyboard CTRL+A to "select" everything on the page;
2. Using your Keyboard "Down Arrow" move everything on the page "down" at least 5 clicks, so to better define the page Header and to "soften" the contrast between a squared page top against the rounded Header Shape.

When done, click once off to the side of your page to "release" your "mass-selection" before Saving the Page and Publishing.

[mrstmb73]

Gotcha ;) Now I am good to go, and I Thank You so very much!! I am actually excited because I finally understand how it will all come together and now as I look at my work in progress I realized just how tacky my site looked and unprofessional!!!

PS:
I forgot to mention above that the main Menu "rollover" Style is really bad .... the shift from white to a peach color on the Sub-Menu items is a very poor choice, for so many reasons. You need to change them to be all the same, and to a more legible color: I suggest from WHITE to PURPLE (the same Purple used elsewhere on the site) or WHITE to BLACK, with the Main Items and Sub-Items with the SAME BACKGROUND -- which is fine currently, being the same color as the Site background.

Thank you for that....I was trying to figure out what the best look would be!!!


* See "updated" Post #53 above

[mrstmb73]

Re: How does it look so far?

http://adhd-bipolar-child.com/test2.html

Made the suggested correction ;)

Thank You so much again......you have helped me so much!!!!

[Vasili]

Re: How does it look so far?

Very much on the right track!

1. Do not apply shadow to the Social Icons, as when using the "AddThis" Share icon (which is generated by the HTML code) will not have such an ability to add a Shadow, and you want them all to match. Re-download the icons from my Post #49 above which have been "updated" without Shadow and use them exclusively.
2. The spacing horizontally of the Social Icons needs to be perfected .... insert onto your page a BV HTML Box 16x16 as a placeholder until you actually Publish the page with the active code (which afterward you may need to re-Publish a few times after tweaking the position, as the HTML-generated icon will not show up in Preview)
3. You need to better even out the spacing of the Main Navigation ... "pull in" the right side (make smaller from the right edge) and re-center again by moving the Main Navigation to the right a few clicks.

The only thing now is to uniformly present Content, Links, and other text uniformly across the site.
Personally I think you should "reduce" the font size of your Page/Article Headlines. and increase the size of your Left navigation Links so they are more easily read and conforming to the page as complimenting one another, but that is just me. (You might once again review the Demo to see the balance I am talking about that I think is missing on yours).

And actually I was thinking about this last night .... you should have some kind of symbol or graphic design that is like a small "logo" element (maybe that can be set near the Textual Title of the site) so you can use that single small graphic as the sole element as the Favicon for the site --- the little design shown on the Browser tab, like my "L" with a Lion on my sites. I was having a hard time coming up with an idea (I first thought a Small Butterfly -- as in reborn, or metamorphical changes -- or maybe a leaf, etc.), but whatever it is to be, it should be single color and very simple so to render nicely large with your Logo Text and by itself in the Favicon. The Favicon is "uploaded" to pages as would be a Background Image once it is selected in PROPERTIES before Publishing.
Create yours here > http://www.favicon.co.uk/ (you should have an image ready to be converted to ".ico" and to the proper size)
I have a very cool Purple Butterfly (and Purple IS the "color" for "Handicap" issues, right??) with a transparent background that would be perfect, to both place on your Header and to convert to Favicon .... I'll show it here in a small size:

Just an idea ... (or two!) .. of how to properly integrate a Favicon into your website to create the balanced design and recognition that converts unique graphical design into an effective overall "Brand" imaging:

Good Work!

I should leave you on your own from here!

[mrstmb73]

Re: How does it look so far?

Thank you for you thoughts & cool ideas ;) I redid the left navigation with smaller text boxes and increased text size from 8 to 9. http://adhd-bipolar-child.com/test2.html

[mrstmb73]

Re: How does it look so far?

I looked and could not find anything I liked so I decided to use your butterfly image idea and I have been trying to place it and I did get it placed, but not sure if I did it correctly

http://adhd-bipolar-child.com/test2.html

[Vasili]

Re: How does it look so far?

You need to change them to be all the same, and to a more legible color: I suggest from WHITE to PURPLE (the same Purple used elsewhere on the site) or WHITE to BLACK, for the Main Items and Sub-Items, each with the SAME BACKGROUND -- which is fine currently, being the same color as the Site background.

What happened with this? A mouseover color change is important as an aid to Visitor site use, and the WHITE to PURPLE was perfectly fine .... just the Sub-Items needed to fall into continuity.


I too, think a Purple Butterfly is probably the best type of image to "work in" to be something of a Brand symbol and that will work best as a Favicon, seeing as how they need to be integrated obviously. The Butterfly is very symbolic for many reasons, and is really a "softer" image to introduce into the website and "image" you are creating .... especially the fact is is purple (the color of autism and other similar handicaps) and suggesting "change" and "rebirth" (something you strive for as a result of sharing resources and education to make a difference).

The use of two butterflies over the Social Icons was my way of showing you the "progression" of design, and how it was the compelling final design that provided a more true "balance" in the overall header (filling empty space, natural "look" etc.) and to "connect" the concept of the Slogan (which emphasized "Community") to the aspect of Social Media (another "Community").
* You will note that such visual "connection" is not as complete in yours as it is in mine, however, for your Slogan position is not on the same "line" as the Social Icons as it is in mine: this helps to provide the best visual continuity, and also to properly define the spacing of the 'bottom of the Header' .... making it more acceptable to the eye and more natural to "read" and thus "pull the eye" over to the Social Icons (added "importance" and/or "credibility" of the site) and an immediate invitation for Visitors to "engage" --- all within those critical first 15 seconds.

Some more design details that are too important to ignore are noted in this example:

You may also choose to use a 20x20 (or so, but no bigger than 24x24) butterfly image to identify the "End" of an article also .... I am sure you have seen them used elsewhere ... and this will provide not only the unique signature of your site to all documents and page displays, but it will be a fine detail of continued "balance" to the tying the Header to the bottom of your pages. Additionally, as an image, when used as such a "closing" to articles, you can add ALT TEXT to the image that will contribute to the page's overall optimization, such as "From The ADHD-BiPolar-Child.com Resources Archive" (which will prove 'relevant' to every page if named so) -- I am sure you can see how adding this "optimized" element to your pages adds both visually and SEO-wise.

I may be going on and on, but these aspects of intelligent web design are rather important and often overlooked, just as they are in most businesses. In this case particularly, the absence of a Favicon that is recognizable as part of the Brand would be seen as an obvious incomplete effort, something that would signal your website as less than professional or well-thought than I believe you wish. I am happy to see you agree, and have begun to use a Favicon, and using the one suggested that unifies and truly compliments your site.

Web Design is all about the details .... from not just understanding how the technology works and must be configured, but how you must translate normal human interaction and business concepts into a digital presence with the required visual balance, intelligent flow, and functional purpose. It is for this reason alone that I in particular always stress having a detailed Website Plan before getting busy building a site .... few take my advice, however, and I am sure many struggle with the challenges of why their vision doesn't work or look as nice as they planned.

I have spent much time and effort to not only guide you through many different specific Steps but to illustrate them visually so the impact of my suggestions would speak independently. I hope that you (and the countless others that read this thread) will benefit from the Tips, Outlines, and Inspirations presented and be better able to build your sites in like kind.

Try to remember the Basics always: attend to all the Details precisely, accentuate the intelligent Flow, maintain natural Balance in all, and purposefully facilitate full Function according to requirement and expectation.

[mrstmb73]

I will take all your suggestions and apply them to my site. One last things is I will be creating a FAQ page, but not sure what kind of questions/answers should this consist of

I am sure you told me already but I can not remember how. in your above example, I see it say 16 pixels from bottom of text to page edge how do I know just how many pixels up from bottom is? I can not remember how to tell how many pixels is an element placed in.....hope I am making sense
Do I use arrow keys and count 19 up?