Website Update

• Theme: Further to my work from the end of the deadline I have reworked the theme of the website, which I feel gives the website a friendlier welcoming look now. However, the banner still needs much work yet, as do the fonts used in the navigation bars.

• Live search: A feature that searches all posts, comments and pages for search words and displays results as you type. Well why not?

• Footer: In response to the contact details not being found with ease, I have relocated the best contact methods to rest on the footer. Along with this I have also added some basic copyright claims and link to my author.
  

Final Website View

These two images are to show what the website looks like for the purposes of marking without visiting the website in question. I would submit the website as a separate locally run collection of files but as the nature of website is PHP and MySQL driven it wouldn't run correctly and do the website any justice.


Although you can get a feel of the layout from these pictures, you cannot interact with the website so I hope you will visit the website itself at www.fooddreckly.com

Thank you!

Evaluation

While this project was a complete success in both furthering my understanding of back end server management but also in creating a stable and long lasting website I do however understand that it's not entirely completed as far as meeting all the brief requirements set by the client goes.

The website may well have all the functionality it needs to do it's job at this time but does lack a heavier image use that could otherwise help make this a lot more appealing to potential customers.
Due to the bandwidth restrictions of the web host we have been very careful with the images used so as not to push the server limits, I do feel though that the website would benefit greatly from a more media heavy style and will be suggesting that the pay package be increased to accommodate this.

I would have liked to work more on the aesthetic of the website and shall be doing so once this project has been handed in. From my point view at this time, the website would look a lot more collected if the corners were to be rounded off and the the footer and header to use images of either Dartmoor or of the food which Food Dreckly creates.

The website for now is fast, easily updated, clean, fresh and highly functional. For the moment, until new hosting has been sorted, this website will serve as an ideal stopping point for customers wanting to learn further about what is it Food Dreckly does and stands for. Once the hosting plan has been upgraded I will be able to implement a lot more media usage as well as migrating WordPress to the latest release and updating the theme to use the much more advanced K2 engine.

I have sent instructions on the website use to the client as well as giving me a short tutorial on simple tasks, such as managing page content and adding additional news, calendar dates and changing page elements and aspects without too much hassle.

The SEO rating of the website has been much improved, now showing at the top of a Google search, along with excellent SEO data for all the sub pages as well. I will be keeping an eye on the analytics data collected by Woopra and Google as it starts to generate a more detailed picture of website traffic and other data.

All in all this project was a success and I'm very pleased to have the website running so smoothly. There will need to be some changes in the near future, but for now at least it's a competent web portal for Food Dreckly and good showcase item for myself.

Adding News

Because WordPress was originally and still is primarily kept updated as a blogging system it means the admin can blog news direct to a page of the website already created.

• This is simply done by going to the dashboard of the admin panel, like you would if creating a calendar date. Instead of going for the calendar, selecting 'Write' and then 'Post' you can write a post simply and efficiently to be posted directly to the news page. This page is accessible like any other page on the website is, as a link on the right hand side.

• Categories can give the posts special functions and permissions as well. Such as staff only viewable item, etc.
  

• Now the news tab appears and displays as a link on the menu bar.

• And there we have news!

• I also remembered from the brief that the website needed increased Google search rating. In order to do this I tracked down this plugin. This tool let you automatically give pages and even posts increased meta ratings for use with search engines. This SEO plugin will ensure the websites correct place on the Google search listings.
  

Google Analytics

In keeping with the requirements of the brief I have submitted the Food Dreckly website for analyzing with Woopra.

Woopra is a robust web-tracking & analysis tool that works perfectly on any website. It is mainly targeted for small to medium websites ranging from few hundreds up to tens of thousands of daily page views.

Essentially, it is targeted for blogs interested in the most minuscule details of every single action. In addition, Woopra provides a precise real-time streaming of every single activity on the website.

Woopra also features a clean interface, including many graphical visualization components, such as charts, maps, panels… Along with many other clean and advanced options that make Woopra an ideal solution for webmasters who desire to discern all the aspects of their website.

Woopra Main Features

• Live Tracking
• Rich Interface
• Visitor Tagging
• Instant Messaging
• Real-time Analytics
• Custom Notifications
• Developer Tools

This allows either myself or a member of the Food Dreckly team to check very precise details about the websites performance. Woopra is also constantly updated by the Woopra plugin on WordPress, keeping the information correct and current.



In addition to Woopra, I have entered the website into the Google Analytics system. This is upheld by a Google Analytics plugin installed into WordPress that keeps Google Analytics up to date.

Banner and Calendar

In an attempt to get closer to the websites completion I started to try and work in a nicer style for the banner. Cleaning up the image greatly and improving the whole look of the website.



The image quality wasn't superb to begin with so I requested the original Illustrator files to work from. This meant I could fashion a cleaner looking banner that said a little more about what it was this website was about.




This new banner sat nicely on the now much cleaner website. Along with a slight color change, such as the backgrounds to the menu items and the more encapsulating footer, the website now had an events calendar and news feed. This allowed for the admin to quite easily keep the website completely up to date.


To Add A Calendar Date:

• First you navigate to your WordPress dashboard where your given all your news from WordPress along with shortcuts to the most useful tools. Then you head to the manage tab of the screen, this gives you the parts of the website you can control from the CMS. You simply look along the bar and select events calendar.

• As can be seen in this picture, most of the options for the various tasks can be found this way.

• The calendar is a large sheet of dates before you, if a date is entered into the calendar then you can view it here.

• Below on the same page you given the option to add an event. The date once submitted will be displayed highlighted in red as a date on the calendar located on the main page. If the user is to scroll over the date with his/her cursor then in a popup bubble the discription of the event, the date it happens and the time it starts and ends can be viewed quickly.

• Should it so be wished in the future the user can integrate a more sophisticated event calendar system, with support for iCal already and Google, Yahoo calendars to come.

• This now shows the date as a red marked number on the calendar. Underneath that is a news message that can be set to make reminders, among other things of what's coming up.

• This image show the cell of text that appears over the dates as users scroll over them. This bubble of text displays the details entered in on the calendar.
  

The Banner in Working

The above image is to remind you of what the original website used as it's header.

• Starting off with just this image, more so just to have something in while I worked out how the image should sit within the page.

• To round the website up together I decided to use a border to encase it. I took the first image and simply bordered it off. I feel having a website that is neatly displayed in the center of the screen and clearly marked usually makes for a warmer website.

• To try and give the website some color I gave the banner one of the images used in the previous version of the website. While nice, the image was too large and garish underneath the badly colored and overly spacious corporate logo and tag line image.

First Attempt At Skinning

My First Skin


As a first attempt to get the style going where I thought it should I started by simply tweaking the colors and images of the original Kubrick without changes to the core structure of the CSS layout. This is mostly so that when the next major release of WordPress comes out, within a month or 2, I could easily migrate over without too much hassle. That, and when the new version of WordPress arrives I could also switch seamlessly into the new K2 release of Kubrick. http://getk2.com/about/


K2



This new and much more advanced version of the default theme engine I based my current designs on can process a much more in terms of script capability, much of which is built in. Improvements in K2:

• User-friendly.
• Admin-friendly.
• 100% open source.
• Semantic XHTML, CSS and JS structure.
• Supports custom CSS files.
• Smart layout adapts to needs.
• Fully configureable from options page.
• Upload and manage custom headers.
• Sidebar Modules comes bundled (with special K2 modules) and support WordPress Widgets.
• Live comment posting.
• Livesearch.
• Rolling Archives.
• Dozens of plugins supported out-of-the-box.

Ok, so I probably won't ever need any of that? True, but it's always nice to have there in case!


Back to my skin...

I went with very similar colors as to the original theme to begin with. Choosing the lighter blues and keeping it fairly simple. Using no images at this point, but leaving enough space that I might be able to incorporate some.
While the fonts and layout wasn't how I'd have entirely liked it at this stage, I felt this would be how I'd like the end product to end up layout wise.

The banner however needing much improvement immediately!

Watergate Bay Beach Hut

Watergate Bay Beach Hut, doesn't exist. It's parent website does however, and it's not bad, it's just too much unnecessary Flash that puts me off it. The images used look fairly amateurish, but I can see the direction they were hoping to go in. It's just not a style that I think works for the website.

Venus Company

Venus Company, this is a actually quite a good website despite it's old fashioned layout and look. As was stated by the client also. The website offered as much information as you could need, it was laid out in such a way that made it easy enough to navigate, quite a lot of scrolling needed for certain pages though. Possibly more concise page content was needed.

The menu page that it provided was much better than the previous website I looked at. It looked much friendlier for a start, but again gave little feeling of the food without images with which to back it up.

Blue Bar

Blue Bar is a bar located in Porth Towen, a place I know. I have eaten and drank at this bar and the website compliments the feel of the bar well. I think this is quite a nice website and despite the client stating that she thought it looked somewhat messy I would have to disagree and say it's fairly clean and easily navigated.

I would have to say however that I don't think there's any need for a Flash banner at the top of the page, however this does add to it's modernistic appeal. I just don't feel it's desirable to have a Flash banner that has to pre-load on a website such as this.

The menu page has been nicely done, giving a good feel to the food using some nice images. Although I'd have to say while the potato wedges there are quite nice, they're also quite soggy and expensive for the amount you receive.

This website is again a good example of why decent images are required on a website such as this.

Wilf's Café

Wilf's Café, is as the client suggested; informative, but without any artistic merit. While I'm quite a fan of the very simple web page I must admit to this one lacking somewhat and creating no real appeal for the place.


However this website had obviously not been created to push the café to much via the internet, which is fine. Despite it not being overly pretty I don't think there's a whole lot wrong with this website other than the strange way in which the links have been set about the page.

Porthminster Café

The second link I was sent by the client was that of Porthminster Café. This website is appawling. Websites like this shouldn't have Flash intros to them, and on top of that they shouldn't be this badly made, or for that matter link to the main page using popup windows that most browser's now block without question.

A splash page might have been OK, given that there is a 2 way split as to where you go once you arrive here, but to have an actual intro that literally takes a long time to slide some text across the screen is a little absurd.

The actual website, as can be seen in the first screenshot was very ugly and had been obviously badly designed from the ground up. The icons, buttons and color scheme were boring and sloppy.

They had menu's on the website that were simply large lists of unimaginatively laid out text. Not very inspiring when trying to entice someone to come and eat at your restaurant.

The website did however remind me how I need to be thinking about implementing some sort of method for locating the café. So far my favorite option is to link to the Google maps page that points to the café's location. This is easily created and serves it's purpose better than poor res images that don't really give enough detail.

Bunkers Beach Café

On the brief that I was set there were also a set of links to other café and restaurant websites that the client thought I should look at for inspiration and as examples.
This website, Bunkers Beach Café, is the first on the list and the comments that came with the link are as follows: "this has a modern style, plenty of space and looks professional. However it does not give a feel of the food or place itself."
I would agree with this statement. The website itself is very nice, it's professionally done, clean, easy to navigate and stylized well. I would also agree the feel of the place is lost somewhat in it's design, but the images used are good and it's very hard to get a website that really portrays the true feel of a place.

I liked the way they had set out the news section. It was clean and concise. I would be more than happy if I can find a method for doing similar with the Food Dreckly website.

WordPress Skinning

One issue about WordPress that got me at this stage was the theme system. Although it's very easy to use, very easy to install new ones, very easy to customize it was always about to receive a major overhaul in the coming months. Due to this I didn't want to stray too far from the default theme which was highly integrated with the WordPress CMS.



This is a screenshot from the example page from the WordPress homepage. It shows the default theme in it's relatively default state. Although this theme isn't at the height of beauty it is very well made and provides a very decent starting point for creating my own customization of this theme. There is also a version 2 of this theme on the way that I tested briefly. Although buggy at this stage "Kubricks" next update will be "K2" and from what I could see it is very impressive. It adds massive functionality to the theme editor within the CMS and would be, once released, the major next default theme for the next release of WordPress. So given all this I decided I would go with Kubrick for now, hoping that this leaves me in a better position to transfer over to the new version of WordPress.


The above image is that of K2, taken from the K2 website. Although it looks quite plain in it's default state it's the back end stuff that I'm more interested in as it integrates itself with WordPress much more and makes the entire site, including the CMS behind it much easier to use.

WordPress Installation

Once I made backups of all the old Food Dreckly files I installed WordPress. Although it took a long time to upload all the hundreds of small files the installation was incredibly easy. Installation was as simple as creating the correct MySQL database, dragging and dropping the WordPress files onto the server using FTP and then running the built in installation module.

The entire process took no longer than 5 minutes, as was detailed it would do on the website.
Once installed I could take a look around the interface which was easily navigated and shouldn't provide too much hassle to anyone when wanting to make additions and changes to the content.

WordPress

The next project I looked at was WordPress. This is a project that hasn't been going for as long as PHPNuke for instance but still has something under it's belt. It also appears a lot under the suggestions for easy to use CMS that can be easily skinned and managed by less technically astute users.

Skinning of the default theme used in WordPress, from what I can tell from testimonials on other websites seems to imply that it's easy which is a bonus.
Although WordPress is a lot more of a blog site it is also apparent that you can turn this around quite easily to make it a fully featured website as it allows for not only a posting system like Blogger, which would be useful for news, but also a 'page' system for creating proper website pages. This means that with some simple tweaking I could remove most of the blogging functionality and create a very easily update able website.

Also given the massive very open source orientated community there are a lot of free themes, plugins and add ons that would expand what can be done with this system massively and without too much hassle.

So far WordPress has impressed me the most and so I will install it to the web server as soon as I can in order to test it. The installation process is supposedly very easy to use and integration with MySQL is also easily made as the host that Food Dreckly use provide cPanel which makes life easier.

Another CMS

Not overly impressed with the first lot of content management systems that I looked at I decided to keep on going with my search. The first I stumbled across (from the PHPNuke website forums actually) was Post-Nuke.

Post-Nuke, from what I can tell is quite a new project and I'm always wary of going with something that's not had time to mature. I'm also very easily put off a project and from what I could see it didn't set itself out from the crowd at all.

The thing that put me off the Post-Nuke project the most was that they included the most horrific links to websites that used the Post-Nuke system. As can be seen below!



None too impressive really, given that these are the showcase websites. Although I am aware this doesn't speak too much about the server side code that drives it, but instead says a lot about the designers of the websites they used as example. I'm still too put off to look into it any deeper.