Ahhh yes, to feel the crushing pressure of a pressing deadline. I lost how track of how many things didn’t work when I completely underestimated how much time this stuff actually takes. …the joys of css….when it works, you love the world…when it doesn’t…there’s another story.
The biggest struggle I had was integrating horizontal
tags in my nav container. I lost hours of trying to figure that one out and after 4 hours lost yesterday, I made an executive decision and abandoned tactics and resorted to a table. I was oddly enough able to integrate a vertical
. Not sure why one failed and the other one worked well.
Problem #2: Faux columns. Works great…in specific situations. I had to majorly tweak my vertical column to get the same effect. Is it right? Probably not, but it’s working so far.
Problem #3: Bg color worked only sporadically. I had to circumvent and use an image gif instead.
I think overall it was a really good exercise. I learned that there is a certain art when it comes to using CSS. I really need to be at this for more time to really get the beauty of CSS to really sink in.
My project is a national coffee chain I named El Gato Coffee. I chose four different competitors that are national chains for my competitive analysis: Starbuck’s, Peet’s, Coffee Bean and Tea Leaf and Intelligentsia.
Being that Starbuck’s is the world-wide, its scope of product offerings and focus is different than its competitors. The interesting thing I found is that the majority of real estate of the home page is devoted to a promotional video featuring a featured coffee blend. I’m not sure how useful this is. The global nav drop down is rather extensive. One drop down link had 6 sub categories with 22 tertiary pages. I think the intent was to keep their global nav as minimal as possible (6 links).
Most secondary pages had a prominent video link on the landing page that occupied most of the space above the fold. There is no left or right or left hand navigation. You have to scroll down the page to reach tertiary page links. The corporate brand prominently displays their committment to sustainability.
Peet’s Coffee is a simple site with 6 links for the global nav. The prominent features on the home page include the logo placed in the center of the page. Below the global nav is a static image promoting a feature of the corporate branding, “The Fresh Truth”. Clearly Peet’s in gearing its message of freshness and quality. Considering Peet’s doesn’t have the market share that Starbuck’s does, it seems to promote itself as a more homespun corporation. There’s a link on the global nav called “Who is Peet” which I am going to handily “borrow” as a concept for El Gato. There is also another global link to “The Perfect Cup” which goes into detail how to make a perfect cup of coffee. The nav on secondary pages doesn’t have a left or right side nav bar. All content is in the center for the user to scroll down. There is not a link to Twitter or Facebook.
Coffee Bean and Tea Leaf is less extensive than Starbuck’s but has a stacked global nav. The navigation continues on secondary pages on the left, but when you drill down into tertiary pages and beyond. The left hand nav disappears and the information and links are in the center column where the user would need to scroll down to see more content. Clearly, it seems it’s a theme with national coffee sites.
It seems a common element for the sites is to have a feature to charge your card for further purchases. Another feature of course, is the “follow us on Twitter and Facebook” prominently displayed.
Intelligentsia also has a center logo like Peet’s. I haven’t really seen center logos that often yet it seems to work. Whereas Starbuck’s message focuses on sustainability and Peet’s on Freshness and Quality, Intelligentsia seems to focus on innovation and being cutting edge. The home page has a large rotating image section just below the global nav. The images feature best design for a product line of theirs and the other image is a snapshot from a barrista competition where Intelligentsia had won a prize. Again, when one goes to the secondary pages, there is no right or left hand nav. One notable thing is that the logo switches from the center to the left when you drill down into secondary and beyond pages. There is a left hand nav when one drills down beyond secondary pages. The nav begins below a center spanning image below the global nav.
Overall, based on my analysis, I will borrow a lot of the concepts from these sites. My nav will simple with dropdowns and I will see whether I can do a design with out a left or right hand nav on my secondary pages.
Ok, I should have picked something easier since I haven’t really touched any CSS in years.
I’m glad I stuck with it. It definitely needs tweaking, but I’m sure I can nail it.