Been a while since I’ve posted, had some downtime on the server and also potentially three new projects in the pipeline (nice) and have been designing some new themes for the site. Anyway, for a long time now I have wanted, thought about, and considered the possibility of running my own movie review site. Why? I hear you scream. It has not entirely escaped my notice that IMDB and Rotten Tomatoes are already out there, not to mention around about twenty-bizillion other review sites, some of which are rather nice.

The full idea of what I want to do and to achieve is not fully formulated in my head just yet – but so far my thoughts are thus: One of the reasons I loathe the a fore mentioned two big hitters is the brash and unconsidered approach to the way they present reviews and discussion. I have had a wealth of experience using both sites and there is too much love and hate going on. Now, I really like movies, I like them more than music, television and even games; it is my preferred choice of pass-time. But I find it impossible to engage in any respectable level of discussion on either site; not to say that it is impossible to do so, but it is a challenge. Most of what is worthy of discussion is lost in between childish bickering and nonsensical trolling. I personally feel anyone who says that The Godfather is the worst film ever made needs to be sectioned, unless they can provide a stand-up reason for that statement. And that is what I want. I want a site where people can, and can only, represent their views on movies through sensible and detailed discussion.

A site which caters only for true fans of films, people who love films. I want to sweep aside the crass hate, the unfounded love and outright arrogance of those sites to be left with people who can appreciate any film whether it is Gone with the Wind, or Babe: Pig in the City. People who want to share their thoughts and feelings on movies and who have a passion for writing.

Currently this idea is taking up comfortable living quarters in my head. If anyone wants to add ideas or offer some help then I am all ears.

(Had to put this project on hold as i’m working for another company at the moment – But I will return to this as soon as I can as it is something i’d love to do.  I will also be looking to completely overhaul my site design in the coming weeks/months. I like having a blog, but I don’t use it enough – so might look to create a portfolio site and then have a separate blog. Decisions.)

Nevertheless, an overall sense of a job well done from both ends of the project – Miles is very happy with this new site, and I am very pleased with what is essentially my first start-to-finish web design. We decided to go with a WordPress base for the site, despite the clear lack of “blog” features , and only a total of two pages.

That decision was taken by me for one reason alone: ease of use. Miles doesn’t have any coding experience or know-how and so rather than force him to learn HTML or follow templates or documentation, I felt it would be more productive to try to take as much, if not all, of that aspect of his website away from him. This made the entire site creation fairly straight forward.

Miles’ site updates dynamically through a powerful plugin called TubePress, which pulls in his channel from Vimeo and displays it all on one page. Miles only has to upload a new video to his Vimeo account and it updates automatically on his site; which is something is he more than happy doing. It did take a lot of the complications away from me, but it does offer a stable and accessible method by which Miles can manage his website’s content efficiently.

Other snippets of code on his site includes an @font-face heading, a CSS3 div-box-shadow, which although not fully supported by all browsers, offers a touch of extra style to those with modern browsers. The contact page is very similar to my own (on the Feeling Pinky theme), making use of ContactForm 7 another terrific and simple plugin.

Brief Overview

• Full website design and code
• Stylish aesthetic
• Dynamic video updating
• Clean, light and resource friendly
• Some use of advanced/CSS3 mark-up
• Basic SEO
• Full future site support from me

If you are looking for a talented, experienced and skilled video editor then please pay a visit to www.milesmurphy.co.uk

Having looked at all the designs, a few elements were discussed in length before i sat down to attempt a final design.  First of all, design concept 3 was fairly quickly dropped; Miles wanted to have thumbnail displays for the videos rather than a list. Which left design 1 and design 2 open for evaluation.

It was agreed that design 1 was probably the most visually appealing, but Miles liked the “personal” touch of having his image underneath his sub-header as if delivering a direct quote. It would be sensible to point out at this point that Miles wanted a limited website, no “About Me” page or extensive navigation; just his work and a way to contact him.

Design 2 also incorporated a “social” tab linking to Miles’ profiles on Youtube, Vimeo, LinkedIn etc. As this is to be a video site I felt that allowing people to choose where to view his videos was important – and it also offers people to opportunity to subscribe to his channel if they so wish.

So essentially, the final design should have the aesthetic of design 1 but the more personal feel of design 2. And so I threw both into the meat grinder and came back to Miles with this design:

Click for Full-Size

It is now up to me to decide how to code the site. That’ll be next.

Miles has been working as a video editor since moving to London after completing a Media Production degree and now has a body of work that he wants to be able to show potential new clients/employers using a simple, clean and sleek online portfolio.

After looking into some “50 Best Video Profiles”, and the like, inspirational articles dotted around the web I started pulling together some design ideas.

Here are the three i proposed to Miles; I wanted him to pick the elements from each that he liked and then work from there.

This project came about when Rob’s new website design went live and I decided to take a look into the website code; as the website to all intense and purpose looked to be a blog site – and I’m always interested in other peoples coding techniques.

I was quickly surprised to see that although the site had the aesthetic of a blog; it was in fact a standard HTML and CSS site involving many HTML pages and over complicated CSS style sheets.

Original Index Page (click for full size)

Original Single Page (click for full size)

I contacted Rob via Facebook and proposed an entire recode of his site design into a more manageable WordPress site. By Rob’s own admission he leans far more toward design than code and was glad to accept my request.

The site was built within a fairly tight deadline as Rob had been already adding in content to his old site in order to build an online presence and wanted to continue doing so as soon as possible. The entire process from first proposal to completion took just under two weeks some time was lost due to re-hosting the website and a few other factors. The site took approximately 10-15 hours to fully implement.

Brief Overview

• Total site recode to a three-column WordPress site
• Reduced HTML code from approximately 1200 lines to 300 lines
• Reduced over 8000 lines of CSS across 16 style sheets to just 200 lines on one style sheet
• Reduced over 40 W3C errors to a complete pass
• Used a work-around to separate post text and post images from the_content
• Produced detailed documentation for Rob on using WordPress CMS, and provided HTML templates to create posts and news items

Obviously the most important part of this site design was that it completely streamlined the entire process of adding content to the site. Whereas Rob had previously been coding up individual HTML and CSS pages and then manually adding/removing content from the main index page and category pages, he is now able to just concentrate entirely on post content. The coding side is mostly now out of his hands, thanks in part to the powerful WordPress architecture.

Visit Rob McCarthy’s Website here: www.robmccarthy.co.uk

First things first, It would be terribly wrong of me not to mention Elliot Jay Stocks and his Starkers WordPress Theme. Anyone looking for a solid foundation to begin WordPress theme designing need look no further. It gives some sensible CSS resets and puts in place a basic outline of WordPress mark-up for you to tweak and make your own.

And we’re back.

I will not go into great length about the process of building a blog theme (there are many excellent sites that already provide this including WordPress themselves) but I would like to brush over a few techniques I found useful and hopefully others will too.

Image Rollovers

One thing I really don’t like seeing on any website is the momentary flicker when a div changes from one image to another. Call me pedantic, but even with fast internet, it just looks bad. I used a really basic and simple solution when designing the Michael Howlett logo, and I will probably never use the two images method again.

It’s pretty simple; this is how the logo looks.

See, it's just one image

Take some care in this as you need to make sure the dimensions are exact. Here the image has a width of 430px, so make sure both images are exactly half of whatever width you are using otherwise you will get slight shifts.

Then simply use this code inside a Div, and give it a class.

{code type=html}{/code}

Then in your Style sheet use something like this
{code type=css}a.rollover{
width: 215px;
height: 30px;
display: block;
background: url(images/Image-name.png) top left no-repeat;
margin: 10px 20px;
}

a.rollover:hover
{
background-position: -215px;

}{/code}

Pretty simple eh? Just declare the width of the rollover as half the total image width, then add a negative of that value to the rollover. Now, no more stupid micro-second flicker every time I hover over a link.

WordPress Post ID

Prior to version 2.8 The Loop, as a standard, offered one class and one id for each post – the class of “post” and the id being the post number so something like “post-341″. With a new syntax it is now possible, without the use of plugins or extended code, to give each post a class depending upon its category or tag. So rather than having to declare styles for each post using its id which would be insane you can now style posts depending on what category its under.

Most people will have this, know of this etc etc but for those who don’t and want it, just replace the old code of
{codetype=html}

{/code}

Post Thumbnails

Again, as of WordPress 2.8, an inbuilt ability to add thumbnails to your post list was introduced. Something that should have been put in place a long time ago me thinks. Prior to this you’d need to get plugins, fiddle and faff about with custom fields and all that, which is a long winded and needlessly complicated way of doing something simple.

Firstly, check out the WordPress codex on Post Thumbnails. But I will quickly go over the basics of what needs to be done to enable post thumbnails.

Firstly, insert this code into Functions.php before the closing arrow bracket (this will allow for the “post thumbnail” box to appear on the bottom right of the post/page creation window on WordPress.)

{codetype=html}add_theme_support( ‘post-thumbnails’ );{/code}

Then you need to add the code to your Index.php file within the loop. Here is how my posts are set up to be displayed:

{codetype=html}

adambrown.info.

Lastly for this post, I will show you how I used alternating classes to achieve the layout of my archive and search results pages. This is very useful if you wish to have alternating styles on posts – some people like to have the background colour change, or have the post title switch from left to right aligned. Anything you want.

in my case, I wanted the archive to be displayed in a two column style and this was just about the only means I could figure out to do this as the Loop usually just spews out the posts as it likes.

First, add this to the Funtions.php
{codetype=html}$odd_or_even = ‘odd’;{/code}

Then you need these two separate lines to be placed in or around the loop

{codetype=html}

“>

id=”post-“>{/code}

This code will give each post either odd or even class, as well as the more expansive Post ID I mention earlier. Its then up to you how you wish to style .post-odd and .post-even in your CSS. I merely floated one left, the other right and declared a width and min-height to conform to my layout.

I think that’ll do. Any questions at all, feel free to ask.

]]> http://www.michaelhowlett.co.uk/feeling-pinky-code/feed 0 http://www.michaelhowlett.co.uk/feeling-pinky-theme http://www.michaelhowlett.co.uk/feeling-pinky-theme#comments Mon, 26 Apr 2010 14:08:44 +0000 Michael http://www.michaelhowlett.co.uk/?p=196 I have published the new theme for my blog, unable to think of a clever or funny name I’ve decided to call it “Feeling Pinky”. It is still under the final stages of development, just ironing out the creases which are bound to appear the more I add to the site.

I will just run through some of the design features and some of the changes I’ve made from the Photoshop mock-up I discussed in my previous post.

Click for full-size

As you can see, I didn’t strictly follow my own design guide. Several reasons are behind this; to start with I didn’t really like the bulky feel of the site with the slate like title, heavy black bordering boxes. As I began to implement the css for the site and actually look at it as a website I felt it was too overbearing with large headings and text. My original thinking behind the design was for something fairly compact, but with enough white space to give it an airy feel.

So, with that original thought still in mind, I decided to uniform the text and heading sizes, remove any extra text styling and stick with 1em Arial – if it aint broke, don’t fix it. I set about reducing the size of the black boxes (I say black; they’re an incredibly dark red – pretty unnoticeable.) I added in dotted borders to separate elements within specific areas; within lists, under the main body of text yarda yarda yarda.

The intention to create more themes of varying nature is still on the agenda, but how I display them will be reconsidered. It is very likely have a list within the sidebar or footer – which will be a constant across all themes I design – and then have a dedicated ‘page’ to display the theme and give relating posts regarding their creation.

The next post will go more in detail some of the coding decisions, after all, that’s more my game than designing.

]]> http://www.michaelhowlett.co.uk/feeling-pinky-theme/feed 0 http://www.michaelhowlett.co.uk/basic-theme-initial-stages http://www.michaelhowlett.co.uk/basic-theme-initial-stages#comments Sun, 18 Apr 2010 16:32:55 +0000 Michael http://www.michaelhowlett.co.uk/?p=102

I have drawn up a basic design in Photoshop for a new theme for the site. Once again i have taken creative measures in naming this theme – “simple”.

My hope is to make this the ‘default’ theme for the website; it is clean, simple and uses all the familiar elements for a WordPress blog. I will also reserve space under the header to display “alternative theme” screenshots for front-end users to browse and choose a theme which best suits them.

The Photoshop mock design is largely used for me to see the individual elements of each section of the header, main-index, sidebar and footer in order to quickly turn into a code.

When i first got my hands on WordPress and began developing my own theme i neglected this stage of the process – and in hindsight can now see how imperative a design, even a basic one, can be in streamlining the entire coding process. Using a grid base to layout the design has also drastically reduced the time needed for additional spacing tweaks which plagued my prior design (which i have since deleted in disgust…), with a uniformed layout the need to add individual padding and margins will not be necessary.

Some elements will need to be considered during the mark-up stage of development but the vast majority of this design is now ready to code.

]]> http://www.michaelhowlett.co.uk/basic-theme-initial-stages/feed 0 http://www.michaelhowlett.co.uk/new-theme-up-more-to-come http://www.michaelhowlett.co.uk/new-theme-up-more-to-come#comments Sat, 17 Apr 2010 21:17:35 +0000 Michael http://www.michaelhowlett.co.uk/?p=88 So, the new theme is done; which i have creatively named “basic”. However, it doesn’t stop there.

I used the basic theme as a learning curve and get to grips with WordPress coding and CSS and from here i plan to rapidly create several other themes which will be usable on this site. My hope is to create a a new theme from start to finish in a matter of hours. I will then utilize a theme switcher plug-in to allow visitors to the site to pick the theme which best suits them; so variety is key.

]]> http://www.michaelhowlett.co.uk/new-theme-up-more-to-come/feed 0