The trick is to smoke the meat and not make the meat smoke
GS3-2016_Blog_Header-HDR-960x500

Ch-Ch-Changes I-Website

First Image
This site has been essentially in suspended animation with no updates made to it for nearly 5 months. There were two reasons for this and they will both result in big changes to the site in appearance and direction. The first change, and the main reason it took 5 months to do and update, was my refreshing the appearance of the site. The project took on a life of it’s own and I could not publish new pages to the site without breaking the rest of the site. The new site has a more fresh and modern look and I think will be more useable for more folks. The main reason for the change was many under the hood improvements which and end user won’t see, but their experience will improve. I haven’t been inactive on the cooking front over this time, I have perhaps 15 or 16 cooks I will now be able to post. The other big change I alluded to will be described in the separate blog entry CH-CH-CHANGES II.

BACKGROUND:
The website creation software I use for this site is RapidWeaver for the Mac. It is a scalable piece of software which can be very basic and easy or can be scaled to do many complex functions. The scalability is achieved because the software is extensible and there are around 900 Ad-Ons for the basic program which add all kinds of additional features and capabilities. One of the Ad-Ons is called “Stacks” and it enable a modular method of building features into the site. You want 3 responsive columns on the page, you drag in a 3 column responsive stack. You want a lightbox to do a slide show, you add a Stack for that. If you need an online store, there is a Stack for that too. This is a powerful and somewhat unique feature of this piece of software. The software can be extremely simple to use to create a basic site and can scale up to create a complex site. RapidWeaver, like many of website applications, uses something called “Themes”. These Themes to allow you to change the appearance of your site globally simply by applying a different Theme. There are hundreds of Themes available for RapidWeaver and the same information can be displayed totally differently by switching the Theme used for your pages.

Back in May, there was a full version update to RapidWeaver form Version 6 to Version 7. This update partially broke some of my Ad Ons. I lost some of the functionality of these Ad-Ons and I was worried because Version 8 might totally break the Ad-On. The Ad-On problem was due to several Ad-On’s I was using where the developer was no longer updating the Stack. Also the Theme I was using was having some compatibility issues with RapidWeaver 7. Nothing major, mostly cosmetic, but the handwriting was on the wall. I decided to look for a new Theme. I found one I really liked the look of, plus it was far more Responsive than the theme I was currently using. Responsive design is where a web page can adapt its appearance to suit the screen size being used. A Responsive site will look far different on a cell phone, tablet or computer. My usage statistics show that more and more people are viewing the site from tablets and cell phones. The new Theme was far more Responsive than my previous Theme and over the 3 years since the last upgrade, the Ad-Ons are much more flexible in the Responsive design department. The last update to the site 3 years ago which made it more Responsive always felt like a compromise. I had to give up some features and dumb down the site as viewed on a computer, to let it be viewed on cell phone. Plus the version of the site for the cell phone was less than ideal and I didn’t have the degree of control over the final appearance I would have liked. Sort of a Lose-Lose proposition. The other selling point was this new Theme was designed from the ground up to have a fast page load time. Lastly it solved a problem the previous site had with nested multi-level menus. This was all good, so I bought the new Theme and began switching the pages to the new theme.

This is when I discover a problem I never anticipated. The new Theme did not use a sidebar. The description of the features of the Theme, did mention the sidebar several times. As it turned out the Theme does not use the sidebar in the traditional way. Instead it is used as a place holder for banner images used at the top of the page. This seemed like a big and possibly insurmountable problem. I had close to 1,000 pages with information stored and displayed in the sidebar. In talking to some people I was told that sidebars were not being used on many sites these days. So instead of simply setting each page to use the new theme and being good to go, I now had a bit of a problem on my hands, What to do with the sidebar content. I liked the new Theme and its other features enough I decided to put my thinking cap on and figure out a solution to having no sidebar. The problem and it’s solution ended up resulting in a better, more functional page layout. But it meant some major work on any pages having a sidebar, which numbered close to 1,000. Since I was now biting the bullet and doing a major renovation of the site, I also took the opportunity to use some newer Stacks to improve the look and speed of the page. So what I thought was original going to take a 5 to 10 days, ended up taking nearly 5 months to finish. I will go over the specifics of some of the various changes below.

MAJOR CHANGES:

Header:
The new theme allows the use of a larger banner/header at the top of the page. This is purely eyewash but it does make the page look more modern an helps give you a very good idea of what a particular page is all about.

Accordion Layout:
This is perhaps the biggest change and improvement to the site. I had to find a home for the sidebar content, since I no longer had the sidebar available in the new Theme. I didn't want to put this content at the top of the main page above the photo gallery. Many folks are there to look at the pictures and pushing them off the screen didn't seem like a good idea. The solution was to put some of the basic sidebar content above the photo gallery with the remainder below. The additional sidebar content went into a Stack that allowed me to conceal the content under a header that expands when the user clicks on it and collapses again when the user clicks elsewhere. This type of layout is called an accordion layout. The accordion layout solved two problems. If there was a lot of text content in the sidebar, the narrow width of the sidebars meant the content sometimes seemed to stretch to infinity and beyond. Putting this content on the much wider main body of the page meant it took up far less vertical height than before. Further, putting this content in a collapsable accordion header allowed the body text to be as long as you wanted, but as soon as you finished reading it, the item collapses back to just the header

People with small screens, like a cell phone, will end up doing far less scrolling. I placed the content from the sidebar that went into the accordion layout Stack below the thumbnails for the image gallery. This makes for a page that is much more compact vertically and requires less scrolling. The user goes to a Photo Album page and there is the title of the cook and the date it was added. There is also information about using the photo album page. Lastly there is a link to access more information if desired. The photo album and it’s thumbnails come next and finally the remaining sidebar information is in an accordion layout below the photo album. Clicking on the More Info link jumps you down past the photo album straight to the accordion layout containing the added information. A user who just wants to view the images doesn’t have to scroll past all of this additional info. Those who are interested in the additional info have a quick link to jump them directly to it. Hopefully this will keep both types a users happy.

Main Category Page Improvements:
The pages for the main categories such as “Baking”, “Beef”, “Burgers” etc. use a new thumbnail for each gallery: “Beef 1”, “Beef 2”, “Beef 3” etc. These thumbnails expand when clicked to display popup with a large picture, some text explaining the gallery content and links to the various Photo galleries. Clicking somewhere else closes this popup . These pages have more information in the same or less space than before and load faster too.

Menu Structure Simplified:
The new Theme had menus more compatible with older Android phones and tablets. It seems many of these devices could not drill down in sub-levels of menus. This limited what could be done with menus and sub-menus. The new Theme has custom hand coded menus that are “sticky” meaning you don’t have to hold your finger or the mouse on the menu to keep it open. This makes longer menus easier to use. Lastly when the screen size goes down, the menus that no longer fit across the top of the page automatically go into a side menu labelled “More” for overflow items. The new Theme’s menu changes allowed me to simplify the menu structure, and makes the menus easier to use.

Speed-New Theme:
The new Theme I selected was designed from the ground up for faster load times. The pages using this new Theme definitely load quicker than they did using the old theme. This will be good for people with slow connections and will make the pages very quick to load on broadband.

Speed-RapidWeaver 7:
RapidWeaver 7 also has a setting to consolidate and compress (“minify”) CSS and JavaScript. This means less support files to upload and faster page load times. The program saves out multiple HTML files at once and can be set to upload using up to 6 simultaneous threads at a time. To say it screams is an understatement. It takes about 15 minutes to publish 14,000 HTML files and using 6 upload threads it takes about 45 minutes more to upload the files to the FTP site. So one hour totally publication time in RW 7 vs. 4 hours or so before this. The individual pages within the software also open up very quickly. While this doesn't directly benefit the users of the site, it will indirectly benefit them since I am able to get new content on the site and published faster.

Responsiveness:
The new Theme and some of the new Stacks I used are far more flexible and Responsive than the old Theme with the old Stacks. Responsive design was fairly new when I last renovated the site. The available Stacks at that time were not as flexible as the current crop of responsive Stacks. This time around I had far more control over the look of the page as it transitions from large to small screens. In the past, the appearance of the site on small screens was a bit haphazard looking. Yes the text or pictures were resized but the page layout was sometimes less than optimal. It felt like a Lose-Lose situation. I was making sacrifices on the look and feel of full size pages to get a small screen size page that wasn't what I wanted either. The new more responsive Theme and Stacks solve the problems and limitations I had before. The site look great on a computer screen and will definitely be more user friendly for folks viewing on small screen cell phones. As the owner iPhone 5s with one of the smaller Smartphone screens sizes around, this will be good for me too.

SUMMARY:
When I first set out to do this upgrade to the site, I anticipated 5-10 days to complete the transition. I certainly did not envision that I would have to go 5 months before I post any kind of new information to the site. There were times during this upgrade where the sheer amount of work involved seemed overwhelming and I wanted to throw in the towel. Along the way I received several nice emails from users of the site using the contact form. They inquired about the health of the site and my health. My thanks for those of you who took the time to write. Your emails helped me keep going when the amount of work left had me ready to quit. I hope the end results were worth the wait and that the site is faster and easier to use for everyone who visits.

CH-CH-CHANGES II:
Along the way, there was a huge change in my life that will affect the direction of this site and what I can and cannot cook. This will be described in a separate Blog Entry called CH-CH-Changes II.

  BACK TO BBQ BLOG 2016
  ARCHIVE OF BLOGS: 2016
  INDEX OF BLOGS: ALL YEARS
blog comments powered by Disqus
December 2016
October 2016
May 2016
April 2016
March 2016
February 2016
January 2016