The Weeks Events
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.
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.
Site width (covered later in the testing bullet point but it also applies to this section)
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.
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.
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!
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.
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.