Critique my uni assignment WordPress site please

[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

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.

 

[iKettles]

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.

 

[Deleted member 66701]

Thanks very much for your feedback - I've made most of those changes

Thanks for taking the time to have a look

 

[Quartz]

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.

 

[Deleted member 66701]

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.

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

Music should always be OFF by default.

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

Thanks for taking the time to have a look

 

[Deleted member 66701]

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?

 

[Craig R]

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?

Lose the text bevel on your title image at the top of the page.

 

[chroniclard]

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!

 

[chroniclard]

The TEamspeak bit looks a bit pants.

 

[Deleted member 66701]

Lose the text bevel on your title image at the top of the page.

Any reason why?

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!

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.

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).

 

[chroniclard]

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.

 

[Deleted member 66701]

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.

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.

Oh believe me I've tried!

 

[iKettles]

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.

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

 

[Deleted member 66701]

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

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!

 

[macmodder]

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.

 

[Deleted member 66701]

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.

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!

 

[macmodder]

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.

 

[Craig R]

Any reason why?

It looks tacky.

 

[Deleted member 66701]

It looks tacky.

OK

As that's a subjective comment, I'll choose to keep the logo unchanged, but thanks for taking the time to have look.

 

[Deleted member 66701]

It's been marked - 100%! <happy dance>

96% overall on the module - I only got 88% on the essay part.