Client Project - Complete

The Colwyn Bay Hockey Club website is now finished and ready to be handed over to the client.

It's a full WordPress site build with HTML5 and CSS3.

It will hopefully be found under http://www.colwynbayhockey,co.uk over the next few weeks too.

Posted via email from City&Wool's Posterous

Client Project - Validating

It's nice when things work out and you see the green bar.

Posted via email from City&Wool's Posterous

Client Project - JavaScript Disabled and Out-of-Date Browser Warning

As you know not all browsers fully support HTML5 and CSS3, and since I’ve been coding my client project in HTML5 and CSS3, I’ve needed to add in a few extra features to tell the user to upgrade their browser with a short error message below. Example if the user is using Internet Explorer 8 or later –

!html

Also since the website uses a large chunk of JavaScript to create the weather widget, I’ve create a simple no script message. If the browser has JavaScript disabled –

!html

Warning – Your Browser has JavaScript disabled. Please enable Javascript to make full use of this site.

If sure there are better ways of going about it but here are two very simple examples.

Posted via email from City&Wool's Posterous

Client Project Mobile Site Using WPTouch Plugin for WordPress

WPTouch works brilliantly with my client porjects site! I've just selected the news page so club members can get their news on the go. It also includes a switch to the full site too.

See the full gallery on Posterous

Posted via email from City&Wool's Posterous

Client Project Gallery Plugin for WordPress

In searching WordPress for a gallery plugins for my client project, I've come accross the NextGEN Gallery. I have used this plugin on a previous project and found it's ability to batch process images really helpful. It can crop, resize, create thumbnails, add watermark and create various galleries and albums which can all be adjusted through the plugin's settings. The gallery's supports lightbox box too which you add via another plugin.

I will also need to look at the images within posts and create thumbnails for them to be used in the blog posts.

Posted via email from City&Wool's Posterous

Further Client Updates

Today I finished the sites footer. I've added in an admin login section which replicates the login method of navigating to /wp-admin. This was done using the following code -

Once logged in, a simple dashboard appears allowing the user to access the full dashboard -

I've also added a simple but stylish jQuery scroll to the top button. The 'Top ^' links to '#top.' I'm also using the Google Code link to the latest jQuery file.

Posted via email from City&Wool's Posterous

A Look at WordPress Plugins For Creating Mobile Themes

One of the many positives for using WordPress as a site's Content Management System is its ability to install plugins. With 13,944 different plugins available it can be hard to find the right one for the job. In my case I want to look for plugins that assist in the creation of a mobile optimised version of my site.

Step 1 - Search the WordPress Plugin Directory for keywords such as 'Mobile'

Step 2 - A good tip for finding the best plugin is to search by 'Most Popular' or 'Highest Rated'

Step 3 - Find the best plugin, download and install!

Here is a short list of the 3 best plugins for optimising your website for a mobile device -

WPtouch

WPtouch automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from iPhone, iPod touch, Android, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices.

The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site to touch mobile visitors, without modifying a single bit of code (or affecting) your regular desktop theme.

The theme also includes the ability for visitors to switch between WPtouch view and your site's regular theme

WordPress Mobile Pack

The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site and blog.

It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

WordPress Mobile Edition

WordPress Mobile Edition is a plugin that shows an interface designed for a mobile device when visitors come to your site on a mobile device.

Mobile browsers are automatically detected, the list of mobile browsers can be customized on the settings page.

My Final Call
After looking at the plugins above, I've decided to use WPTouch for my client project. This is because it provides a more concise mobile version of the website and its design is modern and simple for all types of mobile devices. I also like that this plugin provides the user with the ability to switch between the desktop version and the mobile version of the site. For me this is important as sometimes I still want to view full sites on my mobile device.

Posted via email from City&Wool's Posterous

Header and Featured Post for Client

I've spent the afternoon tidying up the header and featured post section of my client project.

I'm using a custom file for the home page entitled 'myfront.php' which will include a featured post. I'm hoping to add a little show/hide jQuery to the featured blog post and I need to sort out some PHP which will applies the image contained within the post as the background image. I may have to create a custom field within the post for this to work.

I've pulled the search bar from the header from previous designs as it cluttered the header a little. I've also increased the space between certain sections of the Twitter bar, side bar and featured post. I've also improved the CSS3 features on the navigation buttons and on the Twitter bar.

Posted via email from City&Wool's Posterous

A Few More Client Developments

I've now managed to put in my weather side bar into the main design. I'm also looking at putting the fixtures below it which is currently been done by using an iframe from a mobile optimized site - http://www.fixtureslive.com/mobile/whatson.asp?ClubID=949 however I don't feel the style of it fits in well enough so I'm looking for alternative methods to display their fixtures.

Also I've created some sub pages which will be hidden from the main navigation bar but will be displayed in a side bar within its parent page and in the footer for quick access. I've also managed to display some sponsors/links which will slightly enlarge on hover through applying some CSS3 transitions to the images.

I'm also wanting to add an admin log in on the right hand side of the footer.

Finally just a basic overview of how a the nav and footer differ from each other with what it displays and the side bar which will include the sub pages. As you can see it's not styled correctly yet.

Posted via email from City&Wool's Posterous

Pipes, JavaScript and the Weather

Using Yahoo's Pipes, I've managed to display the temperature and weather from a JSON feed.

'Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.

Like Unix pipes, simple commands can be combined together to create output that meets your needs:

• combine many feeds into one, then sort, filter and translate it.
• geocode your favorite feeds and browse the items on an interactive map.
• power widgets/badges on your web site.
• grab the output of any Pipes as RSS, JSON, KML, and other formats.'

Now not only does the background image change, the temperature and weather text also changes too.

This will now be integrated into my client site which I'm currently developing.

See the results

Posted via email from City&Wool's Posterous

Ever Wondered What the Weather's Like in Colwyn Bay?

The weather in Colwyn Bay is currently...

By clicking on the link above you've just found out the weather in Colwyn Bay, North Wales. This is thanks to an RSS feed from the Yahoo API and some jQuery to change the div's class according to the weather!

Thanks to an article on Line25 entitled Style Your Site According to the Weather with jQuery and some extra code from this article - http://lawrence.ecorp.net/inet/samples/regexp-format.php to make sure it also removes forward slashes from the RSS feed, I have worked out how I will integrate my weather display into the Colwyn Bay Hockey Club website.

I'm also hoping to pull the temperature from the RSS feed too so you know what type of weather it is and how hot/cold it is too.

Posted via email from City&Wool's Posterous

Client Project - Why I've Chosen to Use WordPress as a CMS

Firstly it's easy to install, given that your server fill the requirements, it's convenient for all types of users to use, instantly publish any content and it offers a wide collection of themes and plugins that can be used on any WordPress powered site.

As I have used WordPress on a previous project I am more familiar with it than any other Content Management System like Joomla or Drupal and although there are many other types of systems on offer, according to Google WordPress in shown to be more the larger trend of the three. 

Posted via email from City&Wool's Posterous

Client Project - Update

Slowly getting it all together by integrating it with WordPress

Posted via email from City&Wool's Posterous

Client Project - Coding

Currently coding up my Colwyn Bay Hockey Club mock up.

I'm using HTML5, CSS3, Google Web Fonts and using WordPress as my Content Management System. The image above is just the start of the HTML page before separating the file into individual PHP files for WordPress.

Posted via email from City&Wool's Posterous

WordPress Integration - Client Project

Once I've received feedback from the client on the developed mock up, I will be able to roughly finalize the design. In the meantime I've just been trying to get my head around the structure of the site and how it's going to work as a custom WordPress theme.

I've been using these for some guidance -

Building Custom WordPress Theme

http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/

How To Create Your Own Custom WordPress Theme

http://line25.com/tutorials/how-to-create-your-own-custom-wordpress-theme

Building a Stylish Blog Design Layout in WordPress

http://line25.com/tutorials/building-a-stylish-blog-design-layout-in-wordpress

How To Create WordPress Themes From Scratch Part 1

http://themetation.com/2008/07/14/how-to-create-wordpress-themes-from-scratch-part-1/

I'm also hoping to integrate some of the new HTML5 and CSS3 features too -

HTML5

http://diveintohtml5.org/

HTML 5 Cheat Sheet (PDF)

http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

CSS3

http://designshack.co.uk/articles/introduction-to-css3-part-1-what-is-it

CSS3 Cheat Sheet (PDF)

http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

Posted via email from City&Wool's Posterous

Colwyn Bay Hockey Club Development

Just some small developments on the second mock up after receiving some feedback from my client.

I'm now needing to look at the structure and layout of the site to integrate with WordPress.

See and download the full gallery on posterous

Posted via email from City&Wool's Posterous

Client Feedback - Colwyn Bay Hockey Club

Email correspondence from my client after sending the four mock ups -

'Had a chance to look at them all in more detail now - I like them all for various reasons but I think a version of the 'mockup 2' design would be the best to develop.

I like the color scheme, it looks fresh, clear and easy to navigate, I like being able to see the league table of one of the teams on the front page and also the news banner which is a really useful tool for us.

Some areas to try and develop on that design that would be useful for us would be to somehow incorporate the facebook and twitter links you had in 'mock up 1'- we have a facebook page and this could be a useful place for discussion etc therefore a facebook link is certainly useful. They don't have to be as big as they were in 'mock up 1', but would be useful to have them there.

Secondly - A minor one but could you add a tab for 'Youth Academy' this is quite important for one of the main admins on the site.

Thirdly if the news banner could be made more prominent - I like where it is but is it scrolling across? or flying in or just static? If you are able to make it scroll in some way I think that would draw in peoples eye.  Again apologies if you have already thought of this, I appreciate it is only a static image you have sent.

Finally the picture of Tom - eventually this would be a great place to feature a sponsor picture but in the mean time I think it would be great if we could have a series of pictures (say 5) similar to the Tom picture and each time you went to the home page a different picture from the 5 would be displayed - there are quite a few good quality pictures now from a professional photographer we could use or I'm sure Tom could set some up similar pics to his with some other players.'

Summary -

• Mock up 2 will be the one to developed
• Include Facebook and Twitter links to the design like in the first mock up
• To include a 'Youth Academy' page - All menu titles will be changeable anyway, as the site will be powered by WordPress
• News banner to be more prominent - Possibly scrolling, although could look a little 'cheesy'
• Picture next to the weather/temperature element to change each time the page loads. I could also change the picture to correspond with the different types of weather/temperatures

Posted via email from City&Wool's Posterous

Colwyn Bay Hockey Club Fourth Mock Up

• The final mock up of the 4 wireframe designs
• The possibility of a left sided navigation menu, which would animate to display sub pages
• Content on the right side rather than left. Although I prefer the content on the left side
• Footers are all simple and clear

Posted via email from City&Wool's Posterous

Colwyn Bay Hockey Club Third Mock Up

• Another limited heading version, just testing the strength of the logo on its own. Prefer navigation on left.
• Don't think the icon/emblem can stand on it's own without the title. Maybe use just logo for mobile version of site?
• Main news highlight larger for emphasis.
• Tables on left too heavy. Personally prefer on the right.

Posted via email from City&Wool's Posterous

Colwyn Bay Hockey Club Second Mock Up

A few differences to the first mock up -

• Slightly more basic header, all centralized
• Search functionality and pitch temperature lower and more prominent
• Pitch temperature image to change with different temperatures or weather types

Posted via email from City&Wool's Posterous