Overall Evaluation

My site is now Live at http://pbwebdesigns.co.uk and completely handed in.


This is a small eval from my perspective.


The website is easily my strongest design to date. I think the main reasons for this is change in approach to design mainly not being afraid to steal ideas from others and not being worried about originality. Also content and style that was used for this is something i look at daily anyway so i am already used to.


Strong elements-

  • Colour theme
  • layout
  • Typography (Kind of)
  • Social Buttons (Self created)
  • Strong use of dynamic content
  • Ease of use for Client

Weak elements-

  • Header Image (Which i created)
  • No Log in
  • Non of the Nav pages are created yet
  • Lack of Jqueary elements (could have used these for links to part of the page further down and maybe drop down menu)
  • Recent posts on post pages only show that post


Overall i am very please and look forward to the feedback i will recive there will be good and bad but i hope to take what i have learnt into the future to improve my design and Web capabilities. Expressionengine is somthing i am VERY glad we have learnt and i know will be my choice for CMS in the future. I will look at maybe fully creating this website in the future with Log in and Forums but for now it serves it purpose and i am happy with the outcome!


The Little things that matter!

Towards the end i was just chaning the little elements which made the style work. These are little elements which add up and just give it more of a professional look. Most of which was styling.


Here is a list of the little adjustment i was making towards the end…

  • Links to social media open in new tab
  • Colour of links match (There where slightly different Hex codes on some and where difficult to read)
  • Button size (had to ditch the gradient and replace with image sprite instead was harder than it sounds!)
  • drop shadow on container
  • style on blockquotes
  • padding and margins on the list pages so everything aligned
  • sizes of certain text mainly titles of threads
  • Spelling errors (Probably more left though)
  • comment background and shadow

There are more however this gets the points of the minor changes towards the end that where made for the better.


Pagination, Categories, comments and more.

One thing i noticed on my homepage was that i had a limit of 3 posts once there was more the other’s would disappear. I decided i wanted these to be able to be viewed but not be on the homepage. I researched into it and found EE pagination this made it simple as copying the EE code into the template and it was as simple as that all it required was styling however i am a fan of these buttons being small and not taking over style wise so this was simple enough.


The Categories on the Blog posts where still not working so i decided it was time to sort this out i had already created categories but didn’t understand how to place them in dynamically  I was able to find this using the EE Documentation however (Man is that a life saver!) and it soon was functioning properly. I played around with these slightly however as at first they would post in a horizontal list which messed up the styling.


Once the categories issue was solved i moved onto the comments again on the blog posts the comments part was not working so first of all i sorted this. Once the comments bit on the banner was working i needed to add somewhere to post comments. Whilst at Uni i logged onto my comp we created the Fish Admin work on and copied the Comments form code across this saved a lot of time as it was already created and only needed updated links and styling. The comments where fairly east to put into place however i spent a lot of time trying to organise them to look professional and apart of the site at first they looked slapped on and didnt fit. With more styling i was able to sort this though. I also updated the links on the comment part of the Banner so it jumped to the comments part of the page.


Although i had placed the Posts into categories and linked them up the links took you know where so i created a Blog list template which could be used for the calendar as well which would display the blog posts in that categories or time depending on where you was looking at it from. The styling was a mix of the two pages and i played around with it however i was able just to steal code from other pages making this a relatively quick process. Updated the links and then these where working aswell.


…Still more to come!!

Slideshow and Blog posts

At this point i was happy with my site Homepage it displayed all the content i wished it to in a nice format and was pleasing to the eye with it being dynamic.


Another element which i thought i managed to make the most of Expressionengine with was the Slideshow. Originally i had planned just to have this as a hardcoded slideshow that would act as images to social links. I realized after the sidebar that i was able to make a dynamic Slideshow that the images and links would be created using the channels feature. The Client now would be able to upload the image with a link in the publish content section and it would put it out the the Slideshow which has a limit of 10 on it for styling purposes. This was a feature that once again would be user friendly for a client which i had in mind for this project.


Now the Homepage was in order i moved onto the linking pages i couldnt create any of the Navigation pages as all of these would require paid for plug ins or the full version of EE. The home page is very dynamic so i felt this fulfilled the breif as it was however i wanted a few extra to test out links and get the hang of EE even more. I started with the Blog posting page. This was simple enough to do i first went back into HTML and CSS version i had and created it in there played around with style and decided on a Blog banner image with the title etc. keeping the same theme but using a header image for it. This meant going back and changing the channel fields to have an image section. This was one of the biggest problems i encountered i had to wait till i could speak to Shelley we had been taught a way of uploading images so the resized for other uses and i as i need the image to crop down for the homepage i was unsure how to do it i played around and got most of it right but didnt know how to put the image into place. Once i spoke to Shelley we was able to fix this issue however and the banner image was easy to add in.


Whilst putting the Blog page together i realised there was an issue however the Page wasnt picking up the stylesheet so all was unstlyed. I realised that i hadnt used the {Site_URL} prefix for the CSS Stylesheet  this was a simple fix which took me some time to figure out however due to not knowing how the file structure worked within a FTP.


The page soon took form however and i was pleased with the outcome.


…more to come

The Side bar (biggest achievement) (Please read :D)

The side bar is probably one of my favorite elements within the Website due to the level of dynamic content and Client based ease of use.


To pick up where i was… At this point i had a hardcoded in side bar in a template within embeds. The way i had coded the HTML meant that each “Widget” had a class called Widget which could be repeated for each one. I realised using embeds correctly i might be able to make a coustimizable sidebar with a simple drag and drop approach. I got this idea from enjin when if you want to move a sidebar element above another its a simple WYSIWYG drag and drop.


I took each widget and placed it into a new template within a template group called “Widgets”. I then went back to the sidebar and embed them instead this means if i was to hand this over to a client i could teach them which lines of code to drag and drop and if they wanted to move the clander up the sidebar it would be easy without any knowledge of HTML, CSS or EE. This to me was a very professional way of dealing with a content also making the most of the EE Embeds system allowing me to create a WYSIWYG element within a a great CMS. The importance of this meant that also if in the future the client wanted another widget it would be simple enough to create a new template insert code then just embed it into the sidebar.


After this had been moved around and i had this new layout i was able to start making the widgets dynamic as all content was the simple hard coded in content. The log in is still hard coded in but this was due to not being able to use this feature with the “Core” version i did however leave the hard coded version in as a place holder for something i might replace in the future. The recent threads i struggled with at first wondering how to achieve this but in the end it was a simple case to actually do just using the the EXp:Channel:entries then just using the Title. I started looking into the author and how you can add this feature in. I was happy to find not only can you add the author you can put in the Profile pic in aswell so using these variables i replaced the hardcoded versions with the EE ones which worked a treat but required some re styling so i spent some time editing this around however in the end i thought ill come back to style after. The posted Date and Time was easy enough with the EE tags.


The Calander was probably the hardest element to edit and get working i spent quite a bit of time trying to find a version online that would work how i wanted. I spent time with Shelley trying to solve this issue and although i got one that was telling the date the links wernt working and we had issues. In the end i was able to find in the EE documentation there “Mini Calander” which i put into place however it looked hideous (can be seen here http://ellislab.com/expressionengine/user-guide/modules/channel/calendar.html) they provided you with some CSS which i put in them changed the colour scheme around to suit my site. Now the the calendar works great and the links work showing posts within the month that’s shown and also on the date you pick.


The social Links didnt need to be dynamic but i followed Twitters guides and was able to personalize the message that it would put in for the user when opened which was very helpful and i will defiantly use in the future! The links at this point where still different sizes and created using gradients.


Now the side bar was dynamic and fitted in with the Site. I went back to the main content made the Blog’s have dynamic post times and dates plus used the author tag correctly. I made many posts at this point to test out the styling with different lengths titles etc for tests.



Putting It into Expressionengine

Well after buying the domain name for my own personal website i decided to use this as my hosting space for this website until marked then i will begin work on my own site. I know have hosting and a domain name and have put across the website into Expressionengine. There where a lot of troubles along the way mainly due to having a break from web design then coming back to it and had forgotten a lot of what we learnt in Lectures however the EE documentation is astounding and was able to refresh my memory and once i had caught up i was able to not only put it into expression engine but improve my design a lot!

Ill recap from the begging my experiences with putting the site into EE.


The first challange was uploading expression engine and installing it to the FTP i have never actually hosted a live site other than on the Uni servers so no real experience of how the files work etc. I was able however to upload and install without much issues due to the Video tutorials and general know how. This was an interesting experience and gave me more insight for when i have a Client of my own to publish a site for. I also went through some extra parts for security like chaning the “admin.php” file name to “solsa.php” which stands for Sons Of Locust Super Admin these where little extra touches for the purpose of security.


EE now installed and ready to role i started by putting all my HTML into the index (which i made me home page) on the “News” template group. I then sliced up to content into embeds as taught to us during lectures. I started with the HTML header, navigation normal header, side bar and footer. This broke a lot of the content up and meant  i wouldn’t have to keep repeating myself remember DRY (Don’t Repeat Yourself).


aside from a few minor hic ups mainly forgetting how to embed a template (found this out through EE documentation) was a silly mistake but weeks of not touching EE lead to me forgetting a few simple steps. Now i had a index page with embedded content.


Non of this yet was dynamic however and all images and content was hard coded into the page. The first thing i wanted to get working was the blog function the main content to the site. Using the EE documentation i was able to follow this through. I created a channel and channel fields for the blog then assigned them together created 2 status’s as i would need this for a feature post. This all came naturally and was fairly easy to implement. It wasnt long before i was able to go back into the template and replace the hard coded content with EE variables and the blog was working. The extra’s on the blog like catogories, post time and date plus author however where still not these where things i hadn’t learnt yet and thought i would come back to once my page was up and running smoothly.


There was some small designs error’s e.g. there was an element within each blog post that was an ID however i changed this to a class due to needing it more than once and it sorted my issues. I also tweaked the height on the banner as it wasnt quite fitting right.


I Then moved onto the sidebar….. TBC



HTML and CSS mock up

I have created an HTML and CSS mock up of the website as i previously said i would in blog posts. After more research into the Gaming websites i come across an intresting WP template with Gaming websites. The WP theme is good and uses the common colour within the gaming genre with tweaking and my own spin i think the general layout would suit the clan nicely and would also help me from a learning designer perspective. The website theme can be found here.. http://wordpress.org/extend/themes/gamepress.


From looking at it you can see a lot of similarities with colour and layout. The sidebar was the biggest problem with this theme no background to it and blends in with the background. I took my favorite elements mainly the blog format and layout including the little image that’s repeated at the bottom of each post that’s a little horizontal line. combined it with the need of the clan tried to improve the typography using a font that had more weights and was able to be flexible and light with the header.

The mock up also took inspiration from some resources i found online. The background image that is repeating is supposed to be carbon fiber and was in a package of 30+ web texures which where free to use online. I took colour samples from this and built the site around it.

I am impressed with my Mock up and i hope that i am able to take this over to expressionengine without too much trouble it taken a little time and effort for the HTML and CSS but overall i haven’t had too many issues plus i got posative feedback from the owned of SOL who i showed this too. The biggest thing the Client liked was the coustum made buttons for Twitter and Facebook i made these using background gradients and font awsome graphics. I have included at the bottom of the page images of the website textures plus web graphics i created.