Critique my uni assignment WordPress site please

  • Thread starter Thread starter Deleted member 66701
  • Start date Start date

Deleted member 66701

D

Deleted member 66701

For my 2nd CMS assignment, I need to build a WordPress site, design brief as follows:-

You are currently on the second year of a Foundation Degree in Interactive Media Development at Lancaster University. After a successful initial application you have been set a further task by local web development house DECISIVE DESIGN.

The task they have set is once more around the theme of Web Based Content Management Systems, this time in the style of a design and development task. Following the previous task of researching into the different web based content management system environments available to web developers, WordPress has been chosen as the selected platform for DECISIVE DESIGN’s new web based venture.

You have been given control of a project to develop DECISIVE DESIGN’s content management system portfolio, and as such have been given a task to complete.

The first thing that DECISIVE DESIGN has asked is to choose from the following topics to be the basis of your site:

 A Gaming News Site (Specific Genre/Game)
 A Music News Site (Specific Genre/Style)
 A Movie/TV News Site (Specific Genre/Style)
 A Film News Site (Specific Genre/Style)
 An online magazine (Celebrity News / Gossip)

The site must include the following pages:

 The index page will be a feed of articles around the topic.
 A contact page
 An ‘about me’ styled page
 A Gallery / Media page
 Social Media incorporated
 Other static pages should be included which tackle the less dynamic stories (e.g. if it was about a specific game then a static page could deal with information about the publisher.
 Consideration for mobile devices in the development

The site must also include (but is not limited to) the following features:

 Access Control:
 Allow for multiple authors with access to post creation.
 Allow for an editor to have full access to creating/editing ALL posts.
 Allow for administrator access to have FULL control of the site and content.
 Include an RSS feed from an already established website to extend the use of your own site
 Include at least one image gallery
Click to expand...

Tutor has put the emphasis on customising the hell out of an off the shelf template (we're not expected to make our own templates until next year). I've used http://www.elegantthemes.com/demo/?theme=Nexus as the template and this is as far as I've got so far:-

http://mapgaming.org.uk/

As always, suggestions welcome - especially for ways I can further customise the theme and push the boundaries. Oh, and if anyone wants to register and post comments on the blog, feel free!

Thanks in advance for your time.
 
Last edited by a moderator:
Desktop Version:
  • Remove the text shadow you have on the navigation element text - makes it difficult to read
  • Remove the border radius from the hover effect on your navigation elements
  • There is an unnecessary amount of blank space between the navigation and your news items with a seemingly pointless arrow. Fill the space with something or remove it as a full screen video background shouldn't be the focal point of your site.

Mobile Version:
  • It's impossible to click any element in the navigation menu and it's very difficult to see. I'm assuming this is a z-index issue which once fixed should also solve the issue of the hover effect on your first item in the news list appearing over the navigation menu.
  • I'd also make the header and navigation menu full width in the mobile site.
 
Thanks very much for your feedback - I've made most of those changes :-)

Thanks for taking the time to have a look :-)
 
That arrow / chevron really needs to go. Your animated background looks weird when the site is viewed on a portrait monitor. Indeed, my portrait monitor is 1200 px wide so you need to ensure the site works on a 1050 px monitor. Music should always be OFF by default.
 
Quartz said:
That arrow / chevron really needs to go. Your animated background looks weird when the site is viewed on a portrait monitor. Indeed, my portrait monitor is 1200 px wide so you need to ensure the site works on a 1050 px monitor.
Click to expand...

Looks fine on my monitor at 1200px and 1050px wide - what exactly is "weird" with it?

Music should always be OFF by default.
Click to expand...

Agreed, but my tutor wants it to remain on. I know, right :rolleyes: I have however enabled the player controls so user can mute if required.

Thanks for taking the time to have a look :-)
 
Last edited by a moderator:
Ok, I've made a few tweaks at my tutors suggestion (pinned the header/nav bar, tweaked some colours, dropped the carbon effect backdrop). She says she can't think of any more customisations to make me do - I've already gone waaaaaaaaaaaaaaaaay beyond what she was expecting anyone to do for this module and it's not due in until the 6th of December!

Anymore comments?
 
amigafan2003 said:
Ok, I've made a few tweaks at my tutors suggestion (pinned the header/nav bar, tweaked some colours, dropped the carbon effect backdrop). She says she can't think of any more customisations to make me do - I've already gone waaaaaaaaaaaaaaaaay beyond what she was expecting anyone to do for this module and it's not due in until the 6th of December!

Anymore comments?
Click to expand...

Lose the text bevel on your title image at the top of the page.
 
Going to assume it doesnt load all that content on mobile. Loading the videos all the time and its currently at 40mb after a couple of minutes!
 
Craig R said:
Lose the text bevel on your title image at the top of the page.
Click to expand...

Any reason why?

chroniclard said:
Going to assume it doesnt load all that content on mobile. Loading the videos all the time and its currently at 40mb after a couple of minutes!
Click to expand...

Do you mean the background video or the content on the video page?

Background video is replaced by a static image on non desktop devices.

The TEamspeak bit looks a bit pants.
Click to expand...

How so exactly? Do you mean the colour? If so, I'm afraid the text colour is a branding requirement to match the forum colour scheme, so it has to satay (sometimes, web development means having to implement what the customer wants, despite themselves).
 
Last edited by a moderator:
On the teamspeak bit the icons are a mess, cant tell what they are supposed to be. Dont think that whole section fits with the relatively clean look of the rest of the site.

Its also a web developers remit to advise the client when something looks toss. :D
 
chroniclard said:
On the teamspeak bit the icons are a mess, cant tell what they are supposed to be. Dont think that whole section fits with the relatively clean look of the rest of the site.
Click to expand...

Ah, I see. Unfortunately the Teamspeak code is an API and the code is generated elsewhere, you only have control over font size and colour, not the icons, so I can't do much about it.

Thanks for taking the time to explain though :-)

Its also a web developers remit to advise the client when something looks toss. :D
Click to expand...

Oh believe me I've tried!
 
Last edited by a moderator:
amigafan2003 said:
Ah, I see. Unfortunately the Teamspeak code is an API and the code is generated elsewhere, you only have control over font size and colour, not the icons, so I can't do much about it.
Click to expand...
Of course you can. If the elements are in the DOM, they can be manipulated with CSS. After inspecting the TS section, you can see all of the styling is done inline and none of the elements have classes or IDs. If you want to modify the look of the TS section, you'll have to use children selectors and experiment with the use of !important as you'll need to override inline styles (which are usually prioritised above external CSS styles). The only unique element in that block is the root element of that widget which is #text-5. Start from there and work your way down the tree
 
iKettles said:
Of course you can. If the elements are in the DOM, they can be manipulated with CSS. After inspecting the TS section, you can see all of the styling is done inline and none of the elements have classes or IDs. If you want to modify the look of the TS section, you'll have to use children selectors and experiment with the use of !important as you'll need to override inline styles (which are usually prioritised above external CSS styles). The only unique element in that block is the root element of that widget which is #text-5. Start from there and work your way down the tree
Click to expand...

OK - maybe I said that wrong.

At my skill level, there isn't a lot I can't do about it ;-)

But thanks for the explanation - I'll do some reading on DOM traversal and manipulation!
 
Last edited by a moderator:
The main thing I would say is you need to improve the spatial relationships.

For example the articles listed down the left hand side – the gap between the thumbnail and the title text is the same as between the thumbnails and the edge of the page. This seems to indicate that the thumbnail and the title are not related. The titles also seem a bit too large, and don't align properly (in my browser at least) with the top of the thumbnail.

The vertical gaps between these articles is also about the same as some of the elements within the article, which means the articles don't clump together as well as they should.

The two narrow columns on the right hand side also feel out of whack – the grey header blocks have tons of padding, but the columns themselves have no gutter. Again vertical spacing is kinda wrong – elements within a block e.g. list elements need to have a stronger relationship with each other than with other blocks.

Also: The bezelled text at the top looks very dated, and the choice of serif font for heading text is a bit odd for the subject matter (though not bad in general terms).

Finally watch your contrast ratios, especially when you're playing a video under the page text.
 
macmodder said:
The main thing I would say is you need to improve the spatial relationships.

For example the articles listed down the left hand side – the gap between the thumbnail and the title text is the same as between the thumbnails and the edge of the page. This seems to indicate that the thumbnail and the title are not related. The titles also seem a bit too large, and don't align properly (in my browser at least) with the top of the thumbnail.

The vertical gaps between these articles is also about the same as some of the elements within the article, which means the articles don't clump together as well as they should.

The two narrow columns on the right hand side also feel out of whack – the grey header blocks have tons of padding, but the columns themselves have no gutter. Again vertical spacing is kinda wrong – elements within a block e.g. list elements need to have a stronger relationship with each other than with other blocks.

Also: The bezelled text at the top looks very dated, and the choice of serif font for heading text is a bit odd for the subject matter (though not bad in general terms).

Finally watch your contrast ratios, especially when you're playing a video under the page text.
Click to expand...


Cool - thanks for the heads up :-)

The spacing is as per the default theme, so I'll have a dig into the code to see where they are set - there certainly seems no way of altering them in the control panel.

Design is where I fall over - I'm definitely falling into the web developer arena rather than the web designer arena - I'm not very creative at all! I don't "see" the things you see - which is why I really appreciate everyone's feedback!
 
Fair enough. I find a lot of wordpress (and other CMS) themes are a bit sloppy when it comes to typography. Normally you have to get stuck into the theme CSS file to sort it out, and if that's not your thing I totally understand.
 
It's been marked - 100%! <happy dance> :D:D:D:D

96% overall on the module - I only got 88% on the essay part.
 
You must log in or register to reply here.
Back
Top Bottom