I felt I had a good vision of how I wanted my client’s web site to look like.  I decided to try working on it in WordPress and not on the University’s server.  Guess what I discovered?  I had purchased a domain host on “wordpress.com” and not “wordpress.org.”   OH SO SILLY.  Wordpress.com doesn’t let you do ANYTHING.  When I realized that my cindeekarns.com was hosted at the .org site and that’s what I was expecting to use for my business web site, I had a plan.

I thought the easiest thing to do, would be to migrate my domain name over to wordpress.org.  I was following simple instructions….really…I was.  Suddenly I could get into neither web site.  ARG!!!

I spent about 2 hours with the support team at WordPress.org and even THEY couldn’t untangle the two sites.  The only option was to blow up my wordpress.org site and start over!  Yes, from scratch.  Luckily I had exported files before I started messing with things.  Turns out all that really saved was my blogs.  The rest is toast.  🙁

My wordpress.com site (alaskanbioshelter.com) won’t let me leave and migrate over to the .org site until the last day of November.  Apparently there’s some law that you have to stay with a host for at least 60 days.  So I’m waiting to have both sites on the wordpress.org hosting site.  I have to report that GO DADDY support was overly helpful and funny and patient, etc.  I had to talk with them since they are my cindeekarns.com hosts.

In the meantime my alaskanbioshelter.com site has a lot of wierd stuff on it since it tried to merge with the cindeekarns.com site.  I will have to try straightening that out today.  Did I ever tell you how much I LOVE doing this???  Egads!

NOW……maybe I can start again?  (I’ll work on my cindeekarns.com later.)

I spent the afternoon mapping what/where I want to go as I design this web site for my client!  I haven’t showed him yet, he’s in Kaktovik right now. 

So I’m on my first step!  Define a Vision.  What result do I expect from this web site?  Hmmmm.

About the house:  I want people to see what’s possible, to be inspired, to try something at their house.  About my consulting/designing:  I want people to schedule a design consultancy, to see that they need a design,   About workshops:  sign up for workshops, sell the idea of needing permaculture knowledge.

I would like to have them stop in once a month—once a week would be better, but I’m not sure I can keep up with that.

My audiences

House:   architects, do it yourselfers, environmentalists, etc.  People who want to tour it

Consulting—people who need help designing systems—properties?

Workshops—people who want to learn how to do things.

BUILDING UP MY CAPITAL

SOCIAL CAPITAL:  Can I build connections between the people who visit my site? I can for sure build loyalty.

FINANCIAL Capital

I need $10,000 a year profit or more…..

LIVING CAPITAL – What needs to be nurtured?  I guess if I did a weekly blog that would be nurturing?

Intellectual— I will need to give quality info on the site

Spiritual Capital?  Interesting.  Should I be looking for spiritual capital?  Maybe that means making people care about my website???

Cultural Capital: nothing like a good story.   So….what does that mean?  I really like telling funny stories about what happens while living in the house.  So…I wonder if I need to have the funny story blog and then the teaching blog??? Interesting.

Where are the edges?  Where’s the creativity?  What do I want to learn next?

PERMACULTURE ETHICS–

Care of the earth needs to be on the front cover.

Care of people needs to be imbedded

Sharing the surplus needs to also be evident and the surplus is knowledge.  Be the elder.

When do I know it’s over or needs to be redesigned?  

Permaculture says to look at the edges for guidance—where the most creativity is happening.

Lost in a sea of HTML and CSS3 code, I’m placing all of my hope for a good web design in a new e-book I discovered, Permaculture Web Design in 15 Steps by Nick van Zutphen.   It uses Bill Mollison’s seminal work, Permaculture, A Designer’s Manual as the main reference.  As a permaculture instructor, I was very intrigued. Because the first of the permaculture principles is to Observe, I assumed it would start there.

van Zutphen called Step One: Define a vision.  It’s true that you have to know where to observe before you do it, so visioning is a great place to start. He does a great job defining a vision as more of a gut feeling than a goal, in that it sends you in a direction not to a certain place.  To find your vision, you should ask these questions.

1.  What result to I expect from this web site?  Why/When do I redesign the web site? (if a vision is a direction, not a place)

2. Who is my audience? How and when do they use my website?

3. What is the profit this website generates?

Step Two: Keep Permaculture in view, remembering that permaculture is a system of designing system components (conceptual, material, strategic) in a pattern that benefits life in all forms.  So when we design, we should be observing the relationships between components, not looking at each component by itsself.   The web site needs to have multiple functions, so if one fails, the other two can still hold it up!

Step Three: Broaden your view!  Make sure you aren’t designing for only one thing, like if you only designed for zucchini in your garden, you wouldn’t get as many hits as if you designed for the three sister’s garden.

Step Four: Find your property.  In this case it’s your screen!  (Make sure you keep your vision in mind when designing your screen!)

Step Five:  Esthetics will follow!  Make sure your functions and interactions are in balance.  Beauty should naturally follow.  Hmmm.  I wonder what weeds look like in this website permie model? Or are there no such things as weeds?  Do they have the most vitamins to add to the health of the site?

Start with an outline or mind map that matches your vision and build it.

After it’s built, OBSERVE! Check out your site traffic carefully and make changes to realize your vision. Keep observing and changing, it will grow and grow.  Introduce innovation after you have a strong following.

Step Six: List your elements!  (ideas for elements would be Content, Graphics, Links, Visitors, Search Engines)  To extend the metaphor here, your content is soil. Your audience is what grows (plants) that only grows if the soil is fertilized.  The plants aren’t pollinated without bees or the wind.  Graphics attract the plants to the place you want the plants to grow.  And finally the fruit  is the yield you are after.

Once your graphics pull in your audience to where you want them to grow,  you need to decide how to keep your soil fertile and how to pollinate so that you can bear fruit.  The fruit should be whatever it is you are after:  the realizaiton of your vision.

Step Seven:  Design your zones.  In Permaculture gardening, zone 0 is inside your home (easiest access) zone 1 is closest to your back door, to grab as you make a salad or whatever you need every day.  Zone 2 is your larger garden, alittle further from the house.  Zone three is perhaps your orchard, where you only go once a week or so.  Then zone 4 is more like a potato garden.  Plant it and leave it, (well, that’s how WE grow our potatoes), and then zone 5 is a place of nature.  

This is how van Zach interpreted zones for a web site.  I really like it.  Of course every design is different based on what your needs are, the south facing slope, etc.  So this isn’t necessarily the final design, but it’s a good place to start! 

Step 8:  Apply the Permaculture Ethics:  Care of the Earth; Care of People; Share the Surplus, which he interprets as make sure all can live in harmony on this site.  I think that means not to get too political!  🙂

Step 9:  Build up your capital!  Just as there are many kinds of plants, there are many kinds of capital:  Social Capital, (connections) Material Capital, (high quality knowledge that is still viable after 2 years) Financial Capital, Living Capital (things that need to be nurtured), Intellectual Capital, Spiritual Capital, and Cultural Capital (a well told story).  Investing in all of these gives you diversity.  Watch for capital that is out on the edge.  That’s where the creativity is.  Look there for ways to grow your capital.

If you don’t nurture your plants (audience) they will wither and die.

Also….if you put up too many edges and borders, your capital will get too unruly and distracting. Make sure your edges are clean and simple. As soon as your audience is distracted, you’ve lost them in the weeds.  However, if your reader is looking for a distraction or something irregular, they are very likely to be distracted by what’s on the edge at the end of a line—on the right side of the screen.  An non-distracting left side encourages readers to start reading.  A busy left side could keep your reader from even seeing what you want them to see on that page.

Step 11:  Introduce diversity!  The more diverse your garden, the more resilient it is.  So too with web sites!  Diversity makes the system resilient.

For instance, if you only have a monocrop of information, it won’t be long before something new comes a long and your readers will be elsewhere.  Keep the new stuff coming.  Keep your website updated.  Introduce variations on a theme.

Step 12:  Sort out your energy consumption:  How much time/energy are you putting in?  Are you getting enough out of it?  Are you getting good kinds of capital out of it?  How can you make sure your energy is sustainable?  The system needs to produce more energy (or capital) than it consumes.

Step 13:  Self Sufficiency would be “user generated content” so they continue the growth without you.

First invest in a loyal base with a healthy flow of visitors, then you can set the vision or direction for user generated content. But you shouldn’t start until you have a healthy food forest (when the time is right).

Step 14:  Consult the Designer’s Manual (by Bill Mollison)

Step 15:  Define your end goal.   When has your site served its purpose?  Make sure your site doesn’t remain in existence just to maintain itsself.  That might mean you aren’t getting new readers or followers.  Then you need to re-design.

My professor says I’m trying to climb the whole mountain all at once in my html/css course. Interesting she should say that.  I have a really hard time with learning things from parts to whole. I really need to see the whole before I can start understanding the parts.  It’s  permaculture principle #7:  Design from Pattern to Detail.  I just haven’t seen or understood the pattern yet. It’s so complicated. I DID download an ebook that’s going to help me make sense of all of this (keep your fingers crossed).

So this week’s part is on boxes and how to add them to your web site.  Since I don’t have a whole picture yet, I can’t imagine what I might use boxes for, but I need to learn them now.  So, my boxes are random, but I’m confident I could recreate them.  I will use boxes to bring something of major importance to the attention of my reader/browser/lurker.  You can see that both of those boxes would work for bringing something into focus.  The second one with its own background is better.  

I spent way too much time down various rabbit holes this week again because of all the cool stuff there is to check out on our syllabus.  One of the things I thought was SO COOL was the CSS3menu.  Turns out it’s a program that is not authorized to be used on my computer, so I learned how to authorize it.  I added it to my web page and it is NOT working.  I tried many different things to make it work.  At the moment it looks like this:  
It’s so maddening because on MY computer screen I see what is below.   So I may have to delete it and just make my own box with tabs.  That’s what I get for trying to be fancy, right?  At the time of print, I did not have time to go back and mess with it. 
 

One thing I want to remember is that when I’m doing a <style> entry, I can do it at the top with all the other CSS stuff, but if I’m doing a <div> I can put the style right with the <div>.  I didn’t know that before.  Or I forgot it.   I do like how you can see different boundaries for different paragraphs by naming them p.one, p.two, and then just telling the engine to go find the information for that paragraph.

That was my problem with the rounded corner box.  I couldn’t get it to listen to me!  It kept taking the directions for p.one instead of p.two.  I had it curved, but then I wanted it to be a different color than p.one’s grey.  When I changed it to red, it wouldn’t be rounded anymore.  I’ve got to move on and not care at this point.  🙁

I also attempted to put little stars in front of my list of classes.  No matter what it wouldn’t work.  I tried linking it directly, I tried url and also src prefixes, but nothing.  I must be missing a colon—which sometimes happens because I may need better bifocals!  🙂

I have yet to figure out if this really works in Word Press.  I should try it.    Of course I would need to upload the pix, but it really didn’t work.  I took about 30 min. to cruise around to see if I could find something like a place to add CSS or any specialized code things, and didn’t.  Most importantly, the boxes didn’t come out.  So, of course, I’m wondering why I am doing this if Word Press doesn’t understand my CSS stuff.  Maybe that part is coming up next week:  How to transfer all of this to a word press site, because we can’t just keep our stuff on the University server for ever, right? 

So, I’ve been looking at other sites.  One that I really like is from a friend.  I asked her if she did her own site and she told me it was a template and she just plugged in the info.  Here it is:  http://www.laurapatintherapy.com/   It meets all of my criteria:  simple, nice colors, one thing to focus on, in this case it’s a quote, and scroll down for more info.  The template stays in place for all the pages and the quote is on all the pages.  But what I really like is the rotating pictures.  They aren’t her pictures, so if I could add my own, that would be awesome.

The smaller details that I love are the rounded corners, her background is simply a margin around the outside of the page.  I like how the boxes have clean white tiny borders,  there are only 3 colors and that remains the same throughout the site.  The fonts are easy to read and soft (sans serif family probably).  It’s nice because it’s simple.

So….another week. I have to quit early (it’s Thursday right now) I’m speaking at the Food Conference starting tomorrow and my power point and hand-outs are not done.

I’m thinking I’m done with trying to upload my own stuff to the server. It might have been more helpful had I figured out how to FTP to the wordpress site. I’m not sure. But…..I have to get going on the real project before my boss fires me. AND I have another grandbaby due next week–my second. So I’ll be hanging out with my favorite 2 year old Auri in Fairbanks soon and won’t have a lot of this uninterrupted time that I’ve grown to love!

Here’s a link to my page canyonartsschool.com

I’ll let you know how the FOOD CONFERENCE goes: Here’s the link!

• About the Bioshelter

• History
• Bob, the Builder
• PERMACULTURE
  • Principles to Live By
  • Why is it important?
  • What is it?
• TOURS
  • Live Tours
  • Skype Tours
•  
• CLASSES
• CONSULTING/DESIGNING
• Contact Us

css3 dropdown menu by Css3Menu.com

Alaskan Bioshelter

Living with Nature; Living in Balance

A state treasure!

About us

The Alaskan Bioshelter, a national award winning home (1987), is a state treasure.

It’s
two story, 42 foot indoor wetlands, pond and fountain bring the joy of
lush greenery even to the darkest, coldest parts of winter. Even
though half of the house is buried into the side of a mountain to
conserve energy, it continues to be a living, breathing, growing system of
koi, worms, bacteria, a multitude of plants,and humans, who are all
dependent on each other to create a unique,healthy living space.Without a
well or a septic system, the house lives in balance with nature. The
grey water is completely recycled back through the system and the worm
composter takes all of our waste including cardboard, junk mail, food
scraps, fish skeletons as well as our toilet waste, so that the finished
compost can be reused on our gardens in the spring.

©AlaskanBioshelter & Permaculture Center

Alaskan Bioshelter
Living with nature; Living in Balance

Which is really cool, but can you see it on your machine?  Probably no one has Bear Paw font on their machine except me.  So I will need to tell the computers who don’t have this awesome font to find something similar.

However, there is no way to know if you are seeing Times or Serif, which are the other fonts I added in case you don’t have Bear Paw.  So…..I’m assuming you can see it.

Next I wanna try google fonts.  I added the plug in, so that must mean I can use those.  Hmmmm

First thing I did was go to FontSquirrel.  Not sure how I found it.   I LOVED Bear Paw and down loaded it.

I really like the site, though, because you can search fonts based on what you are going to use them for.  Check it out!

There was a snag, but AnsomAlex told me in his tutorial that I should ignore that.  Well, interestingly enough the ol’ bear paw won’t work in WORD, but it did in Sea Monkey!  

I decided it was an appropriate font since bears have walked into the front door of my house and have caused all sorts of trouble including destroying our brand new grill!  So…I have it.  Can’t wait to use it.

So I listented to some others.  I played with my Font Book and found all the amazing fonts I already have on my computer, but then I found this:  the BEST article on this whole design process—color and fonts is this article:  http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

It’s the only thing that’s really made sense to me in all of this decision-making!  Maybe I just think in metaphors???

But then I found a survey.  It’s a MUST DO survey, which will tell you your font-type based on your personality.  Take it here!

So now I should have no decisions to make, except that I answered the questions for me instead of the business.  Until….I looked at the next link!  I am an old-fashioned calligraphy lover and went to look at font squirrel again.  I downloaded a couple more.  🙂

When I re-do this assignment, I will have those fonts right in the text. But tonight….I’m too tired.

Looking for patterns and ideas on the web took LOTS of time this week.

I spent more than three hours looking at examples of the best of the best websites @ Webby Awards What I discovered is that those sites were VERY simple. One or two colors, some image to suck you in and then just at the bottom of the screen, words like “About us” or something to make the reader scroll down. This is in direct contrast to what my permaculture mentor told me: you only get one click, so have everything the client wants to know on the front page. So….. I’m wondering about the purpose. When someone accesses your site from facebook because you’ve said “click here for more info.”, does that mean that you should link inquirers to a different page than your front page??? Interesting idea.

I really liked dudamobile.com because not only was it a great site to look at, it drew me right into what it was selling: web site design. I signed up and noticed right away that they too were forcing designers to design very simply. I made a front page that I liked and now I will try and copy that by making it myself.

This assignment was giving me permission to get sucked into rabbit holes that I didn’t really need to go down. I was intreaged by the idea of a game called DOTS and that became a small obsession this week. I also got totally involved in a crazy family with a little baby. It seems they have so much times on their hands, they play dress up every Saturday and attempt to get ONE picture. Crazy, but somehow addicting to watch—maybe because I have a 2 year old granddaughter that would NEVER put up with that. If you want to go down that rabbit hole, click here. Make a cup of coffee—it’ll be a while before you get out of there.

So….after all of this learning, I realized that I HAD done something similar to these sites on my own. I made a large header, put the name of the website on a white strip with a black font and then I added a blue background, which was the same color as the header. So….what now? I wasn’t sure what to do…

So I stalled…..Should I continue this practice website for the Alaska Citizen’s Climate Lobby or should I just move on to my own site and work on that? Can’t decide. Drink more coffee. Go outside. Can’t decide. Pull all the tomato plants. Can’t decide. Clean the cat litter. Can’t decide. Drive to town….you get the drift.

So I finally started working on my stuff. I started with trying to re-create the page I had made on DudaOne. Hmmmm. Copyright. I hate copyright stuff. I googled if I could use free images for personal use on a business site. Didn’t look like it. So….I started taking my own pictures. I fixed them in iphoto and exported them to Paint. I had FIVE to choose from. I called my mother for help. She couldn’t decide. I went outside and moved bricks. I posted my choices on Facebook looking for help from the masses. I decided to wait for responses and turned on old re-runs of Gilmore Girls.  Here are my five:  

So here I am. I slept on it and picked one, but I needed a different back ground. I blurred an old picture that would do for the background. Now to finally start!  Actually, this is what my old page looked like with the new background I made and actually—it looked pretty good!  

Note to self:

How to add a background picture to a page: you need to tell the web page where to find the picture. I finally used the index in the text because I couldn’t get it to work with Chapter 11 on color. It looks like this in HTML:

</head><body><img title=”greenage” alt=”blury solarium” src=”/AlaskanBioshelter/IMAGES/BackGround.jpg”>
!—this is how to put background pic in with html. Note that I have to have the picture uploaded to the server and have src search for it in the right folder.  Notice the backslash for the folder path.—!

Can I do it in CSS?   I can!

<title>Bioshelter</title>
<style type=”text/css”>

body {
background-image: url(“/AlaskanBioshelter/IMAGES/BackGround.jpg”);}

</style type=”text/css”>

Okay, so I’m making progress.  If you checked it out now, you would see the website I had last week with my homemade background in the background.

Upword and onward!   A Bioshelter site!

Well, I’m learning something….I just don’t know what.

Here’s what I want the web page to look like:

And here’s my great artwork!  (egads!)

Then I decided I could never compete, so I changed the background to a fern in the solarium at sunset.

Lots of problems and I didn’t think I liked the pink—or how small/overlapping I had to make it.  This one also goes against the too much/keep it simple idea I had.  So I went and took another picture.  The point is that the Bioshelter has green all winter, so why not put that on the front page, right?

Okay, so this one is too simple maybe.  The ferns are a little out of focus too.  What do you expect from an iphone?

So again—the hardest of all things:  decisions.  Maybe that’s why I like the point and click/build it for you web sites.  No decisions and instant professional looking stuff.    🙂

Off to look at fonts.

It was raining apples in the solarium as I pulled out a chair at the dining room table for my client. She happily took the chair and laughed while I went out to fish the apples out of the pond. It’s time to pick the apples, by the way—another task. I offered her a wet apple and we began.

She began by telling me how many web sites she had. It was rediculous. A Google Site, a WordPress Site, a Go Daddy site, a blogger site and several different facebook pages. She had such a hard time remembering which password went where and how to access different back doors, it was crazy.

What she really wanted was to have one big happy web site. But that had to all of the different aspects of her job. She needed a place to show customers what they would get if they had her come and do a Permaculture Consultancy Job for them, or a whole design. She needed a place to tell the stories that go with living in a living house, she needed a place where people could sign up for workshops, and a place where she could teach her on-line courses so that each class of students could only access their own course, while having an overlapping page for all of her students (former and present) to talk about permaculture. She might also need a place to talk about Natural Building—the greenhouse and the rocket stove. One more page she might need is one for virtual tours.

alaskanecoescapepermaculturecenter.wordpress.com, which is also alaskanbioshelter.com

https://sites.google.com/site/alaskanecoescapeedu/

http://cindeekarns.com/

http://bioshelter.blogspot.com/

and parts of:  http://alaskapermaculture.com/

She needs more business and doesn’t feel like people are finding her.

To me it sounded very complicated. Website design is hard to make look simple when everything is interwoven. That is her biggest concern. It needs to look professional and not haphazard anymore. This will all coincide with her new business name come January 1!

If I really take this on, I’m going to need a lot of help! YIKES! Note: this “client” already tried to enlist the help of a professional and the professional didn’t want to do it. Egads!

NOTE:  I’m my own client.  Hopefully that’s allowed!

This week for my HTML class, I built a website from scratch—-I’m not sure if it’s equivalent to homemade cookies, but at least I could understand all of the ingredients when I clicked on VIEW SOURCE.  Sometimes you can click on a website that was made in a website factory and you have no clue where those “ingredients” came from or what they will do when you go to “taste” the final product.  So this week I know what I built and MAYBE I could even do it again if I had to!  🙂

While reading my monthly newsletter from my friend Peg Tileston, of “WHAT’S UP” fame,

I noticed that Fairbanks was starting a “Citizen’s Climate Lobby” group.  I quickly did a search to see if Anchorage had one.  Sure enough, we do.  In fact, I remembered that a year ago my husband and I made a conscious decision not to attend since they met on Saturdays. But it was hard to find any thing about their group on the interwebs.  I contacted George Donart, who I think I met at the Farmer’s Market this summer.  He indeed had some information, but admitted that they have no web site, but have plans to put up a facebook page.  I decided that might be a great service for them.

I still haven’t heard back from George or the folks in Fairbanks who just had their first meeting, but I decided to go forward with the web site and do this week’s assignment.

You can see what I did this week at:  http://canyonartsschool.com

P.S.  It’s so frustrating that WordPress magically text wraps for me.  It doesn’t tell me the code when I click on TEXT either.  Secrets!  Bah Humbug.