Week 14 – Report completed now poster!

What a week that was! I have never written so much in my entire life. It’s such a relief to have completed the report which now feels like a weight has been lifted off my shoulders.

The whole week up until 11:45 pm on Thursday night was spent working on the report apart from attending my supervisor meeting on Tuesday afternoon. I knew I should have begun writing the report earlier than I did but the development of the website dragged on longer than expected and as always parts of the assignment like this get left to the last minute.

In reflection now I feel like my approach to writing the report worked well which involved setting out all of the headings and specific sub headings followed by filling each of them in. Initially I put off writing the report for as long as I possibly could as I’m definitely not a fan of writing let alone a massive report. It was also so much more enjoyable developing the site. I feel as though I managed to get everything I needed to within the report which looked deceptively large (77 pages!) as it contained my user documentation etc within the appendix. The most frustrating part was the proofreading as there’s nothing worse than going through stuff you’ve already written and discovering tonnes of mistakes that need to be changed again, and again and again… I was fortunate enough to have my sister proofread the report as well which I am VERY thankful for as in the end my brain was fried. Hopefully I never have to write something like that again, or in the near future at least!!! However, writing the report did help me reflect on everything that’s been achieved throughout the project which made me realise how much I have actually learnt over the past 14 weeks.

So to this point I have considered my project a success as the site has been completely developed on my part and we are just currently waiting on Anne (client) to sort to the finial few details before it can be set live taking over the existing site. I’ve gained everything I could have wanted out of the experience as it was the perfect look into the web design/development industry, a range of new skills have been picked up throughout the journey especially working with a client who is very pleased with the outcome as it has meet all of her requirements, goals and will hopefully have a positive impact on her business in the future. This project has motivated me to follow on down the web path and hopefully pursue a career within it.

The last piece to this puzzle is creating my poster for the presentation night. I have been looking forward to creating this over the last few weeks as I prefer that type of work rather than writing. I have a few ideas in mind which I’m currently working on so hopefully I can end up with a decent looking poster to end this amazing experience.

To do

  • Supervisor meeting with David on Tuesday 12th Nov.
  • Final Client meeting on Tuesday to implement Anne’s different products international shipping costs and final touch ups before hopefully setting it live.
  • Work on poster and get it printed for Thursday nights poster session.
  • DONE!!!!!!!!!!!!!!


Week 13 – Report, Report and more Report

Once again another brief post as all that’s been happening throughout the week is report writing.

I cannot wait for the due date so this report can be over!  3 days and counting. Although, I am quickly running out of time to finish the damn thing. I hope to be finished writing by Tuesday night so the remaining two days can be spent proofreading and making sure it all fits together nicely. Also leaving enough time to submit the report to turn it in before making my submission.

No further development was done on the site during the week which was an achievement in its self. It’s so hard to just leave it as it is when all I want to do is make some changes or constant improvements. It’s easy enough to say that enough is enough and its time to just move on otherwise the project will be never ending but it’s a lot harder to actually do since everything has been revolving around the website for the past 13 weeks.

I’m aiming set the site live on Friday (8th Nov). Everything is finished on my part but my client is still sorting some further content and needing to decide on the prices for international sales. She has been sick the last few days so I’m still waiting to hear about her progress. If it’s not possible to go live by Friday then I’m hoping it will definitely be up by poster night.

Upcoming tasks

  • Report
  • Supervisor meeting with David on Tuesday (5th Nov) to discuss report progress and also the project poster.
  • More report until its handed on the 7th
  • Potenital extra supervisor meeting about poster if needed.
  • Design and create my poster until the 14th-15th so its ready for the poster night.
Picture describing how my project is looking! The end is so close.

Week 12 – Beginning to see the light at the end of the tunnel :)

Short and simple blog post this week as my project is boiling down to 1 thing, REPORT!


With just over a week until reports due it’s starting to become quite daunting and exciting at the same time.

Other than working on report this week, on Monday (21st of October) I had quite an eventful meeting with my website client that lasted just over 4 hours. It involved some evaluation, final additions/changes, tests and some user training. It was great to finally be sitting with my client showing her how to manage the content within her new website. We had the perfect opportunity to get some user training in as Anne had some new products, text and images that needed to be added into the website. After a few instructions and some help she was away editing some of her own pages with ease which really felt like we have finally achieved some of the goals we set from the beginning. It was great to see that she can easily add in new products and sales buttons etc. by only passing in a few parameters using the short codes which were only implemented last week. A great improvement to usability.

We had finally got to the point where I think the site is basically completed (for now!). All that’s left is some tidying up of some of the content as parts which were written a few weeks ago need some updating. Although, this is now a job my client can do herself over the next week and into the future. At this point there will be no more changes “structurally” to the site or design wise. Major changes will be left for future work as there’s only time remaining for report.

Overall it was a great outcome from the meeting as Anne (client) seemed pretty happy with what has been achieved so its starting to feel like my project has been worthwhile! I feel like I’ve done everything she has asked for, stuck to her design ideas and functionality so as long as she’s happy then I’m happy. She had a pretty fair idea from the beginning on how she wanted the site to look like and what was to be included within it so I’m hoping what’s been achieved fulfills all her needs. Although there are parts which I would have done differently as the site seems really simple in design and looks but I think it should cater to her target audience well and achieves all her goals. It’s definitely been a great experience gaining some valuable skills, discovering a lot of new things about web development and working with a real customer in a real situation. It’s been some awesome preparation and insight into what it may be like being involved in the web industry after tech.

Minor site changes made this week include

  • More content
  • New links added into specific pages for accommodation links, activities etc.
  • Future pages discussed and in the process of being created
  • Currency converter
  • Contact form added to contact page

The hardest part with writing the report I’m finding is having the motivation to do it. As said in earlier posts I’m definitely not a fan of writing huge reports like this and do struggle a bit so I just need to keep focused for 1 more week! I have nearly made it.


  • Supervisor Meeting


Week 11 – Change of plans

This past week has been all over the show with having my second DAT701 class assignment due on Friday 18th October. This meant quite a lot of time was focused into that rather than project this week which wasn’t ideal but couldn’t be avoided. Nevertheless there’s still been some good achievements on project for the week which include

Supervisor Meeting 

Met with David for our regular meeting on Tuesday at 1pm. It was great to discuss whats been achieved since we had last met in the final week of term 3 before the break as David was away oversees for the past 2 weeks. The main points that came out of the meeting were:

  • Discuss with my client about pushing the official live date for the site back to just after the 7th of November as then this means from now on I can focus the majority of my time on the project report and minor final changes to the site. We decided that if the site went up in the following week or asap then any problems or changes that arise because of this will impact greatly on the remaining time I have left to write my report. With the site live changes/fixes will need to be made as quickly as possible.
  • DO MY REPORT and avoid playing around with more development work (a lot easier said than done!)
  • Find out from Digital Promotions (hosts for the new site) about what they do for backups/security wise.

Client Meeting – Postponed

After being in contact with my client we decided to postpone our meeting until Monday 21st October. We are now going to meet up at NMIT and either find a quiet spot in the library or an empty class room. Our plans for the meeting are

  • Final decisions
  • Evaluation on whats completed so far
  • Add in the final remaining content
  • User training
  • User Documentation – Although, this needs some changes which I will explain in a minute.

My client had no problems with pushing the live date back a few weeks as she is still creating some content for the site and also a bit of extra time to get some practice using WordPress before the site goes up will be invaluable. She wants the best outcome for me as well so is happy for me to focus on the report. I was also in contact with Ben from DP to see if pushing the date back a bit affected them and they said it was no worries so every thing is all going to plan for now.

Report Writing

I have been through my current version of my report and set our further sections, sub sections and am continuing to fill them out. Making progress slowly 1 step at a time. I am finding writing the report is actually quite rewarding because it’s a great chance to really reflect on everything that I have done throughout the project and helps get a sense of all the things I have learnt and experienced over the previous 11 weeks. It was good to go to the PRJ report writing session with Clare on Thursday 17th Oct to have any questions about report writing answered, listen to other peoples questions and see where they are at. Looking forward to next weeks second seminar session to find out about everyones projects.

Advice from Ben

I had a few questions for Ben this week and discovered some better ways for implementing sales within the site usability wise for customers and my client.

  • Backups

I asked what they do backup wise for their hosted sites to see if I had to figure some kind of plan in case my client accidentally deletes parts of her content or some other problem arises where we need to restore parts by backups. Their response was “We put our own periodic backups in place so we’re in a position to restore and resolve weird stuff, client insanities and so on PLUS we also have a similar option with our hosting partners.” This was great to know.

Ben gave me a quick tip which was using WordPress short codes to improve client usability and functionality. Short codes can be created and used when ever but they are basically when you create a PHP function to do some kind of task (usually ones that are reoccurring). This function can then be called through a WordPress page using a short code. The way this improved what I’ve been doing is I had HTML included within the sales pages as we were putting in PayPal button HTML code and also div element HTML code into the content which was used to display our products. The reason this is a bad idea is because at any time if the client decides to modify a page then she will be dealing with the code in the WYSIWYG editor which can directly affect the output of the website. If an error was made, parts of the code changed or deleted then a number of consequences can arise, the content can be destroyed or made unreadable and the client may end up in a panic.

By implementing short codes I was able to create functions in a file which is not accessible by the client. These functions dynamically create the html we needed to create the products divs and purchase buttons. I can then call the function by adding the short code assigned to it into the page which runs the function and does whatever it’s coded to do. You can call the function as many times as you want which is perfect for this site as new products will always be being added, modified or old ones taken down. In our case we have used them for displaying products and creating the purchase buttons so it dynamically creates the code for this and all we have to do is pass in some parameters to customise the parts we need to change for the specific products. Now instead of have a whole bunch of code in the text editor and having to fiddle around delicately placing content within code tags all we have to do is place a short code like this for example  [Product image=” description=” productname=” cost=” shipping=”] and add the required parameters in between each of the quotation marks. This solution is much more user-friendly and also tidy’s the pages up greatly as they are now no longer clogged by code. Also, the client wont be messing directly with the code.

  • International sales

Currently with the purchase buttons they have a set postage amount which is set to cater for New Zealand only. If an international visitor came onto the site and decided to use the buy Now buttons to purchase products then the postage is only set for the NZ amount. That cost needs to be greater if sending to a different country as it will cost more and we currently cannot allow for this which could be quite a flaw in the site.

A website Ben had made which sells a book deals with international sales by including a drop down above each buy now button. He gave me the link to that and told me to check it out and view the source code to see what was happening. Basically, the drop down had a value assigned to each item which was a number, the postage cost. When one is selected that updates the shipping cost so as the form passes the info through to PayPal for the checkout and depending on which country was selected determines the postage cost. This is what we need to do! so the first thing for Mondays client meeting will be to see if that is the solution the client wants to implement. If it is then we can roll it out for all the different products within the site. It will require Anne to sort out postage costs for other country’s but it means we can sell products to overseas customers with no problems.

Another great find within PayPal

I have discovered when integrating PayPal instead of using a plain “Buy Now” button which only lets you purchase 1 thing and make 1 order at a time if we use the “Add To Cart” button this creates cart like functionality. It opens a PayPal tab with the order form for the selected product. From here you can either checkout and pay etc or continue shopping which takes you back to the site so you can add more products into the order. We had originally wanted this type of functionality but didn’t know it was available through PayPal. By using a function and short code we are able to create these types of buttons so it’s not a huge deal to upgrade the current buttons within the site to the Add to Cart type.

Screenshots of the international sales solution and also cart type functionality

Buttons with the country select that determines postage cost

Buttons with the country select that determines postage cost

blog post 2

Wone the Buy Now is clicked you are taken off to the cart. From here you can either checkout and pay or continue shopping.

Once the Buy Now is clicked you are taken off to the cart. From here you can either checkout and pay or continue shopping and add to the order.

Next Week

  • Client Meeting
  • Possibly minor development changes and testing

Week 10 – Almost time to go live!

The Weeks Events

  • Client Meeting

I met with Anne on Tuesday 8th October at the Nelson library where we basically just went over the progress made and spent majority of our time sorting parts of the content. We needed to create some more PayPal buttons linked to her account that needed to be added into the site for some products. We used it as sort of a tutorial session where I let Anne make a few buttons to get some experience in as this is a task she has not done before but will need to become familiar with as she begins administrating her new site. We discussed the design and decided on adding in a gradient background as a colour effect to brighten up the page and also to reducing the width of the overall site to make it more browser/screen size friendly. An occurring problem we face when meeting at either of the Richmond or Nelson library’s is an issue with accessing the site. The site just won’t load which has made it hard to show my client progress and is very frustrating! it seems to be temperamental as if we refresh the page a number of times the odd one might work. It only seemed to be the case when at the library so my guess is it has to do something with their network or potentially the way the site is currently set up on Ben’s server as it’s not “officially” live. Our next meeting this week upcoming week potentially on the 15th or 16th Oct may be the big one where I show Anne how to use WordPress and all the extra stuff she needs to know before it goes live and she’s in control of it. I might see if we can meet at the NMIT library as there should be no issues accessing the site there.

  • Content additions to pages

We are still adding in content changes as Anne is always re wording the content, finding more to put in or getting new photos to go with text. Some pages are tending to get quite large and packed with information now so we may need to look into splitting some pages up or reducing some text as in my opinion people don’t want to be bombarded with endless paragraphs of text.

  • Design Work

The designs been changing constantly throughout the project as Anne has got a fair idea on how she wants the site to look in regards to the design/layout, colours and whats included on the site etc. In my opinion the site is very simple in terms of the design and features but the majority of her customers are 45+ and potentially not very tech savvy so they may not have the best knowledge about using computers or websites so I can see why she went for this minimalist type of design and functionality. Overall so far its been a great experience and I’ve been trying my best to keep my client happy by doing everything she wants but I think in the future I may not let clients dictate as much. The reason for this is because although I know the site is for them and on other circumstances they would possibly be a paying customer the way they think/want the site to look or what should be included content or design wise may be perfect for them, but may not always appeal to the customers or visitors to the site. Knowledge like that would come with further experience and work within the industry.

Gradient Background – After mulling over the dark green background colour of the site for a number of weeks now we decided to try a gradient where it goes from the very dark green out to a lighter colour to try to brighten up the site, add some effect and look more inviting. I wasn’t a fan of the dark green but Anne has been adamant to keep the colour.  The first way of adding in the gradient I tried was through CSS. This worked fine and initially looked great but as we noticed the gradient varied depending on page length so every page looked slightly different. A look we were not after. I found a fix to that which was awesome, but then when resizing the browser window for some reason the gradient would slide inwards with the page, when  maximising the browser back out again you would observe the gradient staying in where the browser was before and not covering the whole width of the site. It was very weird and I couldn’t work out what was happening. Solution two was adding in the gradient as a background image. I found an awesome site which provided the option to put in the two different colours we wanted within the gradient and then it produced the background image for us,  what a find! This made my job easier and saved a lot of time as I was going to have to learn how to create one in PhotoShop. I then used Firefox’s firebug tool to see how other sites had set up their gradient background image by viewing their CSS code. This resulted in the site now having a nice gradient background going from dark green down to a very light pale colour of Anne’s choosing. Partial view of the gradient in the following screenshot.postpic

Site width (covered later in the testing bullet point but it also applies to this section)

  • User Documentation

I’ve spent a bit of time throughout the week creating the user documentation document which I will hand over to Anne when the site goes live. It’s full of screenshots and instructions explaining the things she will need to do within the site if she wishes to make changes/updates. The only real problems I’m facing with this is deciding how much detail I need to go into on parts and also which parts to actually document as a lot of it is pretty straightforward and it won’t take long to master the Content Management Systems basic tasks. I have decided to be as thorough as possible as Anne has no experience with WordPress or managing a site like this before so if I cover it in as much detail as possible  then it should make the job easier for her which is one of our overall goals.

  • Report

I definitely haven’t spent as much time as I would have liked on my report so far! I’m not a fan or writing and it’s not a strong point of mine so I try to avoid it as much as possible but with the deadline looming ever so closer I need to knuckle down and get it done. I have the report all set out from the report structure document and have begun different parts but I really need to just dedicate a lot writing time over the next few weeks, it’s much more fun to be actually playing around and building than writing. I’m looking forward to the PRJ class session on Thursday 17th Oct  as it’s about report writing so it will be a good chance to clear up any problems, ask a few questions and gather some tips.

  •  Other Discussions

I’ve been in contact with Ben from Digital Promotions giving him an update of where the project is at as we were discussing when the site will officially go live. My estimate was possibly next week some time as there’s still the odd thing to tidy up, bits of content to add, further testing and Anne’s user training to be done before I want it to replace her old site. Its a great feeling knowing that the site is almost going to be live!

  • Testing


With the site almost being complete some testing has been done. This involved testing the site in different browsers, versions and screen sizes. This brought up a few issues which I was not aware of until this point. Some included:

Banner Size Error – The way I had put the banner into the page was as a background image using CSS. This was fine on the newer browsers I had been using but as we found out when Anne visited the site on her old laptop (which must have quite old versions of the browsers) that it was cutting off some of the banner logo and text. I decided to test this out on one of our old desktop computers which had an old version of internet explorer and the same problem occurred for me. After some research and playing around I found that the background-size and some other CSS properties used we not compatible with older browser versions or they didn’t recognise it. The solution to the problem was recreating the div container and actually putting the image inside that as an image element instead of just a background of the div. I was then able to set the size etc. and it worked the same for all the browsers I’ve tested so far.

Overall site width – The way the site is designed with the 3 column layout has meant it needed to be quite wide to fit everything in nicely. It looked perfect on my laptop screen which is quite wide, but when it came to visiting the site on a smaller screen it resulted in horizontal scroll bars being added to view the full width of the site which didn’t look particularly good or add to the usability of the site. Time has been spend resizing the width of different parts of the site to reduce the overall width. It’s still quite wide and possibly slightly wider than the normal size but its fitting into smaller screen sizes s a lot better now.

Other CSS issues that I’m finding a bit troublesome is the rounded corners feature of border-radius. With older browsers not compatible with this feature some may not render the images with the rounded edges as we want, I’m still looking into this.

Placement of divs  – I’ve found that the placement of divs in terms of the stack order affects the way they are displayed. Such as, the right hand column of the site includes a map widget and also facebook & linkin in social media widgets. This column is included in within the other main content divs which meant the way they were stacked the widgets weren’t clickable as it had the main content div covering the right column div. The solution to fixing this was adding in the CSS property z-index which allows you to specify the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. So if i give one div a z-index:1; and another z-index:2; the second one will appear onto of the first because the z-index is higher. This allowed me to set the z-index of the right column greater than the main content area which brought it to the top of the stack making the widgets clickable.zindex

Plan for the following week (14th Oct – 20th Oct)

  • Supervisor meeting with David on Tues 15th Oct
  • Client Meeting including user tutorial for how to use the word press site.
  • Final changes for preparation of site going live.
  • DAT Assignment will take up some time this week as it has an assignment due on Friday.
  • Search Engine Optimisation.

So much to do! with not so much time remaining!

Over the past few weeks I’ve been pretty slack with the blog posts because I’ve been focusing on the development and user documentation parts of my project.

I think at this stage the main functionalities and goals for the site have been achieved  as we are winding down on the development stage. The main bulk of my time will now be focused on writing my report and smaller chunks of time will be dedicated to tidying up any loose ends or changes that need to be made.  My clients always creating new content or rewriting parts of the site which add in new changes that becomes time-consuming for myself so I think that looking ahead to next week I would like to have a user training day to get Anne familiar with the WordPress CMS so she can begin to update some of the content on the site herself as this is the main goal of having her new site made in the CMS that allows her to make changes to the site. This would mean she’s getting some experience using the site while I’m still available for help, it will save me a bit of valuable time that can be focused into report writing and importantly it will be a great chance to see how ‘user friendly’ the site is as Anne has not used WordPress or managed a site like this before. If any major problems arise then hopefully we have some time left up our sleeve to fix them!

Major things achieved

Sales Buttons

Basically over the past two weeks its been business as usual just getting parts of the site completed and adding in new features or changes when they arise. The last client meeting I had was on the  26th of September where we basically spent the time creating the buy now buttons for the different products and equipment which are for sale within the site. This went pretty smoothly as PayPal has a very user-friendly section on their website where you fill in all the buttons details,costs,postage etc. and then it generates the button code which we paste into the website. All sounds pretty straightforward but there was a few problems that arose while doing this.

Creating simple buy now buttons worked well because you can basically put the button image into the site and then add the button code as a link so when it’s clicked the user is taken off to the paypal site where they fill in their details and pay for the product etc.

simple buynows

It was when Adding in more complex buttons which include drop downs or text fields that problems occurred. The way PayPal creates these buttons is by creating the elements within a form. When we post the generated code into the WordPress website the form doesn’t present the elements as we would have liked. This meant adding CSS to try to style the form. This is still an issue as it’s fine for me to be playing around with the code to get the buttons looking nice enough, but when it comes to Anne adding in new buttons like this in the future she won’t have the ability or knowledge to be editing the code. We want the process to be as user-friendly as possible so this is still an ongoing issue that can hopefully be solved.

(Image to below is of some buy now buttons with drop downs which has had some CSS applied to get them looking a bit better than the original default code. Without CSS applied the forms width is massive taking over the page and has large amounts of space between the button, drop down and text.)


Sales Display

Originally on the sales pages I had created tables for the products which then meant each row within the table was for a specific item including columns for images,description, cost and the buy now button. As we have progressed I began to think that there must be a better solution to achieve this in a way that will make it easier for Anne to add in new products without having to carefully add images, text, buttons etc between different table html elements as it makes it likely that a mistake could potentially occur resulting with stuff in the wrong place or changes to the table and the page display being ruined. After looking into a site that Ben had created which is selling items the same way as we are with the buy now buttons etc I saw that he had made it with divs. This meant that each product has a set of divs that contain its specific information. I gave this a go and ended up producing the same output as the table was giving but now when it comes to adding in new items all that has to be done is paste in the following code and replace the CAPITALS with the item specific details. There is still potential to make mistakes when doing this as there was with the table but this is a lot more straightforward than the original solution. Doing it this way means that some set CSS will manipulate the display of each of the divs as the image below shows.


<div class=”Products”>
<div class=”ProductImages”>IMAGES HERE</div>
<div class=”ProductText”>DESCRIPTION HERE</div>
<div class=”ProductCost”>COST HERE</div>
<div class=”ProductBuyNow”> BUY NOW BUTTON HERE</div>

This code results in

div structurediv e.g.

Blog Page

On the blog page Anne wanted to have some set text at the beginning then the five most recent posts displayed at the bottom of that, to achieve this I had to do some research and add in some custom code which selects the five most recent posts, displays them in a list type function in a presentable way. We not have a fully functional blog page within the site where Anne can add as many posts as she likes and users can also comment on them.


The current page structure of the site has increased in size a lot since the beginning which is represented in the image below (structure of the navigation also)

page structure

There was a problem with my main top navigation when hovering over menu items which have sub menus. When you moved the mouse down to go over the sub items it was like the page was lagging and the sub menus would disappear. I thought this must have just been a server or page loading problem until I saw that there was a tiny gap being produced between the main top level navigation items and the drop down sub items so as the mouse scrolled over the tiny gap the menu items would disappear. (Sounds like some stupid,small problem but it was a good feeling to get to the bottom of it!)

Upcoming things to do:

  • Continue on and complete the user documentation document for Anne with instructions on how to access her site, maintain/add new parts etc.
  • User training meeting at some point within the very near future
  • Client Meeting (Tuesday 8th October)
  • Small site changes when they arise

Week 7

It hasn’t been a very productive week so this blog post is going to be short and sharp!

Due to having my DAT assignment due last Friday I ended up spending a lot more time than I had anticipated on that which ate into my quality project time.

After getting frustrated with that assignment I ended up having a computer free weekend (not ideal at this stage) but it had to be done.  I’m feeling a bit of pressure now to start wrapping things up and getting into the final parts of the development so I can then begin to focus on the report and user documentation side of things. It’s going to be a very busy next week.

I had another client meeting on Tuesday afternoon (17th Sept) which we spent going over the design of the site, making decisions about the sales side and also viewing different images of products for the site. We plan to meet again on Tuesday, 24th Sept to hopefully complete as much of the products and sales as possible.

I feel we have a good grasp on the development parts as it’s more or less sorting out the last few pages/content and connecting in sales buttons for the products to PayPal. Over the past week a few changes have occurred with the number of products going onto the website being decreased to help deal with the sales/postage side of things as that was adding in a number of complications. The effect of that is the menu structure is now changing under the sales part of the site which I’m hoping will be just involve sorting out the main and side navigation menus with the new structure and pages.

I’m hoping throughout the next week (week 8 –  23rd-29th September) that a huge proportion on the development will be completed and tested so then on the following weeks the main focus can shift into my report, documentation and final changes. The weeks are starting to fly by pretty quickly now!