Part three of this four part commentary on Taste the World Online addresses issues and challenges. If you have been following my posts over the past few months you are familiar with the discussion of some sticking points. Below are some of the larger challenges I encountered.
Graphics:
I photographed or drew all the images on the website in order to avoid any copyright infringement issues, with a few notable exceptions. I sent my father to photograph the store location images since the physical location is in Upstate New York, which is inaccessible for me at the moment. I also sent an email to the owners of Blair's Hot Sauces (a small company) and they were nice enough to send me a number of product shots that I could freely use to sell their products. All other icons, buttons, logo, texture elements, and imagery were completed using a combination of Photoshop, Illustrator, photography, and hand drawing. For the logo and quote on the index page I incorporated the font Zapfino, for which I purchased a commercial license. The other font, Caviar Dreams, which I used for the navigational elements, was available under a Creative Commons license that allowed for commercial use.
All the images were sized in Photoshop and then optimized using the "save for web and devices" option. Whenever possible the images were saved as JPEGs, however it was necessary to save some images as PNG-24 files in order to preserve transparency. While this increased the file sizes, in some cases it was necessary in order create an effective design (such as in the creation of the rollover buttons).
I created all the page elements within Photoshop, and then created a CSS file in Dreamweaver that incorporated appropriately placed divs to contain the separate elements. As for the look of the overall page, I incorporated some modern trends to make the page appear sleek. This included the use of rounded corners, which have come to be associated with Web 2.0 design. Far from wanting to invoke that computer feel, however, I balanced transparency, color scheme, and sharp edges with the rounded corners. I made the header fall short of the page edge in order have the background begin to blend with the active area of the page at the top, and added a round corner just at one edge. I had the hand drawn graphic spill over from the header to break up the potential boxiness of the page. I was looking for something sleek and sophisticated that still seemed rich, glamorous, and natural. Similarly, the drop shadows and rounded edges on the transparent boxes were intended to add depth and a stylish edge without screaming out "contemporary."
Challenges:
Preparing this site from scratch was both interesting and at times frustrating. There was a point when I somehow tweaked the code in a way that caused the website to develop serious issues; I was ultimately unable to recover and after many hours combing the code and reviewing discussion forums in an attempt to discover what I might have done, I simply rebuilt the template. This has made me acutely aware of the fact that I can do simple hand coding and rectify simplistic errors that crop up, but beyond that my skills need serious development. A class will be helpful in refining the basics, as will additional practice.
There were also some elements that proved to be beyond the scope of my knowledge. For instance, I understand that using graphical text poses accessibility and search engine optimization issues. I have read about several alternatives to utilize fancy fonts without creating image files, but decided against incorporating them. First, using SIFR in order to replace fonts seems to be quickly becoming obsolete. Using the CSS rule @fontface is preferable. This method, however, requires that the font carry a web license, which is not necessarily included in a commercial license. My Zapfino font could have been handled in this manner, in particular on the index page where a graphic font occupies a large area in the main content box. This graphic, while it has attached alt text, both bucks accessibility and adds unnecessary size to the page. However, as I read more about the @fontface rule I found a lot of information about it not working in Internet Explorer; the proposed workaround was simply beyond my current skill. I prefer Firefox as a browser, however many people do use IE, so I felt that ignoring such a display issue was problematic. When I have better honed my skills I will definitely rethink the text-graphic issue, but for now it had to suffice.
SEO and promotion:
Since ideally this website will help to attract customers to Anne's business, I tried to do some things to help with location. For starters, I made sure to include a good, concise Meta description in the code on every page. I also included the Meta keywords, although I remember that the MacDonald text and forums I have seen note that Google mostly ignores keywords because of past abuses. Even so, I added them just in case it will help (and I noticed while combing page sources that most web designers are still including them). I also made sure to include a link to the website from the blog page I created for Anne, as well as from Facebook. I added a link to the page from my own blog as well and put a web link when I created a location for the business on Google Places. I realize that these links fall far short of building a web presence, but it is a start. I attempted to make as much of the page as possible decipherable for web crawlers as well, and despite the exceptions I noted above, made sure heading text was handled in the page as a web-safe font instead of a graphic.
One other challenge I struggled with was the decision about whether to use a pop-up window for the Recipes button. The main issue was that I modified a Blogger blog template to look like the rest of the Taste the World web pages with the intention of using FTP to publish the blog to a page on the main website. Unfortunately I was unaware that Blogger stopped supporting this feature earlier this year. I have been unable, to date, to successfully point the logo on the blog page back to main website, as it defaults to linking to the Blogger page and as far as I can tell they remove the target attribute from the code view within the blogger application. I will eventually rebuild the template from scratch, as I know you can use unique CSS to control the behavior of your own pages, but have not had the time to invest in this project yet. As such, I felt many people would be confused by the similar look of the blog page, yet the lack of functionality of the logo linking back to the index. There is always the back button, but I believe that in not realizing they had left the main website, users might be frustrated by the inability to navigate.
I read a lot of opinions about the frustration a pop-up window causes viewers, but ultimately decided that it was necessary. The users can open the Recipes blog while the main ecommerce site remains open. This seems, for now, to be the best compromise. I also read some heated debates about the controversies between using target= blank or JavaScript to point to a new window. Target= blank is non-compliant with WC3 standards, however it also easy to drop into a site and for now proved to be the best solution… real world design.
Next up, future directions for the website.
No comments:
Post a Comment