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.

Panoramic Photography + Viewers

Recently panoramic imagery has been something I've been looking into quite a lot. I find it very interesting to view the various images you can find on the web. Having been looking into it for quite some time I've found some very interesting 360* imagery and devices for viewing them. At the top of my list of impressive programs is the Microsoft HD Viewer. This highly advanced utility is for both the creation (stitching) or panoramic images or for the viewing of them. It's also for use more specifically with HD and gigapixel 360* images. The application can be ran and viewed as an ActiveX applet that installs into your browser.


The application can be used to fully zoom in on tiny aspects of a large HD/Gigapixel image that's been taking using fish eye 360* panoramic pictures such as this image above shows. Look how the image can be zoomed in from such great distances. Baring in mind this is not software that stitches various pictures taken already at different zoom levels but instead stitches in a series of VERY high detail panoramic images.

Other applications for this software is the CCTV version. The software can read live fish eye lens feeds and convert them into flat panoramic images. This allows a single static situated CCTV camera to capture a full 180 degrees of photage that can be viewed from a remote console.

A few other sites of interest are listed below, some really good panorama's on them:

Panoramas.dk
Bohonus Virtual Tour
Panoramic Stock

Ric Stultz

This is some wonderful artwork by American mixed media artist Ric Stultz. A lot of what Ric creates is of a very postcard, comic cell style but in such a manner that it takes on a much more extravagant poster art feel. This comes down I think in large to the use of paint splattering. Although the work displayed here could more than likely be entirely created using real world tools like the brush and pencil I expect there's a heavy use of digital manipulation amoungst it. I would be interested to know to what extent the computer has been used here to touch up, or perhaps even fully create.

Ric Stultz

HTM2PDF

This is a HTML to PDF converter tool that works from your browser. You can either paste in direct your HTML or give the website a URL to convert. From what I've seen and heard, this is a very powerful tool that works well. I'm sure there are others out there that are just as good but so far this is the only decent one I've found that doesn't require a fair amount of time for the PDF to be emailed to you. In fact this doesn't ask for your email address what so ever, which is nice as I for one hate giving me email out to anyone. Especially a service that probably doesn't really need it.

HTM2PDF

Most Used CSS Tricks

I stumbled across this page the other day. It's essentially a short list of very useful CSS tricks. Included in this list are things such as how to round off borders with and without the use of images. Also included are more basic tricks, such as creating more aesthetically pleasing lists and forms. This isn't a one stop CSS resource, but it is well worth a look. Most of what's on here can be simple spliced into your CSS to sand off a few of those rougher edges.

Most used CSS tricks

Faces In Places

Faces in things is a lovely blogspot blog that is no more than a collection of Flickr streams from various users that depicts simple faces caught on camera appearing in items and unexpected places.
This is well worth the quick flick through the pictures as they're not only great pictures in themselves, but they are also very humorous to look through.

Faces In Places

Little People

Not midgets, but little plastic models of people. This is an art project, or time filling interest, that is simply someone placing tiny plastic figurines in various locations and taking photographs of them. The figurines are situated in such a way that they look like they are doing such activities as to make them look almost as if they the correct size (in most pictures). On the whole though it's just quite a funny collection of photographs. It's just a nice idea that I think has been done well. Something quite nice to look at.

Little People

Door.swf

This is a straight loading animation made using Flash. It follows the story of a man trying to get through a door as he's presented with many obstacles he has to overcome. It's worth a look if your after something to watch for a couple of minutes.

door.swf

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.

Server Integrated CMS

Theres loads of available options of course, picking one shouldn't too much hassle since most of the advanced functionality of these highly developed CMS will be lost on the Food Dreckly website. With that in mind I decided to pick the one that seems to me the easiest to navigate and use.

The two that I looked at firstly were:

• Drupal
• PHPNuke

Drupal is very advanced, not to say it's overly complicated. This package is used around the world for projects ranging from corporate to personal websites.


Although the general ease of Drupal to use is obvious I decided that with such a massive array of options available to the admin, presented in such a way that isn't all that obvious sometimes, that Drupal would be powerful but possibly not the best option.


PHPNuke is a CMS that a few people I know use and love. However it's layout isn't nearly as good as that of others, even Drupal. One of the key aspects that I need to keep in mind when choosing is that it has to be very easy to navigate when using the back end admin panel.


There's also the fact that I have issue with it not being entirely open source and requesting that you buy a license to remove copyright text. Personally I'd rather support an entirely open source project that offers a friendlier outlook.

The Problem With Tumblr

Like I said in the previous post there are some issue's with Tumblr which I don't think I'm going to be able to overcome. The lack of formatting options for the posts and the style in which it's used to upload images will make it a bit too featureless.

I also sent the Tumblr support team a quick question about embedding individual posts into websites. Being that I couldn't find any method for doing so other than to embed RSS. The following is my email:

Subject: Embedding individual tumblr posts

I'm looking to create a website that has an easy to use CMS to control news items / page contents etc in an easily navigated environment. My college tutor recommended I play around with tumblr for this and now I'd really like to use tumblr as the backbone for my college project website. I've found how to embed my tumblr site feed into my website but is there a way to embed individual posts? So that I might be able to control various page contents, over various different pages, from my
tumblr dash board.
If this is at all possible could you please show me how as I love tumblr and would want to continue using it!

Thank you for your time,
J.O.

In reply to this email:

Subject: Re: (Case 6881) Embedding individual tumblr posts

Hi, Jako. That is not possible at this time. My apologies. I can't tell you how much we appreciate your support and feedback. I've passed your suggestion along to our development team.

Please let me know if there's anything else I can help you with.

Thanks for using Tumblr!

Marc   :-)

I guess this rules out Tumblr for the time being, I shall however continue to use it and keep an eye on the updates it receives in future. There's a lot of potential behind Tumblr, but for what I need it in this case I think I'll give it a miss!

Tumblr

Tumblr is good, very good. Having a play about with I can really appreciate the ease of which content can be added to your Tumblr blog. However it does have some issue's which may cause a bit of a problem. Firstly it is again possible to embed Tumblr into your website using feeds, but these cannot be formatted which is an issue.

There's also the issue of how it blogs, that is to say that while it does blog text and can be used to blog images it cannot be used to blog more than a single image and isn't designed to blog large text and image posts. This makes sense in it's scrap book theme but could cause serious problems for what I am going to be needing it for.


Adding posts:

Adding posts to your Tumblr is straight forward, I would even go as far as saying it's also the easiest system of blogging out there. With no bullshit to contend with it's a system that anyone could get to grips with following the shortest of tutorials, which fortunately Tumblr supplies.


Playing Around:

I thought I might be able to use this system still by creating a homepage on the Food Dreckly server and then skinning the Tumblr blog to look similar so that the homepage could link to the various Tumblr posts individually and then Tumblr would link back to the Food Dreckly homepage. This would allow for a very easy method of updating the website.

2 Blogging Websites

To kick things off I looked at 2 blogging websites:

Blogger

While using blogger would be possible, it is seemingly only possible by embedding RSS feeds into the website. RSS feeds are hard to format and annoying to implement. Although Blogger is a very good blogging website, the support it has for embedding it's posts in other websites seems to be fairly none existent, so I dropped this as a choice fairly soon after looking into it. I also feel that steering clear of Google applications is always the best approach in life. Using a blogging application like this can also look a bit messy and I feel it is somewhat of a cop out. In the long run I'd want something more integrated.

I could have however used a blogger blog site entirely. By skinning it cleverly and using labels to mark pages and then using the fooddreckly.com domain name to give it a more Food Dreckly inclusive feel. We'll see if I'll return to this option at a later date, but I doubt I will.

Tumblr

This is a website that was suggested to me by my tutor.

This is a very cut down version of your usual blogging website in so much that it is designed more with a scrap book appeal to it. The idea behind Tumblr is to create a system of incredible ease and speed with which to blog with. However, despite Tumblr being a very easy system to use it does have a lot of very advanced features behind it. Of course it's greatest appeal is it's ease of use, given what I need of it to fulfill this brief.

Content Management Systems

It is clear that the best approach in creating a new and improved website would be to base it on a well kept and already existing CMS that would allow for easier updating, preferably entirely workable by a less technically literate person. This would allow for the website to be completed and for that to be the end of involvement to the most part by the website designer, handing over the day to day maintenance work directly to the client.

Although the website hosting plan that is being currently used is of quite low cost and thus low bandwidth + available space, the actual service it provides is fairly feature filled with cPanel pre-installed and PHP/MySQL/ASP.net support and so forth. This means that although the website there currently doesn't make use of any of these features it would be more than possible to do so.

So what do I require from a CMS? Really the most important thing I need is a simple way for myself or a member of the Food Dreckly staff to make changes to any one of the pages quickly and without much technical jargon between them and the update.

When first looking into various CMS I started thinking how I could use the original website template and replace the content of the pages it loaded to that of blog posts from an external blog hosting website. This would not only reduce the amount of bandwidth that the website would require, but also be a well kept and easily manageable system to get to grips with.
Firstly I had a look at using blogger for a system of blogging directly to the website. Or rather the website retrieving the blog posts.

Analyzing Original Website

From receiving the brief and analyzing it for a summery I decided to have a look at the original page and note what I thought of it to help me work out how better to improve it.

This page I created a year or so ago now and was designed originally to be an easily navigated, simple and clean website that would help drive trade to the clients email address and allow for viewing public to gauge simple information about the Food Dreckly service.

This website is also situated on a low cost web host pay plan that offers a smaller amount of bandwidth and space. With that in mind this original website was created to not push the limits of these server restraints. A small array of imagery was used and an overall low page size to decrease bandwidth usage and thus potential cost.

The biggest issue this website has was the way in which it had to be updated. Because I made this website entirely using HTML and CSS and without any hint of a real CMS, the updating of the news section and the website in general became an issue. While it was fairly simple to update the news it was a very tedious chore to keep it both updated and stylized the way they were required to be. In order to update we had to enter the new dates into a table using raw HTML and then manually alternate the colors of the different cells by hand, finally uploading the updated file via FTP. A lot to do if your not good with computers.


While it was possible for a short while to do these updates by hand it was deemed that a more client friendly approach was needed for a future release of the website.

The client had also complained about the shear bulk of spam emails that she was receiving. Despite placing various junk mail filters on the email account using programs such as 'Spam Assassin' it was made clear that a better approach was required.

Although this website did have it's faults I was a fan of it's clearly set out interface, very simple navigation system and bold layout. When viewing websites I very rarely get on with a site that over complicates itself in any form and feel that the simplest and clearest approach, with as few sprawling links and cluttered imagery, is best. In any future website design I would quite like to keep within the same theory of design.

In conclusion it's really the back end of the website that needs to be given a work over and the actual aesthetic of the website is not far wrong as it is. There needs to be improved functionality and this really will be mostly a server side job.

Analyzing the Brief

Once I had the brief I set about trying to condense and summarize what it was asking of me. I figured the best approach to doing this would be to bullet point the requests. This will help me greatly in working out what I need to be getting on with.

Neccessary:

• Improved layout
• Simplified updating
• Events viewer
• To show 3 distinct arms to the business
• Picture of the café
• Outside catering page to include image sample of food and testimonial's page
• Fast food / Farmers Market page to include images, sample menu and link to the Farmers Market website
• Better suppliers links setup
• Accessibility specification check
  
• Better Google listing

Not necessary:

• Complete overhaul

Pages Required:

• Home page
• Sample menu
• Outside catering
  
• Sales day page
• Farmers Market
• Third Friday Night and 'other' events
• Contact page

Aesthetic:

• Clean
• Clear
• Simple
• Blue and maroon color theme
• Logo complimenting colors

Other items that the client wishes to receive:

• The website itself – as a series of HTML pages;

• Documentation - a list of the pages along with a map of how they fit together;

• Clear information on how Food Dreckly staff can update and manage the site in the future

• A clear indication that the code has passed accessibility requirements.

The Brief Set

For our Personal Development project we were asked to obtain or create semi professional briefs. Because I felt that a previous project of mine was in need of a major over haul from a server side point of view, and because the client felt so also I asked for a brief off of them. The following is what they sent me:

---------------------------------------------------

Website Design Brief

Overview

Food Dreckly currently has a website which is in need of revision and updating. We do not feel that a complete overhaul is required but definitely new text, changes and additions to the current web page layout and better links to other sites. The website is promoted in all our publicity and therefore it is of paramount importance that in the future a ‘non techno’ member of staff can easily update the site to reflect changes to the business.

Aims and Objectives

Food Dreckly is a proactive food business with a growing reputation for quality food. We would hope that our website will act as a ‘shop window’ for the business providing potential and existing customers with a ‘taste’ of what we do and how we do it. To this end we want the site to demonstrate the Food Dreckly:

• ethos – the use of locally sourced, high quality and seasonal ingredients, often organic and where that is not possible the use of fairly and ethically traded goods.
• attitude – relaxed with a touch of humour, knowledgeable and enthusiastic about the food on offer.
• menu – high quality, traditional (with style) and innovative dishes, affordable;

Audience

The intended audience for the website is likely to be:

• existing customers - wishing to find out about events, sales days, outside catering and contact details.

• potential customers – those who have read about us in marketing, promotional or media material or heard about us from friends.

• Other business’ that are looking to sell us their products or services or create mutually beneficial links. This might be potential suppliers, other tourism business’ or even our competitors.

• We recognise that most of our clients are professional people who are looking for high quality and healthy food in an informal atmosphere. This group also eats out at other more expensive venues and has quite high expectations of service. The age range is probably late 30’s upwards and includes an increasing number of retired ‘comfortably off’ customers.

Design Specification

Clarity, cleanness and simplicity are crucial to the feel of the site.
Font - We have an existing logo using the colours blue and maroon. Staff uniforms include blue polo shirts and maroon aprons. Any font or colour used needs to complement this existing logo and colour bias.

Picture – we have a small library of pictures that can be used. The current site only uses pictures of food. Pictures of the café, the farmer’s market food stall, suppliers, Dartmoor and the Tamar Valley area and outside catering events should be included. The use of high quality pictures is very important as we are appealing to professional and often artistic customers.

Other Café Websites

http://www.bunkersbeachcafe.com.au/breakfast.html - this has a modern style, plenty of space and looks professional. However it does not give a feel of the food or place itself.

www.porthminstercafe.co.uk - an example of a good title bar but a far too crowded and messy layout

www.venuscompany.co.uk - an example of good information but very old fashioned design

http://www.wilfs-cafe.co.uk easy to navigate, fast and informative but no finesse or artistic merit

http://www.blue-bar.co.uk a modern feel and relaxed but still a bit messy

http://www.watergatebay.co.uk/thebeachhut - slick and possibly a bit too clever for its purpose

Functionality Specification

Navigation: We already have a clean and functional title bar that will helps the customer to navigate the site quickly. However the quality of the logo is poor and takes up too much space, it is dwarfed by the strong font of the strap line.

Home page the existing page needs to clearly show that there are three arms to the business, these are: the café, outside catering and Farmers Market stall. There also needs to be a ‘Contact us’ provision. We suggest using a picture of Dartmoor or the Tamar Valley on the home page to reinforce our pride in the area.

The café opening page to include: existing text to set out our ethos, a picture of the café, a map to the venue and opening times, this page should have links to a:

1) sample menu,
2) Third Friday Night and other events
3)Ward and Chowen cattle sales days
4) details of media coverage
3) contact us

Outside catering opening page to include existing text and picture of a buffet or sample dishes. 1) A link to testimonials from past customers would be desirable 2) contact us
Fast Food /Farmers Market opening page to include picture of the stall in action, sample menu and link to Farmers Market website.

Supplier’s links to our supplier’s websites need to be better integrated into the text
Accessibility Specification

The current web site is no longer easy to access on Google, the inclusion of the Food Dreckly name on the web sites of others has pushed our own website down the list. It is very important that the search engine ranking is increased to improve our accessibility. The work of the designer will not be considered complete until the website is checked for accessibility using one of the popular tools

Deliverables

By the end of the contract the following work must be delivered:

• The website itself – as a series of HTML pages;

• Documentation - a list of the pages along with a map of how they fit together;

• Clear information on how Food Dreckly staff can update and manage the site in the future

• A clear indication that the code has passed accessibility requirements.

Budget

The budget for the website is very limited and we do not wish to incur expensive after care, hence the lack of interactive elements. To this end we would require the website designer to include all likely costs within the work including any changes we make during the process.

Copyright Statement

We require a clear statement of the ownership of copyright over the pages, code, content and images created or used in developing the site. In particular, you should ensure that rights over the coding of the pages remain with Food Dreckly.