Website Final design & production.

I’ve been playing around with the design still and i’m still settled on on the latter from the previous post. This is the final template which I think i am going to use, I’ve added the Raleway font and picked a colour rather than black as it should stick in people’s memories more than black text, in the colour grading stages of video i like to exaggerate the red’s and blues stylising the feel of the film more, so i chose a pastel red that i’m happy with.

I think it’s really sleek and simple, it pictures my four videos that I will eventually have completely finished and has a contact section to it which is all I need for now. I’m happy with this design and i think it presents myself and my work in a professional manner and will be a step for me to enter into the world of full time employment or freelance work.  Now I need to start implementing it into a program to get it up and running.

Production of site

from having seen the wordpress compilation of theme’s it got me thinking as to how I will actually get this site live. As it’s the first one I will ever make there will undoubtedly be problems along the way which I really can’t afford to spend time on. Initially I was thinking that I would be producing this in Dreamweaver, i’ve been trying to design it and have been running into all sorts of problems pretty early on.

I’m not sure what I was thinking when I thought I would be able to just knock up a page no problem but i’m stuck already on how to even position an image?

I found this video which seemed to help with the problem so far:

So what I’ve done is essentially use a whole bunch of images. The title, thumbnails, border lines  and contact button. It’s taken nearly six hours to get here and i’m struggling to understand what the actual best way to set up the site is. Is it best to use only images? will using absolute positioning mean that when you move around the browser window the site won’t resize?  how do i get anything to resize? will it work in any other browsers? how do i test that? what’s the best coding language to use? I’m just starting to learn that there are all these factors that I HAVE considered, but thought there would be easy fixes to. Finding adequate resources online is so time consuming that Ill spend the remainder of my time trying to set this up and not finishing the videos.

I found a nice article on Net.tutsplus which talks about the basic build from photoshop design to the template in dreamweaver, but i think i’m just being overwhelmed with information.

6th May *UPDATE*

I’ve been speaking to one of my web designer friends about my predicament of the impending deadline and the need to centralise my work. The solution seems to be to work from a themed template in wordpress. I knew this was an option to begin with but I hated the idea of taking a design and just showing your content, for me it just didn’t seem like something I really wanted to do…however this was before I really knew the level of customisation that the user could implement themselves, Essentially I would be working from a blank canvas if I really wanted to, the whole design can be mine to change without the trouble of having to worry about testing the site, resizing things etc, all the parts that i’m not too knowledgeable of have already been taken care of. I also saw this video tutorial and thought….why not? time’s ticking and I need a website up and running.

Prior to getting started I tried to look into ways of creating my own template on wordpress, but again this seemed too basic a starting point to comprehend how to get the final design altogether. but here is the link I looked at.

So after watching them, I restarted them and followed the instructions as he went along.

So instead of using 101.com which he uses for his website hosting service, I followed a link I had found on wordpress that listed there most trusted and recommended hosting servers and chose the top one (the post can be found here). So I went with Dream Host which offers a one-click-install for wordpress and seemed like the simplest host to go for. So I chose my URL initially going to mikesteven.com but it was taken already, so I went with mikeysteven.com which i actually prefer, it offers a more memorable name i think and is a little more playful than mikesteven.com which sounds about as boring as a dentist’s website. I literally followed all these instructions without fail, downloading filezilla to connect to my ftp and transfer files like the theme templates etc, setting up mysql etc etc.

This isn’t to say i didn’t have problems, when i was registering my URL I only paid for a  small monthly fee which didn’t give me full access to set up my own database, this confused me for an hour or so until I figured out where I had gone wrong, paying a higher fee allows you to do this. Next I didn’t need to upload the theme to filezilla as the host would do that through their admin dashboard, so although i didn’t need it at this stage it came in handy later on when wanting to cusomize the site.

The theme I went for was “imbalance” which is displayed a few posts before, it seemed like the most similar to the design I had made in photoshop so this was the one i uploaded.

So above is what you start with. from here it’s really a case of customising the options as you please, and there were a few things that I wanted to get rid of and change to make it look like the design i made in photoshop.

Changes I want to make

- Customising the menu down to three pages (Home, Contact, About me)

- Changing the logo/header at top of page

- Removing the subscribe feature (this is really a blog feature)

- Removing the preview of post when you hover over the images on the home page

- adjusting the opacity of the home page images when you hover, to a higher opacity

- Removing post information, date/time/category etc from the sidebar and below (all features associated with blogs)

- Getting rid of the comment boxes

- Removing the the tags at the footer of the page (mikeysteven all rights reserved etc)

Editing the theme

All these changes are really removing the features that are commonly found on blogs, thus making it look more like a portfolio website. I found fairly quickly an FAQ for the imbalance theme which helped a lot with changing little features. Firstly though I was recommended to use a child theme, basically what this is, is a copy of your main theme, an identical replicate that you have all the files to edit as you please. The advantage of using a child theme is that when the creator of your chosen theme updates it, your files are saved and all the work you put in making it look the way you want aren’t deleted with the updates.

I found a really great article here that gives a detailed walkthrough of how to do this which made the entire process a lot easier.

It also rather helpfully provides a little tutorial on how to edit this theme once you’ve created the child. This was showing me where in my wordpress dashboard I could manually edit HTML to customise what I wanted! so I couldn’t have found a better site to start me off with the editing stages, as before I wasn’t sure how to do this. So I followed the tutorial and tried to edit something of my own using relatively the same idea i went for changing the colour of the little bar that sits under the “Home” and other page buttons.

As described in the tutorial i’ve used firebug before to view page source information, a web designer showed me how years ago in my first job for a finance company, and ever since it’s still been installed into firefox so I knew exactly where to go for this which saved some time.

So the basic principle is as explained in the tutorial right clicking on areas of the page you wish to see the code:

This was the area that I wanted to change and with that you can see the code that needs to be changed even with the colour code next to it (without the score through it, this happens once the main HTML has been overridden by the HTML that I use):

After this it’s a simple case of placing that code into my dashboard> Appearance> Editor>

I tried to make a habit of commenting on everything I did so that I could edit it later on if needs be and actually know what it was I was changing. Then if you go back to the property inspector in Firefox you can see your changes:

In this case I changed the colour of the underline to match the header image that I wanted placed in there.

This whole stage was pretty revolutionary for me as I was actually making custom changes to my website and slowly forming the template I had designed in photoshop, which was really exciting. So one by one I was making changes to the site slowly but surely, however i still had to use huge resources to try and find the areas which I wanted to make changes to, it wasn’t always as simple as finding it in firefox and editing it that way. Here are the two main forums and FAQ pages that related specifically to the “Imbalance” theme:

Wp Shower, Old discussions

Imbalance, Archive

These turned out to be pretty invaluable in terms of finding little snippets of information to help me move along with the site, it wasn’t always something that worked but a matter of trial and error helped me along.

Another site that helped a lot was the wordpress support forums where I got my most important piece of code:

So combining this “display: none;” HTML with the root code on firefox there were are few things I could turn off pretty easily:

 

The last one just takes away the page title from the body of the page after it’s been navigated to. So this was slowly getting me to where I wanted to be here are the rest of the small changes i made:

This changed the opacity of the images when the mouse hovered over them, so now instead of barely showing up there is a subtle tint that covers the image, indicating to the user that it can be clicked on.

I also wanted to change the colour of the lines that border the images above and below, for me they were slightly too faint so just choosing a darker shade of grey i pasted that code in and they now they are much more noticeable.

The header originally was looking like this which wasn’t what I wanted from the photoshop template:

and when i tried to change it to the three line format, by simply uploading a new header image in the wordpress dasboard it just overlapped the navigation menu:

So again using firefox and trial and error this snippet of HTML got it looking the way i wanted. It essentially is just adding more distance between the header container and the the body of the page allowing for more room and a larger title:

Moving this around then left me with an inconsistency between the heights of the two border line above and below as you can see:

Clicking around the site with the property inspector found me this code which managed to fix it:

And lastly centering the images together so there is an equal space between using:

The main problem that I had with creating this site, I haven’t yet spoken about. The theme itself starts with three columns and in mine I needed four. Displaying one underneath just didn’t look neat enough and this was one feature that I just couldn’t change or find out how to, no matter how long i looked on any forums. Firstly I tried playing around with this code I found on the wordpress site:

This looked as simple as just putting it into the dashboard editor but it wasn’t the case. I tried playing around with the javascript that’s mentioned in the comment above the reply, by looking at the columnize.js and replacing that file with an edited version that I changed in textedit and transferring it through filezilla into the child theme’s root files:

It just did nothing. I spent around eight hours searching for solves on forums and blogs but nothing that I found worked for me and although I didn’t want any assistance creating this site I had to ask for help from a web developer friend. What he did as he explained was to edit the java script itself but also the PHP which I have no idea how to use. I was on the right tracks with columnize.js and looking at the “container” coding through firefox:

But I think what I was trying to do was edit the li_cont styles which are automatic jquery templates or something. They are simply added automatically as I create new posts so editing them wasn’t doing anything. This is different from the container files that I have posted above to change the height’s of the header etc, they seem to work off different parts of the page.

With this done the site was virtually complete. adding posts and content was the easy part as it’s the same as writing what i am here. Just using the embed code from vimeo I could add each video to the page as I wanted as well as editing the size of the video that it was watched on. I’m so happy with the way It has turned out and especially so that it has been from my original design. The menu obviously is a change but an advantageous one, the site offers more flexibility in the future for adding content and i’m now happy with editing the style as I please over the coming years.

From concept:

To a live site:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: