5 Star Develops New Gloggner Metal Fabricators Inc. Website

5 Star Net was contacted by Gloggner Metal Fabricators, Inc. of St Joseph, Mo, in May of 2013, to create a new site and have it ready for the grand opening of the new Gloggner Metal Fabricator’s recent expansion project and ribbon cutting ceremony to be held on June 12th, 2013.  The existing site at GloggnerMetal.com was nearing 10 years old and needed some upgrades and modernization.  5 Star Net accepted the position and worked with the owner, Phil Gloggner, to get the site developed, on-time, and above customer expectations.

gloggner_logo.jpeg

Not only did 5 Star Net complete the project on time, 5 Star took the opportunity to expand on Gloggner’s web footprint, by adding more content.  A new facility section was authored and photo galleries of finished work were added to the new site - see www.gloggnermetal.com/facility/ and www.gloggnermetal.com/projects/.  Also, Gloggner’s web team can set up personalized, secured pages and populate them with photos of the work-in-process for current clients with simple drag-and-drop functions. 

Screen Shot 2013-08-05 at 9.55.25 AM.png

GloggnerMetal.com is a site designed to work on all browsers on any device.  The technology used is called responsive design and works by having lots of different sized images for the same content.  As the screen size changes, so do the images, to maximize space for the best browsing experience.

 

Gloggner Metal Mobile Experience

Gloggner Metal Mobile Experience

Gloggner Metal Tablet Experience

Gloggner Metal Tablet Experience

Gloggner Metal Desktop Experience

Gloggner Metal Desktop Experience

Gloggner Metal Fabricators Inc are proud members of the Sheet Metal and Air Conditioning Contractors' National Association and St Joseph Missouri Chamber of Commerce.  Check out Gloggner Metal Fabricators Inc for your Plant Maintenance, Equipment Structure, Industrial Ventilation, Institutional HVAC, Scale Hoppers, Cyclones, Bulk Bag Un-Loaders, Architectural Sheet Metal, Pharmaceutical Industry, and Food Grade Applications needs.

 

Add An Awesome, Dynamic Google Chart To Any Wordpress Site

Goals Of This Exercise -

  • Update a WordPress site with awesome, dynamic Google Chart.
  • Dynamically host the data so that anyone who has access to Google Spreadsheets can make changes.

1.  First step.

  • Login to your wordpress website/wp-admin and enter your login and password
  • Go to the Appearance tab on the left hand side, then select Editor.

Wordpress wp-admin navigation element.

Wordpress wp-admin navigation element.

2. On the right hand side of the page, select the header template.

Wordpress templates navigation on the Appearance > Editor page in wp-admin.

Wordpress templates navigation on the Appearance > Editor page in wp-admin.

3.  Scroll down to where the </head> statement is and place the following code right before </head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

4.  Click the "Update File" button.

5.  Now, select "Pages" from the left-side navigation.

Wordpress wp-admin navigation element

Wordpress wp-admin navigation element

6.  Click "Add New" under Pages.

7.  Name the page something meaningful as this is a test.

8.  Above the page edit toolbar is a "Visual" and "HTML"" tab - click the "HTML" tab.

9.  Add the following code to the text box.

<div id="chart_div" style="width: 900px; height: 400px; "></div><script type="text/javascript">
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback(drawChart);
     var sampleTable = [];
     var reportTitle = '';
     jQuery.getJSON( "https://spreadsheets.google.com/feeds/list/0AjskNiVWKcl8dHBvc3Z6ZDd5cmtjbXV2eDVDX0xTRnc/od6/public/values?alt=json",
 function (data) {
    var item = "";
    reportTitle = data.feed.title.$t;
    jQuery.each(data.feed.entry, function(i,entry) {sampleTable.push([entry.gsx$task.$t, parseInt(entry.gsx$hoursperday.$t)]);});             
  });
  function drawChart() {      
      var data = google.visualization.arrayToDataTable(sampleTable);
      var options = {
      title: reportTitle   };
     var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
   chart.draw(data, options);
   }
   </script>

10.  Click "Save Draft."

11.  Open a new tab in your browser and navigate to your Google Drive/Docs account.

12.  Once there, create a new spreadsheet.

Google Drive / Docs create new document page element.

Google Drive / Docs create new document page element.

13.  In cell A1, enter Task

14.  In cell B1, enter Hours Per Day

15.  In column A, goto row 2 and begin entering daily activities

16.  In column B, goto row 2 and begin entering corresponding number of hours spent per activity.

17.  Your Google Spreadsheet could look like the following.

Google Spreadsheet example showing two columns  with titles and data.

Google Spreadsheet example showing two columns  with titles and data.

18.  Now, click File > Publish To The Web, and you should see the following.
Google Spreadsheets publish options page element.

Google Spreadsheets publish options page element.

19.  Select the name of the sheet you need to publish.

20.  Make sure the automatically republish when changes are made (every 5 minutes).

21.  Copy and paste the entire link from the last text box to notepad - see below.

Google Spreadsheets URL example.

Google Spreadsheets URL example.

22.  Grab the value after key= up until &single, so the resulting cut and paste should look like the following

0AjskNiVWKcl8dHBvc3Z6ZDd5cmtjbXV2eDVDX0xTRnc

23.  Go back to the tab opened previously in wp-admin, and find the spreadsheet key in the code and replace it with the one in your clipboard.  It’s underlined in red in the image below.

Wordpress HTML view on the New Page screen in wp-admin.

Wordpress HTML view on the New Page screen in wp-admin.

24.  Click the "Save Draft" button, then click the "Preview" button.

Sample Google Pie Chart updated with Google Spreadsheet data.

Sample Google Pie Chart updated with Google Spreadsheet data.

25.  Go back into the Google Spreadsheet and rename the tab from Sheet1 to Daily Activities.

26.  Select File > Republish Now

27.  Go back into your Wordpress page from step 24 and refresh the page.

Sample Google Pie Chart with updated Title

Sample Google Pie Chart with updated Title

That's it.  Enjoy.

Killer Pinterest-Style Product Image Pages for eCommerce Sites.


People are visual searchers.  Through trial and error that has been discovered.  As a result,  Pinterest rose.

According to data collected from multiple websites, product images are still one of the most important aspects in selling products online.  In fact, having the most beautiful images that clearly represent the product are what's really necessary.  If you sell apparel and offer multiple colors, then your product images should reflect your color options, etc, etc.  

Knowing that people are visual searchers and images are still a big part of conversion,  leads me a new direction in eCommerce product page design: Pinterest-style product pages.

On JustBats, there's a defined zone for photos, but what happens when there are more photos for that responsive space?  Here are two views of the responsive page.  Notice the screenshot on the right?  It includes an extra black box with yellow arrow pointing down.

Screen Shot 2013-01-07 at 9.13.44 AM.png

Three-column width image viewer

Screen Shot 2013-01-07 at 9.19.00 AM.png

Two-column width image view with overflow present

To have the complete picture in your head, let me explain how JustBats collect photos.  JustBats has photographers on staff who take photos of all the products when they come in, then there are contests that JustBats run year-round which allows procurement of  user-generated photos from customers, and finally, JustBats obtains photos from our vendors.  All of these photos are measure independently and in aggregate.  Seeing the multiple ways JustBats collects photos should shed some light on how this problem could ever become a reality in the first place.

I don't remember who was first, but once one did it, they all started, then came Pinterest.  What am I talking about?  The endless-scrolling search engine image search user-interface.  Search for Mickey Mouse in images on Google or Bing and you'll get an insanely visually experience where, you, as the user, can choose from a multitude of Mickey Mouse result images in all shapes, sizes, and colors.  Did Pinterest come before the new image search capability in Bing and Google?  I'm not sure who copied who here.  Anyway, the point is that Pinterest is here now and one of the most fastest growing websites on the Internet right now.  It's visual nature makes search intuitive, and with infinite scrolling, Pinterest makes it easy to slam content at it's users.  I will not go into the fact that most of the content on Pinterest in copyright-infringed, but that just proves the interface works so much so that Pinterest is willing to take a reactive stance to copyright infringement.

So when will this trend hit eCommerce?  Could it take a long time?  

I think so.  I say that because most eCommerce shops do not have multiple images for the product they sell.  There are a few exceptions.  One that comes to mind is NewEgg.  They have included a popup page "image viewer" for years.  The only problem is that the thumbnails are too small.  That's the main problem the Pinterest-interface solved.  Here’s the NewEgg product page for a lenovo laptop.

Screen Shot 2013-01-07 at 9.07.22 AM.png

Now, by clicking on the three ellipses, a shadow-box is visible which includes the same visual metaphor that was on the product page.  

Screen Shot 2013-01-07 at 9.07.46 AM.png

The same image is presented, and the other thumbnails are small just like when I was on the product page.  Only difference is that all the thumbnails are present and the interface allows for some overflow.  But what about showing all the images of equal or proportal value, then when I hover or click, increase the size.

People, the modern day eCommerce image viewers are dead and worthless.  How many times have you hovered over an image on an eCommerce site and it zoomed, but the before and after zoom level ended up being the same.  I feel jipped when this happens.  How about you?

There is seo value for separating your content, as well.  The way NewEgg does it puts all their eggs in one product page.  See the classic eCommerce url as well - http://www.newegg.com/Product/Product.aspx?Item=N82E16834310637&cm_sp=DailyDeal-_-34-310-637-_-Homepage.  Homepage / Product / Id.  Consider this url Homepage / images / Product Name which includes all the images plus a “ready to buy” section.

Could this be done for more than just images?  Sure!  A number of years ago JustBats created separate video, Q & A, and reviews pages.  The results have been great.  The key is to minimize duplicate content.

On the JustBats product page, the number of reviews and questions and answers are limited.  For example, customers seeking the entire list of reviews for an individual product are provided a link.  See screen shot below.

Screen Shot 2013-01-07 at 10.33.05 AM.png

See the link above labeled, see all 74 reviews about the 2013 product.
The page url changes from Homepage / Product / Product Name to Homepage / Reviews / Product Name.  Therefore, the SEO benefit come when a customer is searching in Google or Bing for the product name or reviews of the product name, JustBats has two links present.  SEO gold.

My idea of a image product page is below.

Screen Shot 2013-01-07 at 9.47.41 AM.png

So now that Pinterest has spoiled everyone, how long will it take for you to update your eCommerce website with this new user-interface?