Uncle Dave's Beach Treasures!

Documentation of the Development Process

I wanted to create a funky website that would encourage customers to connect with others who enjoyed combing the beach for things like shells, sea glass, trinkets, etc. While the end goal of the website is to promote the sale of a product (those things found on the beach) the more unique site visits that could be generated may lead to other revenue streams. To begin building my website, I initially relied heavily on the CSS we worked with from the Pluralsight videos during the first couple of weeks of class. This helped me build all the requirements that the rubric required. I then took the peer review, and reworked my website to incorporate their suggestions, bringing more visual appeal and better flow throughout the entire site, while removing the framework the initial CSS provided replacing my own design in its place.

Defense of the Final Project

Since my page focused on items that were found on the beach, I wanted to incorporate a background image that highlighted nature's beauty and would possible encourage others to give beach combing a try. I used an image of Hanauma Bay, located on Oahu, Hawaii. This is one of my favorite places to snorkel and look for shells and showcased an ideal beach spot to me. Initially, the image was to bright and I struggled with how to highlight my text/multimedia. I first relied on CSS and using borders/background colors to make my text legible, that though took away from the background image. I learned about linear gradient through the W3 design site, which showed how darkening a photo can highlight a sites content. This is the strategy that I used, darkening the background photo to make the rest of the site design "pop" and remain visible. The font choice I initially used was Sans-Serif, but peer feedback felt that it was to professional in design and that a site focused on nature/the beach should have something a bit less formal. I used Google fonts and decided on using "Concert One" for my header information and "Sunflower” for my body. I felt "Concert One" was relaxed enough in that the letters were rounded and looked a bit more hand written which I think shows a site less focused on the business side of the why the site exisits and more on enjoying the beach and the hobby of beach combing. The font "Sunflower" shows up nicely against the darkened background image while staying easily legible. I did keep San-Serif as a secondary text, to ensure that as many browsers would be reached as possible. I wrapped my site navigation drop down into the header for every web page I designed. I like having my navigation information easily accessible and didn't want visitors to have to search around my site for navigation links. I did use JavaScript in my dropdown menu as I wanted to reflect how most website today operate. I did keep individual site navigation, although I updated my design to reflect peer critique. Initially I had the navigation links in the header and reflected our initial use of CSS from Pluralsight. I ended up moving the navigation links to the footer and updating the CSS to highlight the link when the cursor hovered over the link. This I feel provided an easy to use option in the event the browser being used did not support Java Script. I also included a picture of myself with a link to "Uncle Dave's Beach Treasures" Instagram account. I thought this was a fun and simple way to include some type of social media in my website's design. All the photos except for the panorama picture of Rocky Point Beach, I ran through the website tinypng, which compresses pictures 5mb or less down, reducing the amount of data that needs to be downloaded, decreasing load times. I felt this was necessary to use especially if I were to have lots of images of single pieces of sea glass or asked visitors to send pictures of glass in as well to share with others, load times and data amounts could rise quickly.

For the home page I wanted to give the visitor a clear description of what sea glass is. I used a short description along with multimedia to better convey what sea glass is. I like having my main content in the center of the page, I feel like my eyes naturally start in the center and then move to other parts of a web page. I wanted to use something eye catching, so I included a picture my wife and I took of some of the sea glass we had found and included a short video showcasing sea glass, sea marbles, etc. right next to it for visitors to enjoy.

For this page, I wanted to clearly break down my methodology for designing my website. I used a row/column approach for this page, along with using the tag "strong" to better break main points/ideas up.

For the contact page, I wanted the required contact information to be simple and clear for the user to fill out. I included a checkbox for the visitor to either check or uncheck, as most websites have some type of mailing list. I made the comment box large enough for a visitor to be able to see what was being typed and increased the size of the submit button to be clearly identified so users wouldn't have to search around for it.

For Rocky Point, I thought users would benefit from having a table for when high and low tide are to assist beach combers when it would be ideal to hit the beach. Following my same idea of displaying eye catching info right away I included a photo of the area and took a quick 10 second video of a portion of beach. I had received feedback that my picture looked squished, so I reworked the margins for Rocky Point and found I had enough room to include another video from YouTube to help even out how the multimedia was being displayed. I though visitors of the site would benefit seeing a few pieces of sea glass that could be found in this area as well, which are displayed on the bottom of the webpage.

For Newport Beach, I wanted to capture the same format, sampling what the beach looks like along with a few pictures of sea glass that can be found on this beach. I thought it was important to keep the same kind of multimedia consistent between the beaches, so visitors would already have an expectation of what the beach websites should look like and what information can be found on them.

The purchase page showcases a few different uses for sea glass. I used a photo of my wife's ring, necklace and a vase full of sea glass to highlight how sea glass could be displayed. I updated the webpage from my initial start to include more shipping information and a Sea Glass Price Table with bulk/single piece glass purchase options. I added in the comments section to include what a visitor is looking for, so an invoice could be generated and sent to a customer before any kind of transaction would have occurred.

Opportunites for Improvement and Growth

I regret not looking more into the W3 web site design content earlier! That website has a lot of great templates and "How-Tos" that I think would be useful to make a more professional looking site. I also should have created an individual CSS page for each of my different webpages. It became difficult trying to remember some of the naming ids/classes that I used, having an individual CSS page for each site would have made it much easier to manipulate items as needed. The purchase page in my opinion needs a complete re-work. If I had the time I would have taken individual pictures of each piece of sea glass for display to sell and adjusted the price based on rarity of color. I would have also used that opportunity to find local artists that make jewelry and get some business synergy going. I think having a portion of the purchase page to showcase happy customers with their product would be a great addition. If possible, I would have also included a google map API for both Rocky Point and Newport beaches to give visitors an idea of where those beaches are located. I would also investigate using an API to update the tide chart that have for both beaches so manual updates weren't required. Overall, I felt like the more I used HTML/CSS the more comfortable that I became, and this is a skill that continues to grow the more you use it. I really enjoyed the peer feedback, I think it gave me the necessary push to get out of my comfort zone and try some new techniques that I ended up being very happy with!