Hi, I am an inexperienced amateur and am involved with one main site, www.fobgfc.org

 

I developed the site from scratch in 2003, from a static version, then using PHP and MySQL. I have never used any templating or bootstrap, etc. It is pretty much entirely bespoke.

 

The site is badly in need of a redesign to freshen it up and make it mobile-friendly. The comments that stick from club members are "dated" and "too much yellow going on"!

 

I have got this far www.col-b.uk/FOBG/ but my design ideas have dried up.

 

Some of my guidelines...

1. Club colours are yellow and red (in that order).
2. We have one main sponsor (Wilgars), three secondary sponsors (Premier, Culverhouse and Village Cuisine), and a number of companies who have contributed just to have their presence on the website.
3. Visitors: club members and players interested in

• results and fixtures
• club news

I wanted to give the site a cleaner more up-to-date look without it looking like every other sports club templated generic site.

 

The list of news items on the home page is giving me a real problem, I have no idea how to liven it up.

 

I have photographic and Photoshop skills, but there aren't enough photos to have on representing every news item for example.

 

I have developed the site with Chrome as my main browser, on a desktop PC.

 

Oh, and there's no budget to hire a professional!

 

Any ideas are welcome, i need fresh pairs of eyes.

 

Cheers,

 

Col

 

 

 

 

 

 

first things first - don't use comic sans, unless it's a comic club site or similar

 

difficult with a bright yellow and red to work with tempting to use it a lot but better to use a fairly neutral palette with club-colour highlights.

 

for the news you could write a very short headline for each piece but it might simply end up being too repetitive (and too much work)

 

Sunday Reserves' brilliant match win

... blah blah blah

 

heavy drop shadow (by today's standards) doesn't help with a clean modern feel and avoid using defaulr link colour for text that isn't a link (results on left)

 

 

Sponsors: i know sponsors are of premier importance (about my limit for football puns ) but could the logos be a bit smaller?

 

anyway, i had a bash of doing a visual for a desktop/tablet version - not sure how it would work on mobile as to what order the columns are in - show all the sponsors first? or in the middle - a lot to ask to scroll through the sponsors before getting to the real content... unless your a sponsor of course

so my idea below - fonts are the free open sans (light, regular, bold, and the other Google free font Exo 2 for a techy/sporty look, or from font squirrel)

full images at http://gekkoweb.com/stuff/fc/farnborough-fc3.jpg and with menu expanded http://gekkoweb.com/stuff/fc/farnborough-fc3-hovermenu.jpg

 

 

 

Nice! You certainly got some help there Colin.

Dap, that's amazing, thanks very much. I take all your points on board. I originally had a left and right sidebar with different logos in each (as per the existing site), so they didn't look as big and also the artwork the sponsors gave me has very small writing in some cases (excuses over!).

 

I have had comic sans since the beginning but it's time it went, and the default link blue is a basic error.

 

I think I have the mobile order sorted, the ads are at the bottom!

 

So you think I should let the news run its full length and not have a "headlines/more" toggle, or even have a specific height with a scrollbar?

 

Finally, thanks again, I really appreciate it.

 

Col

A quick thought about the sponsors. Why not have a sponsors page with a list and then use the banners with something like Slick to rotate, then you would have just one banner slot to home rather than a list per page? Just an idea

not keen on a fiexd hight -scrollbar solution think that the toggel would work better, expecially if the most recent items are coming to the top of the list anyway.

BrowserBugs, not sure how many visits a sponsors page would get, the Slick is a good idea as it would free up space but I'd need to check with the sponsors. If they're happy with that then I'd include the sponsors page.

 

Cheers

link to the psd if it helps with any pointers (did the original in fireworks and it didn't keep the borders on the news item cards ... )

http://gekkoweb.com/stuff/fc/farnborough-FC3.psd

Dap's suggestion is great but here's my 2p (from Aldershot).

 

Don't start with a desktop layout and make it work on a phone. Start with the mobile version and work up to a the desktop passing through tablets on the way.

 

For the mobile site: don't use sidebars/columns at all. All you need is the news - nothing else matters. Link to the other content. Or use a scrolling onepage layout with jump links to each section.

 

Simplify every right down to the basics and make it mobile first.

Just to round this off this is what I have done based on your advice. http://www.col-b.uk/FOBG/

 

Thanks again for your help - much appreciated.

still a bit yellow for me but it looks a lot cleaner - good job!

edit: thanks for posting with an update too

Edited March 3, 20179 yr by dap