Website Babble Webmaster Forums  
  #1 (permalink)  
Old 02-06-2008, 11:59 AM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default Break Away From The Standard Site Build It! Design

I am "sticking" this thread because I want to show other SBIers and soon-to-be SBI! owners that you can escape the common SBI! design and layout by following the instructions for "Uploading Your Own HTML" in SBI!.

This is something I've been wanting to do for at least a year now but kept putting it off. Well, I finally finished my site last night and you can see my new SBI! site that was designed completely with Dreamweaver...

http://www.flat-stomach-exercises.com

This site is particularly special to me because for the first time I didn't use any template. I designed this from scratch using CSS and includes (Gotta love Dreamweaver!!!). Every single aspect of this design is controlled by CSS and all sections (except the main content of course) are maintained in an include file so updating my header, footer, left nav or right sidebar is all done by updating one file.

So if you're new to design, CSS (cascading style sheets) gives you the flexibility to create one style sheet that defines everything from my hyperlink colors, page background, left nav width, right sidebar width, fonts, sizes and colors for my H1, H2, etc., width of the entire site, bullet design, even those dotted lines you see around my left and right nav....sweet!

So if I want to change any aspect of my site's design all I have to do is change that one style sheet and instantly the entire site is updated.

The #1 complaint I see from people looking to buy SBI! is that all the sites look the same. While I agree they are all pretty similar, I will say that design still brought in thousands of visitors per day to my site, and I still earned a great deal of income with that simplistic layout. So while design is important, content still rules.

Because remember, when the average Joe is surfing Google and find your site, most people aren't going to know your site's layout looks like thousands of others (nor will they care). They came to get what they searched for.

But it is nice to be able to have complete flexibility with the design of my site now and thanks to the "Quick Upload" feature in Site Central, I can upload multiple pages at once similar to a regular FTP program.

I will admit, setting this up initially was a bit of a monster because you have to put certain comments in your pages so SBI! will understand the includes, etc. Remember, SBI! is not like a regular Web host so you have to work around their own functionality. And the very first time you upload your pages with the new design, you do have to do it one by one.

BUT... from here on out I can use the "Quick Upload" feature to re-upload any pages and that includes my style sheet, include files and regular HTML files. Again, the "Quick Upload" feature allows you to upload multiple files at once.

There are explicit instructions for how to do everything and once your site's template is complete, updating the rest of your pages is pretty much copy and paste. I was very impressed by how well the instructions were written.

So I wanted to post this to show existing SBIers and soon-to-be customers that you can break out of the standard SBI! design and use your favorite software to manage your site.

However, I will say that before you do the transition, it's important to become familiar with an editor of your choice first. I spent an evening reading up on CSS and Dreamweaver and created my site how I wanted it Dreamweaver FIRST. Then I tackled the instructions for the migration second.

Trust me when I say I will NEVER, EVER create a site again where the entire site is not controlled by CSS and include files. What a major timesaver.

2createawebsite.com also uses CSS and includes but there are still some HTML tables sprinkled here and there. My SBI! site does not have a SINGLE HTML table. All boxes are controlled with CSS.

So the lesson in all this is...

The out-of-box SBI! templates are basic and common, but they won't prohibit you from having success with your site. If you're just starting out and don't know much about HTML then stick with the regular templates. They are fine. Your goal is to write content and make money so make sure that's your focus.

But when you're comfortable and ready to go outside the box and create your own design that you'll have complete control over, SBI! has outstanding instructions for doing this but I would highly recommend you buy an editor (I love Dreamweaver as if you couldn't tell) and become familiar with that FIRST.

And by all means, take some time to learn CSS and unlock the power!

Site Build It! still has some ways to go when it terms to allowing certain functionality (MySQL, regular FTP access, etc.) but they are making progress fast and I'm so happy making the transition to my own design wasn't as bad as I originally thought it would be.

And the best bonus of it all is that my AdSense CTR is up to nearly 8% from 5%.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #2 (permalink)  
Old 02-06-2008, 01:32 PM
West's Avatar
Master Babbler
 
Join Date: Jun 2007
Location: Philadelphia, PA area
Posts: 266
West has more than the average amount of reputation points
Default

WOW!! I absolutely love the new look. Very inspiring. You have me thinking about working with Dreamweaver now. Did you purposely choose those colors to go with your blog?
Reply With Quote
  #3 (permalink)  
Old 02-06-2008, 02:03 PM
ssmorgan's Avatar
Ultimate Babbler
 
Join Date: Jun 2007
Location: Tucson, AZ
Posts: 1,082
ssmorgan has more than the average amount of reputation points
Default

Lisa,

Your website's new look is awesome!

I really like the left navigation bar right now compared to what it used to be (a long list of tabs).

I absolutely hate having to edit the navigation bars or the footers to each page manually. I must look into "include files" asap!

Sherif
__________________
Tough Time Finding or Researching A Niche?
Affiliate Niche Club will help! (Download A Free Niche Research Sample)
Reply With Quote
  #4 (permalink)  
Old 02-06-2008, 02:50 PM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default

Thanks to you both.

West: I had no idea what colors I was going to go with when I started so I designed my header first and everything else just kind of fell into place from that. My blog... funny you should mention it. I hardly ever update it anymore and it's been such an afterthought. But I do plan to redesign that so it matches my new redesign.

Sherif: Yes, includes are an absolute must, especially as your site grows. I've been using them on 2create for quite some time.

As far as the long list of tabs... LOL yeah I didn't really follow the SBI! suggestions on that part. I got lazy and instead of creating tier 3 pages I went with a bunch of tier 2. Definitely not recommended from a site usability standpoint.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #5 (permalink)  
Old 02-06-2008, 03:00 PM
max's Avatar
max max is offline
Regular Babbler
 
Join Date: Apr 2007
Posts: 91
max has a few positive reputation points
Default You're my hero.

OMG! You are so inspiring. Love it Lisa! I've got to redesign my SBI! site NOW! LOL So how did you do those dotted lines around your columns if you didn't use any tables? Is that CSS too? Oh gosh I have a lot to learn.

Can you give us a breakdown of how you did your site in CSS or is that too much to write here? No biggie if you can't but I'm really curious about this now and I may have to get Dreamweaver too.
__________________
Just call me Max. :)
Reply With Quote
  #6 (permalink)  
Old 02-06-2008, 03:28 PM
Regular Babbler
 
Join Date: Nov 2007
Location: Florida
Posts: 51
Greg1 has a few positive reputation points
Default

Hi Lisa,

Site looks great, very professional

I just made some minor changes to my SBI site and had to manually change every page Perfect timing for me to really appreciate what you are saying.
Reply With Quote
  #7 (permalink)  
Old 02-06-2008, 03:36 PM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default

Thanks Max,

You are going to die when you see how simple the actual layout is. In a nutshell you create your site in divisions (that's what the div
tag is for).

So the basic HTML layout of my entire site without the content is simply this...

(I didn't add HTML brackets because the forum tries to implement the code)

div id="container" [this is the entire box containing my site]
div id="top" [the header with my logo]
div id="leftnav" [My left navigation]
div id="sidebar" [My right sidebar]
div id="content"[My main text]
div id="footer" [My footer]

That's the layout for my entire site. And what you do with CSS is you define the attributes for each of those ID's in your style sheet.

So my "container ID" (which is the entire box my content sits in) is 850 pixels wide with a background of that pinkish color, etc. All that is declared in the style sheet so if I ever wanted to change the width of my site, I just change that one number in my style sheet.

My left nav is 140 pixels wide with the gray background, 14pt font, bold etc. etc.

So you use your style sheet to define all the parameters for each section. And how you get everything on the left and right is you tell the 's to "float" left or right. So that's how the "sidebar" (my right column) got over to the right side, etc.

So once you have your layout in div's you go to your style sheet and tell div's how to behave.

The dashed line around my columns is part of CSS. So for my "leftnav ID" section in my style sheet, I tell it to have a dashed line border on the right and bottom of the container. Yes, you can even get as specific as to what sides the border appears on. Notice the dashed line doesn't go all the way around.

That's why Dreamweaver is so helpful because it lets you know all the different attributes you can use for CSS. I didn't even know you could use dashed (or dotted) lines until I did this site. You can literally control every single aspect... even the spacing between my paragraphs and line height can be controlled.

Truly amazing.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #8 (permalink)  
Old 02-06-2008, 03:37 PM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default

Quote:
Originally Posted by Greg1 View Post
Hi Lisa,

Site looks great, very professional

I just made some minor changes to my SBI site and had to manually change every page Perfect timing for me to really appreciate what you are saying.
Cool, thanks Greg1! I'll have to check your site.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #9 (permalink)  
Old 02-08-2008, 06:47 AM
West's Avatar
Master Babbler
 
Join Date: Jun 2007
Location: Philadelphia, PA area
Posts: 266
West has more than the average amount of reputation points
Default

SBI! recommends Nvu because it's easy to use and free. Has anyone here used this? I watched the transition tutorial video last night and it looks pretty easy.
Reply With Quote
  #10 (permalink)  
Old 02-10-2008, 07:18 PM
Master Babbler
 
Join Date: Jan 2008
Location: The Lone Star State
Posts: 145
Jazzy has a few positive reputation points
Default

Looks great!

I wanted to do my own design, but I have no idea how to design a website and I had so much else to learn that the actual design has to wait.

I hope to get around to it eventually.

I really like your new design!
__________________
www.successful-homeschooling.com

You can follow my SBI journey on my blog: Successful Work at Home Moms
Reply With Quote
  #11 (permalink)  
Old 02-10-2008, 09:01 PM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default

Quote:
Originally Posted by Jazzy View Post
Looks great!

I wanted to do my own design, but I have no idea how to design a website and I had so much else to learn that the actual design has to wait.

I hope to get around to it eventually.

I really like your new design!
Thanks Jazzy.

Yes, it did take some time to figure a few things out, but well worth it because once your site is setup in Dreamweaver (or whatever program you use), making updates is fast and easy. The good news is, when you're ready to do your own design with SBI!, the instructions were very clear.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #12 (permalink)  
Old 02-11-2008, 08:32 PM
Rob's Avatar
Rob Rob is offline
Supreme Babbler
 
Join Date: Nov 2007
Location: United Kingdom
Posts: 618
Rob has more than the average amount of reputation points
Send a message via ICQ to Rob Send a message via AIM to Rob Send a message via MSN to Rob Send a message via Yahoo to Rob Send a message via Skype™ to Rob
Default

Great new look lisa,

I have to say the whole colour schemes definitely improve your ads and there embedding into your content it looks great and organised at the same time.

A big improvement definitely! Keep it up lisa.
__________________
Reply With Quote
  #13 (permalink)  
Old 02-27-2008, 06:26 AM
Jewel's Avatar
Master Babbler
 
Join Date: Jan 2008
Location: Florida
Posts: 208
Jewel has a few positive reputation points
Default

Your site does look great Lisa!

Since I have yet to start writing my site (I am still on Day 5 and haven't picked the name yet) I am clueless about a lot of the technical writing/uploading stuff you are talking about here!!!!


From everything you say I am tempted to run out and get Dreamweaver....but I am disciplining myself to just stay with what SBI has for now...for my first site...so I can get a handle on all of the technical stuff. Then I will get something else....either Dreamweaver or Coffeecup. I know myself and once I master understanding the basics I will want to learn more and go further.

A few things (and maybe this does not belong under this thread)...when you build your site with SBI, it has to be hosted by SBI...you use Hostgator...you can do this because you did not use SBI to build your site? At this point, using Dreamweaver and Hostgator, what do you use SBI for, their great information and great tools?


Also, for Dreamweaver, I went to the template page, just to look around. I think this might be one of those stupid questions, but I just want to make sure I understand correctly...to buy and use one of those templates you have to have the main software package, right? They are just add ons?
Kind of like if I were to buy a package of forms built for Word...I still need Word to open and use them?


Jewel
Reply With Quote
  #14 (permalink)  
Old 02-27-2008, 02:44 PM
lisa's Avatar
Administrator
 
Join Date: Apr 2007
Location: Dallas, TX
Posts: 3,764
lisa is the Admin and cannot be rated.
Default

Quote:
Originally Posted by Jewel View Post
A few things (and maybe this does not belong under this thread)...when you build your site with SBI, it has to be hosted by SBI...you use Hostgator...you can do this because you did not use SBI to build your site? At this point, using Dreamweaver and Hostgator, what do you use SBI for, their great information and great tools?


Also, for Dreamweaver, I went to the template page, just to look around. I think this might be one of those stupid questions, but I just want to make sure I understand correctly...to buy and use one of those templates you have to have the main software package, right? They are just add ons?
Kind of like if I were to buy a package of forms built for Word...I still need Word to open and use them?


Jewel
Thanks Jewel,

First of all 2create is not an SBI! site. It's hosted on a regular host. My SBI! site, flat stomach has access to all the brainstorming tools, etc. You cannot combine the SBI! tools with another host.

To be honest you could probably buy one of the dreamweaver templates and they will function pretty well in other editors. The reason they are classified as Dreamweaver templates is they were more than likely designed using the Dreamweaver-friendly HTML and CSS tags so everything shows up properly in that editor.

But in most cases you can use the template for almost any editor. There are just no guarantees of 100% coding compatibility.
__________________
Don't put the cart before the horse.
Plan your website, then create it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 Create a Website | 2 Create a Website Blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Recent Blog Posts...

10 Reasons You Should Be YouTub-ing
Is Google AdSense Dead?
Ever Run Out of Blog Topics?
Reply With Quote
  #15 (permalink)  
Old 02-27-2008, 03:51 PM
Jewel's Avatar
Master Babbler
 
Join Date: Jan 2008
Location: Florida
Posts: 208
Jewel has a few positive reputation points
Default

Aaaaahhhh, got it, thank you!
Jewel
Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT -6. The time now is 11:17 AM.



WB Sponsors

Profit Lance Review

Work At Home Jobs

Houston Web Design



 Subscribe to the Website Babble Feeds

2 Create a Website Homepage | 2 Create a Website Blog


Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0