Category Archives: Art From Nature Site Development

Conquor Every Bug…

Yesterday was a pretty exciting day… I don’t know how I managed to do it, but I turned Terri’s site into a white screen of death.

Figure 1. The White Screen of Death.

Figure 1. The White Screen of Death.

I backed up the contents of the server, re-installed WordPress, changed permissions, changed some files, and finally after re-uploading the contents that I have previously backed up it magically started working again.

Later I tried to upload firmware to my Brainwave board (it’s the little computer board on my Grawmet II 3D printer) and I could not get past one very cryptic error.

This is quite the life.

Hand Turned Bowls Website

As I mentioned in my previous post, I am in the middle of a web site development project for a friend. My friends wants an online store site where she can sell her hand turned wooden bowls (think woodworking).

This has been a challenge for me since it is my first solo development project for someone other than myself (which is also pretty exciting!) In this project I have gone from “Ok, so you want a website?” to particular usability issues and getting the CSS right on the buttons. I’ve been using WordPress CMS, hosted on Bluehost. The WordPress theme I am using is called Mystile, which I have modified with a child-theme. I’ve also added several key plugins, including an SEO plugin (more on that in the previous post), and an online commerce theme called WooCommerce which has actually been quite useful.

Figure 1. Screenshot of the Art from Nature homepage on 11/12/13.

Figure 1. Screenshot of the Art from Nature homepage on 11/12/13.

As can be seen in figure 1, there are still some aesthetic and usability issues that need to be addressed, not to mention the interactive issues that can’t be seen in a screenshot. The ones that bother me most right now are 1) the placement of the navigation/banner image, 2) the “Product Category” navigation interaction, and 3) this weird navigation box thing that pops up responsively when the browser window is very small.

The navigation, banner image and “Product Category” navigation are actually very related to each other. Although they are very different in how they are generated in PHP, they both deal with the issue of navigating the shopping experience. I’ve noticed as I try to browse categories, it’s pretty difficult to get from one category to the next because the top nav is just so high (you have to scroll down to see the products, and the top nav disappears out the top of the browser window) and the side “Product Category” navigation goes away when you navigate off the main page. I’ve been trying to make the “Product Category” nav stay there, but since it is actually a home page widget, that has been pretty difficult….

As for the weird navigation box thing, it’s just annoying. I’m going to work on it after I fix the first two problems. I also hope to do some a casual usability study or two in the near future as well.

And finally, below are the list of specs I developed for myself. They aren’t very official, but that is because nobody is using them but me. 🙂

__________MY SPECS:___________

CSS

  • get around the problem of brown.css overwriting everything

Header

  • Long photo in header
  • Nav and long photo must be usable
  • Make it user friendly to change this photo
  • Deal with strange nav thing that happens when width is small

Home Page

  • Welcome to site text + pictures
  • New items can be displayed
  • Item navigation

Additional Pages

  • can put photos/text
  • item navigation should stay when a category is clicked on

Items

  • Must sort into categories
  • Categories displayed on home page as nav
  • Categories must open as their own page
  • Must be able to mark price
  • Must be able to mark as sold/unsold
  • Must sort according to sold/unsold (must still display if sold, but be marked as such)
  • Must be manageable from back end
  • Must have individual item checked by dafault

SEO

  • Must be able to tag items and have that reflected in html
  • Post links must be <nofollow>

Commerce

  • Money must go to Terri
  • Credit Card and Bank Transfer work <- next release
  • Buttons must be legible

Favicon

    • Custom favicon

  • Learning about SEO

    Lately I have been working on a website for a friend, and as part of this I have been delving into Search Engine Optimization (or SEO). A lot of this has been related to WordPress, since I am using the WordPress CMS to make my friend’s web site.

    In my understanding, SEO seems to just boil down to web development good practices, such as including descriptions in your <meta> tags, and arranging your site files in a sensible way. Beyond that there are a few other things I am doing:

    • I’musing a handy SEO plugin to my friends website from Yoast. This allows me to see how most search engines pull snippets from the pages of my friend’s site, which I am able to edit. I am also able to add key word tags to pages.
    • I’m checking to make sure all the links that users possibly post in comments have the “nofollow” attribute. (Right now I have set the WP comment fields not to show up by applying a display: none; in css, but just to be safe…)

    I’ve also been learning about other services such as Google’s webmaster tool, where you can remove urls from Google. Apparently you can also do this by editing your .htaccess file.

    Hopefully the site will be done by Christmas. Work on it is going pretty slowly because of school, and a confidential book illustration project that I am also working on. I can’t wait for Christmas break so I can hit more of the projects on my list… My 3D printer still needs to be calibrated, my portfolio needs to have the CSS finished and the content polished, my church desperately needs someone to get the content strategy of our website in line, I have a painting to finish, an airplane flying manual to read, and another friend wants me to paint a mural of birds in her attic. Such is the life.