Category Archives: Redesigning my Chaos

RMC: Programs you might need

Sorry for the delay, but its finally time to get our computers ready for the redesign! I have to preface this by saying that I have been doing this website stuff for almost 10 years now. This is not my specialty, but I do have some experience with the programs. Just because I’m using more advanced features and programs, doesn’t mean you have to! The important part is taking the time to become familiar with the programs you are using. The more you use them, the more you’ll learn about them.

HTML Editing Software

This is one of the most important programs you’ll need for customizing a website. If you have previous knowledge, you can get away with just using Notepad, but I like to use a program that has some built in “help”. There are many different types of HTML editing software. I use code editors, but there are ones out there called WYSIWYG (what you see is what you get) editors. The problem I’ve found with them (years ago though), is that they are not as code friendly as I would like. When I say that I mean, it gets a little jumbled on the code side, even though things “look” okay. However, they are a great way for a new website designer to jump in and see what code does what function.

Komodo Edit: This is the program I’ve used for the past year or so. It’s free, and it has a built in code database. So you don’t have to remember what values go with what tag. It’s pretty easy to use.

EditPad Lite: This is a free program also, but it’s much more basic in terms of features. However, if you’re comfortable editing code to some degree, this is a great program. This is actually the program I recommended to my siter and she still uses today. She doesn’t need it to do a lot, just to be able to edit basic coding.

SeaMonkey: This is a WYSIWYG editor/email/browser/IRC all in one program. I actually just installed it because I wanted to find a good WYSIWYG editor to show everyone and boy did I find it. I’m kind of in love with it myself. What I really love about this program is that it is a Mozilla powered product. If you haven’t been in the web developer world, Mozilla Firefox is one of the more popular browsers among web developers. We won’t go into the whys, because frankly the discussion gets too heated for my taste!

Photo Editing Software

Adobe PhotoShop: This is the program I currently use. I got a copy of an older version from the Navy base when they were cleaning out their stores. Sometimes if you know someone, you can get some pretty cool stuff that was purchased for government use but then became outdated. They do have a more affordable version called PhotoShop Elements. I’m going to be saving up for a copy of a newer version of that. It might not have all the bells and whistles of the full Photoshop but it’s more affordable for me! (Between you and me, if I ever got rich, I’d buy the Web Premium Suite from Adobe, but that’s just me ;p)

Paint Shop Pro: Before I got onto the Adobe train, I had a copy of Paint Shop Pro. It’s always been a much more affordable program. In fact, maybe I’ll save up for that one too. Just because I’m a software junkie like that and I like seeing the differences.

Gimp: This is a free program. Unfortunately, I haven’t had a chance to play too much with this one to see if it stands up to the other two. I played a little bit and if you aren’t looking to get too complicated, this program could definitely be your solution!

Again, I want to reiterate that you have to play with these programs and learn them. There is a learning curve, but I do have my mother using PhotoShop for her crafting, so it’s definitely learnable! :p

Next up, I’ll show you the process of how I design my banner and other images I’ll need in the design.

Disclaimer: I have no affiliation with these software companies. They are not compensating me for talking about them.

RMC: My Design Inspiration Sketch

When you have any kind of redecorating project, it’s always a good idea to look around for some inspiration. My website encompasses a blog and a genealogy database, so it’s important that I plan and consider both those factors in my new design. As I was playing around in the test section I created during my TNG tutorial, I found out I liked something I never thought I’d like. Almost every website I’ve every created has had a fixed width design. This means that no matter how big or small your screen size is, I’m perfectly aware that my design is going to be certain size. Variable width designs scare me quite frankly.

I don’t know why they do. I think it’s the horror of the design falling flat in a 24″ inch monitor like mine. What if it is too scrunched in a smaller monitor size. To avoid this fear, I’ve just been doing fixed width. In my original About Me page, I wrote that I was trying to discover things about myself. That was back in 2010. Well I’ve discovered many things about myself in that time. One of them being that I like to learn, but once I’ve learned something, I’m scared of the advancement to the next level. That puts me in the stuck position.

Well, this year the training wheels are coming off. I’m making more efforts to get out there and learn. So one of the steps I’m taking is…. My new website design will be a variable width design! Oh gosh, that’s just crazy. I know, I’m weird.

click for full size

My first sketch was on paper when I was going with a fixed width design. So when I switched, I decided to go into PhotoShop and hash it out there. I played with fonts and images. This is just a rough draft. The banner will get a little more ornate, and I haven’t decided how to handle the links on the side yet, but it’s an ongoing process. What I really hope to accomplish is a design that’s more easily changed out when I like.

I like the more subdued colors too. I loved the splashes of color from my previous working design, but it just wasn’t working in the long run.

Next we’ll talk about programs you’ll need in the customization process!

RMC: Creating a Database and Installing TNG

Alright folks, today is the big day! Are you ready to install TNG? I do have to warn you, you will have to have some kind of webhosting. If you haven’t found one yet, you just have to be sure that they support PHP and MySQL, and if you’re paying for a webhost that doesn’t support them, you should probably switch. There are great options. I use Dreamhost, but have used others in the past. I believe Darrin has some recommedations at the TNG website, so check those out if you haven’t already!

Before we start, other then webhosting you will need at least one other program for installing. If you want to delve into customization, then I recommend a second program also for editing. We aren’t going to get into that today though. Today is just the nuts and bolts of getting TNG installed for the first time.

The program you’ll definitely need is an FTP program. I currently use FileZilla, but there are many free FTP programs out there that work just the same. If you’ve set up a webhost, they should have sent you a login for an FTP program.

click for full size

Continue reading

RMC: Part 1 is the Planning Stage

To start my re-design, I have to first lay ground work. Since I have an existing website, it’s important that I think about what works about the website and what doesn’t. This way I can be aware of issues as I enter the design process. If you don’t have an existing website or aren’t looking to delve into the design from scratch aspect, then you won’t need as much planning. I still think it’s beneficial to know what you want out of your website before you jump into one.

In my case, I was hand coding my whole family tree before I stumbled across the TNG Sitebuilding software. When this software was shown to me, I knew it was exactly what I was looking for. I’ve been using it ever since and in 2010, I added this blog.

The first part of my planning stage involves sketching out the basic design on the website. I usually like to go in knowing where things will go, but I’m always flexible. There is a 99% chance something will have to be moved around. This is not the first draft of my re-design. I’ve re-designed it twice already, and had to change it twice because of a cluttered design. My design sketch might not make much sense to others, but it does to me. I know that I like the effect of a banner at the top and the buttons underneath.

On my current design, the TNG menu is only visible from the moore-mays.org main site and disappears from the left once you click on the blog. Then the same happens with the blog, but on the right side. My new goal for the redesign is to trim down the two menus and have one column on the right or left side (see I’m flexible!) with just the important, most used, items. I also don’t want the wall of text that I currently have on the blog menus, so I want to break it up a little bit with small logos for GeneaBloggers and a few other things I haven’t determined yet.

The biggest thing I want to happen is a smoother integration of TNG and WordPress. There are WordPress and TNG plugins that will integrate the programs, but I’ve never tried them. So I’m going to make fresh installs of both programs and test it out before I incorporate it in the new site. If I can get them to work the way I want to, then I’ll use them, if not, then I won’t. Either way, I’ll document the process.

After the sketch, I had to decide which things I would be putting in the menus on the side. You have to think about what links people will be using the most and which ones you yourself will be using the most. Don’t think about this website as just a memo you’re sending into the world wide web. My genealogy website is a fully functioning tool. I use the TNG database on a daily basis and the blog serves as a research diary for me. I’m not always so good about keeping a research log. Though I am getting better! The one thing I almost always do though, is blog about what I’m currently doing with my tree.

For me, when I started the blog, I had no idea what genealogy blogs encompassed. I just wanted to find a way to interact with my long lost family members who stumble into the website, and it’s a great way of sharing stories and photos with my family who live in other states.

So do you have a website planned out? Are you a fly by the seat of your pants person? I’m a little bit of both. I think it keeps me the right levels of flexible yet structured. Feel free to follow this ongoing saga and comment with your plans, suggestions, links, etc! I’ll try and respond back. Sometimes I get a little shy about what to say, but I’m getting better at that too! ;p

Get the TNG Sitebuilding Software (webhosting not provided)

Get WordPress

I’m not sure how fast this process will go, so if you’re in a rush, this might not be the follow along for you. There are great resources on TNG like a forum and wiki!

Redesigning my Chaos

Like many genealogists stuck at home, I’ve been watching what I can of Roots Tech from my computer screen. It’s been fun, inspiring and distracting in all the best ways. Sure my laundry is a little behind but that’s alright, I’m sure my family has plenty of clean clothes still. I think.. ha!

One of the big hits coming out of Roots Tech is the huge exposure given to the TNG website software. If you’ve read this blog for awhile, you’ll know that I love TNG and I’ve been using it for years and years. As early as 2008 I think. I’d have to double check. I really want to say I was a version 6 user and the 9th version is just being released. So it’s been awhile.

Design Sketch

With all this new exposure, there are bound to be a thousand new questions. I’ve decided that I’m going to do a special project here on my blog. One of my goals is to get this website redesign done for good by the end of the year. In order to help myself along with that goal, I will be writing blogs about my progress. It makes me more motivated to sit down and do this if I’m documenting the progress. I love documenting everything I do for some strange reason. ;p

This redesign is going to encompass a lot more then what I was originally planning to do. I intend to walk through and document the process of getting TNG and WordPress installed on my own domain. Integrating them, all the things everyone would like to do but thinks they can’t. I’m here to tell you, you can! I’m going to walk through the process with you. I’ll document my trials and tribulations or as I call them “misadventures”. If you look at my current website design, there are plenty of flaws that I’m eager to fix, and I can’t wait to bring others along in the journey!

Yes I’ve already got my website software installed and ready to go, but this installation has been around for many years, especially TNG. Which means there are plenty more advancements in technology since I originally started. I plan to do tutorials for different things once the site is set up. Some of the things I plan to highlight is the transfer of your GEDCOM file from your software to TNG. I’ll show tips and tricks to the software and the little quirks.

I know the big question will be am I qualified to write these tutorials? Well that’s not a question I can answer for you. Everything I’ve learned has been through trial and error. I’ve had things break completely, I’ve had things work wonderfully. I’m just a regular girl who likes to mess around with websites and genealogy. I’m not stuffy and I definitely don’t mind admitting that I could use more then a few classes in genealogy and web design. Until I can save up some money though, it’s time for me to teach myself a little bit more! All these lessons I learn I’ll document here with links back to everything I’ve found and utilized!

Related Posts Plugin for WordPress, Blogger...