The Greener Side

Building this website has been quite a lengthy process, even for one as simple as this. I came up with a fun, unique idea for my “uncles” business not realizing how difficult building a website for a brand new business idea would be. The company buys lawn clippings from landscaping and lawn maintenance companies by the pound and then turns around and sells those lawn clippings by the pound to farmers for their farm animals. It has been a business idea I have had for many years so I thought it would be fun to make a website for it.

I Started by getting my fonts, colors, images and coming up with a basic outline for my pages. Once I had all of those gathered together I began working on my home page and my CSS page. I had some trouble laying out my home page to begin with so I added borders to my divs so I could actually see how big the sections were and where they were lining up in relation to each other. After the home page was well on its way I started on my buying and selling grass clippings pages. I wanted to get a few of the pages started before my milestone was due in class for peer feedback.

A big problem that was mentioned was the readability of the text on the site and not being able to see the images all that well against the background. What I ended up doing was making the text either black or white, depending on the background and changing the alpha on the logo image to make it a little darker against the background images. It turned out great and the entire site is easily readable. The color scheme was created to contrast against each other really well. With it being a site about grass I decided to have green be a main color (which it very much is). The orange I thought looked great with the green and black ended up being a great color to break up all of the green as well.

After the feedback I started building the buy and sell forms for my website. These took up a lot of my time because I had to figure out how to get the form to do mathematical calculations and output a final price for the amount of grass being bought or sold. A video was posted by my instructor on a tip calculator tutorial and I was able to successfully convert that information into a cost calculator for the website. It ended up involving adding Javascript to the html code which I know a little about, but using HTML and Javascript together was very interesting but exciting when I got it to work correctly. You can completely fill out the forms and they work as intended but they do not send the information anywhere specific.

I wanted to add some other elements to my page so to fulfill my table requirement I decided to put company ads on my page within a table. The table only has two rows, a head row that has the name of each company and a regular row that contains the logo of each company. I put that table on each page in the same location for consistency. I also built my footer and this time. I used big, bold white letters to really make the footer stand out on the different background on the website. The green color varies on each page so the white lettering is able to stand out on each one.

I then created my contact page with a contact form that can be filled out with questions or comments. The text field is adjustable but I set a width restriction so it cannot be wider that the form itself. Again all of the fields can be filled out and submitted but the information doesn’t actually go anywhere. Lastly I built this about page here. It has been a lot of fun working on this site and it is definitely not going to be my last.

My home page was designed for a quick overview of what the company offers and links to the pages to buy and sell grass clippings. Everything is easy to read and easy to navigate.

The contact page was built with and easy to read form to ask questions to the company. It has a few fields to fill out for contact information and a place for the question. Everything is centered on the page and right in front of you when the page loads.

The buy and sell pages are almost identical aside from the background and the amount in the calculations. They are simple to use and error free. They are also both centered and directly in from of the user when the page loads.

The about page is easy to read and should not produce any problems for the user. The information is front and center immediately.

I chose a couple of fun but easy to read fonts for the site. The “Luckiest Guy” font is what I used for the header and I thought it just looked great against the green background. The rest of the site uses a font called “Righteous”. I mainly chose it for aesthetic reasons. It is a really clean looking font that is easy to read. Most of the text is black aside from the advertisement table and the footer text. The black looks good against the orange and green backgrounds. All of the background images are fixed and everything else scrolls. I really like the way it gives the site a modern feel. It also gives the user the ability to move what they are looking at to a different part of the background image to make it easier to read if they are having problems. Each page was setup with the content front and center. I aimed to draw the users attention to the content in the center of the page.

There are a number of things that I would have liked to add to my site, the first being more pages. In my initial planning I wanted to have login pages for registered customers that would route them to a purchase or sell page. I found out that this would be quite a bit of work even for a mockup site so I omitted the login pages and just created the buy/sell pages. Another thing I would do is add links to my advertisement images that went to their respective pages. I would imagine in real world scenarios an ad would pay out more depending on the clicks it got from an ad on a website. I’m not too sure how it all works so I would have to do more research. I also wanted to add a slideshow to at least my homepage but I never got around to getting it started. I think it would have made the home page a little less plain.